@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>
          <a href="{{$backBtnLink}}">Vehicle</a>
        </li>
        <li class="active">{{$title}}</li>
      </ol>
      <div class="d-flex justify-content-between align-items-center flex-wrap">
        <h1>{{$title}}</h1>
        @if($isTransporter)
          <div class="d-flex justify-content-between align-items-center flex-wrap">
            <div class="form-check form-switch me-3">
                <span class="fs-14 text-black fw-semibold me-2">Status</span>
                <input class="form-check-input mt-0" type="checkbox" role="switch" id="flexSwitch{{ $vehicle->id }}" {{ $vehicle->status == \App\Models\Vehicle::STATUS_ACTIVE ? 'checked' : '' }}>
                <label class="form-check-label" for="flexSwitch{{ $vehicle->id }}"></label>
            </div>
            <a href="{{ route('transporter.jobs.list-by-context', ['vehicle_id' => $vehicle->id, 'transporter_id' => auth()->id()]) }}" class="btn  btn-primary ">
                <span class="v-text-bottom">
                <svg width="16px" height="16px" id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 16 16">
                  <!-- Generator: Adobe Illustrator 29.5.1, SVG Export Plug-In . SVG Version: 2.1.0 Build 141)  -->
                  <defs>
                    <style>
                      .st0 {
                        fill: #fff;
                      }

                      .st1 {
                        fill: none;
                      }
                    </style>
                  </defs>
                  <path class="st0" d="M5.95,3.7c0-1.13,0-1.55,1.55-1.55h1.01c1.55,0,1.55.43,1.55,1.55v.03h-4.12v-.03h0ZM8.74,9.23c0,.71,0,.81-.82.81s-.82-.13-.82-.81v-.84h1.64v.83h0ZM14.07,4.66c-.57-.63-1.51-.94-2.89-.94h-.16v-.03c0-1.12,0-2.51-2.51-2.51h-1.01c-2.51,0-2.51,1.39-2.51,2.51v.03h-.16c-1.38,0-2.32.31-2.89.94-.66.73-.64,1.72-.57,2.39v.05l.05.46c0,.15.1.29.22.37.16.1.38.25.52.32.09.06.19.11.29.17,1.14.63,2.39,1.05,3.67,1.25.06.63.33,1.36,1.79,1.36s1.75-.73,1.79-1.37c1.36-.22,2.67-.69,3.86-1.39.04-.02.07-.04.1-.06.24-.14.5-.31.73-.47.11-.08.19-.21.2-.35v-.02l.04-.31s0-.07.01-.12c.05-.67.04-1.59-.59-2.29h.02Z"/>
                  <path class="st1" d="M5.95,3.7c0-1.13,0-1.55,1.55-1.55h1.01c1.55,0,1.55.43,1.55,1.55v.03h-4.12v-.03h0ZM8.74,9.23c0,.71,0,.81-.82.81s-.82-.13-.82-.81v-.84h1.64v.83h0ZM14.07,4.66c-.57-.63-1.51-.94-2.89-.94h-.16v-.03c0-1.12,0-2.51-2.51-2.51h-1.01c-2.51,0-2.51,1.39-2.51,2.51v.03h-.16c-1.38,0-2.32.31-2.89.94-.66.73-.64,1.72-.57,2.39v.05l.05.46c0,.15.1.29.22.37.16.1.38.25.52.32.09.06.19.11.29.17,1.14.63,2.39,1.05,3.67,1.25.06.63.33,1.36,1.79,1.36s1.75-.73,1.79-1.37c1.36-.22,2.67-.69,3.86-1.39.04-.02.07-.04.1-.06.24-.14.5-.31.73-.47.11-.08.19-.21.2-.35v-.02l.04-.31s0-.07.01-.12c.05-.67.04-1.59-.59-2.29h.02Z"/>
                  <path class="st0" d="M13.66,9.29c.35-.17.76.11.73.5l-.21,2.34c-.14,1.33-.69,2.69-3.62,2.69h-5.08c-2.93,0-3.48-1.36-3.62-2.69l-.2-2.21c-.04-.39.36-.67.72-.51.76.34,1.9.82,2.67,1.04.16.05.3.16.37.31.42.81,1.28,1.24,2.51,1.24s2.09-.45,2.51-1.26c.08-.15.21-.27.37-.32.82-.23,2.05-.78,2.85-1.15v.02Z"/>
                </svg>
                </span>
                View Jobs
            </a>
          </div>
      </div>
      @endif
    </section>
    <!-- Main content -->
    <section class="content pb-0 pt-0">
      <div class="row">
        <div class="col-md-12">
          <div class="row mt-4">
            <div class="col-md-2 col-xs-6 detail-width-20">
              <div class="form-group">
                <div class="d-flex">
                  <div class="custom-height-42 custom-width-42 overflow-hidden rounded-5">
                    <a href="{{$vehicle->vehicle_image_url ?? '#' }}" target="_blank">
                      <img src="{{$vehicle->vehicle_image_url ?? asset('images/dummy_avatar_admin.png')}}" alt="profile" class="w-100 h-100"/>
                    </a>
                    </div>
                  <div class="ms-3">
                    <label class="control-label text-dark-gray fs-14 fw-semibold">Vehicle Type</label>
                    <div class="fs-16 text-black">{{ $vehicle->vehicleType->type ?? '' }}</div>
                  </div>
                </div>
              </div>
            </div>
            @foreach ($vehicle->trailers as $trailer)
            <div class="col-md-3 col-xs-6 detail-width-20">
              <div class="form-group">
                  <label class="control-label text-dark-gray fs-14 fw-semibold">Trailer {{ $loop->iteration }} ID</label>
                  <div class="fs-16 text-black">{{ $trailer->trailer_number ?? '' }}</div>
              </div>
            </div>
            @endforeach
            <div class="col-md-3 col-xs-6 detail-width-20">
                <div class="form-group">
                    <label class="control-label text-dark-gray fs-14 fw-semibold">Make</label>
                    <div class="fs-16 text-black">{{ $vehicle->make ?? '' }}</div>
                </div>
            </div>
            <div class="col-md-3 col-xs-6 detail-width-20">
                <div class="form-group">
                    <label class="control-label text-dark-gray fs-14 fw-semibold">Model</label>
                    <div class="fs-16 text-black">{{ $vehicle->model ?? '' }}</div>
                </div>
            </div>
            <div class="col-md-3 col-xs-6 detail-width-20">
                <div class="form-group">
                    <label class="control-label text-dark-gray fs-14 fw-semibold">Year of Manufacture</label>
                    <div class="fs-16 text-black">{{ $vehicle->year_of_manufacture ?? '' }}</div>
                </div>
            </div>
            <div class="col-md-3 col-xs-6 detail-width-20">
                <div class="form-group">
                    <label class="control-label text-dark-gray fs-14 fw-semibold">VIN</label>
                    <div class="fs-16 text-black">{{ $vehicle->vin ?? '' }}</div>
                </div>
            </div>
            <div class="col-md-3 col-xs-6 detail-width-20">
                <div class="form-group">
                    <label class="control-label text-dark-gray fs-14 fw-semibold">Engine Number</label>
                    <div class="fs-16 text-black">{{ $vehicle->engine_number ?? '' }}</div>
                </div>
            </div>
            <div class="col-md-3 col-xs-6 detail-width-20">
                <div class="form-group">
                    <label class="control-label text-dark-gray fs-14 fw-semibold">Fuel Type</label>
                    <div class="fs-16 text-black">{{ ucwords($vehicle->fuelType?->name ?? '') }}</div>
                </div>
            </div>
            <div class="col-md-3 col-xs-6 detail-width-20">
                <div class="form-group">
                    <label class="control-label text-dark-gray fs-14 fw-semibold">Length & Dimensions</label>
                    <div class="fs-16 text-black">
                        {{ $vehicle->dimension ?? '' }}
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-xs-6 detail-width-20">
                <div class="form-group">
                    <label class="control-label text-dark-gray fs-14 fw-semibold">Load Capacity (In Tons/Kg)</label>
                    <div class="fs-16 text-black">{{ $vehicle->load_capacity ?? '' }}</div>
                </div>
            </div>
            <div class="col-md-3 col-xs-6 detail-width-20">
                <div class="form-group">
                    <label class="control-label text-dark-gray fs-14 fw-semibold">Number of Axles</label>
                    <div class="fs-16 text-black">{{ $vehicle->number_of_axles ?? '' }}</div>
                </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-6 col-xs-6">
              <div class="form-group">
                  <label class="control-label text-dark-gray fs-14 fw-semibold">Tracking URL</label>
                  <div class="fs-16 text-black">{{ $vehicle->tracking_url ?? '' }}</div>
              </div>
            </div>
            <div class="col-md-3 col-xs-6 detail-width-20">
              <div class="form-group">
                  <label class="control-label text-dark-gray fs-14 fw-semibold">Username</label>
                  <div class="fs-16 text-black">{{ $vehicle->username ?? '' }}</div>
              </div>
            </div>
            <div class="col-md-3 col-xs-6 detail-width-20">
              <div class="form-group">
                  <label class="control-label text-dark-gray fs-14 fw-semibold">Password</label>
                  <div class="fs-16 text-black">{{ $vehicle->password ?? '' }}</div>
              </div>
            </div>
          </div>

          <hr>
          <div class="align-items-center d-flex justify-content-between mb-2 mt-2">
            <h2 class="fs-24 fw-semibold text-black">{{ __('app.drivers.driver') }}</h2>
          </div>
          <div class="row mt-2">
            <div class="col-md-3 col-xs-6 detail-width-20">
                <div class="form-group">
                    <label class="control-label text-dark-gray fs-14 fw-semibold">{{ __('app.drivers.assign_driver') }}</label>
                    
                    <!-- Display Mode -->
                    <div class="fs-16 text-black driver-display-mode" id="driver-display-{{ $vehicle->id }}">
                        {{ ucwords($vehicle->driver?->name ?? 'No driver assigned') }}
                        @if($isTransporter)
                        <span class="driver-edit-btn" data-vehicle-id="{{ $vehicle->id }}" style="cursor: pointer; margin-left: 10px;">
                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M12.5001 18.9582H7.50008C2.97508 18.9582 1.04175 17.0248 1.04175 12.4998V7.49984C1.04175 2.97484 2.97508 1.0415 7.50008 1.0415H9.16675C9.50842 1.0415 9.79175 1.32484 9.79175 1.6665C9.79175 2.00817 9.50842 2.2915 9.16675 2.2915H7.50008C3.65841 2.2915 2.29175 3.65817 2.29175 7.49984V12.4998C2.29175 16.3415 3.65841 17.7082 7.50008 17.7082H12.5001C16.3417 17.7082 17.7084 16.3415 17.7084 12.4998V10.8332C17.7084 10.4915 17.9917 10.2082 18.3334 10.2082C18.6751 10.2082 18.9584 10.4915 18.9584 10.8332V12.4998C18.9584 17.0248 17.0251 18.9582 12.5001 18.9582Z" fill="#007AFF"/>
                                <path d="M7.08336 14.7415C6.57503 14.7415 6.10836 14.5581 5.76669 14.2248C5.35836 13.8165 5.18336 13.2248 5.27503 12.5998L5.63336 10.0915C5.70003 9.60814 6.01669 8.98314 6.35836 8.64147L12.925 2.0748C14.5834 0.416471 16.2667 0.416471 17.925 2.0748C18.8334 2.98314 19.2417 3.90814 19.1584 4.83314C19.0834 5.58314 18.6834 6.31647 17.925 7.06647L11.3584 13.6331C11.0167 13.9748 10.3917 14.2915 9.90836 14.3581L7.40003 14.7165C7.29169 14.7415 7.18336 14.7415 7.08336 14.7415ZM13.8084 2.95814L7.24169 9.5248C7.08336 9.68314 6.90003 10.0498 6.86669 10.2665L6.50836 12.7748C6.47503 13.0165 6.52503 13.2165 6.65003 13.3415C6.77503 13.4665 6.97503 13.5165 7.21669 13.4831L9.72503 13.1248C9.94169 13.0915 10.3167 12.9081 10.4667 12.7498L17.0334 6.18314C17.575 5.64147 17.8584 5.15814 17.9 4.70814C17.95 4.16647 17.6667 3.59147 17.0334 2.9498C15.7 1.61647 14.7834 1.99147 13.8084 2.95814Z" fill="#007AFF"/>
                                <path d="M16.5416 8.19173C16.4832 8.19173 16.4249 8.1834 16.3749 8.16673C14.1832 7.55006 12.4416 5.8084 11.8249 3.61673C11.7332 3.2834 11.9249 2.94173 12.2582 2.84173C12.5916 2.75006 12.9332 2.94173 13.0249 3.27506C13.5249 5.05006 14.9332 6.4584 16.7082 6.9584C17.0416 7.05006 17.2332 7.40006 17.1416 7.7334C17.0666 8.01673 16.8166 8.19173 16.5416 8.19173Z" fill="#007AFF"/>
                            </svg>
                        </span>
                        @endif
                      </div>

                    <!-- Edit Mode -->
                    <div class="driver-edit-mode" id="driver-edit-{{ $vehicle->id }}" style="display: none;">
                        <div class="d-flex align-items-center">
                            <select class="form-control me-2" id="driver-select-{{ $vehicle->id }}" style="flex: 1;">
                                <option value="">Select Driver</option>
                                @foreach($drivers as $driver)
                                    <option value="{{ $driver->id }}" {{ $vehicle->driver_id == $driver->id ? 'selected' : '' }}>
                                        {{ $driver->name }}
                                    </option>
                                @endforeach
                            </select>
                            <button class="btn btn-primary btn-sm me-1 driver-save-btn" data-vehicle-id="{{ $vehicle->id }}" style="padding: 5px 10px;">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" fill="white"/>
                                </svg>
                            </button>
                            <button class="btn btn-secondary btn-sm driver-cancel-btn" data-vehicle-id="{{ $vehicle->id }}" style="padding: 5px 10px;">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" fill="black"/>
                                </svg>
                            </button>
                        </div>
                    </div>

                </div>
            </div>
          </div>
          
         


          
          <div class="border-top mt-3 ">
            <div class="box-body  px-0">
              <div class="align-items-center d-flex justify-content-between mb-3">
                <h2 class="fs-24 fw-semibold text-black">{{ __('app.documents') }}</h2>
                
              </div>

              <table class="table table-bordered table-hover" id="tbl-users" aria-describedby="detail-vehicle-list">
                <thead>
                  <th scope="col">{{ __('app.documents') }}</th>
                  <th scope="col">{{ __('app.expiry') }}</th>
                  <th scope="col">{{ __('app.created_date_time') }}</th>
                  <th scope="col">{{ __('app.status') }}</th>
                  <th scope="col" class="action">{{ __('app.action') }}</th>
                </thead>
                <tbody>
                  @if(isset($vehicle->documents) && count($vehicle->documents))
                    @foreach($vehicle->documents as $document)
                      <tr data-document-id="{{ $document->id }}">
                        <td data-type='text'>{{ $document->mandatoryDocument->name ?? '-' }}</td>
                        <td data-type='text'>{{ $document->expiry_date?->format('d/m/Y') }}</td>
                        <td data-type='text'>{{ $document->uploaded_date_time?->format('d/m/Y h:iA') }}</td>
                        <td data-type='text'>
                          @php
                            $isExpired = isset($document->expiry_date) ? \Carbon\Carbon::parse($document->expiry_date)->lt(\Carbon\Carbon::today()) : false;
                          @endphp
                          @if($isExpired)
                            <span class="px-3 py-2 rounded-5 text-danger fs-12 fw-medium tag-expired custom-width-90 text-center d-inline-block">Expired</span>
                          @else
                            <span class="px-3 py-2 rounded-5 text-success fs-12 fw-medium tag-active custom-width-90 text-center d-inline-block">Active</span>
                          @endif
                        </td>
                        <td data-type='none'>
                          @php
                           $isTransporter ? $route = 'transporter.vehicle.documents.show' : $route = 'admin.vehicles.documents.show';
                          @endphp
                          <a href="{{ route($route, ['vehicle' => $vehicle->id, 'document' => $document->id]) }}" target="_blank" class="view-docs-btn me-3">
                            <em class="iconsax icon-292D32 fs-20" icon-name="eye"></em>
                          </a>
                          @if($isTransporter)
                          <a href="javascript:void(0)" class="delete-document" data-document-id="{{ $document->id }}" data-vehicle-id="{{ $vehicle->id }}">
                            <em class="iconsax icon-292D32 fs-20" icon-name="trash"></em>
                          </a>
                          @endif
                        </td>
                      </tr>
                    @endforeach
                  @else
                    
                  @endif
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
      

    </section>
    
    <!-- Missing Vehicle Documents Modal -->
    <div class="modal fade" id="vehicleDocumentsModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="vehicleDocumentsModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="vehicleDocumentsModalLabel">Vehicle Requirements</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div id="missingDocumentsContent">
              <h5 class="mb-3">Please upload all required documents before activating the vehicle:</h5>
              <ul id="missingVehicleDocumentsList" class="list-unstyled"></ul>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Ok</button>
          </div>
        </div>
      </div>
    </div>
    
   <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,
      //ajax: '../server_side/scripts/server_processing.php',
      paging: false, // disables pagination
      dom: 'frt<"bottom"ipl><"clear">',
      columnDefs: [
        {
          targets: 'action',
          orderable: false,
          searchable: false
        }
      ]
    });
    $('#tbl-users_filter input[type="search"]').attr('placeholder', 'Search');

    $('#tbl-users_filter').append(`
    <div class="d-flex justify-content-end flex-wrap jobs-right-filter">
          <div class="position-relative me-3 ms-3">
            <select id="statusFilter" class="form-control max-w-200" style="min-width:120px;">
              <option value="">Status</option>
              <option value="Active">Active</option>
              <option value="Expired">Expired</option>
            </select>
          </div>
          @if($isTransporter)
            <a href="{{ route('transporter.vehicle.documents.create', ['vehicle' => $vehicle->id]) }}" class="upload-doc-btn">
              <button class="btn btn-primary">
                <em class="iconsax" icon-name="upload-2"></em> Upload Document
              </button>
            </a>
          @endif
        </div>
    `);
  
  // Filter on change
    $('#statusFilter').on('change', function () {
      let selected = $(this).val();
      table.column(3).search(selected).draw(); // column index 1 = "Role"
   });
  $('#calendar').datepicker();
  // Vehicle status toggle
  $(document).on('change', '.form-check-input', function() {
    var checkbox = $(this);
    var vehicleId = checkbox.attr('id').replace('flexSwitch', '');
    var isChecked = checkbox.is(':checked');
    var status = isChecked ? {{ \App\Models\Vehicle::STATUS_ACTIVE }} : {{ \App\Models\Vehicle::STATUS_INACTIVE }};
    
    console.log('Status toggle triggered:', {
      vehicleId: vehicleId,
      isChecked: isChecked,
      status: status
    });
    
    // Disable checkbox during request
    checkbox.prop('disabled', true);
    
    $.ajax({
      url: "{{ route('transporter.vehicles.updateStatus') }}",
      type: 'POST',
      data: {
        vehicle_id: vehicleId,
        status: status,
        _token: '{{ csrf_token() }}'
      },
      success: function(response) {
        checkbox.prop('disabled', false);
        console.log('Response received:', response);
        if (response.success) {
          toastr.success(response.message);
        } else if (response.hasMissingDocuments) {
          console.log('Missing documents detected:', response.missingDocuments);
          // Show modal with missing documents
          showMissingVehicleDocumentsModal(response.missingDocuments, vehicleId);
          // Revert checkbox state
          checkbox.prop('checked', !isChecked);
        } else {
          toastr.error(response.message || 'Failed to update status');
          // Revert checkbox state
          checkbox.prop('checked', !isChecked);
        }
      },
      error: function(xhr) {
        checkbox.prop('disabled', false);
        let errorMessage = 'Failed to update status';
        if (xhr.responseJSON && xhr.responseJSON.message) {
          errorMessage = xhr.responseJSON.message;
        }
        toastr.error(errorMessage);
        // Revert checkbox state
        checkbox.prop('checked', !isChecked);
      }
    });
  });

    // Driver assignment functionality
    $(document).on('click', '.driver-edit-btn', function() {
      var vehicleId = $(this).data('vehicle-id');
      $('#driver-display-' + vehicleId).hide();
      $('#driver-edit-' + vehicleId).show();
    });

    $(document).on('click', '.driver-cancel-btn', function() {
      var vehicleId = $(this).data('vehicle-id');
      $('#driver-edit-' + vehicleId).hide();
      $('#driver-display-' + vehicleId).show();
    });

    $(document).on('click', '.driver-save-btn', function() {
      var vehicleId = $(this).data('vehicle-id');
      var driverId = $('#driver-select-' + vehicleId).val();
      var $btn = $(this);
      var originalText = $btn.html();
      
      $btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>');
      
      $.ajax({
        url: "{{ route('transporter.vehicles.assignDriver') }}",
        type: 'POST',
        data: {
          vehicle_id: vehicleId,
          driver_id: driverId,
          _token: '{{ csrf_token() }}'
        },
        success: function(response) {
          if (response.success) {
            // Update the display text
            var driverName = driverId ? $('#driver-select-' + vehicleId + ' option:selected').text() : 'No driver assigned';
            $('#driver-display-' + vehicleId).html(driverName +
              '<span class="driver-edit-btn" data-vehicle-id="' + vehicleId + '" style="cursor: pointer; margin-left: 10px;">' +
              '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">' +
              '<path d="M12.5001 18.9582H7.50008C2.97508 18.9582 1.04175 17.0248 1.04175 12.4998V7.49984C1.04175 2.97484 2.97508 1.0415 7.50008 1.0415H9.16675C9.50842 1.0415 9.79175 1.32484 9.79175 1.6665C9.79175 2.00817 9.50842 2.2915 9.16675 2.2915H7.50008C3.65841 2.2915 2.29175 3.65817 2.29175 7.49984V12.4998C2.29175 16.3415 3.65841 17.7082 7.50008 17.7082H12.5001C16.3417 17.7082 17.7084 16.3415 17.7084 12.4998V10.8332C17.7084 10.4915 17.9917 10.2082 18.3334 10.2082C18.6751 10.2082 18.9584 10.4915 18.9584 10.8332V12.4998C18.9584 17.0248 17.0251 18.9582 12.5001 18.9582Z" fill="#007AFF"/>' +
              '<path d="M7.08336 14.7415C6.57503 14.7415 6.10836 14.5581 5.76669 14.2248C5.35836 13.8165 5.18336 13.2248 5.27503 12.5998L5.63336 10.0915C5.70003 9.60814 6.01669 8.98314 6.35836 8.64147L12.925 2.0748C14.5834 0.416471 16.2667 0.416471 17.925 2.0748C18.8334 2.98314 19.2417 3.90814 19.1584 4.83314C19.0834 5.58314 18.6834 6.31647 17.925 7.06647L11.3584 13.6331C11.0167 13.9748 10.3917 14.2915 9.90836 14.3581L7.40003 14.7165C7.29169 14.7415 7.18336 14.7415 7.08336 14.7415ZM13.8084 2.95814L7.24169 9.5248C7.08336 9.68314 6.90003 10.0498 6.86669 10.2665L6.50836 12.7748C6.47503 13.0165 6.52503 13.2165 6.65003 13.3415C6.77503 13.4665 6.97503 13.5165 7.21669 13.4831L9.72503 13.1248C9.94169 13.0915 10.3167 12.9081 10.4667 12.7498L17.0334 6.18314C17.575 5.64147 17.8584 5.15814 17.9 4.70814C17.95 4.16647 17.6667 3.59147 17.0334 2.9498C15.7 1.61647 14.7834 1.99147 13.8084 2.95814Z" fill="#007AFF"/>' +
              '<path d="M16.5416 8.19173C16.4832 8.19173 16.4249 8.1834 16.3749 8.16673C14.1832 7.55006 12.4416 5.8084 11.8249 3.61673C11.7332 3.2834 11.9249 2.94173 12.2582 2.84173C12.5916 2.75006 12.9332 2.94173 13.0249 3.27506C13.5249 5.05006 14.9332 6.4584 16.7082 6.9584C17.0416 7.05006 17.2332 7.40006 17.1416 7.7334C17.0666 8.01673 16.8166 8.19173 16.5416 8.19173Z" fill="#007AFF"/>' +
              '</svg></span>'
            );
            
            // Hide edit mode and show display mode
            $('#driver-edit-' + vehicleId).hide();
            $('#driver-display-' + vehicleId).show();
            
            toastr.success(response.message);
          } else {
            toastr.error(response.message || 'Failed to assign driver');
          }
        },
        error: function(xhr) {
          let errorMessage = 'Failed to assign driver';
          if (xhr.responseJSON && xhr.responseJSON.message) {
            errorMessage = xhr.responseJSON.message;
          }
          toastr.error(errorMessage);
        },
        complete: function() {
          $btn.prop('disabled', false).html(originalText);
        }
      });
    });

  $(document).on('click', '.delete-document', function(e) {
    e.preventDefault();
    const vehicleId = $(this).data('vehicle-id');
    const documentId = $(this).data('document-id');
    const row = $(this).closest('tr');
    if (!vehicleId || !documentId) {
      alert('Missing required information for deletion');
      return;
    }
    // SweetAlert confirmation dialog
    Swal.fire({
        title: 'Are you sure?',
        text: "You won't be able to revert this!",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Yes, delete it!',
        cancelButtonText: 'Cancel'
    }).then((result) => {
        if (result.isConfirmed) {
            var deleteUrl = "{{ route('transporter.vehicle.documents.destroy', [':vehicle', ':document']) }}";
            deleteUrl = deleteUrl.replace(':vehicle', vehicleId).replace(':document', documentId);
            $.ajax({
                url: deleteUrl,
                type: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    if (response.status === 'success') {
                        row.remove();
                        toastr.success(response.message || '{{ __('app.document') }} {{ __('messages.deleted_successfully') }}');
                        setTimeout(function() {
                            window.location.reload();
                        }, 1000);
                    } else {
                        Swal.fire(
                            'Error!',
                            response.message || 'Failed to delete document',
                            'error'
                        );
                    }
                },
                error: function(xhr) {
                    let errorMessage = 'Failed to delete document';
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMessage = xhr.responseJSON.message;
                    }
                    Swal.fire(
                        'Error!',
                        errorMessage,
                        'error'
                    );
                }
            });
        }
    });
  
    console.log('Document ready completed');
  });
});

