@extends('backend.layouts.admin.app')

@section('content')
<!-- Content Header (Page header) -->
<section class="content-header">
  <ol class="breadcrumb">
    <li><a href="#"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
      <g clip-path="url(#clip0_664_24080)">
      <path d="M7.5 13.5L10.5 13.5" stroke="#007AFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
      <path d="M1.76354 9.91009C1.49878 8.18718 1.3664 7.32573 1.69212 6.56203C2.01785 5.79834 2.74052 5.27582 4.18585 4.2308L5.26574 3.45C7.06372 2.15 7.96271 1.5 9 1.5C10.0373 1.5 10.9363 2.15 12.7343 3.45L13.8141 4.2308C15.2595 5.27582 15.9821 5.79834 16.3079 6.56203C16.6336 7.32573 16.5012 8.18718 16.2365 9.91009L16.0107 11.3793C15.6353 13.8217 15.4477 15.0429 14.5717 15.7714C13.6958 16.5 12.4152 16.5 9.85411 16.5H8.14589C5.58475 16.5 4.30418 16.5 3.42825 15.7714C2.55232 15.0429 2.36465 13.8217 1.98932 11.3793L1.76354 9.91009Z" stroke="#007AFF" stroke-width="1.5" stroke-linejoin="round"/>
      </g>
      <defs>
      <clipPath id="clip0_664_24080">
      <rect width="18" height="18" fill="white"/>
      </clipPath>
      </defs>
      </svg></a></li>
    <li class=""><a href="">Jobs</a></li>
    <li class="active">Add Job</li>
  </ol>
  <div class="d-flex justify-content-between align-items-center flex-wrap">
    <h1>{{$title}}</h1>
  </div>
