@extends('layouts.dashboard')

@section('title', 'Loads')

@section('content')
<div class="container-fluid py-3">
    <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
        <div>
            <h4 class="ff-list-page-title mb-1"><i class="fa-solid fa-truck-ramp-box text-accent me-2"></i>Loads</h4>
            <p class="ff-list-page-subtitle mb-0">Manage and track your active and historical loads.</p>
        </div>
        <a href="{{ route('ui.active-load') }}" class="btn ff-btn-primary px-4">
            <i class="fa-solid fa-plus me-2"></i> Add Load
        </a>
    </div>

    <div class="btn-group mb-3" role="group">
        <a href="{{ route('ui.loads', ['tab' => 'open']) }}" class="btn btn-sm {{ $tab === 'open' ? 'btn-warning' : 'btn-outline-warning' }} fw-bold">Open Loads ({{ $openCount }})</a>
        <a href="{{ route('ui.loads', ['tab' => 'delivered']) }}" class="btn btn-sm {{ $tab === 'delivered' ? 'btn-warning' : 'btn-outline-warning' }} fw-bold">Delivered Loads ({{ $deliveredCount }})</a>
        <a href="{{ route('ui.loads', ['tab' => 'completed']) }}" class="btn btn-sm {{ $tab === 'completed' ? 'btn-warning' : 'btn-outline-warning' }} fw-bold">Completed Loads ({{ $completedCount }})</a>
        <a href="{{ route('ui.loads', ['tab' => 'invoiced']) }}" class="btn btn-sm {{ $tab === 'invoiced' ? 'btn-warning' : 'btn-outline-warning' }} fw-bold">Invoiced / Paid ({{ $invoicedCount }})</a>
    </div>

    <div class="card ff-card border-0 shadow-sm">
        <div class="card-body p-3">
            <div class="table-responsive ff-loads-wrap">
                <table id="loadsTable" class="table ff-table ff-table-dense w-100">
                    <colgroup>
                        <col style="width: 7%;">
                        <col style="width: 8%;">
                        <col style="width: 13%;">
                        <col style="width: 14%;">
                        <col style="width: 9%;">
                        <col style="width: 9%;">
                        <col style="width: 13%;">
                        <col style="width: 13%;">
                        <col style="width: 8%;">
                        <col style="width: 9%;">
                    </colgroup>
                    <thead>
                        <tr>
                            <th>Load #</th>
                            <th>W/O #</th>
                            <th>Customer</th>
                            <th>Driver / Carrier</th>
                            <th>Pickup Date</th>
                            <th>Delivery Date</th>
                            <th>Origin</th>
                            <th>Destination</th>
                            <th>Status</th>
                            <th class="text-end">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($loads as $load)
                            @php
                                $shipper = $load->shippers->first();
                                $consignee = $load->consignees->first();
                                $assignment = $load->assignments->first();
                                $origin = collect([$shipper?->city, $shipper?->stateProvince?->code])->filter()->implode(', ') ?: '—';
                                $destination = collect([$consignee?->city, $consignee?->stateProvince?->code])->filter()->implode(', ') ?: '—';
                                $assigneeLabel = 'Assign Later';
                                $driverId = null;
                                $carrierId = null;
                                if ($assignment?->assignment_type === 'driver') {
                                    $driverId = $assignment->driver?->id;
                                    $assigneeLabel = $assignment->driver?->full_name ?? 'Assign Later';
                                    if ($assignment->truck?->truck_number) {
                                        $assigneeLabel .= ' / '.$assignment->truck->truck_number;
                                    }
                                } elseif ($assignment) {
                                    $carrierId = $assignment->carrierCompany?->id;
                                    $assigneeLabel = $assignment->carrierCompany?->display_name ?? 'Assign Later';
                                }
                                $customerId = $load->customerCompany?->id;
                                $customerName = $load->customerCompany?->display_name ?? '—';
                                $statusName = $load->status?->name ?? 'Open';
                                $statusKey = \Illuminate\Support\Str::slug($statusName);
                            @endphp
                            <tr>
                                <td>
                                    <a href="{{ route('loads.confirmation-preview', $load) }}"
                                       class="fw-semibold text-accent text-decoration-none"
                                       data-load-confirmation-preview="{{ route('loads.confirmation-preview', $load) }}"
                                       data-load-confirmation-download="{{ route('loads.confirmation', $load) }}"
                                       data-load-confirmation-number="{{ $load->load_number }}"
                                       data-load-confirmation-id="{{ $load->id }}"
                                       data-load-confirmation-invoice-currency="{{ $load->currency_code }}"
                                       title="View load confirmation">{{ $load->load_number }}</a>
                                </td>
                                <td>{{ $load->wo_reference ?: '—' }}</td>
                                <td>
                                    @if($customerId)
                                        <a href="#" class="cell-truncate ff-record-link" data-edit-company="{{ $customerId }}" data-company-role="customer" title="{{ $customerName }}">{{ $customerName }}</a>
                                    @else
                                        <span class="cell-truncate" title="{{ $customerName }}">{{ $customerName }}</span>
                                    @endif
                                </td>
                                <td>
                                    @if($driverId)
                                        <a href="#" class="cell-truncate ff-record-link" data-edit-driver="{{ $driverId }}" title="{{ $assigneeLabel }}">{{ $assigneeLabel }}</a>
                                    @elseif($carrierId)
                                        <a href="#" class="cell-truncate ff-record-link" data-edit-company="{{ $carrierId }}" data-company-role="carrier" title="{{ $assigneeLabel }}">{{ $assigneeLabel }}</a>
                                    @else
                                        <span class="cell-truncate" title="{{ $assigneeLabel }}">{{ $assigneeLabel }}</span>
                                    @endif
                                </td>
                                <td class="text-nowrap">{{ $shipper?->displayScheduledAt() ?? '—' }}</td>
                                <td class="text-nowrap">{{ $consignee?->displayScheduledAt() ?? '—' }}</td>
                                <td><span class="cell-truncate" title="{{ $origin }}">{{ $origin }}</span></td>
                                <td><span class="cell-truncate" title="{{ $destination }}">{{ $destination }}</span></td>
                                <td><span class="ff-status-badge ff-status-{{ $statusKey }}">{{ $statusName }}</span></td>
                                <td class="text-end text-nowrap">
                                    <a href="{{ route('ui.active-load', $load) }}" class="ff-action-btn" title="Edit load">
                                        <i class="fa-solid fa-pen-to-square"></i>
                                    </a>
                                    <a href="#" class="ff-action-btn ff-action-danger" data-delete-load="{{ $load->id }}" title="Delete load">
                                        <i class="fa-solid fa-trash"></i>
                                    </a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

