@extends('backend.layouts.admin.app')

@section('content')

<!-- Content Header (Page header) -->
<section class="content-header">
  @php
    $isTransporter = isset($isTransporter) ? $isTransporter : (auth()->user()?->isTransporter() ?? false);
    $driverId = request('driver_id');
    $vehicleId = request('vehicle_id');
    $transporterId = request('transporter_id');
    $poId = request('purchase_order_id');
  @endphp
  <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>

    @if($isTransporter && $driverId)
      <li><a href="{{ route('transporter.drivers.index') }}">{{ __('app.drivers.title') }}</a></li>
      <li><a href="{{ route('transporter.drivers.show', $driverId) }}">{{ __('app.drivers.driver') }} {{ __('app.details') ?? 'Details' }}</a></li>
      <li class="active">Jobs</li>
    @elseif($isTransporter && $vehicleId)
      <li><a href="{{ route('transporter.vehicles.index') }}">{{ __('app.vehicles.title') }}</a></li>
      <li><a href="{{ route('transporter.vehicles.show', $vehicleId) }}">{{ __('app.vehicles.vehicle') ?? 'Vehicle' }} {{ __('app.details') ?? 'Details' }}</a></li>
      <li class="active">Jobs</li>
    @elseif(!$isTransporter && $poId)
      <li><a href="{{ route('admin.purchase-orders.index') }}">{{ __('app.purchase_orders.title') ?? 'Purchase Orders' }}</a></li>
      <li><a href="{{ route('admin.purchase-orders.show', $poId) }}">{{ __('app.purchase_orders.purchase_order') ?? 'Purchase Order'}} {{ __('app.details') ?? 'Details' }}</a></li>
      <li class="active">Jobs</li>
    @elseif(!$isTransporter && $transporterId)
      <li><a href="{{ route('admin.transporters.index') }}">{{ __('app.transporters.title') ?? 'Transporters' }}</a></li>
      <li><a href="{{ route('admin.transporters.show', $transporterId) }}">{{ __('app.transporters.transporter') ?? 'Transporter' }} {{ __('app.details') ?? 'Details' }}</a></li>
      <li class="active">Jobs</li>
    @else
      <li class="active">Jobs</li>
    @endif
  </ol>
  <div class="d-flex justify-content-between align-items-center flex-wrap">
    <h1>{{ $title }}</h1>
  </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 aria-describedby="tbl-users-desc" class="table table-bordered table-hover" id="tbl-users">
        <thead>
          <th scope="col" class="text-end">{{__('app.jobs.job_id')}}</th>
          @if(!$isTransporter)
          <th scope="col" class="text-end">{{__('app.transporters.transporter')}}</th>
          @else
          <th scope="col" class="text-end">{{__('app.vehicles.title')}}</th>
          @endif
          <th scope="col">{{__('app.locations.loading_location')}}</th>
          <th scope="col">{{__('app.locations.offloading_location')}}</th>
          <th scope="col" class="min-width-158">{{__('app.jobs.load_time')}}</th>
          <th scope="col" class="min-width-158">{{__('app.jobs.offload_time')}}</th>
          <th scope="col">{{__('app.jobs.job_status')}}</th>
          <th scope="col" class="action">{{__('app.action')}}</th>
        </thead>
        <tbody>
          @foreach ($jobs as $job)
          @php
            $transporterIds = $job->transporters->pluck('id')->implode(',');
            $transporterNames = strtolower($job->transporters->pluck('name')->join(','));
          @endphp
            <tr data-transporters-id="{{ $transporterIds }}" data-transporters="{{ $transporterNames }}">
              <td data-type='text' class="text-end">
                @if($isTransporter)
                <a href={{ route('transporter.jobs.show', $job->id) }}>{{ $job->id }}</a>
                @else
                <a href={{ route('admin.jobs.show', $job->id) }}>{{ $job->id }}</a>
                @endif
              </td>
              <td data-type='text' class="text-end">
                @if ($isTransporter)
                  <a href="javascript:void(0);" class="show-vehicles" data-job-id="{{ $job->id }}">
                    @php
                        $vehicleCount = 0;
                        foreach($job->transporters as $transporter) {
                            try {
                                if ($transporter->vehicles && method_exists($transporter->vehicles, 'count')) {
                                    $vehicleCount += $transporter->vehicles->count();
                                }
                            } catch (Exception $e) {
                                $vehicleCount += 0;
                            }
                        }
                    @endphp
                    {{ $vehicleCount }}
                  </a>
                @else
                  <a href="javascript:void(0);" class="show-transporters" data-job-id="{{ $job->id }}">
                    {{$job->transporters->count() ? $job->transporters->count() : 0}}
                  </a>
                @endif
              </td>
              <td data-type='text'>{{$job->loadingLocation->name ?? null }}</td>
              <td data-type='text'>{{$job->offloadingLocation->name ?? null}}</td>
              <td data-type='none'>{{ $job->load_date->format('d/m/Y') .'  '. $job->load_time_format}}</td>
              <td data-type='none'>{{$job->offload_date->format('d/m/Y') .'  '. $job->offload_time_format}}</td>
              <td data-type='none'>
                <span class="{{ $job->isPending() ? 'pending-tag' : ($job->isInProgress() ? 'in-progress-tag' : 'completed-tag') }}">
                  {{ ucwords($job->status_label) }}
                </span>
              </td>
              <td data-type='none'>
                @php
                    $user->isTransporter() ? $route = 'transporter.jobs.show' : $route = 'admin.jobs.show';
                @endphp
                <a href="{{ route($route, $job->id) }}" class="view-docs-btn me-3"><em class="iconsax icon-292D32 fs-20" icon-name="eye"></em></a>
              </td>
            </tr>
            <div id="transporters-list-{{ $job->id }}" class="d-none">
                @if($job->transporters->count())
                    <ul class="list-group">
                        @foreach($job->transporters as $transporter)
                            <li class="list-group-item">
                                {{ $transporter->name }} ({{ $transporter->email }})
                            </li>
                        @endforeach
                    </ul>
                @else
                    <div class="text-muted">No transporters found for this job.</div>
                @endif
            </div>
            <div id="vehicles-list-{{ $job->id }}" class="d-none">
                @php
                    $allVehicles = collect();
                    foreach($job->transporters as $transporter) {
                        try {
                            if ($transporter->vehicles && method_exists($transporter->vehicles, 'merge')) {
                                $allVehicles = $allVehicles->merge($transporter->vehicles);
                            }
                        } catch (Exception $e) {
                            continue;
                        }
                    }
                @endphp
                @if($allVehicles->count())
                    <ul class="list-group">
                        @foreach($allVehicles as $vehicle)
                            <li class="list-group-item">
                                {{ $vehicle->registration_number }} - {{ $vehicle->make }} {{ $vehicle->model }} ({{ $vehicle->transporter->name }})
                            </li>
                        @endforeach
                    </ul>
                @else
                    <div class="text-muted">No vehicles found for this job.</div>
                @endif
            </div>
          @endforeach
        </tbody>
      </table>
    </div>
  </div>

  <!-- Modals reused from jobs index -->
  <div class="modal fade" id="transportersModal" tabindex="-1" aria-labelledby="transportersModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="transportersModalLabel">Transporters List</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body" id="transportersModalBody"></div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="vehiclesModal" tabindex="-1" aria-labelledby="vehiclesModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="vehiclesModalLabel">Vehicles List</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body" id="vehiclesModalBody"></div>
      </div>
    </div>
  </div>

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

<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,
      pageLength: 10,
      pagingType: "full_numbers",
      dom: 'frt<"bottom"ipl><"clear">',
      order: [],
      columnDefs: [
        { targets: ['action'], orderable: false }
      ]
    });
    $('#tbl-users_filter input[type="search"]').attr('placeholder', 'Search');
  });

  $(document).on('click', '.show-transporters', function() {
    var jobId = $(this).data('job-id');
    var html = $('#transporters-list-' + jobId).html();
    $('#transportersModalBody').html(html);
    $('#transportersModal').modal('show');
  });

  $(document).on('click', '.show-vehicles', function() {
    var jobId = $(this).data('job-id');
    var html = $('#vehicles-list-' + jobId).html();
    $('#vehiclesModalBody').html(html);
    $('#vehiclesModal').modal('show');
  });

  $(document).on('click', '#openJobChatBtn', function(e) {
    e.preventDefault();
    var jobId = $(this).data('job-id');
    const chatUrl = '{{ route($user->isTransporter() ? 'transporter.chats.index' : 'admin.chats.index') }}' + '?job=' + encodeURIComponent(jobId);
    window.location.href = chatUrl;
  });
</script>
@endsection