@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 }}">{{ __('app.drivers.title') }}</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="flexSwitchCheckChecked" {{ $driver->status == \App\Models\User::STATUS_ACTIVE ? 'checked' : '' }}>
              <label class="form-check-label" for="flexSwitchCheckChecked"></label>
          </div>
          <a href="{{ route('transporter.jobs.list-by-context', ['driver_id' => $driver->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">
              <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>
        @endif
      </div>
  
    </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="{{ $driver->getDriverProfilePictureUrl() ?? '#' }}" target="_blank">
                      <img src="{{$driver->getDriverProfilePictureUrl() ?? 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">Name</label>
                    <div class="fs-16 text-black">{{$driver->name}}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-2 col-xs-6 detail-width-20">
              <div class="form-group">
                <label class="control-label text-dark-gray fs-14 fw-semibold">Driver Id</label>
                <div class="fs-16 text-black">{{$driver->driver_id}}</div>
              </div>
            </div>
            <div class="col-md-2 col-xs-6 detail-width-20">
              <div class="form-group">
                <label class="control-label text-dark-gray fs-14 fw-semibold">Email</label>
                <div class="fs-16 text-black">{{$driver->email}}</div>
              </div>
            </div>
            <div class="col-md-2 col-xs-6 detail-width-20">
              <div class="form-group">
                <label class="control-label text-dark-gray fs-14 fw-semibold">Phone</label>
                <div class="fs-16 text-black">{{$driver->phone_accounts}}</div>
              </div>
            </div>
            <div class="col-md-2 col-xs-6 detail-width-20">
              <div class="form-group">
                <label class="control-label text-dark-gray fs-14 fw-semibold">Vehicle Assigned</label>
                <div class="fs-16 text-black">{{$driver->assignedVehicles?->first()?->registration_number ?? 'No vehicle assigned'}}</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-documents" aria-describedby="detail-driver-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">{{ __('app.action') }}</th>
                </thead>
                <tbody>
                  @foreach($driver->documents as $document)
                  <tr>
                    <td>{{ $document->mandatoryDocument->name ?? null}}</td>
                    <td>{{ $document->expiry_date ? $document->expiry_date->format('d/m/Y') : null}}</td>
                    <td>{{ $document->uploaded_date_time ? $document->uploaded_date_time->format('d/m/Y h:iA') : null}}</td>
                    @php
                      $isExpired = isset($document->expiry_date) ? \Carbon\Carbon::parse($document->expiry_date)->lt(\Carbon\Carbon::today()) : '';
                    @endphp
                    <td data-type='text'>
                      @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.drivers.documents.show' : $route = 'admin.drivers.documents.show';
                      @endphp
                      <a href="{{ route($route, ['driver' => $driver->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 ?? null}}" data-driver-id="{{$driver->id ?? null}}" data-required="{{ $document->mandatoryDocument->is_required ?? 0 }}">
                        <em class="iconsax icon-292D32 fs-20" icon-name="trash"></em>

                      </a>
                      @endif
                    </td>
                  </tr>
                  @endforeach
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
      

    </section>
   <script type="text/javascript">

$(document).ready(function() {
    $.fn.dataTable.ext.errMode = () => alert('{{__("messages.datatable_error_message")}}');
    var table = $('#tbl-documents').DataTable({
      info: true,
      searching: true,
      //ajax: '../server_side/scripts/server_processing.php',
      paging: false, // disables pagination
      dom: 'frt<"bottom"ipl><"clear">',
      columnDefs: [
        {
          orderable: false,
          targets: [4]
        }
      ]
    });
    $('#tbl-documents_filter input[type="search"]').attr('placeholder', 'Search');

    $('#tbl-documents_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.drivers.documents.create', ['driver' => $driver->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 3 = "Status"
  });
  $('#calendar').datepicker();

  // Document delete functionality
  $('body').on('click', '.delete-document', function(e) {
    e.preventDefault();
    var btn = $(this);
    var documentId = btn.data('document-id');
    var driverId = btn.data('driver-id');
    var isRequired = btn.data('required');
    var row = btn.closest('tr');
    if (isRequired) {
      Swal.fire('Error!', 'This document is required and cannot be deleted.', 'error');
      return;
    }
    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.drivers.documents.destroy', [':driver', ':document']) }}";
        deleteUrl = deleteUrl.replace(':driver', driverId).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('{{ __('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');
          }
        });
      }
    });
  });

  // Status toggle functionality
  $('#flexSwitchCheckChecked').on('change', function() {
    var isChecked = $(this).is(':checked');
    var driverId = {{ $driver->id }};
    var newStatus = isChecked ? 1 : 0;
    
    // Disable checkbox during request
    $(this).prop('disabled', true);
    
    $.ajax({
      url: "{{ route('transporter.drivers.toggle-status', ['driver' => $driver->id]) }}",
      type: 'POST',
      data: {
        status: newStatus,
        _token: $('meta[name="csrf-token"]').attr('content')
      },
      success: function(response) {
        $('#flexSwitchCheckChecked').prop('disabled', false);
        if (response.success) {
          toastr.success(response.message);
        } else if (response.hasMissingDocuments) {
          // Show modal with missing documents
          showMissingDriverDocumentsModal(response.missingDocuments);
          // Revert checkbox state
          $('#flexSwitchCheckChecked').prop('checked', !isChecked);
        } else {
          toastr.error(response.message || 'Failed to update status.', 'error');
          // Revert checkbox state
          $('#flexSwitchCheckChecked').prop('checked', !isChecked);
        }
      },
      error: function(xhr) {
        $('#flexSwitchCheckChecked').prop('disabled', false);
        let errorMessage = 'Failed to update status.';
        if (xhr.responseJSON && xhr.responseJSON.message) {
          errorMessage = xhr.responseJSON.message;
        }
        toastr.error(errorMessage, 'error');
        // Revert checkbox state
        $('#flexSwitchCheckChecked').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();
      
      let documentsList = '';
      missingDocuments.forEach(function(doc) {
        documentsList += '<li>• ' + doc + '</li>';
      });
      $('#missingDriverDocumentsList').html(documentsList);
    }
    
    $('#driverDocumentsModal').modal('show');
  }
});
</script>

@endsection