@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 }}">{{$title}}</a>
        </li>
        <li class="active">{{ __('app.transporters.transporter_details') }}</li>
      </ol>
      <div class="d-flex justify-content-between align-items-center flex-wrap">
        <h1>{{$transporter->name}}</h1>
        <div class="d-flex justify-content-between align-items-center flex-wrap">
        </div>
      </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">
                <label class="control-label text-dark-gray fs-14 fw-semibold">Name</label>
                <div class="fs-16 text-black">{{$transporter->name}}</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">Contact Person</label>
                <div class="fs-16 text-black">{{$transporter->contact_person_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">Email</label>
                <div class="fs-16 text-black">{{$transporter->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">{{$transporter->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">Address</label>
                <div class="fs-16 text-black">{{$transporter->address}}</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">Documents </h2>
                
              </div>

              <table class="table table-bordered table-hover" id="tbl-users" aria-describedby="documents-list">
                <thead>
                  <th scope="col">Documents</th>
                  <th scope="col">Uploaded By</th>
                  <th scope="col">Date & Time</th>
                  <th scope="col">Expiry</th>
                  <th scope="col">Status</th>
                  <th scope="col" class="action">Action</th>
                </thead>
                <tbody>
                @foreach ($transporter->transporterDocuments as $document)
                  <tr>
                    <td data-type='text'><a href="{{ route('transporter.documents.show', ['document' => $document->id]) }}" target="_blank">{{$document->mandatoryDocument->name}}</a></td>
                    <td data-type='text'>{{$document->uploadedBy->name}}</td>
                    <td data-type='text'>{{$document->uploaded_date_time?->format(APP_DATE_TIME_FORMAT)}}</td>
                    <td data-type='text'>{{$document->expiry_date?->format(APP_DATE_FORMAT)}}</td>
                    @php
                      $isExpired = $document->expiry_date ? \Carbon\Carbon::parse($document->expiry_date)->lt(\Carbon\Carbon::today()) : false;
                    @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
                    </span></td>
                    
                    <td data-type='none'>
                      <a href="{{ route('transporter.documents.show', ['document' => $document->id]) }}" target="_blank" class=" me-3"
                        data-front="{{ $document->front_side_path }}"
                        data-back="{{ $document->back_side_path }}"
                        data-front-type="{{ pathinfo($document->front_side_path, PATHINFO_EXTENSION) }}"
                        data-back-type="{{ pathinfo($document->back_side_path, PATHINFO_EXTENSION) }}">
                        <em class="iconsax icon-292D32 fs-20" icon-name="eye"></em>
                      </a>
                    </td>
                  </tr>
                @endforeach
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>


      <div class="modal fade" id="docsModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">View Documents</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
              <div id="docsCarousel" class="carousel slide" data-bs-interval="false">
                <div class="carousel-inner">
                  <div class="carousel-item active doc-item"></div>
                  <div class="carousel-item doc-item"></div>
                </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#docsCarousel" data-bs-slide="prev">
                  <span class="carousel-control-prev-icon"></span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#docsCarousel" data-bs-slide="next">
                  <span class="carousel-control-next-icon"></span>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      

    </section>
   <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">',
      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(`
    <div class="d-flex justify-content-end  flex-wrap jobs-right-filter">
      <div class="custom-width-200 position-relative ">
        <input type="text" class="form-control date-picker ms-0" id="calendar" placeholder="Date Range">
        <span class="position-absolute date-picker-icon">
          <em class="iconsax icon-292D32 fs-20" icon-name="calendar-1"></em>

        </span>
      </div>
      <div class="custom-width-200 position-relative me-2">
        <select id="statusFilter" class="form-control max-w-200">
          <option value="">Status</option>
          <option value="active">Active</option>
          <option value="expired">Expired</option>
        </select>
      </div>
    </div>
    
  `);

  // Filter on change
  $('#statusFilter').on('change', function () {
    let selected = $(this).val();
    table.column(4).search(selected).draw(); // column index 5 = "Status"
  });

  // Remove old datepicker and add daterangepicker for #calendar
  let startDate = null;
  let endDate = null;

  $('#calendar').daterangepicker({
    autoUpdateInput: false,
    locale: {
      cancelLabel: 'Clear',
      format: 'DD/MM/YYYY'
    }
  });

  $('#calendar').on('apply.daterangepicker', function (ev, picker) {
    startDate = picker.startDate;
    endDate = picker.endDate;
    $(this).val(startDate.format('DD/MM/YYYY') + ' - ' + endDate.format('DD/MM/YYYY'));
    table.draw();
  });

  $('#calendar').on('cancel.daterangepicker', function () {
    $(this).val('');
    startDate = null;
    endDate = null;
    table.draw();
  });

  // DataTable custom date range filter for Date & Time column (index 2 - Date & Time column)
  $.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {
    if (settings.nTable.id !== 'tbl-users') return true;
    if (!startDate || !endDate) return true;
    const creationDate = data[2]; // index of Date & Time column
    if (!creationDate || creationDate === '') return true;
    
    // Parse the date format: dd/mm/yyyy hh:mm AM/PM
    const parsedDate = moment(creationDate, 'DD/MM/YYYY hh:mm A', true);
    if (!parsedDate.isValid()) return true;
    
    return parsedDate.isSameOrAfter(startDate, 'day') && parsedDate.isSameOrBefore(endDate, 'day');
  });


  });
</script>

@endsection