// Function to show missing vehicle documents modal (defined outside document ready)
function showMissingVehicleDocumentsModal(missingDocuments, vehicleId) {
  console.log('showMissingVehicleDocumentsModal called with:', missingDocuments, vehicleId);
  
  // Check if modal element exists
  var modalElement = document.getElementById('vehicleDocumentsModal');
  console.log('Modal element exists:', !!modalElement);
  console.log('Modal element:', modalElement);
  
  if (missingDocuments && missingDocuments.length > 0) {
    let documentsList = '';
    missingDocuments.forEach(function(doc) {
      documentsList += '<li>• ' + doc + '</li>';
    });
    $('#missingVehicleDocumentsList').html(documentsList);
    console.log('Documents list generated:', documentsList);
  }
  
  console.log('Showing modal...');
  
  // Try different ways to show the modal
  try {
    // Method 1: Bootstrap 5 way
    var modal = new bootstrap.Modal(modalElement);
    modal.show();
    console.log('Modal shown using Bootstrap 5 method');
  } catch (e) {
    console.log('Bootstrap 5 method failed, trying jQuery method:', e);
    try {
      // Method 2: jQuery way
      $('#vehicleDocumentsModal').modal('show');
      console.log('Modal shown using jQuery method');
    } catch (e2) {
      console.log('jQuery method failed, trying direct show:', e2);
      // Method 3: Direct show
      $('#vehicleDocumentsModal').show();
      $('#vehicleDocumentsModal').addClass('show');
      $('body').addClass('modal-open');
      console.log('Modal shown using direct method');
    }
  }
}
</script>

@endsection