@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">Drivers</li>
  </ol>
  <div class="d-flex justify-content-between align-items-center flex-wrap">
    <h1>{{$title}}</h1>
    <a href="{{ route('transporter.drivers.create') }}" class="btn btn-sm btn-primary "><em class="fa fa-plus-circle"></em> Add Driver</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">
      
        <table class="table table-bordered table-hover" id="tbl-users" aria-describedby="driver-list">
          <thead>
            <th scope="col">Driver Name</th>
            <th scope="col">Email Address</th>
            <th scope="col">Phone Number</th>
            <th scope="col">Vehicle Assigned</th>
            <th scope="col">Created Date & Time</th>
            <th scope="col">Status</th>
            <th scope="col" class="action">Action</th>
          </thead>
          <tbody></tbody>
        </table>
      
    </div>
  </div>
  <!-- /.box -->

</section>
<!-- /.content -->
<!-- Modal start here -->
<div class="modal fade" id="autologin" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
  <div class="modal-dialog modal-xl">
    <div class="modal-content model-content-autologin">

    </div>
  </div>
</div>
<!-- Modal end here -->



<script type="text/javascript">
  $(document).ready(function() {
    $.fn.dataTable.ext.errMode = () => alert('An error occurred while loading the table.');
    // 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,
      serverSide: true,
      deferRender: true,
      searchDelay: 300,
      ajax: {
        url: '{{ route('transporter.drivers.datatable') }}',
        type: 'GET',
        data: function(d){
          d.status = $('#statusFilter').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();
        }
      },
      pageLength: 10,
      pagingType: "full_numbers",
      dom: 'frt<"bottom"ipl><"clear">',
      order: [[4, 'desc']],
      columns: [
        { data: 'name', name: 'name' },
        { data: 'email', name: 'email' },
        { data: 'phone', name: 'phone' },
        { data: 'vehicle_assigned', name: 'vehicle_assigned', orderable: true, searchable: true },
        { data: 'created_at', name: 'created_at' },
        { data: 'status', name: 'status' },
        { data: 'actions', name: 'actions', orderable: false, searchable: false, render: function(d){ return d; } }
      ],
      columnDefs: [
        { targets: ['action'], orderable: false }
      ],
      drawCallback: function() {
        try { if (loaderTimer) { clearTimeout(loaderTimer); loaderTimer = null; } } catch(_) {}
        hideLoader();
      }
    });
    $('#tbl-users_filter input[type="search"]').attr('placeholder', 'Search');
    // Trigger loader on global search
    $('#tbl-users_filter input[type="search"]').on('keyup', function () {
      try { if (loaderTimer) { clearTimeout(loaderTimer); } } catch(_) {}
      loaderTimer = setTimeout(function(){ showLoader(); }, 200);
      table.search(this.value).draw();
    });

    $('#tbl-users_filter').append(`
    <select id="statusFilter" class="form-control max-w-200">
      <option value="">Status</option>
      <option value="active">Active</option>
      <option value="inactive">Inactive</option>
    </select>
  `);

  // Queue loader helper for table 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);

  // Filter on change (server-side)
  $('#statusFilter').on('change', function () {
    queueLoader();
    table.draw();
  });
  });

  $('body').on('click', '.delete-driver-btn', function(e) {
    e.preventDefault();
    var btn = $(this);
    var url = btn.data('url');
    var row = btn.closest('tr');
    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) {
        $.ajax({
          url: url,
          type: 'DELETE',
          headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },
          success: function(response) {
            if (response.status === 'success') {
              row.remove();
              toastr.success('{{ __('app.drivers.driver') }} {{ __('messages.deleted_successfully') }}');
              setTimeout(function() {
                window.location.href = "{{ route('transporter.drivers.index') }}";
              }, 1000);
            } else {
              Swal.fire('Error!', response.message || 'Failed to delete driver.', 'error');
            }
          },
          error: function(xhr) {
            let errorMessage = 'Failed to delete driver.';
            if (xhr.responseJSON && xhr.responseJSON.message) {
              errorMessage = xhr.responseJSON.message;
            }
            Swal.fire('Error!', errorMessage, 'error');
          }
        });
      }
    });
  });

  // Handle status toggle
  $('body').on('change', '.toggle-status', function(e) {
    e.preventDefault();
    var $checkbox = $(this);
    var driverId = $checkbox.data('driver-id');
    var url = $checkbox.data('url');
    var isChecked = $checkbox.is(':checked');
    var status = isChecked ? 1 : 0;
    
    // Disable checkbox during request
    $checkbox.prop('disabled', true);
    
    $.ajax({
      url: url,
      type: 'POST',
      data: {
        status: status,
        _token: $('meta[name="csrf-token"]').attr('content')
      },
      success: function(response) {
        $checkbox.prop('disabled', false);
        if (response.success) {
          toastr.success(response.message);
          setTimeout(function() {
            window.location.reload();
          }, 1000);
        } else if (response.hasMissingDocuments) {
          // Show modal with missing documents
          showMissingDriverDocumentsModal(response.missingDocuments);
          // 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);
      }
    });
  });

  // Add modal for missing driver documents
  $('body').append(`
    <div class="modal fade" id="driverDocumentsModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="driverDocumentsModalLabel" 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="driverDocumentsModalLabel">Driver Requirements</h5>
            <button type="button" class="btn-close" data-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 driver:</h5>
              <ul id="missingDriverDocumentsList" 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>
  `);

  function showMissingDriverDocumentsModal(missingDocuments) {
    if (missingDocuments && missingDocuments.length > 0) {
      // Show missing documents content
      $('#missingDocumentsContent').show();
      $('#uploadDriverDocsBtn').show();
      
      let documentsList = '';
      missingDocuments.forEach(function(doc) {
        documentsList += '<li>• ' + doc + '</li>';
      });
      $('#missingDriverDocumentsList').html(documentsList);
      
      // Set the upload button link to driver edit page
      $('#uploadDriverDocsBtn').attr('href', '{{ route("transporter.drivers.edit", ":driverId") }}'.replace(':driverId', $('.toggle-status:checked').data('driver-id')));
    }
    
    $('#driverDocumentsModal').modal('show');
  }

</script>

@endsection