@include('ui.modals')

@push('styles')
<style>
    /* Custom styling for the empty state of DataTable to match theme */
    .dataTables_empty {
        text-align: center;
        padding: 40px !important;
        color: var(--text-muted);
        font-style: italic;
    }

    /* Compact, data-dense table so large volumes of loads stay readable */
    .ff-table-dense {
        border-spacing: 0 4px;
        font-size: 0.82rem;
        table-layout: fixed;
        width: 100%;
    }

    .ff-table-dense thead th,
    table.dataTable.ff-table-dense thead th {
        padding: 9px 10px;
        font-size: 0.68rem;
        letter-spacing: 0.03em;
        white-space: normal;       /* let headings wrap instead of forcing scroll */
        word-break: normal;
        overflow-wrap: break-word;
    }

    /* Status & Actions headers should never break letter-by-letter */
    .ff-table-dense thead th:nth-last-child(1),
    .ff-table-dense thead th:nth-last-child(2) {
        white-space: nowrap;
    }

    .ff-table-dense tbody td,
    table.dataTable.ff-table-dense tbody td {
        padding: 8px 10px;
        font-size: 0.82rem;
        overflow: hidden;          /* keep contents inside the fixed column width */
        text-overflow: ellipsis;
    }

    /* Actions cell hosts a dropdown menu, so it must not clip overflow */
    .ff-table-dense tbody td:last-child {
        overflow: visible;
    }

    /* Truncate long text into a single line with an ellipsis (full text on hover) */
    .cell-truncate {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
    }

    /* Fixed layout means the table always fits the card width, so we let the wrapper
       overflow stay visible — this keeps the row action dropdown from being clipped. */
    .ff-loads-wrap {
        overflow: visible;
    }

    /* Row action dropdown: keep the menu above the table when open */
    .ff-action-dropdown .dropdown-menu {
        z-index: 1050;
        min-width: 9rem;
    }

    /* Inline action icons (replace the dropdown so nothing gets clipped/mispositioned) */
    .ff-action-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        border-radius: 7px;
        color: var(--text-muted);
        text-decoration: none;
        transition: background 0.15s ease, color 0.15s ease;
    }
    .ff-action-btn + .ff-action-btn {
        margin-left: 4px;
    }
    .ff-action-btn:hover {
        background: var(--border-soft);
        color: var(--accent-color);
    }
    .ff-action-danger:hover {
        color: #dc2626;
    }

    /* Clickable customer / carrier / driver names */
    .ff-record-link {
        color: var(--text-main);
        text-decoration: none;
        font-weight: 500;
    }
    .ff-record-link:hover {
        color: var(--accent-color);
        text-decoration: underline;
    }

    /* Status badges colour-coded by state for quick scanning */
    .ff-status-badge {
        background: rgba(148, 163, 184, 0.18);
        color: var(--text-main);
        border: 1px solid rgba(148, 163, 184, 0.35);
        white-space: nowrap;
    }
    .ff-status-pending,
    .ff-status-open,
    .ff-status-quoted {
        background: rgba(239, 68, 68, 0.16);
        color: #dc2626;
        border-color: rgba(239, 68, 68, 0.35);
    }
    [data-theme="dark"] .ff-status-pending,
    [data-theme="dark"] .ff-status-open,
    [data-theme="dark"] .ff-status-quoted {
        color: #f87171;
    }
    .ff-status-covered {
        background: rgba(34, 197, 94, 0.16);
        color: #15803d;
        border-color: rgba(34, 197, 94, 0.4);
    }
    [data-theme="dark"] .ff-status-covered {
        color: #86efac;
    }
    .ff-status-dispatched,
    .ff-status-in-transit,
    .ff-status-on-route,
    .ff-status-assigned {
        background: rgba(245, 158, 11, 0.16);
        color: #d97706;
        border-color: rgba(245, 158, 11, 0.4);
    }
    [data-theme="dark"] .ff-status-dispatched,
    [data-theme="dark"] .ff-status-in-transit,
    [data-theme="dark"] .ff-status-on-route,
    [data-theme="dark"] .ff-status-assigned {
        color: #fcd34d;
    }
    .ff-status-delivered,
    .ff-status-completed,
    .ff-status-paid,
    .ff-status-invoiced {
        background: rgba(59, 130, 246, 0.16);
        color: #2563eb;
        border-color: rgba(59, 130, 246, 0.4);
    }
    [data-theme="dark"] .ff-status-delivered,
    [data-theme="dark"] .ff-status-completed,
    [data-theme="dark"] .ff-status-paid,
    [data-theme="dark"] .ff-status-invoiced {
        color: #93c5fd;
    }
    .ff-status-cancelled,
    .ff-status-on-hold,
    .ff-status-void {
        background: rgba(239, 68, 68, 0.16);
        color: #dc2626;
        border-color: rgba(239, 68, 68, 0.4);
    }
    [data-theme="dark"] .ff-status-cancelled,
    [data-theme="dark"] .ff-status-on-hold,
    [data-theme="dark"] .ff-status-void {
        color: #fca5a5;
    }
</style>
@endpush

@push('scripts')
<script>
    $(document).ready(function() {
        window.initDataTable('#loadsTable', {
            language: {
                emptyTable: "No loads found. Click 'Add Load' to create your first load."
            }
        });
    });
</script>
@endpush
@endsection