@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="active">{{__('app.vehicles.title')}}</li>
  </ol>
  <div class="d-flex justify-content-between align-items-center flex-wrap">
    <h1>{{$title}}</h1>
    <a href ="{{route('transporter.vehicles.create')}}"><button class="btn btn-sm btn-primary "><em class="fa fa-plus-circle"></em> Add Vehicle</button></a>
  </div>
  
</section>
<!-- Main content -->
<section class="content">
  @include('backend.layouts.alert')
  <!-- Default box -->
  <div class="box shadow-none">
    <div class="box-body pt-0" style="position: relative;">
      
        <table class="table table-bordered table-hover" id="tbl-users" aria-describedby="index-vehicles-list">
          <thead>
            <th scope="col">{{__('app.vehicles.vehicle_no')}}</th>
            <th scope="col">{{__('app.type')}}</th>
            <th scope="col">{{__('app.vehicles.make')}}</th>
            <th scope="col">{{__('app.vehicles.model')}}</th>
            <th scope="col">{{__('app.vehicles.driver_assigned')}}</th>
            <th scope="col">{{__('app.status')}}</th>
            <th scope="col" class="action">{{__('app.action')}}</th>
          </thead>
        </table>
      
    </div>
  </div>
  <!-- /.box -->

</section>
<!-- /.content -->

<!-- Hidden template for filters -->
<div id="vehicle-filters-template" style="display: none;">
  <div class="d-flex flex-wrap jobs-right-filter justify-content-end w-100">
    <div class="max-w-200">
      <select id="status_filter" class="form-control w-100">
        <option value="">Status</option>
        <option value="{{ \App\Models\Vehicle::STATUS_ACTIVE }}">Active</option>
        <option value="{{ \App\Models\Vehicle::STATUS_INACTIVE }}">Inactive</option>
      </select>
    </div>
  </div>
</div>

