@use('App\Models\JobTransporter')
<div class="box-body px-0 ">
    <table aria-describedby="tbl-transporters-desc" class="table table-bordered table-hover" id="tbl-transporters">
        <thead>
            <th scope="col">Transporter</th>
            <th scope="col" class="">Vehicles</th>
            <th scope="col">Quantity (Metric Tons)</th>
            <th scope="col" class="min-width-158">Creation Date</th>
            <th scope="col">Job Status</th>
            <th scope="col">Action</th>
        </thead>
        <tbody>
            @forelse($job->transporters->sortBy('id', 2) ?? [] as $transporter)
                <tr>
                    <td data-type='text'>{{ $transporter->name ?? 'null' }}</td>
                    <td data-type='text'>
                        @php
                            $vehicles = $job->trips->load(['vehicle', 'driver'])
                                ->where('transport_id', $transporter->id)
                                ->pluck('vehicle')
                                ->filter()
                                ->unique('id');
                        @endphp
                        <a href="javascript:void(0)" class="text-primary" data-bs-toggle="modal" data-bs-target="#vehiclesModal" data-transporter-id="{{ $transporter->id }}">{{ $vehicles->count() }}</a>
                    </td>
                    <td data-type='text'>
                        @php
                            // Get allocated quantity from job_transporter pivot
                            $allocatedQuantity = $transporter->pivot->quantity_metric_tons ?? 0;
                            
                            // Get sum of offload_metric_tons for this transporter's completed trips
                            $completedQuantity = $job->trips
                                ->where('transport_id', $transporter->id)
                                ->where('status', \App\Models\Trip::STATUS_COMPLETE_TRIP)
                                ->whereNotNull('offload_metric_tons')
                                ->sum('offload_metric_tons');
                            
                            // Format the numbers
                            $allocatedFormatted = $allocatedQuantity ? rtrim(rtrim(number_format($allocatedQuantity, 2, '.', ''), '0'), '.') : '0';
                            $completedFormatted = $completedQuantity ? rtrim(rtrim(number_format($completedQuantity, 2, '.', ''), '0'), '.') : '0';
                        @endphp
                        {{ $completedFormatted }}/{{ $allocatedFormatted }}
                    </td>
                    <td data-type='none'>{{ $transporter->created_at ? $transporter->created_at->format('d/m/Y H:i A') : 'null' }}</td>
                    @php
                        $class = match ($transporter->pivot->status ?? JobTransporter::STATUS_PENDING) {
                            JobTransporter::STATUS_PENDING => 'pending-tag',
                            JobTransporter::STATUS_IN_PROGRESS => 'in-progress-tag',
                            JobTransporter::STATUS_COMPLETED => 'completed-tag',
                        };
                        
                        $statusLabel = match ($transporter->pivot->status ?? JobTransporter::STATUS_PENDING) {
                            JobTransporter::STATUS_PENDING => 'pending',
                            JobTransporter::STATUS_IN_PROGRESS => 'in progress',
                            JobTransporter::STATUS_COMPLETED => 'completed',
                        };
                    @endphp
                    <td data-type='none'>
                        <span class="{{ $class }}">{{ ucwords($statusLabel) }}</span>
                    </td>
                    <td data-type='none'>
                        <a href="" class="me-3">
                            <em class="iconsax icon-292D32 fs-20" icon-name="phone"></em>
                        </a>
                    </td>
                </tr>
            @empty
                
            @endforelse
        </tbody>
    </table>
</div>

{{-- Hidden vehicles lists for each transporter --}}
@foreach(($job->transporters ?? []) as $transporter)
    @php
        $vehicles = $job->trips->load(['vehicle', 'driver'])
            ->where('transport_id', $transporter->id)
            ->pluck('vehicle')
            ->filter()
            ->unique('id');
    @endphp
    <div id="vehicles-list-{{ $transporter->id }}" class="d-none">
        @if($vehicles->count())
            <ul class="list-group">
                @foreach($vehicles as $vehicle)
                    @php
                        $trip = $job->trips->where('vehicle_id', $vehicle->id)->where('transport_id', $transporter->id)->first();
                        $driver = $trip ? $trip->driver : null;
                    @endphp
                    <li class="list-group-item">
                        <strong>{{ $vehicle->registration_number ?? null }}</strong>
                        @if($driver)
                            <br><small class="text-muted">Driver: {{ $driver->name ?? null }}</small>
                        @endif
                    </li>
                @endforeach
            </ul>
        @else
            <div class="text-muted">No vehicles found.</div>
        @endif
    </div>
@endforeach

{{-- Vehicles Modal --}}
<div class="modal fade" id="vehiclesModal" tabindex="-1" aria-labelledby="vehiclesModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered ">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="vehiclesModalLabel">Vehicles</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>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        var modalEl = document.getElementById('vehiclesModal');
        if (!modalEl) return;
        modalEl.addEventListener('show.bs.modal', function (event) {
            var triggerEl = event.relatedTarget;
            var transporterId = triggerEl ? triggerEl.getAttribute('data-transporter-id') : null;
            var bodyEl = document.getElementById('vehiclesModalBody');
            if (!bodyEl) return;
            if (!transporterId) {
                bodyEl.innerHTML = '<div class="text-muted">No vehicles found.</div>';
                return;
            }
            var listContainer = document.getElementById('vehicles-list-' + transporterId);
            bodyEl.innerHTML = listContainer ? listContainer.innerHTML : '<div class="text-muted">No vehicles found.</div>';
        });
    });
</script>