@extends('layouts.dashboard')
@section('title', isset($load) ? 'Edit Load' : 'New Active Load')

@push('styles')
<style>
    .load-section { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 20px; margin-bottom: 24px; box-shadow: var(--shadow-main); }
    .section-title { color: var(--accent-color); font-weight: 700; font-size: 1rem; margin-bottom: 16px; display: flex; align-items: center; border-bottom: 1px solid var(--border-color); padding-bottom: 10px; }
    .section-title i { margin-right: 10px; }
    .form-group-with-btn { position: relative; }
    .form-group-with-btn .btn-add { position: absolute; top: 32px; right: 8px; background: var(--accent-color); color: #000; border: none; border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 12px; cursor: pointer; z-index: 2; }
    .dispatch-location-wrap { position: relative; }
    .dispatch-location-results { position: absolute; top: 100%; left: 0; right: 0; max-height: 220px; overflow-y: auto; z-index: 1050; display: none; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; box-shadow: var(--shadow-main); }
    .dispatch-location-results .list-group-item { cursor: pointer; font-size: 13px; padding: 8px 12px; border: none; border-bottom: 1px solid var(--border-color); }
    .dispatch-location-results .list-group-item:hover { background: rgba(var(--accent-rgb, 255, 193, 7), 0.15); }
    .assignment-panel { display: none; }
    .assignment-panel.is-active { display: contents; }
    .load-tab-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
    .load-tab-bar .nav-tabs { flex: 1; margin-bottom: 0; }
    .load-tab-add { background: var(--bg-input); border: 1px solid var(--border-color); color: var(--text-main); width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
    .ff-stop-time-select {
        font-variant-numeric: tabular-nums;
    }

    .ff-stop-time-wrap .form-select {
        min-width: 7.5rem;
    }
    .form-group-with-info .btn-add { right: 8px; }
    .form-group-with-info .btn-company-info { position: absolute; top: 32px; right: 36px; width: 24px; height: 24px; border: none; border-radius: 50%; background: #3b82f6; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; cursor: pointer; z-index: 2; padding: 0; }
    .form-group-with-info .btn-company-info:hover { background: #2563eb; }
    .btn-company-info.flex-shrink-0 { width: 32px; height: 32px; border: none; border-radius: 50%; background: #3b82f6; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer; padding: 0; }
    .btn-company-info.flex-shrink-0:hover { background: #2563eb; }
    .dispatch-company-wrap { position: relative; }
    .dispatch-company-results { position: absolute; top: 100%; left: 0; right: 0; max-height: 220px; overflow-y: auto; z-index: 1050; display: none; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; box-shadow: var(--shadow-main); }
    .dispatch-company-results .list-group-item { cursor: pointer; font-size: 0.875rem; padding: 10px 12px; border: none; border-bottom: 1px solid var(--border-color); color: var(--text-main); text-align: left; }
    .dispatch-company-results .list-group-item:hover { background: rgba(255, 193, 7, 0.15); }
    .dispatch-company-results .list-group-item small { display: block; color: var(--text-muted); margin-top: 2px; }
    .btn-other-charges { width: 20px; height: 20px; border: none; border-radius: 50%; background: #3b82f6; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; cursor: pointer; padding: 0; }
    .btn-other-charges:hover { background: #2563eb; }
    .oc-table { width: 100%; border-collapse: collapse; }
    .oc-table th { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); padding: 8px 10px; border-bottom: 1px solid var(--border-color); text-align: left; }
    .oc-table td { padding: 5px 6px; border-bottom: 1px solid var(--border-soft); }
    .oc-table .form-control, .oc-table .form-check-input { font-size: 0.85rem; }
    .oc-amount { max-width: 130px; text-align: right; }
    .oc-gst-cell { text-align: center; width: 90px; }
    .oc-notes { font-size: 0.75rem; color: var(--text-muted); margin-top: 12px; }
    .lf-dropzone { border: 2px dashed var(--border-color); border-radius: 12px; padding: 26px 16px; text-align: center; color: var(--text-muted); transition: border-color 0.2s, background 0.2s; cursor: pointer; }
    .lf-dropzone.is-dragover { border-color: var(--accent-color); background: var(--accent-glow); color: var(--text-main); }
    .lf-dropzone i { font-size: 1.8rem; color: var(--accent-color); }
    .lf-file-table { width: 100%; border-collapse: collapse; margin-top: 16px; }
    .lf-file-table th { text-align: left; padding: 8px 10px; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); border-bottom: 1px solid var(--border-color); }
    .lf-file-table td { padding: 9px 10px; border-bottom: 1px solid var(--border-soft); font-size: 0.85rem; color: var(--text-main); vertical-align: middle; }
    .lf-file-actions a, .lf-file-actions button { border: none; background: transparent; cursor: pointer; font-size: 0.95rem; padding: 0 6px; }
    .lf-file-dl { color: #16a34a; }
    .lf-file-del { color: #dc2626; }
    .lf-file-empty { text-align: center; color: var(--text-muted); padding: 18px; }
    .lf-file-progress { display: none; font-size: 0.8rem; color: var(--accent-color); margin-top: 10px; }
    .ff-total-prefix { background: var(--bg-input); border-color: var(--border-color); color: var(--accent-color); font-weight: 700; }
    .ff-total-amount { background: var(--bg-input) !important; color: var(--text-main) !important; }
    .load-form-footer {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 12px;
        margin-top: 8px;
        padding-top: 20px;
        border-top: 1px solid var(--border-color);
    }
    .ff-internal-notes-modal .modal-content {
        background: #ffffff;
        color: #111827;
        border: 1px solid var(--border-color);
        box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
    }
    .ff-internal-notes-modal .modal-header {
        border-bottom: 1px solid var(--border-color);
        background: rgba(255, 193, 7, 0.12);
    }
    .ff-internal-notes-modal .modal-title {
        font-weight: 700;
        color: var(--accent-color);
    }
    .ff-internal-notes-modal .modal-body {
        max-height: min(70vh, 640px);
        overflow-y: auto;
        background: #ffffff;
        color: #111827;
    }
    .ff-internal-notes-modal .modal-footer {
        border-top: 1px solid var(--border-color);
        background: #f8fafc;
    }
    [data-theme="dark"] .ff-internal-notes-modal .modal-content,
    [data-theme="dark"] .ff-internal-notes-modal .modal-body {
        background: #1b1f27;
        color: #eef1f6;
    }
    [data-theme="dark"] .ff-internal-notes-modal .modal-header {
        background: rgba(255, 193, 7, 0.14);
        border-bottom-color: rgba(255, 255, 255, 0.12);
    }
    [data-theme="dark"] .ff-internal-notes-modal .modal-footer {
        background: #111827;
        border-top-color: rgba(255, 255, 255, 0.12);
    }
    [data-theme="dark"] .ff-internal-notes-modal .btn-close {
        filter: invert(1) grayscale(100%) brightness(200%);
    }
    .ff-internal-notes-section-title {
        font-weight: 800;
        font-size: 0.95rem;
        color: var(--accent-color);
        margin-bottom: 12px;
        text-transform: uppercase;
        letter-spacing: 0.4px;
    }
    .ff-internal-notes-entry + .ff-internal-notes-entry {
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid var(--border-soft);
    }
    .ff-internal-notes-company {
        font-weight: 700;
        margin-bottom: 8px;
        color: inherit;
    }
    .ff-internal-notes-text {
        white-space: pre-wrap;
        line-height: 1.6;
        font-size: 0.92rem;
        padding: 14px 16px;
        border-radius: 10px;
        border: 1px solid var(--border-color);
        background: #f8fafc;
        color: #111827;
    }
    [data-theme="dark"] .ff-internal-notes-text {
        background: #111827;
        color: #eef1f6;
        border-color: rgba(255, 255, 255, 0.12);
    }
    .ff-internal-notes-divider {
        margin: 22px 0;
        border: 0;
        border-top: 2px solid var(--accent-color);
        opacity: 0.45;
    }
</style>
@endpush

@section('content')
<div class="container-fluid py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2 class="ff-main-title m-0">
            <i class="fa-solid fa-truck-fast text-accent me-2"></i>
            {{ isset($load) ? 'Edit Load' : 'New Active Load' }}
        </h2>
        <div>
            <a href="{{ route('ui.loads') }}" class="btn ff-btn-secondary me-2 back-active-load-btn"><i class="fa-solid fa-arrow-left me-2"></i> Back</a>
            <button type="button" class="btn ff-btn-secondary px-4 cancel-active-load-btn">CANCEL</button>
            @if(isset($load))
                <button type="button" class="btn ff-btn-secondary px-4 ms-2" data-bs-toggle="modal" data-bs-target="#loadEmailModal"><i class="fa-solid fa-envelope me-2"></i> EMAIL</button>
                <button type="button" class="btn ff-btn-secondary px-4 ms-2" data-bs-toggle="modal" data-bs-target="#loadFilesModal"><i class="fa-solid fa-paperclip me-2"></i> FILES</button>
                <button type="button" class="btn ff-btn-secondary px-4 ms-2" data-bs-toggle="modal" data-bs-target="#loadNotesModal2"><i class="fa-solid fa-note-sticky me-2"></i> NOTES</button>
                <a href="{{ route('loads.confirmation', $load) }}" target="_blank" class="btn ff-btn-secondary px-4 ms-2"><i class="fa-solid fa-print me-2"></i> PRINT</a>
            @endif
            <button type="button" class="btn ff-btn-primary px-4 ms-2 save-active-load-btn"><i class="fa-solid fa-save me-2"></i> SAVE</button>
        </div>
    </div>

    <form id="activeLoadForm" data-load-id="{{ $load->id ?? '' }}"
          data-default-load-status-id="{{ $lookups['defaultLoadStatusId'] ?? '' }}"
          data-default-load-mode-id="{{ $lookups['defaultLoadModeId'] ?? '' }}">
        @if(isset($load))
            <input type="hidden" data-field="load_number" value="{{ $load->load_number }}">
        @endif

        <div class="load-section" data-multi-section="customer">
            <h5 class="section-title"><i class="fa-solid fa-users"></i> Customers</h5>
            <div class="load-tab-bar">
                <ul class="nav nav-tabs ff-nav-tabs" data-load-tab-nav="customer"></ul>
                <button type="button" class="load-tab-add" data-add-load-tab="customer" title="Add Customer"><i class="fa-solid fa-plus"></i></button>
            </div>
            <div data-load-tab-panels="customer">
                @include('ui.partials.active-load-customer-panel', [
                    'index' => 1,
                    'customer' => [
                        'customer_company_id' => $load->customer_company_id ?? '',
                        'bill_to_company_id' => $load->bill_to_company_id ?? '',
                    ],
                ])
                @if(isset($load))
                    @foreach($load->additionalCustomers ?? [] as $additionalCustomer)
                        @include('ui.partials.active-load-customer-panel', [
                            'index' => $additionalCustomer->sequence_no,
                            'customer' => [
                                'customer_company_id' => $additionalCustomer->customer_company_id,
                                'bill_to_company_id' => $additionalCustomer->bill_to_company_id,
                            ],
                        ])
                    @endforeach
                @endif
            </div>
        </div>

        <div class="load-section">
            <h5 class="section-title"><i class="fa-solid fa-circle-info"></i> Load Information</h5>
            <div class="row g-3">
                @if(isset($load))
                <div class="col-md-2">
                    <label class="ff-label text-muted">Load #</label>
                    <input type="text" class="form-control ff-input bg-light" value="{{ $load->load_number }}" readonly disabled>
                </div>
                @endif
                <div class="col-md-3">
                    <label class="ff-label">Dispatcher</label>
                    <select class="form-select ff-input" data-field="dispatcher_user_id" data-lookup="dispatcher" data-selected="{{ $load->dispatcher_user_id ?? auth()->id() }}" required></select>
                </div>
                <div class="col-md-4">
                    <label class="ff-label">Sales Rep 1</label>
                    <select class="form-select ff-input" data-field="sales_rep1_user_id" data-lookup="sales_rep" data-selected="{{ $load->sales_rep1_user_id ?? '' }}"></select>
                </div>
                <div class="col-md-2">
                    <label class="ff-label">W/O #</label>
                    <input type="text" class="form-control ff-input" data-field="wo_reference" value="{{ $load->wo_reference ?? '' }}">
                </div>
                <div class="col-md-2">
                    <label class="ff-label text-accent">Type</label>
                    <select class="form-select ff-input" data-field="load_mode_id" data-lookup="load_mode" data-selected="{{ $load->load_mode_id ?? '' }}" required></select>
                </div>
                <div class="col-md-2 d-flex align-items-end">
                    <div class="form-check mb-2">
                        <input type="checkbox" class="form-check-input" data-field="add_hst" id="addHstCheck" {{ ($load?->add_hst ?? false) ? 'checked' : '' }}>
                        <label class="form-check-label fw-bold text-danger" for="addHstCheck">Add HST</label>
                    </div>
                </div>
                <div class="col-md-2">
                    <label class="ff-label">Status</label>
                    <select class="form-select ff-input" data-field="load_status_id" data-lookup="load_status" data-selected="{{ $load->load_status_id ?? '' }}" required></select>
                </div>
                <div class="col-md-2">
                    <label class="ff-label text-accent">Rate</label>
                    <input type="text" inputmode="decimal" class="form-control ff-input ff-formatted-amount" data-field="rate" value="{{ format_amount($load->rate ?? null) }}">
                </div>
                <div class="col-md-1">
                    <label class="ff-label">P/Ds</label>
                    <input type="text" inputmode="decimal" class="form-control ff-input ff-formatted-amount" data-field="pd_amount" value="{{ format_amount($load->pd_amount ?? null) }}">
                </div>
                <div class="col-md-2">
                    <label class="ff-label">F.S.C. %</label>
                    <input type="number" step="0.01" class="form-control ff-input" data-field="fsc_rate_percent" value="{{ $load->fsc_rate_percent ?? '' }}">
                    <input type="checkbox" class="form-check-input mt-1" data-field="fsc_enabled" {{ ($load->fsc_enabled ?? false) ? 'checked' : '' }}>
                </div>
                <div class="col-md-2">
                    <label class="ff-label d-flex align-items-center gap-2">Other Charges
                        <button type="button" class="btn-other-charges" title="Other Charges / Advances" data-bs-toggle="modal" data-bs-target="#otherChargesModal"><i class="fa-solid fa-dollar-sign"></i></button>
                    </label>
                    <input type="text" inputmode="decimal" class="form-control ff-input ff-formatted-amount" data-field="other_charges" value="{{ format_amount($load->other_charges ?? null) }}" readonly>
                </div>
                <div class="col-md-2">
                    <label class="ff-label">Currency</label>
                    <select class="form-select ff-input" data-field="currency_code" data-lookup="currency" data-selected="{{ $load->currency_code ?? 'CAD' }}" required></select>
                </div>
                <div class="col-md-2">
                    <label class="ff-label text-accent">Total Amount</label>
                    <div class="input-group">
                        <span class="input-group-text ff-total-prefix">$</span>
                        <input type="text" class="form-control ff-input fw-bold ff-total-amount" id="loadTotalAmount" value="0.00" readonly>
                    </div>
                </div>

                <div class="col-12 mt-3 border-top border-color pt-3">
                    <div class="d-flex gap-4 mb-3 align-items-center">
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="assignment_type" value="carrier" id="carrierRadio" {{ ($load?->assignments?->first()?->assignment_type ?? 'carrier') === 'carrier' ? 'checked' : '' }}>
                            <label class="form-check-label fw-bold" for="carrierRadio">Carrier</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="assignment_type" value="driver" id="driverRadio" {{ ($load?->assignments?->first()?->assignment_type ?? 'carrier') === 'driver' ? 'checked' : '' }}>
                            <label class="form-check-label fw-bold text-accent" for="driverRadio">Driver</label>
                        </div>
                    </div>
                    <div class="row g-3" id="assignmentCarrierPanel" data-assignment-panel="carrier">
                        <div class="col-md-4 form-group-with-btn form-group-with-info">
                            <label class="ff-label">Carrier</label>
                            <select class="form-select ff-input" data-field="carrier_company_id" data-lookup="carrier" data-selected="{{ $load?->assignments?->first()?->carrier_company_id ?? '' }}"></select>
                            <button type="button" class="btn-company-info" title="View / edit carrier" data-open-company-details data-company-role="carrier" data-company-field="carrier_company_id"><i class="fa-solid fa-circle-info"></i></button>
                            <button type="button" class="btn-add" data-bs-toggle="modal" data-bs-target="#addCarrierModal"><i class="fa-solid fa-plus"></i></button>
                        </div>
                        <div class="col-md-3">
                            <label class="ff-label">Equipment Type</label>
                            <select class="form-select ff-input" data-field="assignment_equipment_type_id" data-lookup="equipment_type" data-selected="{{ $load?->assignments?->first()?->equipment_type_id ?? '' }}"></select>
                        </div>
                        <div class="col-md-2">
                            <label class="ff-label d-flex align-items-center gap-2">Carrier Fee
                                <button type="button" class="btn-other-charges" title="Other Carrier Charges" data-bs-toggle="modal" data-bs-target="#carrierChargesModal"><i class="fa-solid fa-dollar-sign"></i></button>
                            </label>
                            <input type="text" inputmode="decimal" class="form-control ff-input ff-formatted-amount" data-field="carrier_fee" value="{{ format_amount($load->carrier_fee ?? null) }}">
                            <input type="hidden" data-field="carrier_charges" value="{{ isset($load) && $load->carrier_charges ? e(json_encode($load->carrier_charges)) : '' }}">
                        </div>
                        <div class="col-md-3">
                            <label class="ff-label">Currency</label>
                            <select class="form-select ff-input" data-field="assignment_currency_code" data-lookup="currency" data-selected="{{ $load?->assignments?->first()?->currency_code ?? ($load?->currency_code ?? 'CAD') }}"></select>
                        </div>
                    </div>
                    <div class="row g-3" id="assignmentDriverPanel" data-assignment-panel="driver">
                        <div class="col-md-3 form-group-with-btn form-group-with-info">
                            <label class="ff-label">Driver</label>
                            <select class="form-select ff-input" data-field="driver_id" data-lookup="driver" data-selected="{{ $load?->assignments?->first()?->driver_id ?? '' }}"></select>
                            <button type="button" class="btn-company-info" title="View / edit driver" data-open-company-details data-company-role="driver" data-company-field="driver_id" data-fleet-entity="driver"><i class="fa-solid fa-circle-info"></i></button>
                            <button type="button" class="btn-add" data-bs-toggle="modal" data-bs-target="#addDriverModal"><i class="fa-solid fa-plus"></i></button>
                        </div>
                        <div class="col-md-2">
                            <label class="ff-label">Equipment Type</label>
                            <select class="form-select ff-input" data-field="driver_assignment_equipment_type_id" data-lookup="equipment_type" data-selected="{{ $load?->assignments?->first()?->equipment_type_id ?? '' }}"></select>
                        </div>
                        <div class="col-md-2 form-group-with-btn">
                            <label class="ff-label">Truck</label>
                            <select class="form-select ff-input" data-field="truck_id" data-lookup="truck" data-selected="{{ $load?->assignments?->first()?->truck_id ?? '' }}"></select>
                            <button type="button" class="btn-add" data-bs-toggle="modal" data-bs-target="#addTruckModal"><i class="fa-solid fa-plus"></i></button>
                        </div>
                        <div class="col-md-2 form-group-with-btn">
                            <label class="ff-label">Trailer</label>
                            <select class="form-select ff-input" data-field="trailer_id" data-lookup="trailer" data-selected="{{ $load?->assignments?->first()?->trailer_id ?? '' }}"></select>
                            <button type="button" class="btn-add" data-bs-toggle="modal" data-bs-target="#addTrailerModal"><i class="fa-solid fa-plus"></i></button>
                        </div>
                        <div class="col-md-3">
                            <label class="ff-label">Flat Rate</label>
                            <input type="text" inputmode="decimal" class="form-control ff-input ff-formatted-amount" data-field="flat_rate" value="{{ format_amount($load?->assignments?->first()?->flat_rate ?? null) }}">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="load-section" data-multi-section="shipper">
            <h5 class="section-title"><i class="fa-solid fa-warehouse"></i> Shippers</h5>
            <div class="load-tab-bar">
                <ul class="nav nav-tabs ff-nav-tabs" data-load-tab-nav="shipper"></ul>
                <button type="button" class="load-tab-add" data-add-load-tab="shipper" title="Add Shipper"><i class="fa-solid fa-plus"></i></button>
            </div>
            <div data-load-tab-panels="shipper">
                @php $shipperStops = isset($load) ? $load->shippers : collect(); @endphp
                @php $customsEntry = isset($load) ? $load->customsEntries?->first() : null; @endphp
                @forelse($shipperStops as $shipperIndex => $shipperStop)
                    @include('ui.partials.active-load-stop-panel', [
                        'stopType' => 'shipper',
                        'index' => $shipperIndex + 1,
                        'stop' => $shipperStop,
                        'customsEntry' => $shipperIndex === 0 ? $customsEntry : null,
                    ])
                @empty
                    @include('ui.partials.active-load-stop-panel', ['stopType' => 'shipper', 'index' => 1, 'stop' => null, 'customsEntry' => null])
                @endforelse
            </div>
        </div>

        <div class="load-section" data-multi-section="consignee">
            <h5 class="section-title"><i class="fa-solid fa-flag-checkered"></i> Consignees</h5>
            <div class="load-tab-bar">
                <ul class="nav nav-tabs ff-nav-tabs" data-load-tab-nav="consignee"></ul>
                <button type="button" class="load-tab-add" data-add-load-tab="consignee" title="Add Consignee"><i class="fa-solid fa-plus"></i></button>
            </div>
            <div data-load-tab-panels="consignee">
                @php $consigneeStops = isset($load) ? $load->consignees : collect(); @endphp
                @forelse($consigneeStops as $consigneeIndex => $consigneeStop)
                    @include('ui.partials.active-load-stop-panel', ['stopType' => 'consignee', 'index' => $consigneeIndex + 1, 'stop' => $consigneeStop])
                @empty
                    @include('ui.partials.active-load-stop-panel', ['stopType' => 'consignee', 'index' => 1, 'stop' => null])
                @endforelse
            </div>
        </div>

        <template id="shipperPanelTemplate">
            @include('ui.partials.active-load-stop-panel', ['stopType' => 'shipper', 'index' => '__INDEX__', 'stop' => null])
        </template>
        <template id="consigneePanelTemplate">
            @include('ui.partials.active-load-stop-panel', ['stopType' => 'consignee', 'index' => '__INDEX__', 'stop' => null])
        </template>
        <template id="customerPanelTemplate">
            @include('ui.partials.active-load-customer-panel', ['index' => '__INDEX__', 'customer' => []])
        </template>

        <div class="load-form-footer">
            <button type="button" class="btn ff-btn-secondary px-4 cancel-active-load-btn">CANCEL</button>
            <button type="button" class="btn ff-btn-primary px-4 save-active-load-btn"><i class="fa-solid fa-save me-2"></i> SAVE</button>
        </div>
    </form>
</div>

@php
    $existingCharges = $load?->charges?->where('entry_type', 'charge')->values() ?? collect();
    $existingAdvances = $load?->charges?->where('entry_type', 'advance')->values() ?? collect();
    $carrierData = (isset($load) && is_array($load->carrier_charges)) ? $load->carrier_charges : [];
    $carrierAgreed = $carrierData['agreed'] ?? [];
    $carrierChargeRows = $carrierData['charges'] ?? [];
    $carrierAdvanceRows = $carrierData['advances'] ?? [];
@endphp
<div class="modal fade" id="otherChargesModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content ff-modal-content">
            <div class="modal-header ff-modal-header">
                <h5 class="modal-title"><i class="fa-solid fa-circle-dollar-to-slot text-accent me-2"></i>Other Charges</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <ul class="nav nav-tabs mb-3" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" type="button" data-bs-toggle="tab" data-bs-target="#ocChargesPane" role="tab">Charges</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" type="button" data-bs-toggle="tab" data-bs-target="#ocAdvancesPane" role="tab">Advances</button>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane fade show active" id="ocChargesPane" role="tabpanel">
                        <table class="oc-table">
                            <thead>
                                <tr>
                                    <th>Charge</th>
                                    <th style="width:140px;">Amount</th>
                                    <th class="oc-gst-cell">Add GST</th>
                                </tr>
                            </thead>
                            <tbody>
                                @for ($i = 0; $i < 6; $i++)
                                    @php($row = $existingCharges->get($i))
                                    <tr data-charge-row>
                                        <td><input type="text" class="form-control ff-input" maxlength="180" data-charge-field="description" value="{{ $row->description ?? '' }}"></td>
                                        <td><input type="text" inputmode="decimal" class="form-control ff-input oc-amount ff-formatted-amount" data-charge-field="amount" value="{{ $row?->amount !== null && $row !== null ? format_amount($row->amount) : '' }}" placeholder="0.00"></td>
                                        <td class="oc-gst-cell"><input type="checkbox" class="form-check-input" data-charge-field="add_gst" {{ ($row?->add_gst ?? false) ? 'checked' : '' }}></td>
                                    </tr>
                                @endfor
                            </tbody>
                        </table>
                    </div>
                    <div class="tab-pane fade" id="ocAdvancesPane" role="tabpanel">
                        <table class="oc-table">
                            <thead>
                                <tr>
                                    <th>Advance</th>
                                    <th style="width:160px;">Date</th>
                                    <th style="width:140px;">Amount</th>
                                </tr>
                            </thead>
                            <tbody>
                                @for ($i = 0; $i < 3; $i++)
                                    @php($row = $existingAdvances->get($i))
                                    <tr data-advance-row>
                                        <td><input type="text" class="form-control ff-input" maxlength="180" data-advance-field="description" value="{{ $row->description ?? '' }}"></td>
                                        <td><input type="date" class="form-control ff-input" data-advance-field="advanced_on" value="{{ $row?->advanced_on?->format('Y-m-d') ?? '' }}"></td>
                                        <td><input type="text" inputmode="decimal" class="form-control ff-input oc-amount ff-formatted-amount" data-advance-field="amount" value="{{ $row?->amount !== null && $row !== null ? format_amount($row->amount) : '' }}" placeholder="0.00"></td>
                                    </tr>
                                @endfor
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="oc-notes">
                    * Total Amount Calculated on Edit/Add Load.<br>
                    * Information saved when load is saved.
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary btn-sm px-4" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-warning btn-sm px-4 fw-bold" id="otherChargesOkBtn">OK</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="carrierChargesModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content ff-modal-content">
            <div class="modal-header ff-modal-header">
                <h5 class="modal-title"><i class="fa-solid fa-truck-fast text-accent me-2"></i>Other Carrier Charges</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <ul class="nav nav-tabs mb-3" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" type="button" data-bs-toggle="tab" data-bs-target="#ccAgreedPane" role="tab">Agreed Rate</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" type="button" data-bs-toggle="tab" data-bs-target="#ccChargesPane" role="tab">Charges</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" type="button" data-bs-toggle="tab" data-bs-target="#ccAdvancesPane" role="tab">Advances</button>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane fade show active" id="ccAgreedPane" role="tabpanel">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="ff-label">Type</label>
                                <select class="form-select ff-input" data-lookup="load_mode" data-cc-field="type_id" data-selected="{{ $carrierAgreed['type_id'] ?? '' }}"></select>
                            </div>
                            <div class="col-md-3">
                                <label class="ff-label">Rate</label>
                                <input type="text" inputmode="decimal" class="form-control ff-input ff-formatted-amount" data-cc-field="rate" value="{{ isset($carrierAgreed['rate']) ? format_amount($carrierAgreed['rate']) : '' }}">
                            </div>
                            <div class="col-md-3">
                                <label class="ff-label">Picks/Drops</label>
                                <input type="text" inputmode="decimal" class="form-control ff-input ff-formatted-amount" data-cc-field="picks_drops" value="{{ isset($carrierAgreed['picks_drops']) ? format_amount($carrierAgreed['picks_drops']) : '' }}">
                            </div>
                            <div class="col-md-3">
                                <label class="ff-label">F.S.C.</label>
                                <input type="text" inputmode="decimal" class="form-control ff-input ff-formatted-amount" data-cc-field="fsc" value="{{ isset($carrierAgreed['fsc']) ? format_amount($carrierAgreed['fsc']) : '' }}">
                            </div>
                            <div class="col-md-3 d-flex align-items-end">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" data-cc-field="rate_percent" id="ccRatePercent" {{ ($carrierAgreed['rate_percent'] ?? false) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="ccRatePercent">Rate %</label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label class="ff-label text-accent">Total Rate</label>
                                <input type="text" class="form-control ff-input fw-bold" id="ccTotalRate" value="0.00" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="ccChargesPane" role="tabpanel">
                        <table class="oc-table">
                            <thead>
                                <tr>
                                    <th>Charge</th>
                                    <th style="width:160px;">Amount</th>
                                </tr>
                            </thead>
                            <tbody>
                                @for ($i = 0; $i < 6; $i++)
                                    @php($ccRow = $carrierChargeRows[$i] ?? null)
                                    <tr data-cc-charge-row>
                                        <td><input type="text" class="form-control ff-input" maxlength="180" data-cc-charge-field="description" value="{{ $ccRow['description'] ?? '' }}"></td>
                                        <td><input type="text" inputmode="decimal" class="form-control ff-input oc-amount ff-formatted-amount" data-cc-charge-field="amount" value="{{ isset($ccRow['amount']) ? format_amount($ccRow['amount']) : '' }}" placeholder="0.00"></td>
                                    </tr>
                                @endfor
                            </tbody>
                        </table>
                    </div>
                    <div class="tab-pane fade" id="ccAdvancesPane" role="tabpanel">
                        @for ($i = 0; $i < 3; $i++)
                            @php($ccAdv = $carrierAdvanceRows[$i] ?? null)
                            <div class="row g-2 mb-3 pb-2 border-bottom border-color" data-cc-advance-row>
                                <div class="col-md-4">
                                    <label class="ff-label">Other Amount # {{ $i + 1 }}</label>
                                    <input type="text" inputmode="decimal" class="form-control ff-input ff-formatted-amount" data-cc-advance-field="amount" value="{{ isset($ccAdv['amount']) ? format_amount($ccAdv['amount']) : '' }}" placeholder="0.00">
                                </div>
                                <div class="col-md-4">
                                    <label class="ff-label">Date</label>
                                    <input type="date" class="form-control ff-input" data-cc-advance-field="advanced_on" value="{{ $ccAdv['advanced_on'] ?? '' }}">
                                </div>
                                <div class="col-md-4">
                                    <label class="ff-label">Type</label>
                                    <input type="text" class="form-control ff-input" maxlength="120" data-cc-advance-field="type" value="{{ $ccAdv['type'] ?? '' }}">
                                </div>
                                <div class="col-12">
                                    <label class="ff-label">Notes</label>
                                    <input type="text" class="form-control ff-input" maxlength="180" data-cc-advance-field="notes" value="{{ $ccAdv['notes'] ?? '' }}">
                                </div>
                            </div>
                        @endfor
                    </div>
                </div>
                <div class="d-flex justify-content-end gap-4 mt-3 pt-2 border-top border-color">
                    <div class="text-end">
                        <div class="ff-label mb-1">Total Amount</div>
                        <div class="fs-5 fw-bold text-accent" id="ccTotalAmount">$0.00</div>
                    </div>
                    <div class="text-end">
                        <div class="ff-label mb-1">Balance Owing</div>
                        <div class="fs-5 fw-bold" id="ccBalanceOwing">$0.00</div>
                    </div>
                </div>
                <div class="oc-notes">* Total Amount calculated on Edit/Add Load. * Information saved when load is saved.</div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary btn-sm px-4" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-warning btn-sm px-4 fw-bold" id="carrierChargesOkBtn">OK</button>
            </div>
        </div>
    </div>
</div>

@if(isset($load))
<div class="modal fade" id="loadFilesModal" tabindex="-1" aria-hidden="true" data-files-url="{{ route('loads.files.index', $load) }}" data-files-upload-url="{{ route('loads.files.store', $load) }}">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content ff-modal-content">
            <div class="modal-header ff-modal-header">
                <h5 class="modal-title"><i class="fa-solid fa-paperclip text-accent me-2"></i>Files</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="lf-dropzone" id="loadFilesDropzone">
                    <i class="fa-solid fa-cloud-arrow-up d-block mb-2"></i>
                    Drag and drop files here, or <span class="text-accent fw-bold">choose a file</span>
                    <input type="file" id="loadFilesInput" multiple class="d-none">
                </div>
                <div class="lf-file-progress" id="loadFilesProgress"><i class="fa-solid fa-spinner fa-spin me-1"></i> Uploading…</div>

                <table class="lf-file-table">
                    <thead>
                        <tr>
                            <th>File</th>
                            <th style="width:90px;">Size</th>
                            <th style="width:150px;">Uploaded</th>
                            <th style="width:90px;">Options</th>
                        </tr>
                    </thead>
                    <tbody id="loadFilesList">
                        <tr><td colspan="4" class="lf-file-empty">Loading…</td></tr>
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary btn-sm px-4" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
@endif

@if(isset($load))
<div class="modal fade" id="loadNotesModal2" tabindex="-1" aria-hidden="true"
     data-notes-url="{{ route('accounting.loads.notes', $load) }}"
     data-notes-save-url="{{ route('accounting.loads.save-notes', $load) }}">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content ff-modal-content">
            <div class="modal-header ff-modal-header">
                <h5 class="modal-title"><i class="fa-solid fa-note-sticky text-accent me-2"></i>Additional Load Notes</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <ul class="nav nav-tabs ff-modal-tabs" role="tablist">
                    <li class="nav-item"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#lnt-notes" type="button">Notes</button></li>
                    <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#lnt-recv" type="button">Receivables</button></li>
                    <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#lnt-internal" type="button">Internal Notes</button></li>
                    <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#lnt-contacts" type="button">Contacts</button></li>
                </ul>

                <div class="tab-content pt-3">
                    <div class="tab-pane fade show active" id="lnt-notes">
                        <div class="mb-3">
                            <label class="ff-label">Load Number</label>
                            <input type="text" class="form-control ff-input" value="{{ $load->load_number }}" readonly>
                        </div>
                        <div class="mb-2"><label class="ff-label">Driver Pay Notes</label><textarea class="form-control ff-input" rows="2" data-note="driver_pay_notes"></textarea></div>
                        <div class="mb-2"><label class="ff-label">Driver Pay Notes <em class="text-muted">(Appear On Report)</em></label><textarea class="form-control ff-input" rows="2" data-note="driver_pay_notes_report"></textarea></div>
                        <div class="mb-2"><label class="ff-label">Invoice Notes</label><textarea class="form-control ff-input" rows="2" data-note="invoice_notes"></textarea></div>
                        <div class="mb-2"><label class="ff-label">Invoice Notes <em class="text-muted">(Appear on Invoice)</em></label><textarea class="form-control ff-input" rows="2" data-note="invoice_notes_print"></textarea></div>
                        <div class="mb-2"><label class="ff-label">HST Number <em class="text-muted">(Appears on Invoice)</em></label><input type="text" class="form-control ff-input" data-note="hst_number"></div>
                        <div class="mb-2"><label class="ff-label">Invoice Description <em class="text-muted">(In Quickbooks)</em></label><textarea class="form-control ff-input" rows="2" data-note="invoice_description"></textarea></div>
                        <div class="mb-2"><label class="ff-label">Deleted/Refusal Notes</label><textarea class="form-control ff-input" rows="2" data-note="deleted_refusal_notes"></textarea></div>
                    </div>

                    <div class="tab-pane fade" id="lnt-recv">
                        <div class="row g-2">
                            <div class="col-md-6"><label class="ff-label">Invoice Number</label><input type="text" class="form-control ff-input" data-recv="invoice_number" readonly></div>
                            <div class="col-md-6"><label class="ff-label">Invoice Date</label><input type="text" class="form-control ff-input" data-recv="invoice_date" readonly></div>
                            <div class="col-md-6"><label class="ff-label">Amount</label><input type="text" class="form-control ff-input" data-recv="amount" readonly></div>
                            <div class="col-md-6"><label class="ff-label">Customer</label><input type="text" class="form-control ff-input" data-recv="customer" readonly></div>
                            <div class="col-md-6"><label class="ff-label">Contact</label><input type="text" class="form-control ff-input" data-recv="contact" readonly></div>
                            <div class="col-md-4"><label class="ff-label">Telephone</label><input type="text" class="form-control ff-input" data-recv="telephone" readonly></div>
                            <div class="col-md-2"><label class="ff-label">Ext</label><input type="text" class="form-control ff-input" data-recv="extension" readonly></div>
                            <div class="col-md-6"><label class="ff-label">Toll Free</label><input type="text" class="form-control ff-input" data-recv="toll_free" readonly></div>
                            <div class="col-md-6"><label class="ff-label">Fax</label><input type="text" class="form-control ff-input" data-recv="fax" readonly></div>
                            <div class="col-12"><label class="ff-label">Notes</label><textarea class="form-control ff-input" rows="3" data-note="receivables_notes"></textarea></div>
                        </div>
                    </div>

                    <div class="tab-pane fade" id="lnt-internal">
                        <label class="ff-label">Internal Notes</label>
                        <textarea class="form-control ff-input" rows="8" data-note="internal_notes"></textarea>
                    </div>

                    <div class="tab-pane fade" id="lnt-contacts">
                        <div class="row g-2">
                            <div class="col-md-4"><label class="ff-label">Dispatcher Name</label><input type="text" class="form-control ff-input" data-note="dispatcher_name"></div>
                            <div class="col-md-4"><label class="ff-label">Dispatcher Phone</label><input type="text" class="form-control ff-input" data-note="dispatcher_phone"></div>
                            <div class="col-md-4"><label class="ff-label">Dispatcher Email</label><input type="text" class="form-control ff-input" data-note="dispatcher_email"></div>
                            <div class="col-md-4"><label class="ff-label">Driver Name</label><input type="text" class="form-control ff-input" data-note="driver_name"></div>
                            <div class="col-md-4"><label class="ff-label">Driver Phone</label><input type="text" class="form-control ff-input" data-note="driver_phone"></div>
                            <div class="col-md-4"><label class="ff-label">Driver Email</label><input type="text" class="form-control ff-input" data-note="driver_email"></div>
                            <div class="col-md-6"><label class="ff-label">Truck</label><input type="text" class="form-control ff-input" data-note="truck"></div>
                            <div class="col-md-6"><label class="ff-label">Trailer</label><input type="text" class="form-control ff-input" data-note="trailer"></div>
                            <div class="col-12"><label class="ff-label">Notes</label><textarea class="form-control ff-input" rows="3" data-note="contacts_notes"></textarea></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary btn-sm px-4" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-warning btn-sm px-4 fw-bold" id="loadNotesSaveBtn">SAVE</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="loadEmailModal" tabindex="-1" aria-hidden="true" data-email-url="{{ route('loads.email', $load) }}">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content ff-modal-content">
            <div class="modal-header ff-modal-header">
                <h5 class="modal-title"><i class="fa-solid fa-envelope text-accent me-2"></i>Mailer</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-2">
                    <label class="ff-label">Recipient <span class="text-danger">*</span></label>
                    <input type="email" class="form-control ff-input" id="emailRecipient" placeholder="name@example.com">
                </div>
                <div class="form-check mb-2">
                    <input class="form-check-input" type="checkbox" id="emailSendCopy">
                    <label class="form-check-label" for="emailSendCopy">Send me a copy</label>
                </div>
                <div class="mb-2">
                    <label class="ff-label">Subject <span class="text-danger">*</span></label>
                    <input type="text" class="form-control ff-input" id="emailSubject" value="Flink Freight Solutions - Load {{ $load->load_number }}">
                </div>
                <div class="mb-2">
                    <label class="ff-label">Message</label>
                    <textarea class="form-control ff-input" id="emailMessage" rows="6">Hello,

Please find the load confirmation attached for Load {{ $load->load_number }}.

Regards,
Flink Freight Solutions</textarea>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="emailAttachPdf" checked>
                    <label class="form-check-label" for="emailAttachPdf">Attach Load Confirmation PDF</label>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary btn-sm px-4" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-warning btn-sm px-4 fw-bold" id="loadEmailSendBtn">SEND</button>
            </div>
        </div>
    </div>
</div>
@endif

<div class="modal fade ff-internal-notes-modal" id="internalStopNotesModal" tabindex="-1" aria-labelledby="internalStopNotesModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="internalStopNotesModalLabel">
                    <i class="fa-solid fa-note-sticky text-accent me-2"></i> Shipper &amp; Consignee Internal Notes
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" data-internal-notes-body></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-accent px-4" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

@include('ui.modals')
@endsection