<!-- Required 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" da  ta-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div id="missingDocumentsContent" style="display: none;">
          <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() {
    // Set DataTables error mode (guarded)
    if ($.fn && $.fn.dataTable && $.fn.dataTable.ext) {
      $.fn.dataTable.ext.errMode = () => alert('{{__("messages.datatable_error_message")}}');
    }

    function initVehiclesTable(){
      // Use global loader functions
      const showLoader = window.showLoader || function(){ try { window.AppLoader && window.AppLoader.show(); } catch(_) {} };
      const hideLoader = window.hideLoader || function(){ try { window.AppLoader && window.AppLoader.hide(); } catch(_) {} };
      
      var loaderTimer = null;
      var table = $('#tbl-users').DataTable({
        processing: false, // Disable default DataTable processing indicator
        serverSide: true,
        deferRender: true,
        searchDelay: 300,
        ajax: {
          url: '{{ route("transporter.vehicles.datatable") }}',
          type: 'GET',
          data: function(d) {
            d.status = $('#status_filter').val();
            return d;
          },
          beforeSend: function() {
            try { if (loaderTimer) { clearTimeout(loaderTimer); } } catch(_) {}
            loaderTimer = setTimeout(function(){ showLoader(); }, 200);
          },
          complete: function() {
            try { if (loaderTimer) { clearTimeout(loaderTimer); loaderTimer = null; } } catch(_) {}
            hideLoader();
          },
          error: function() {
            try { if (loaderTimer) { clearTimeout(loaderTimer); loaderTimer = null; } } catch(_) {}
            hideLoader();
          }
        },
        columns: [
          { data: 'registration_number', name: 'registration_number', orderable: true },
          { data: 'vehicle_type', name: 'vehicle_type', orderable: true },
          { data: 'make', name: 'make', orderable: true },
          { data: 'model', name: 'model', orderable: true },
          { data: 'driver', name: 'driver', orderable: true },
          { data: 'status', name: 'status', orderable: true },
          { data: 'actions', name: 'actions', orderable: false, searchable: false }
        ],
        info: true,
        searching: true,
        pageLength: 10,
        pagingType: "full_numbers",
        dom: 'frt<"bottom"ipl><"clear">',
        order: [[0, 'desc']],
        columnDefs: [
          { targets: ['action'], orderable: false }
        ],
        drawCallback: function() {
          try { if (loaderTimer) { clearTimeout(loaderTimer); loaderTimer = null; } } catch(_) {}
          hideLoader();
        }
      });
      
      // Add loader to pagination and other events
      function queueLoader(){
        try { if (loaderTimer) { clearTimeout(loaderTimer); } } catch(_) {}
        loaderTimer = setTimeout(function(){ showLoader(); }, 200);
      }
      table.on('page.dt', queueLoader);
      table.on('length.dt', queueLoader);
      table.on('order.dt', queueLoader);
      $('#tbl-users_filter input[type="search"]').attr('placeholder', 'Search');

      // Append filters to DataTable
      var filtersHtml = $('#vehicle-filters-template').html();
      $('#tbl-users_filter').append(filtersHtml);

      // Global search event
      $('#tbl-users_filter input[type="search"]').on('keyup', function () {
        queueLoader();
        table.search(this.value).draw();
      });

      // Filter events
      $('#status_filter').on('change', function () {
        queueLoader();
        table.draw();
      });

      // Vehicle status toggle
      $(document).on('change', '.form-check-input', function() {
        var checkbox = $(this);
        var vehicleId = checkbox.attr('id').replace('flexSwitch', '');
        var status = checkbox.is(':checked') ? "{{ \App\Models\Vehicle::STATUS_ACTIVE }}" : "{{ \App\Models\Vehicle::STATUS_INACTIVE }}";
        
        // Disable checkbox during request
        checkbox.prop('disabled', true);
        
        // If activating the vehicle, check for required documents first
        if (status == "{{ \App\Models\Vehicle::STATUS_ACTIVE }}") {
          updateVehicleStatus(vehicleId, status, checkbox);
        } else {
          // Deactivating, no document check needed
          updateVehicleStatus(vehicleId, status, checkbox);
        }
      });
      
      function updateVehicleStatus(vehicleId, status, checkbox) {
        $.ajax({
          url: "{{ route('transporter.vehicles.updateStatus') }}",
          type: 'POST',
          data: {
            vehicle_id: vehicleId,
            status: status,
            _token: '{{ csrf_token() }}'
          },
          success: function(response) {
            checkbox.prop('disabled', false);
            if (response.success) {
              toastr.success(response.message);
              queueLoader();
              table.draw(false);
            } else if (response.hasMissingDocuments) {
              // Show modal with missing documents
              showMissingVehicleDocumentsModal(response.missingDocuments, vehicleId);
              // Revert checkbox state
              checkbox.prop('checked', !checkbox.is(':checked'));
            } else {
              toastr.error(response.message || 'Failed to update status');
              // Revert checkbox state
              checkbox.prop('checked', !checkbox.is(':checked'));
            }
          },
          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', !checkbox.is(':checked'));
          }
        });
      }

      function showMissingVehicleDocumentsModal(missingDocuments, vehicleId) {
        if (missingDocuments && missingDocuments.length > 0) {
          // Show missing documents content
          $('#missingDocumentsContent').show();
          
          let documentsList = '';
          missingDocuments.forEach(function(doc) {
            documentsList += '<li>• ' + doc + '</li>';
          });
          $('#missingVehicleDocumentsList').html(documentsList);
        }
        
        $('#vehicleDocumentsModal').modal('show');
      }

      // Vehicle delete functionality
      $(document).on('click', '.delete-vehicle-btn', function(e) {
        e.preventDefault();
        var btn = $(this);
        var url = btn.data('url');
        
        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) {
            showLoader();
            $.ajax({
              url: url,
              type: 'DELETE',
              headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
              },
              success: function(response) {
                hideLoader();
                if (response.status === 'success') {
                  toastr.success(response.message);
                  queueLoader();
                  table.draw();
                } else {
                  toastr.error(response.message || 'Failed to delete vehicle.');
                }
              },
              error: function(xhr) {
                hideLoader();
                let errorMessage = 'Failed to delete vehicle.';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                  errorMessage = xhr.responseJSON.message;
                }
                toastr.error(errorMessage);
              }
            });
          }
        });
      });
    }

    // If DataTables not loaded, inject CDN script then init
    if (!($.fn && ($.fn.DataTable || $.fn.dataTable))) {
      var script = document.createElement('script');
      script.src = 'https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js';
      script.onload = function(){ initVehiclesTable(); };
      document.head.appendChild(script);
    } else {
      initVehiclesTable();
    }
  });
</script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

@endsection