</section>
<!-- Main content -->
<section class="content pb-0">
  @include('backend.layouts.alert')
  <!-- Default box -->
  <div class="row">
    <div class="col-md-12">
      <div class="">
          <ul class="nav nav-tabs profile-tabs" id="myTab" role="tablist">
            <li class="nav-item" role="presentation">
              <button class="nav-link active fs-16" id="details-tab" data-bs-toggle="tab" data-bs-target="#details" type="button" role="tab" aria-controls="Details" aria-selected="true">Details</button>
            </li>
            <li class="nav-item" role="presentation">
              <button class="nav-link fs-16" id="Map-View-tab" data-bs-toggle="tab" data-bs-target="#MapView" type="button" role="tab" aria-controls="Map-View" aria-selected="false">Map View</button>
            </li>
            <li class="nav-item" role="presentation">
              <button class="nav-link fs-16" id="Transporters-tab" data-bs-toggle="tab" data-bs-target="#Transporters" type="button" role="tab" aria-controls="Transporters" aria-selected="false">Transporters</button>
            </li>
            <li class="nav-item" role="presentation">
              <button class="nav-link fs-16" id="Vehicles-tab" data-bs-toggle="tab" data-bs-target="#Vehicles" type="button" role="tab" aria-controls="Vehicles" aria-selected="false">Vehicles & Drivers</button>
            </li>
            <li class="nav-item" role="presentation">
              <button class="nav-link fs-16" id="Documents-tab" data-bs-toggle="tab" data-bs-target="#Documents" type="button" role="tab" aria-controls="Documents" aria-selected="false">Documents</button>
            </li>
            <li class="nav-item" role="presentation">
              <button class="nav-link fs-16" id="Invoices-tab" data-bs-toggle="tab" data-bs-target="#Invoices" type="button" role="tab" aria-controls="Invoices" aria-selected="false">Invoices</button>
            </li>
            
          </ul>
          <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade show active" id="details" role="tabpanel" aria-labelledby="details-tab">
              <form action="" method="POST" class="form-horizontal form-validate" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="id" value="{{ old('id', $pageData['id'] ?? '') }}" id="scret_id">
                    <div class="box-body px-0">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="Job-map">
                                    <iframe title="maps" class="rounded-4" src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d14310.549102991932!2d73.0038272!3d26.27343325!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sin!4v1749713011655!5m2!1sen!2sin" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                                </div>
                            </div>
                            <div class="col-md-8">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="title" class="control-label">Mine Name</label>
                                            <div class="col-field-wrapper">
                                                <input type="text" name="title" class="form-control" id="title" placeholder="Enter mine name" value="{{ old('title', $pageData['title'] ?? '') }}">
                                                @if ($errors->has('title'))
                                                <span class="help-block">{{ $errors->first('title') }}</span>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="title" class="control-label">PO #</label>
                                            <div class="col-field-wrapper">
                                                <input type="text" name="title" class="form-control" id="title" placeholder="Enter PO #" value="{{ old('title', $pageData['title'] ?? '') }}">
                                                @if ($errors->has('title'))
                                                <span class="help-block">{{ $errors->first('title') }}</span>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="title" class="control-label">Mine Email Address (Get Vehicle(s) Information)</label>
                                            <div class="col-field-wrapper">
                                                <input type="text" name="title" class="form-control" id="title" placeholder="Enter email" value="{{ old('title', $pageData['title'] ?? '') }}">
                                                @if ($errors->has('title'))
                                                <span class="help-block">{{ $errors->first('title') }}</span>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="title" class="control-label">Loading Location</label>
                                            <div class="col-field-wrapper">
                                                <input type="text" name="title" class="form-control" id="title" placeholder="Enter loading location" value="{{ old('title', $pageData['title'] ?? '') }}">
                                                @if ($errors->has('title'))
                                                <span class="help-block">{{ $errors->first('title') }}</span>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="title" class="control-label">Load Date</label>
                                                    <div class="position-relative">
                                                        <input type="text" class="form-control date-picker" id="calendar">
                                                        <span class="position-absolute date-picker-icon">
                                                            <em class="iconsax icon-292D32 fs-20" icon-name="calendar-1"></em>

                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="title" class="control-label">Load Time</label>
                                                    <div class="col-field-wrapper">
                                                        <select id="roleFilter" class="form-control">
                                                        <option value="">Status</option>
                                                        <option value="Admin">Admin</option>
                                                        <option value="User">User</option>
                                                        <option value="Guest">Guest</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="title" class="control-label">Offloading Location</label>
                                            <div class="col-field-wrapper">
                                                <input type="text" name="title" class="form-control" id="title" placeholder="Enter offloading location" value="{{ old('title', $pageData['title'] ?? '') }}">
                                                @if ($errors->has('title'))
                                                <span class="help-block">{{ $errors->first('title') }}</span>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="title" class="control-label">Offload Date</label>
                                                    <div class="position-relative">
                                                        <input type="text" class="form-control date-picker" id="calendar">
                                                        <span class="position-absolute date-picker-icon">
                                                            <em class="iconsax icon-292D32 fs-20" icon-name="calendar-1"></em>

                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="title" class="control-label">Offload Time</label>
                                                    <div class="col-field-wrapper">
                                                        <select id="roleFilter" class="form-control">
                                                        <option value="">Status</option>
                                                        <option value="Admin">Admin</option>
                                                        <option value="User">User</option>
                                                        <option value="Guest">Guest</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="title" class="control-label">Distance in Km</label>
                                            <div class="col-field-wrapper">
                                                <input type="text" name="title" class="form-control" id="title" placeholder="Enter distance" value="{{ old('title', $pageData['title'] ?? '') }}">
                                                @if ($errors->has('title'))
                                                <span class="help-block">{{ $errors->first('title') }}</span>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="title" class="control-label">Load Weight (Tons)</label>
                                            <div class="col-field-wrapper">
                                                <input type="text" name="title" class="form-control" id="title" placeholder="Load Weight (Tons)" value="{{ old('title', $pageData['title'] ?? '') }}">
                                                @if ($errors->has('title'))
                                                <span class="help-block">{{ $errors->first('title') }}</span>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="box-footer px-0">    
                                    <div class="col-sm-12 text-end">
                                        <a href="#" class="btn btn-outline-secondary me-3">Cancel</a>
                                        <button type="submit" class="btn btn-primary">Submit</button>
                                        
                                    </div>
                                    
                                </div>
                            </div>
                        </div>
                    </div>
                    
                  
                <!-- /.box-footer -->
              </form>
            </div>
            
            <div class="tab-pane fade" id="MapView" role="tabpanel" aria-labelledby="travel-tab">
                <div class="box-body px-0 travel-history-table">
                    <div class="row">
                        <div class="col-md-9">
                            <div class="Job-map">
                                <iframe title="maps" class="rounded-4" src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d14310.549102991932!2d73.0038272!3d26.27343325!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sin!4v1749713011655!5m2!1sen!2sin" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <table class="table table-bordered table-hover " id="tbl-map-view" aria-describedby="report-list">
                                <thead>
                                    <th scope="col">Documents</th>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td data-type='text' class="text-start">
                                            <div class="fs-16"><strong>WX-TRK-5421</strong><span class="border fs-14 py-1 px-2 rounded-2 ms-1">Truck</span></div>
                                            <div class="fs-14 text-gray"><span class="fw-semibold">Driver:</span> John Duo</div>
                                        </td>
                                    </tr>
                                    
                                    
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="Transporters" role="tabpanel" aria-labelledby="travel-tab">
                <div class="box-body px-0 ">
                    <table class="table table-bordered table-hover" id="tbl-transporters" aria-describedby="report-list">
                    <thead>
                        
                        <th scope="col">Transporter</th>
                        <th scope="col" class="text-end">Vehicles</th>
                        <th scope="col" class="min-width-158">Creation Date</th>
                        <th scope="col">Job Status</th>
                        <th scope="col">Action</th>
                    </thead>
                    <tbody>
                        <tr>
                        <td data-type='text' class="text-end">SwiftHaul Freight Services</td>
                        <td data-type='text' class="text-end"><a href="">3</a></td>
                        <td data-type='none'>2/10/25, 06:00 AM</td>
                        <td data-type='none'>
                            <span class="pending-tag">Pending</span>
                        </td>
                        <td data-type='none'>
                            <a href="" class="me-3">
                                <em class="iconsax icon-292D32 fs-20" icon-name="phone"></em>
                            </a>
                           
                            </td>
                        </tr>
                        <tr>
                        <td data-type='text' class="text-end">SwiftHaul Freight Services</td>
                        <td data-type='text' class="text-end"><a href="">3</a></td>
                        <td data-type='none'>2/10/25, 06:00 AM</td>
                        <td data-type='none'>
                            <span class="completed-tag">Completed</span>
                        </td>
                        <td data-type='none'>
                            <a href="" class="me-3">
                                <em class="iconsax icon-292D32 fs-20" icon-name="phone"></em>
                            </a>
                            
                            </td>
                        </tr>
                        <tr>
                        <td data-type='text' class="text-end">SwiftHaul Freight Services</td>
                        <td data-type='text' class="text-end"><a href="">3</a></td>
                        <td data-type='none'>2/10/25, 06:00 AM</td>
                        <td data-type='none'>
                            <span class="in-progress-tag">In Progress</span>
                        </td>
                        <td data-type='none'>
                            <a href="" class="me-3">
                                <em class="iconsax icon-292D32 fs-20" icon-name="phone"></em>
                            </a>
                            
                            </td>
                        </tr>
                    </tbody>
                    </table>
                </div>
            </div>
            <div class="tab-pane fade" id="Vehicles" role="tabpanel" aria-labelledby="travel-tab">
                <div class="box-body px-0 ">
                    <table class="table table-bordered table-hover" id="tbl-vehicles" aria-describedby="create-transpoter-list">
                    <thead>
                        
                        <th scope="col" class="text-end">Allocation Date</th>
                        <th scope="col">Transporter</th>
                        <th scope="col">Driver Name</th>
                        <th scope="col">Driver ID</th>
                        <th scope="col">Vehicle #</th>
                        <th scope="col" class="text-end">Trailer #</th>
                        <th scope="col" class="min-width-158">Creation Date</th>
                        <th scope="col">Job Status</th>
                        <th scope="col">Action</th>
                    </thead>
                    <tbody>
                        <tr>
                        <td data-type='text' class="text-end">2/10/25</td>
                        <td data-type='none'>Jacob Logistics pvt. ltd.</td>
                        <td data-type='none'>John Woo</td>
                        <td data-type='none'>123456789</td>
                        <td data-type='none'>ZA-TRK-9876</td>
                        
                        <td data-type='text' class="text-end"><a href="">3</a></td>
                        <td data-type='none'>2/10/25, 06:00 AM</td>
                        <td data-type='none'>
                            <span class="pending-tag">Pending</span>
                        </td>
                        <td data-type='none'>
                            <a href="" class="me-3">
                                <em class="iconsax icon-292D32 fs-20" icon-name="phone"></em>
                            </a>
                           
                            </td>
                        </tr>
                        <tr>
                        <td data-type='text' class="text-end">2/10/25</td>
                        <td data-type='none'>Jacob Logistics pvt. ltd.</td>
                        <td data-type='none'>John Woo</td>
                        <td data-type='none'>123456789</td>
                        <td data-type='none'>ZA-TRK-9876</td>
                        
                        <td data-type='text' class="text-end"><a href="">3</a></td>
                        <td data-type='none'>2/10/25, 06:00 AM</td>
                        <td data-type='none'>
                            <span class="completed-tag">Completed</span>
                        </td>
                        <td data-type='none'>
                            <a href="" class="me-3">
                                <em class="iconsax icon-292D32 fs-20" icon-name="phone"></em>
                            </a>
                            
                            </td>
                        </tr>
                        <tr>
                        <td data-type='text' class="text-end">2/10/25</td>
                        <td data-type='none'>Jacob Logistics pvt. ltd.</td>
                        <td data-type='none'>John Woo</td>
                        <td data-type='none'>123456789</td>
                        <td data-type='none'>ZA-TRK-9876</td>
                        
                        <td data-type='text' class="text-end"><a href="">3</a></td>
                        <td data-type='none'>2/10/25, 06:00 AM</td>
                        <td data-type='none'>
                            <span class="in-progress-tag">In Progress</span>
                        </td>
                        <td data-type='none'>
                            <a href="" class="me-3">
                                <em class="iconsax icon-292D32 fs-20" icon-name="phone"></em>
                            </a>
                            
                            </td>
                        </tr>
                    </tbody>
                    </table>
                </div>
            </div>
            <div class="tab-pane fade" id="Documents" role="tabpanel" aria-labelledby="travel-tab">
                <div class="box-body px-0 ">
                    <table class="table table-bordered table-hover" id="tbl-documents" aria-describedby="create-report-list">
                    <thead>
                        
                        <th scope="col">Documents</th>
                        <th scope="col">Transporter</th>
                        <th scope="col">Type</th>
                        <th scope="col">Uploaded By</th>
                        <th scope="col" class="min-width-158">Date & Time</th>
                       
                        <th scope="col">Action</th>
                    </thead>
                    <tbody>
                        <tr>
                            <td data-type='text'><a href="">Contract Details</a></td>
                            <td data-type='none'>Jacob Logistics pvt. ltd.</td>
                            <td data-type='none'>Job</td>
                            <td data-type='none'>John Woo</td>
                            <td data-type='none'>2/18/25, 05:30 AM</td>
                            
                            <td data-type='none'>
                                <a href="" class="me-3">
                                    <em class="iconsax icon-292D32 fs-20" icon-name="eye"></em>
                                </a>
                                <a href="" class="">
                                    <em class="iconsax icon-292D32 fs-20" icon-name="trash"></em>
                                </a>
                            </td>
                        </tr>
                        
                        
                    </tbody>
                    </table>
                </div>
            </div>
            <div class="tab-pane fade" id="Invoices" role="tabpanel" aria-labelledby="travel-tab">
                <div class="box-body px-0 ">
                    <table class="table table-bordered table-hover" id="tbl-invoices" aria-describedby="transporter-list-reports">
                    <thead>
                        
                        <th scope="col">Invoice #</th>
                        <th scope="col">Transporter</th>
                        <th scope="col" class="text-end">Quantity (tons)</th>
                        <th scope="col" class="text-end">Amount</th>
                        <th scope="col" class="min-width-158">Date & Time</th>
                        <th scope="col" class="min-width-158">Payment Date</th>
                        <th scope="col">Txn ID</th>
                        <th scope="col">Status</th>
                        <th scope="col">Action</th>
                    </thead>
                    <tbody>
                        <tr>
                            <td data-type='text'><a href="#">IND65487</a></td>
                            <td data-type='none'>Jacob Logistics pvt. ltd.</td>
                            <td data-type='none' class="text-end">5000</td>
                            <td data-type='none' class="text-end">$85000</td>
                            <td data-type='none'>2/10/25, 06:00 AM</td>
                            <td data-type='none'>2/10/25, 06:00 AM</td>
                            <td data-type='none' >87565466</td>
                            <td data-type='none'>
                                <span class="pending-tag">Pending</span>
                            </td>
                            <td data-type='none'>
                                <a href="" class="me-3">
                                    <em class="iconsax icon-292D32 fs-20" icon-name="eye"></em>
                                </a>
                                <a href="" class="">
                                    <em class="iconsax icon-292D32 fs-20" icon-name="trash"></em>
                                </a>
                            </td>
                        </tr>
                        <tr>
                            <td data-type='text'><a href="#">IND65487</a></td>
                            <td data-type='none'>Jacob Logistics pvt. ltd.</td>
                            <td data-type='none' class="text-end">5000</td>
                            <td data-type='none' class="text-end">$85000</td>
                            <td data-type='none'>2/10/25, 06:00 AM</td>
                            <td data-type='none'>2/10/25, 06:00 AM</td>
                            <td data-type='none' >87565466</td>
                            <td data-type='none'>
                                <span class="completed-tag">Completed</span>
                            </td>
                            <td data-type='none'>
                                <a href="" class="me-3">
                                    <em class="iconsax icon-292D32 fs-20" icon-name="eye"></em>
                                </a>
                                <a href="" class="">
                                    <em class="iconsax icon-292D32 fs-20" icon-name="trash"></em>
                                </a>
                            </td>
                        </tr>
                        <tr>
                        <td data-type='text'><a href="#">IND65487</a></td>
                            <td data-type='none'>Jacob Logistics pvt. ltd.</td>
                            <td data-type='none' class="text-end">5000</td>
                            <td data-type='none' class="text-end">$85000</td>
                            <td data-type='none'>2/10/25, 06:00 AM</td>
                            <td data-type='none'>2/10/25, 06:00 AM</td>
                            <td data-type='none' >87565466</td>
                            <td data-type='none'>
                                <span class="in-progress-tag">In Progress</span>
                            </td>
                            <td data-type='none'>
                                <a href="" class="me-3">
                                    <em class="iconsax icon-292D32 fs-20" icon-name="eye"></em>
                                </a>
                                <a href="" class="">
                                    <em class="iconsax icon-292D32 fs-20" icon-name="trash"></em>
                                </a>
                            </td>
                        </tr>
                    </tbody>
                    </table>
                </div>
            </div>
          </div>
      </div>
    </div>
  </div>
  <!-- /.box -->
