@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">Job#12345</li>
  </ol>
  <div class="d-flex justify-content-between align-items-center flex-wrap">
    <h1>{{$title}} <span class="completed-tag">Completed</span></h1>
    <div class="d-flex justify-content-md-end align-items-center flex-wrap">
        <button class="btn btn-sm btn-primary btn-green border-green position-relative me-3 mb-2 mb-md-0">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M8.00037 1.8335C11.3974 1.83367 14.1664 4.60341 14.1664 8.00049C14.1662 11.3974 11.3973 14.1663 8.00037 14.1665C4.60328 14.1665 1.83355 11.3975 1.83337 8.00049C1.83337 4.6033 4.60317 1.8335 8.00037 1.8335ZM11.5404 5.40674C11.1518 5.01814 10.5149 5.01814 10.1263 5.40674L7.0531 8.47998L5.87341 7.30029L5.79822 7.23193C5.43272 6.93413 4.90108 6.93424 4.53552 7.23193L4.45935 7.30029C4.0713 7.68879 4.07129 8.32488 4.45935 8.71338L6.34607 10.6001C6.53204 10.7861 6.78575 10.893 7.0531 10.8931C7.32055 10.8931 7.5741 10.7861 7.76013 10.6001L11.5404 6.8208L11.5463 6.81396C11.9234 6.42355 11.932 5.79851 11.5404 5.40674Z" fill="white" stroke="white"/>
            </svg>

            Mark as Complete
           
        </button>
        <button class="btn btn-sm btn-primary position-relative">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M4.66626 1.83325H11.3333C12.8991 1.83325 14.1663 3.09833 14.1663 4.65356V9.30688C14.1661 10.862 12.899 12.1262 11.3333 12.1262H10.3333C10.0136 12.1262 9.70803 12.2603 9.4895 12.4875L9.40161 12.5911L9.40063 12.592L8.40063 13.9192L8.39966 13.9202C8.26041 14.1057 8.11101 14.1603 8.00024 14.1604C7.90325 14.1604 7.77617 14.1185 7.65259 13.9836L7.59985 13.9202L7.59888 13.9192L6.59888 12.592L6.59595 12.5872L6.50317 12.4836C6.4045 12.3869 6.28997 12.3121 6.18188 12.2581C6.03867 12.1864 5.85595 12.1262 5.66626 12.1262H4.66626C3.10069 12.126 1.83341 10.8619 1.83325 9.30688V4.65356L1.8479 4.36548C1.99279 2.94507 3.19839 1.83342 4.66626 1.83325ZM5.33325 6.16626C4.69044 6.16626 4.16626 6.69044 4.16626 7.33325C4.16626 7.97279 4.68052 8.50024 5.33325 8.50024C5.98598 8.50024 6.50024 7.97279 6.50024 7.33325C6.50024 6.69044 5.97606 6.16626 5.33325 6.16626ZM8.00024 6.16626C7.35744 6.16626 6.83325 6.69044 6.83325 7.33325C6.83325 7.97279 7.34751 8.50024 8.00024 8.50024C8.65282 8.50007 9.16626 7.97269 9.16626 7.33325C9.16626 6.69055 8.64291 6.16644 8.00024 6.16626ZM10.6663 6.16626C10.0236 6.16644 9.50024 6.69055 9.50024 7.33325C9.50024 7.97269 10.0137 8.50007 10.6663 8.50024C11.319 8.50024 11.8333 7.97279 11.8333 7.33325C11.8333 6.69044 11.3091 6.16626 10.6663 6.16626Z" fill="white" stroke="white"/>
            </svg>
            Chat
            <span class="notification-value">3</span>
        </button>
    </div>
  </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="travel-tab" data-bs-toggle="tab" data-bs-target="#travelHistory" type="button" role="tab" aria-controls="travel-History" aria-selected="false">Travel History</button>
            </li>
            <li class="nav-item" role="presentation">
              <button class="nav-link fs-16" id="Issue-Reported-tab" data-bs-toggle="tab" data-bs-target="#IssueReported" type="button" role="tab" aria-controls="Issue-Reported" aria-selected="false">Issue Reported <span class="notification-value position-static">2</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="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-4">
                                            <div class="form-group">
                                                <label class="control-label text-dark-gray fs-14 fw-semibold">Mine Name</label>
                                                <div class="fs-16 text-black">AI Mine SF</div>
                                            </div>
                                    </div>
                                    <div class="col-md-4">
                                            <div class="form-group">
                                                <label class="control-label text-dark-gray fs-14 fw-semibold">PO #</label>
                                                <div class="fs-16 text-black">#10234</div>
                                            </div>
                                    </div>
                                    <div class="col-md-4">
                                            <div class="form-group">
                                                <label class="control-label text-dark-gray fs-14 fw-semibold">Mine Email Address</label>
                                                <div class="fs-16 text-black">aimine@gmail.com</div>
                                            </div>
                                    </div>
                                    <div class="col-md-4">
                                            <div class="form-group">
                                                <label class="control-label text-dark-gray fs-14 fw-semibold">Loading Location</label>
                                                <div class="fs-16 text-black">Grootegeluk Coal Mine, Limpopo</div>
                                            </div>
                                    </div>
                                    <div class="col-md-4">
                                            <div class="form-group">
                                                <label class="control-label text-dark-gray fs-14 fw-semibold">Load Date</label>
                                                <div class="fs-16 text-black">2/10/2025</div>
                                            </div>
                                    </div>
                                    <div class="col-md-4">
                                            <div class="form-group">
                                                <label class="control-label text-dark-gray fs-14 fw-semibold">Load Time</label>
                                                <div class="fs-16 text-black">11:00 - 16:30</div>
                                            </div>
                                    </div>
                                    <div class="col-md-4">
                                            <div class="form-group">
                                                <label class="control-label text-dark-gray fs-14 fw-semibold">Offloading Location</label>
                                                <div class="fs-16 text-black">Richards Bay Coal Terminal, KwaZulu-Natal</div>
                                            </div>
                                    </div>
                                    <div class="col-md-4">
                                            <div class="form-group">
                                                <label class="control-label text-dark-gray fs-14 fw-semibold">Offload Date</label>
                                                <div class="fs-16 text-black">2/18/2025</div>
                                            </div>
                                    </div>
                                    <div class="col-md-4">
                                            <div class="form-group">
                                                <label class="control-label text-dark-gray fs-14 fw-semibold">Offload Time</label>
                                                <div class="fs-16 text-black">13:00 - 22:00</div>
                                            </div>
                                    </div>
                                    <div class="col-md-4">
                                            <div class="form-group">
                                                <label class="control-label text-dark-gray fs-14 fw-semibold">Distance (KM)</label>
                                                <div class="fs-16 text-black">630</div>
                                            </div>
                                    </div>
                                    <div class="col-md-4">
                                            <div class="form-group">
                                                <label class="control-label text-dark-gray fs-14 fw-semibold">Load Weight (Tons)</label>
                                                <div class="fs-16 text-black">34</div>
                                            </div>
                                    </div>
                                
                                </div>
                            </div>
                        </div>
                    </div>
                    
                  
                <!-- /.box-footer -->
              </form>
            </div>
            <div class="tab-pane fade" id="travelHistory" role="tabpanel" aria-labelledby="travel-tab">
                <div class="box-body px-0 travel-history-table">
                    <table class="table table-bordered table-hover " id="tbl-users" aria-describedby="documents-list">
                        <thead>
                            <th scope="col">Documents</th>
                        </thead>
                        <tbody>
                            <tr>
                                <td data-type='text' class="text-start">
                                    <div class="fs-16"><strong>John</strong> has marked the job as <strong>Completed</strong>. <span class="border fs-14 py-1 px-2 rounded-2"><em class="iconsax icon-292D32 fs-20" icon-name="truck"></em> ZA-TRK-9876</span></div>
                                    <div class="fs-14 text-gray">Now 1</div>
                                </td>
                            </tr>
                            <tr>
                                <td data-type='text' class="text-start">
                                    <div class="fs-16"><strong>John</strong> has marked the job as <strong>Completed</strong>. <span class="border fs-14 py-1 px-2 rounded-2"><em class="iconsax icon-292D32 fs-20" icon-name="truck"></em> ZA-TRK-9876</span></div>
                                    <div class="fs-14 text-gray">Now</div>
                                </td>
                            </tr>
                            <tr>
                                <td data-type='text' class="text-start">
                                    <div class="fs-16"><strong>John</strong> has marked the job as <strong>Completed</strong>. <span class="border fs-14 py-1 px-2 rounded-2"><em class="iconsax icon-292D32 fs-20" icon-name="truck"></em> ZA-TRK-9876</span></div>
                                    <div class="fs-14 text-gray">Now</div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="tab-pane fade" id="IssueReported" role="tabpanel" aria-labelledby="travel-tab">
                <div class="box-body px-0 travel-history-table">
                    <table class="table table-bordered table-hover " id="tbl-issue-reported" aria-describedby="documents-list">
                        <thead>
                            <th scope="col">Documents</th>
                        </thead>
                        <tbody>
                            <tr>
                                <td data-type='text' class="text-start">
                                    <div class="fs-16"><strong>Sifiso</strong> has <span class="text-red">report an issue</span> i.e. “<span class="text-red">Robbery</span>”   <span class="border fs-14 py-1 px-2 rounded-2"><em class="iconsax icon-292D32 fs-20" icon-name="truck"></em> ZA-TRK-9876</span></div>
                                    <div class="fs-14 text-gray">Now</div>
                                </td>
                            </tr>
                            <tr>
                                <td data-type='text' class="text-start">
                                    <div class="fs-16"><strong>Sifiso</strong> has <span class="text-red">report an issue</span> i.e. “<span class="text-red">Robbery</span>”   <span class="border fs-14 py-1 px-2 rounded-2"><em class="iconsax icon-292D32 fs-20" icon-name="truck"></em> ZA-TRK-9876</span></div>
                                    <div class="fs-14 text-gray">Now</div>
                                </td>
                            </tr>
                            <tr>
                                <td data-type='text' class="text-start">
                                    <div class="fs-16"><strong>Sifiso</strong> has <span class="text-red">report an issue</span> i.e. “<span class="text-red">Robbery</span>”   <span class="border fs-14 py-1 px-2 rounded-2"><em class="iconsax icon-292D32 fs-20" icon-name="truck"></em> ZA-TRK-9876</span></div>
                                    <div class="fs-14 text-gray">May 12  | 1:55 PM</div>
                                </td>
                            </tr>
                            
                        </tbody>
                    </table>
                </div>
            </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="document-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="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="detail-document-vehicle-list">
                    <thead>
                        
                        <th scope="col">Allocation Date</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' >2/10/25</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' >2/10/25</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' >2/10/25</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="details-document-list">
                    <thead>
                        
                        <th scope="col">Documents</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'>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="list-documents">
                    <thead>
                        
                        <th scope="col">Invoice #</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">Action</th>
                    </thead>
                    <tbody>
                        <tr>
                            <td data-type='text'><a href="#">IND65487</a></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'>
                                <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' 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'>
                                <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' 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'>
                                <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" placeholder="Date Range">
                <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">
                <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" placeholder="Date Range">
                <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=" position-relative me-3">
                <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 me-3"><em class="fa fa-plus-circle"></em> Allocate Vehicle</button>
            <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 ms-2">
                <select id="roleFilter" class="form-control custom-width-200 ">
                <option value="">All</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