@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">
      
        <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" class="text-end">{{__('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>
          <tbody>
            @foreach($vehicles as $vehicle)
            <tr>
            <td data-type='text'><a href="{{route('transporter.vehicles.show', $vehicle->id)}}">{{$vehicle->registration_number ?? null}}</a></td>
              
              <td data-type='text'>{{$vehicle->vehicleType->type ?? null}}</td>
              <td data-type='text' class="text-end">{{$vehicle->year_of_manufacture ?? null}}</td>
              <td data-type='text'>{{$vehicle->make ?? null}}</td>
              <td data-type='none'><a href="{{ $vehicle->driver ? route('transporter.drivers.show', $vehicle->driver->id) : '#'}}">{{$vehicle->driver->name ?? null}}</a></td>
              <td data-type='text'>
                <div class="form-check form-switch">
                  <input class="form-check-input" type="checkbox"
                    id="flexSwitch{{$vehicle->id}}" 
                    {{$vehicle->status == \App\Models\Vehicle::STATUS_ACTIVE ? 'checked' : ''}}
                    aria-checked="{{$vehicle->status == \App\Models\Vehicle::STATUS_ACTIVE ? 'true' : 'false'}}">
                </div>
                <span class="status-text d-none">{{$vehicle->status == \App\Models\Vehicle::STATUS_ACTIVE ? 'Active' : 'Inactive'}}</span>
              </td>
              <td data-type='none'>
              <a href="{{route('transporter.vehicles.edit', $vehicle->id)}}" class="me-3">
                <em class="iconsax icon-292D32 fs-20" icon-name="edit-1"></em>

              </a>
              <a href="javascript:void(0)" class="delete-vehicle-btn" data-url="{{ route('transporter.vehicles.destroy', $vehicle->id) }}">
                <em class="iconsax icon-292D32 fs-20" icon-name="trash"></em>

              </a>
            </td>
            </tr>
            @endforeach
          </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 -->

<!-- Required Documents Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- Modal content will be dynamically populated -->
    </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',
      pageLength: 10,
      pagingType: "full_numbers",
      dom: 'frt<"bottom"ipl><"clear">',
      order: [], // Disable initial sorting to maintain server-side order
      columnDefs: [
        { targets: ['action'], orderable: false }
      ]
    });
    $('#tbl-users_filter input[type="search"]').attr('placeholder', 'Search');

    $('#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>
  `);

  // Filter on change
  $('#statusFilter').on('change', function () {
    let selected = $(this).val();
    
    // Clear any existing custom search functions
    $.fn.dataTable.ext.search.splice(0, $.fn.dataTable.ext.search.length);
    
    if (selected !== '') {
      // Add custom search function for status column
      $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
        // Get the checkbox from the status column (column 5)
        var row = table.row(dataIndex).node();
        var statusCell = $(row).find('td').eq(5);
        var checkbox = statusCell.find('.form-check-input');
        
        if (selected === 'active') {
          return checkbox.is(':checked');
        } else if (selected === 'inactive') {
          return !checkbox.is(':checked');
        }
        
        return true;
      });
    }
    
    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);
          setTimeout(function() {
            window.location.reload();
          }, 1000);
        } 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'));
      }
    });
  }
  });

  // Add modal for missing vehicle documents
  $('body').append(`
    <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" 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>
  `);

  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
  $('body').on('click', '.delete-vehicle-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') {
              // Remove the row from the table
              toastr.success(response.message);
              setTimeout(function() {
                window.location.reload();
              }, 1000);
            } else {
              toastr.error(response.message || 'Failed to delete vehicle.');
            }
          },
          error: function(xhr) {
            let errorMessage = 'Failed to delete vehicle.';
            if (xhr.responseJSON && xhr.responseJSON.message) {
              errorMessage = xhr.responseJSON.message;
            }
            toastr.error(errorMessage);
          }
        });
      }
    });
  });

</script>

@endsection