</section>
<!-- /.content -->
<script type="text/javascript">

$(document).ready(function() {
    $.fn.dataTable.ext.errMode = () => alert('{{__("messages.datatable-error-message")}}');

    var table = $('#tbl-users').DataTable({
      //info: true,
      searching: true,
      ordering: false, // disables default sorting
      //ajax: '../server_side/scripts/server_processing.php',
      //paging: false, // disables pagination
      dom: 'frt<"bottom"ipl><"clear">'
    });
    $('#tbl-users_filter input[type="search"]').attr('placeholder', 'Search');
    $('#tbl-users_filter').append(`
        <div class="d-flex justify-content-end jobs-right-filter flex-wrap">
            <div class="custom-width-200">
                <select id="roleFilter" class="form-control w-100">
                <option value="">All Vehicles</option>
                <option value="Admin">Admin</option>
                <option value="User">User</option>
                <option value="Guest">Guest</option>
                </select>
            </div>
            <div class="custom-width-200 position-relative">
                <input type="text" class="form-control date-picker" id="calendar">
                <span class="position-absolute date-picker-icon">
                    <em class="iconsax icon-292D32 fs-20" icon-name="calendar-1"></em>

                </span>
            </div>
        </div>
    `);

     var table = $('#tbl-issue-reported').DataTable({
       info: true,
       searching: true,
       ordering: false, // disables default sorting
       //ajax: '../server_side/scripts/server_processing.php',
       //paging: false, // disables pagination
       dom: 'frt<"bottom"ipl><"clear">'
     });
    $('#tbl-issue-reported_filter input[type="search"]').attr('placeholder', 'Search');
    $('#tbl-issue-reported_filter').append(`
        <div class="d-flex justify-content-end jobs-right-filter flex-wrap">
            <div class="custom-width-200 position-relative">
                <input type="text" class="form-control date-picker" id="calendar">
                <span class="position-absolute date-picker-icon">
                    <em class="iconsax icon-292D32 fs-20" icon-name="calendar-1"></em>

                </span>
            </div>
        </div>
    `);
    
     var table = $('#tbl-map-view').DataTable({
       info: true,
       searching: true,
       ordering: false, // disables default sorting
       //ajax: '../server_side/scripts/server_processing.php',
       paging: false, // disables pagination
       dom: 'frt<"bottom"ipl><"clear">'
     });
     $('#tbl-map-view_filter').append(`
        <div class="d-flex justify-content-end  w-100 flex-wrap">
            <div class="w-100 text-start">
                <label class="fs-18 fw-semibold text-black ">Vehicles</label>
                <select id="roleFilter" class="form-control w-100 mt-1">
                <option value="">All Vehicles</option>
                <option value="Admin">Admin</option>
                <option value="User">User</option>
                <option value="Guest">Guest</option>
                </select>
            </div>
            
        </div>
    `);

    var table = $('#tbl-transporters').DataTable({
      //info: true,
      searching: true,
      ordering: false, // disables default sorting
      //ajax: '../server_side/scripts/server_processing.php',
      //paging: false, // disables pagination
      dom: 'frt<"bottom"ipl><"clear">'
    });
    $('#tbl-transporters_filter input[type="search"]').attr('placeholder', 'Search');
    $('#tbl-transporters_filter').append(`
        <div class="d-flex justify-content-end flex-wrap">
            
            <div class=" position-relative me-2">
                <input type="text" class="form-control date-picker" placeholder="Date Range" id="calendar">
                <span class="position-absolute date-picker-icon">
                    <em class="iconsax icon-292D32 fs-20" icon-name="calendar-1"></em>

                </span>
            </div>
            <button class="btn  btn-primary "><em class="fa fa-plus-circle"></em> Add Transporter</button>
        </div>
    `);

    var table = $('#tbl-vehicles').DataTable({
      //info: true,
      searching: true,
      ordering: false, // disables default sorting
      //ajax: '../server_side/scripts/server_processing.php',
      //paging: false, // disables pagination
      dom: 'frt<"bottom"ipl><"clear">'
    });
    $('#tbl-vehicles_filter input[type="search"]').attr('placeholder', 'Search');
    $('#tbl-vehicles_filter').append(`
        <div class="d-flex justify-content-end flex-wrap">
            <div class="max-w-200">
                <select id="roleFilter" class="form-control custom-width-200 ">
                <option value="">Transporters</option>
                <option value="Admin">Admin</option>
                <option value="User">User</option>
                <option value="Guest">Guest</option>
                </select>
            </div>
            <div class=" position-relative me-2">
                <input type="text" class="form-control date-picker" placeholder="Date Range" id="calendar">
                <span class="position-absolute date-picker-icon">
                    <em class="iconsax icon-292D32 fs-20" icon-name="calendar-1"></em>

                </span>
            </div>
            <button class="btn  btn-primary "><em class="iconsax text-white fs-20" icon-name="download-2"></em> Download</button>
        </div>
    `);

    var table = $('#tbl-documents').DataTable({
      //info: true,
      searching: true,
      ordering: false, // disables default sorting
      //ajax: '../server_side/scripts/server_processing.php',
      //paging: false, // disables pagination
      dom: 'frt<"bottom"ipl><"clear">'
    });
    $('#tbl-documents_filter input[type="search"]').attr('placeholder', 'Search');
    $('#tbl-documents_filter').append(`
        <div class="d-flex justify-content-end flex-wrap">
            <div class="max-w-200">
                <select id="roleFilter" class="form-control custom-width-200 ">
                <option value="">All Transporters</option>
                <option value="Admin">Admin</option>
                <option value="User">User</option>
                <option value="Guest">Guest</option>
                </select>
            </div>
            <div class="max-w-200 ms-2">
                <select id="roleFilter" class="form-control custom-width-200 ">
                <option value="">All Types</option>
                <option value="Admin">Admin</option>
                <option value="User">User</option>
                <option value="Guest">Guest</option>
                </select>
            </div>
            <div class=" position-relative me-2">
                <input type="text" class="form-control date-picker" placeholder="Date Range" id="calendar">
                <span class="position-absolute date-picker-icon">
                    <em class="iconsax icon-292D32 fs-20" icon-name="calendar-1"></em>

                </span>
            </div>
            <button class="btn  btn-primary "><em class="iconsax text-white fs-20" icon-name="upload-2"></em> Upload Document</button>
        </div>
    `);

    var table = $('#tbl-invoices').DataTable({
      //info: true,
      searching: true,
      ordering: false, // disables default sorting
      //ajax: '../server_side/scripts/server_processing.php',
      //paging: false, // disables pagination
      dom: 'frt<"bottom"ipl><"clear">'
    });
    $('#tbl-invoices_filter input[type="search"]').attr('placeholder', 'Search');
    $('#tbl-invoices_filter').append(`
        <div class="d-flex justify-content-end flex-wrap">
            
            
            <button class="btn  btn-primary "><em class="iconsax text-white fs-20" icon-name="upload-2"></em> Upload Invoice</button>
        </div>
    `);

    
    
     

    

  // Filter on change
  $('#roleFilter').on('change', function () {
    let selected = $(this).val();
    table.column(1).search(selected).draw(); // column index 1 = "Role"
  });
  $('#calendar').datepicker();
  });
</script>

@endsection