@extends('layouts.dashboard')

@section('page_title', 'Accounting Manager')

@php
    $tabs = [
        'delivered' => ['label' => 'Delivered', 'icon' => 'fa-truck-ramp-box'],
        'completed' => ['label' => 'Completed', 'icon' => 'fa-clipboard-check'],
        'invoiced'  => ['label' => 'Invoiced', 'icon' => 'fa-file-invoice-dollar'],
        'paid'      => ['label' => 'Invoice / Paid', 'icon' => 'fa-circle-check'],
    ];

    $searchFields = [
        'all'              => 'Search All',
        'load_number'      => 'Load Number',
        'invoice_number'   => 'Invoice Number',
        'customer'         => 'Customer',
        'dispatcher'       => 'Dispatcher',
        'carrier'          => 'Carrier',
        'driver'           => 'Driver',
        'truck'            => 'Truck',
        'trailer'          => 'Trailer',
        'work_order'       => 'Work Order #',
        'shipper'          => 'Shipper',
        'origin_city'      => 'Origin City',
        'origin_state'     => 'Origin State',
        'po_numbers'       => 'P.O. Numbers',
        'consignee'        => 'Consignee',
        'destination_city' => 'Destination City',
    ];

    $carrierDriverLabel = function ($load) {
        $carrier = $load->assignments->firstWhere('assignment_type', 'carrier');
        if ($carrier && $carrier->carrierCompany) {
            return $carrier->carrierCompany->display_name;
        }
        $driver = $load->assignments->firstWhere('assignment_type', 'driver');
        if ($driver && $driver->driver) {
            return $driver->driver->full_name;
        }
        return '—';
    };

    $shipDate = function ($load) {
        $stop = $load->shippers->first();
        return $stop && $stop->scheduled_at ? $stop->scheduled_at->format('Y-m-d') : '—';
    };
@endphp

@push('styles')
<style>
    .ff-acc-tabwrap { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
    .ff-acc-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
    .ff-acc-tplpick { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; margin-bottom: 4px; border-radius: 10px; background: var(--accent-glow); border: 1px solid rgba(245, 158, 11, 0.35); }
    .ff-acc-tplpick i { color: var(--accent-color); }
    .ff-acc-tplpick label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); margin: 0; }
    .ff-acc-tplpick .form-select { height: 34px; font-size: 0.82rem; min-width: 190px; font-weight: 600; }
    .ff-acc-tab {
        display: inline-flex; align-items: center; gap: 8px;
        padding: 10px 18px; border-radius: 10px 10px 0 0;
        font-weight: 600; font-size: 0.85rem; text-decoration: none;
        color: var(--text-muted); border: 1px solid transparent; border-bottom: none;
        transition: all 0.2s ease;
    }
    .ff-acc-tab:hover { color: var(--accent-color); background: var(--accent-glow); }
    .ff-acc-tab.active {
        color: var(--accent-color);
        background: var(--bg-card);
        border-color: rgba(245, 158, 11, 0.35);
        box-shadow: 0 -2px 12px var(--accent-glow);
    }
    [data-theme="dark"] .ff-acc-tab.active { background: rgba(20, 26, 42, 0.6); border-color: rgba(255, 200, 75, 0.3); }
    .ff-acc-tab .ff-acc-count {
        background: var(--accent-color); color: #1e1f22;
        font-size: 0.7rem; font-weight: 800; border-radius: 999px;
        padding: 1px 8px; line-height: 1.4;
    }

    .ff-acc-panel {
        border: 1px solid rgba(245, 158, 11, 0.22);
        border-radius: 0 14px 14px 14px;
        background: var(--bg-card);
        box-shadow: var(--shadow-main);
        overflow: hidden;
    }
    [data-theme="dark"] .ff-acc-panel { background: rgba(20, 26, 42, 0.55); border-color: rgba(255, 200, 75, 0.16); }

    .ff-acc-toolbar {
        display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px;
        padding: 16px; border-bottom: 1px solid var(--border-soft);
    }
    .ff-acc-toolbar .ff-acc-field { display: flex; flex-direction: column; gap: 4px; }
    .ff-acc-toolbar label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); }
    .ff-acc-toolbar .form-select, .ff-acc-toolbar .form-control { height: 38px; font-size: 0.85rem; }
    .ff-acc-search-btn {
        height: 38px; padding: 0 22px; border: none; border-radius: 8px;
        background: linear-gradient(90deg, #ffd04a 0%, #f3b221 100%);
        color: #1e1f22; font-weight: 700; font-size: 0.8rem;
        box-shadow: 0 4px 14px var(--accent-glow);
    }
    .ff-acc-batch {
        margin-left: auto; display: flex; align-items: flex-end; gap: 8px;
        padding: 10px 14px; border-radius: 10px;
        background: var(--accent-glow); border: 1px dashed rgba(245, 158, 11, 0.4);
    }

    .ff-acc-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
    .ff-acc-table th {
        text-align: left; padding: 12px 14px; font-size: 0.72rem; font-weight: 800;
        text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted);
        background: var(--bg-toolbar); border-bottom: 1px solid var(--border-color); white-space: nowrap;
    }
    [data-theme="dark"] .ff-acc-table th { background: rgba(255, 255, 255, 0.04); }
    .ff-acc-table td { padding: 12px 14px; border-bottom: 1px solid var(--border-soft); color: var(--text-main); vertical-align: middle; }
    .ff-acc-table tbody tr:hover td { background: var(--accent-glow); }
    .ff-acc-load { font-weight: 800; color: var(--accent-color); }
    .ff-acc-inv { font-weight: 700; }

    .ff-acc-row--exported td { background: rgba(34, 197, 94, 0.10); box-shadow: inset 4px 0 0 #22c55e; }
    .ff-acc-row--batch td { background: rgba(239, 68, 68, 0.10); box-shadow: inset 4px 0 0 #ef4444; }
    .ff-acc-row--both td { background: rgba(243, 178, 33, 0.12); box-shadow: inset 4px 0 0 #f3b221; }

    .ff-acc-icon-btn {
        display: inline-flex; align-items: center; justify-content: center;
        width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--border-color);
        background: transparent; color: var(--text-muted); cursor: pointer; transition: all 0.18s ease; text-decoration: none;
    }
    .ff-acc-icon-btn:hover { border-color: var(--accent-color); color: var(--accent-color); transform: translateY(-1px); }
    .ff-acc-notes:hover { border-color: #f3b221; color: #f3b221; }
    .ff-acc-email:hover { border-color: #38bdf8; color: #38bdf8; }
    .ff-acc-invoice-btn:hover { border-color: #22c55e; color: #22c55e; }
    .ff-acc-aging { font-weight: 700; border-radius: 999px; padding: 3px 11px; font-size: 0.75rem; }
    .ff-acc-aging--ok { background: rgba(34, 197, 94, 0.15); color: #16a34a; }
    .ff-acc-aging--warn { background: rgba(245, 158, 11, 0.16); color: #d97706; }
    .ff-acc-aging--late { background: rgba(239, 68, 68, 0.16); color: #dc2626; }

    .ff-acc-legend { display: flex; flex-wrap: wrap; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--border-soft); font-size: 0.78rem; color: var(--text-muted); }
    .ff-acc-legend span { display: inline-flex; align-items: center; gap: 6px; }
    .ff-acc-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

    .ff-acc-empty { text-align: center; padding: 48px 16px; color: var(--text-muted); }
    .ff-acc-pager { padding: 14px 16px; }
    .ff-acc-pager .pagination { margin: 0; }
    .ff-link-paid { background: none; border: none; color: var(--accent-color); font-weight: 700; font-size: 0.72rem; cursor: pointer; padding: 0; text-transform: uppercase; }

    .ff-acc-modal { background: var(--bg-card); color: var(--text-main); border: 1px solid rgba(245, 158, 11, 0.25); border-radius: 14px; }
    [data-theme="dark"] .ff-acc-modal { background: #141a2a; border-color: rgba(255, 200, 75, 0.18); }
    .ff-acc-modal .modal-header, .ff-acc-modal .modal-footer { border-color: var(--border-soft); }
    .ff-acc-modal-tabs { border-bottom: 1px solid var(--border-color); flex-wrap: wrap; }
    .ff-acc-modal-tabs .nav-link { color: var(--text-muted); font-weight: 600; font-size: 0.82rem; border: none; border-bottom: 2px solid transparent; background: none; }
    .ff-acc-modal-tabs .nav-link:hover { color: var(--accent-color); }
    .ff-acc-modal-tabs .nav-link.active { color: var(--accent-color); background: none; border-bottom-color: var(--accent-color); }
    .ff-acc-modal .ff-label { font-size: 0.72rem; font-weight: 700; color: var(--text-muted); margin-bottom: 3px; }
    .ff-acc-modal .ff-input[readonly] { background: var(--bg-toolbar); opacity: 0.85; }

    .ff-inv-preview-modal .modal-dialog { max-width: 96vw; }
    .ff-inv-preview-modal .modal-body { background: var(--bg-toolbar); }
    .ff-inv-preview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
    @media (max-width: 992px) { .ff-inv-preview-grid { grid-template-columns: 1fr; } }
    .ff-inv-preview-col {
        background: var(--bg-card); border: 1px solid rgba(245, 158, 11, 0.28);
        border-radius: 12px; overflow: hidden; display: flex; flex-direction: column;
    }
    [data-theme="dark"] .ff-inv-preview-col { border-color: rgba(255, 200, 75, 0.2); }
    .ff-inv-preview-head {
        padding: 10px 14px; border-bottom: 1px solid var(--border-soft);
        display: flex; align-items: center; justify-content: space-between; gap: 8px;
    }
    .ff-inv-preview-head .name { font-weight: 800; font-size: 0.85rem; color: var(--accent-color); }
    .ff-inv-preview-frame-wrap { flex: 1; min-height: 420px; background: #fff; overflow: auto; }
    .ff-inv-preview-frame-wrap iframe { width: 100%; height: 520px; border: none; display: block; }
    .ff-inv-preview-foot { padding: 12px 14px; border-top: 1px solid var(--border-soft); text-align: center; }
    .ff-inv-preview-loading { text-align: center; padding: 48px; color: var(--text-muted); }
</style>
@endpush

@section('content')
<div class="container-fluid px-0">
    @php $qs = request()->only(['search_field', 'search', 'date_from', 'date_to', 'customer_id']); @endphp

    <div class="ff-acc-tabwrap">
        <div class="ff-acc-tabs">
            @foreach ($tabs as $key => $meta)
                <a href="{{ route('accounting.index', array_merge($qs, ['tab' => $key])) }}"
                   class="ff-acc-tab {{ $tab === $key ? 'active' : '' }}">
                    <i class="fa-solid {{ $meta['icon'] }}"></i> {{ $meta['label'] }}
                </a>
            @endforeach
        </div>
    </div>

    <div class="ff-acc-panel">
        <form method="GET" action="{{ route('accounting.index') }}" class="ff-acc-toolbar">
            <input type="hidden" name="tab" value="{{ $tab }}">
            <div class="ff-acc-field">
                <label>Search Field</label>
                <select name="search_field" class="form-select ff-input">
                    @foreach ($searchFields as $value => $label)
                        <option value="{{ $value }}" @selected($filters['search_field'] === $value)>{{ $label }}</option>
                    @endforeach
                </select>
            </div>
            <div class="ff-acc-field" style="flex: 1 1 200px; min-width: 180px;">
                <label>Keyword</label>
                <input type="text" name="search" value="{{ $filters['search'] }}" class="form-control ff-input" placeholder="Search...">
            </div>
            <div class="ff-acc-field">
                <label>From</label>
                <input type="date" name="date_from" value="{{ $filters['date_from'] }}" class="form-control ff-input">
            </div>
            <div class="ff-acc-field">
                <label>To</label>
                <input type="date" name="date_to" value="{{ $filters['date_to'] }}" class="form-control ff-input">
            </div>
            <button type="submit" class="ff-acc-search-btn"><i class="fa-solid fa-magnifying-glass me-1"></i> SEARCH</button>

            @if ($tab === 'completed')
                <div class="ff-acc-batch">
                    <button type="button" id="batchInvoiceBtn" class="ff-acc-search-btn"><i class="fa-solid fa-file-invoice me-1"></i> INVOICE SELECTED</button>
                </div>
            @endif
        </form>

        @if (in_array($tab, ['invoiced', 'paid']))
            <div class="ff-acc-legend">
                <span><i style="background:#22c55e;"></i> Exported</span>
                <span><i style="background:#ef4444;"></i> Batch Invoice</span>
                <span><i style="background:#f3b221;"></i> Exported &amp; Batch Invoice</span>
            </div>
        @endif

        <div class="table-responsive">
            <table class="ff-acc-table">
                <thead>
                    <tr>
                        @if ($tab === 'completed')
                            <th style="width:40px;"><input type="checkbox" id="checkAll" class="form-check-input"></th>
                        @endif
                        <th>Load #</th>
                        @if (in_array($tab, ['invoiced', 'paid']))
                            <th>Invoice #</th>
                            <th>Invoice Date</th>
                        @else
                            <th>Ship Date</th>
                        @endif
                        <th>Customer</th>
                        <th>Driver / Carrier</th>
                        @if ($tab === 'invoiced')
                            <th>Paid</th>
                            <th>Aging</th>
                        @elseif ($tab === 'paid')
                            <th>Paid</th>
                            <th>Days To Pay</th>
                        @endif
                        <th class="text-center">Options</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($loads as $load)
                        @php
                            $record = $load->accountingRecord;
                            $rowClass = '';
                            if ($record) {
                                if ($record->is_exported && $record->is_batch_invoice) { $rowClass = 'ff-acc-row--both'; }
                                elseif ($record->is_exported) { $rowClass = 'ff-acc-row--exported'; }
                                elseif ($record->is_batch_invoice) { $rowClass = 'ff-acc-row--batch'; }
                            }
                            $aging = $record?->agingDays();
                            $agingClass = $aging === null ? '' : ($aging > 30 ? 'ff-acc-aging--late' : ($aging > 14 ? 'ff-acc-aging--warn' : 'ff-acc-aging--ok'));
                        @endphp
                        <tr class="{{ $rowClass }}">
                            @if ($tab === 'completed')
                                <td><input type="checkbox" class="form-check-input ff-acc-check" value="{{ $load->id }}" data-customer="{{ $load->customer_company_id }}"></td>
                            @endif
                            <td><span class="ff-acc-load">{{ $load->load_number }}</span></td>
                            @if (in_array($tab, ['invoiced', 'paid']))
                                <td><span class="ff-acc-inv">{{ $record?->invoice_number ?? '—' }}</span></td>
                                <td>{{ $record?->invoiced_at?->format('Y-m-d') ?? '—' }}</td>
                            @else
                                <td>{{ $shipDate($load) }}</td>
                            @endif
                            <td>{{ $load->customerCompany?->display_name ?? '—' }}</td>
                            <td>{{ $carrierDriverLabel($load) }}</td>

                            @if ($tab === 'invoiced')
                                <td>
                                    <button type="button" class="ff-link-paid" data-action="mark-paid" data-load="{{ $load->id }}" data-load-number="{{ $load->load_number }}"
                                        data-prev-reference="{{ $record?->payment_reference_number }}"
                                        data-prev-date="{{ $record?->payment_date?->format('Y-m-d') }}"
                                        data-prev-document-name="{{ $record?->payment_document_original_name }}">
                                        <i class="fa-regular fa-square me-1"></i> Mark Paid
                                    </button>
                                </td>
                                <td><span class="ff-acc-aging {{ $agingClass }}">{{ $aging ?? 0 }}</span></td>
                            @elseif ($tab === 'paid')
                                <td>
                                    <button type="button" class="ff-link-paid" data-action="mark-unpaid" data-load="{{ $load->id }}"
                                        data-prev-reason="{{ data_get($record?->notes, 'unpaid_reason') }}"
                                        data-prev-reason-at="{{ data_get($record?->notes, 'unpaid_reason_at') }}"
                                        data-prev-reason-by="{{ data_get($record?->notes, 'unpaid_reason_by') }}">
                                        <i class="fa-regular fa-square-check me-1"></i> Mark Unpaid
                                    </button>
                                </td>
                                <td>{{ $record?->daysToPay() ?? '—' }}</td>
                            @endif

                            <td class="text-center">
                                <div class="d-inline-flex gap-1">
                                    <a href="{{ route('ui.active-load', ['load' => $load, 'referrer' => request()->fullUrl()]) }}" class="ff-acc-icon-btn" title="Edit Load"><i class="fa-solid fa-pen"></i></a>

                                    @if ($tab === 'delivered')
                                        <button type="button" class="ff-acc-icon-btn" title="Mark Completed" data-action="complete" data-load="{{ $load->id }}"><i class="fa-solid fa-folder-plus"></i></button>
                                    @elseif ($tab === 'completed')
                                        <button type="button" class="ff-acc-icon-btn ff-acc-notes" title="Add Notes" data-action="notes" data-load="{{ $load->id }}"><i class="fa-solid fa-note-sticky"></i></button>
                                        <button type="button" class="ff-acc-icon-btn" title="Revert to Delivered" data-action="revert-delivered" data-load="{{ $load->id }}"><i class="fa-solid fa-rotate-left"></i></button>
                                        <button type="button" class="ff-acc-icon-btn ff-acc-invoice-btn" title="Create Invoice" data-action="invoice-single" data-load="{{ $load->id }}"><i class="fa-solid fa-file-invoice-dollar"></i></button>
                                    @elseif ($tab === 'invoiced')
                                        <button type="button" class="ff-acc-icon-btn ff-acc-notes" title="Add Notes" data-action="notes" data-load="{{ $load->id }}"><i class="fa-solid fa-note-sticky"></i></button>
                                        <button type="button" class="ff-acc-icon-btn" title="Download Invoice PDF" data-action="download-pdf" data-load="{{ $load->id }}"><i class="fa-solid fa-file-pdf"></i></button>
                                        <button type="button" class="ff-acc-icon-btn ff-acc-email" title="Email Invoice" data-action="email" data-load="{{ $load->id }}"><i class="fa-solid fa-envelope"></i></button>
                                        <button type="button" class="ff-acc-icon-btn" title="Reset Invoice" data-action="reset-invoice" data-load="{{ $load->id }}"><i class="fa-solid fa-rotate-left"></i></button>
                                    @elseif ($tab === 'paid')
                                        <button type="button" class="ff-acc-icon-btn" title="Download Invoice PDF" data-action="download-pdf" data-load="{{ $load->id }}"><i class="fa-solid fa-file-pdf"></i></button>
                                        <button type="button" class="ff-acc-icon-btn ff-acc-email" title="Email Invoice" data-action="email" data-load="{{ $load->id }}"><i class="fa-solid fa-envelope"></i></button>
                                        <button type="button" class="ff-acc-icon-btn" title="Reset Invoice" data-action="reset-invoice" data-load="{{ $load->id }}"><i class="fa-solid fa-rotate-left"></i></button>
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="9" class="ff-acc-empty">
                                <i class="fa-regular fa-folder-open mb-2 d-block" style="font-size:1.8rem;"></i>
                                No {{ $tabs[$tab]['label'] }} loads found for the selected filters.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="ff-acc-pager d-flex justify-content-between align-items-center flex-wrap gap-2">
            <div class="small text-muted">Showing {{ $loads->firstItem() ?? 0 }}–{{ $loads->lastItem() ?? 0 }} of {{ $loads->total() }}</div>
            {{ $loads->links('pagination::bootstrap-5') }}
        </div>
    </div>

    {{-- Edit Load notes modal --}}
    <div class="modal fade" id="loadNotesModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content ff-acc-modal">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="fa-solid fa-pen-to-square text-accent me-2"></i>Edit Load</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="notesLoadId">

                    <ul class="nav nav-tabs ff-acc-modal-tabs" role="tablist">
                        <li class="nav-item"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#nt-notes" type="button">Notes</button></li>
                        <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#nt-recv" type="button">Receivables</button></li>
                        <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#nt-internal" type="button">Internal Notes</button></li>
                        <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#nt-contacts" type="button">Contacts</button></li>
                    </ul>

                    <div class="tab-content pt-3">
                        {{-- Notes --}}
                        <div class="tab-pane fade show active" id="nt-notes">
                            <div class="mb-3">
                                <label class="ff-label">Load Number</label>
                                <input type="text" class="form-control ff-input" id="notesLoadNumber" 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>

                        {{-- Receivables --}}
                        <div class="tab-pane fade" id="nt-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>

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

                        {{-- Contacts --}}
                        <div class="tab-pane fade" id="nt-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" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="ff-acc-search-btn" id="notesSaveBtn"><i class="fa-solid fa-floppy-disk me-1"></i> SAVE</button>
                </div>
            </div>
        </div>
    </div>

    {{-- Mark Paid confirmation modal --}}
    <div class="modal fade" id="markPaidModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content ff-acc-modal">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="fa-solid fa-circle-check text-accent me-2"></i>Confirm Payment Received</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="markPaidLoadId">
                    <div class="alert alert-warning small mb-3">
                        To prevent marking the wrong invoice as paid, re-type the load number below and attach proof of payment.
                    </div>
                    <div class="mb-3">
                        <label class="ff-label">Load Number <span class="text-danger">*</span></label>
                        <input type="text" class="form-control ff-input" id="markPaidLoadNumberDisplay" readonly>
                    </div>
                    <div class="mb-3">
                        <label class="ff-label">Re-type Load Number to Confirm <span class="text-danger">*</span></label>
                        <input type="text" class="form-control ff-input" id="markPaidLoadNumberConfirm" autocomplete="off">
                        <div class="invalid-feedback d-block d-none" id="markPaidLoadNumberError">Load number does not match.</div>
                    </div>
                    <div class="mb-3">
                        <label class="ff-label">Cheque / Remittance Number <span class="text-danger">*</span></label>
                        <input type="text" class="form-control ff-input" id="markPaidReferenceNumber">
                    </div>
                    <div class="mb-3">
                        <label class="ff-label">Payment Date <span class="text-danger">*</span></label>
                        <input type="date" class="form-control ff-input" id="markPaidDate">
                    </div>
                    <div class="mb-2">
                        <label class="ff-label">Cheque Copy / Remittance Document <span class="text-danger" id="markPaidDocumentRequiredMark">*</span></label>
                        <input type="file" class="form-control ff-input" id="markPaidDocument">
                        <div class="form-text d-none" id="markPaidPrevDocumentHint"></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="ff-acc-search-btn" id="markPaidSaveBtn"><i class="fa-solid fa-floppy-disk me-1"></i> MARK PAID</button>
                </div>
            </div>
        </div>
    </div>

    {{-- Mark Unpaid reason modal --}}
    <div class="modal fade" id="markUnpaidModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content ff-acc-modal">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="fa-solid fa-rotate-left text-accent me-2"></i>Mark Invoice Unpaid</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="markUnpaidLoadId">
                    <div class="alert alert-secondary small mb-3 d-none" id="markUnpaidPrevReasonHint"></div>
                    <div class="mb-2">
                        <label class="ff-label">Reason for Marking Unpaid <span class="text-danger">*</span></label>
                        <textarea class="form-control ff-input" id="markUnpaidReason" rows="4" placeholder="e.g. payment reversed by the bank, wrong invoice marked paid by mistake..."></textarea>
                        <div class="invalid-feedback d-block d-none" id="markUnpaidReasonError">A reason is required.</div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="ff-acc-search-btn" id="markUnpaidSaveBtn"><i class="fa-solid fa-rotate-left me-1"></i> MARK UNPAID</button>
                </div>
            </div>
        </div>
    </div>

    {{-- Email Invoice modal --}}
    <div class="modal fade" id="emailInvoiceModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content ff-acc-modal">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="fa-solid fa-envelope text-accent me-2"></i>Email Invoice <span id="emailInvoiceNumberLabel"></span></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="emailInvoiceLoadId">
                    <div class="mb-3">
                        <label class="ff-label">Email To <span class="text-danger">*</span></label>
                        <input type="text" class="form-control ff-input" id="emailInvoiceRecipient" placeholder="name@example.com; name2@example.com">
                        <div class="form-text">Separate multiple addresses with a semicolon (;).</div>
                    </div>
                    <div class="mb-3">
                        <label class="ff-label">Subject <span class="text-danger">*</span></label>
                        <input type="text" class="form-control ff-input" id="emailInvoiceSubject">
                    </div>
                    <div class="mb-3">
                        <label class="ff-label">Message</label>
                        <textarea class="form-control ff-input" id="emailInvoiceMessage" rows="5"></textarea>
                    </div>
                    <div class="mb-2">
                        <label class="ff-label">Invoice Attachment</label>
                        <div class="d-flex align-items-center gap-2 p-2 border rounded">
                            <button type="button" class="btn p-0 border-0" id="emailInvoiceDownloadIcon" title="Download this invoice">
                                <i class="fa-solid fa-file-pdf text-danger fs-4"></i>
                            </button>
                            <button type="button" class="form-select ff-input text-start flex-grow-1" id="emailInvoiceAttachToggle" aria-expanded="false">
                                <span id="emailInvoiceAttachToggleLabel">Invoice.pdf</span>
                                <i class="fa-solid fa-chevron-down float-end mt-1" style="font-size: 0.7rem;"></i>
                            </button>
                        </div>
                        <div class="border rounded p-2 mt-1 d-none" id="emailInvoiceAttachMenu" style="max-height: 180px; overflow-y: auto;">
                            <div class="form-check border-bottom pb-2 mb-2">
                                <input class="form-check-input" type="checkbox" id="emailInvoiceAttachAll">
                                <label class="form-check-label fw-bold" for="emailInvoiceAttachAll">Select all</label>
                            </div>
                            <div id="emailInvoiceAttachItems"></div>
                            <div class="text-muted small d-none" id="emailInvoiceAttachEmpty">No other open invoices for this customer.</div>
                        </div>
                    </div>
                    <div class="mb-2">
                        <label class="ff-label">POD Attachment</label>
                        <div class="d-flex align-items-center gap-2 p-2 border rounded">
                            <i class="fa-solid fa-file-pdf text-muted fs-4"></i>
                            <select class="form-select ff-input flex-grow-1" id="emailPodAttachSelect">
                                <option value="">No POD attached</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="ff-acc-search-btn" id="emailInvoiceSendBtn"><i class="fa-solid fa-paper-plane me-1"></i> SEND</button>
                </div>
            </div>
        </div>
    </div>

    {{-- Invoice template preview modal --}}
    <div class="modal fade ff-inv-preview-modal" id="invoicePreviewModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content ff-acc-modal">
                <div class="modal-header">
                    <div>
                        <h5 class="modal-title mb-0"><i class="fa-solid fa-file-invoice-dollar text-accent me-2"></i>Choose Invoice Template</h5>
                        <div class="small text-muted mt-1" id="invoicePreviewSubtitle">Preview all templates with live load data, then download your choice.</div>
                    </div>
                    <div class="d-flex align-items-center gap-2 me-3">
                        <label for="invoicePreviewCurrency" class="small fw-bold text-muted mb-0">Invoice Currency</label>
                        <select id="invoicePreviewCurrency" class="form-select form-select-sm ff-input" style="width: 150px;">
                            @foreach ($currencies as $currency)
                                <option value="{{ $currency->code }}">{{ $currency->code }} — {{ $currency->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="invoicePreviewLoadId">
                    <div id="invoicePreviewLoading" class="ff-inv-preview-loading">
                        <i class="fa-solid fa-spinner fa-spin fa-2x mb-2 d-block"></i>
                        Loading invoice previews…
                    </div>
                    <div id="invoicePreviewGrid" class="ff-inv-preview-grid d-none"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const csrf = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');

    function post(url, body) {
        return fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrf,
                'Accept': 'application/json',
            },
            body: body ? JSON.stringify(body) : null,
        }).then(async (res) => {
            const data = await res.json().catch(() => ({}));
            if (!res.ok) {
                throw new Error(data.message || 'Action failed.');
            }
            return data;
        });
    }

    function patch(url, body) {
        return fetch(url, {
            method: 'PATCH',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrf,
                'Accept': 'application/json',
            },
            body: body ? JSON.stringify(body) : null,
        }).then(async (res) => {
            const data = await res.json().catch(() => ({}));
            if (!res.ok) {
                throw new Error(data.message || 'Action failed.');
            }
            return data;
        });
    }

    const loadsBase = `{{ url('accounting/loads') }}`;
    const routes = {
        complete: (id) => `${loadsBase}/${id}/complete`,
        'mark-paid': (id) => `${loadsBase}/${id}/mark-paid`,
        'mark-unpaid': (id) => `${loadsBase}/${id}/mark-unpaid`,
        'mark-exported': (id) => `${loadsBase}/${id}/mark-exported`,
        'reset-invoice': (id) => `${loadsBase}/${id}/reset-invoice`,
        'revert-delivered': (id) => `${loadsBase}/${id}/status`,
    };

    const previewModalEl = document.getElementById('invoicePreviewModal');
    const previewModal = previewModalEl ? new bootstrap.Modal(previewModalEl) : null;
    let previewReloadOnClose = false;

    const downloadInvoice = (id, templateId) => {
        const a = document.createElement('a');
        a.href = `${loadsBase}/${id}/invoice/download?template=${templateId || '2'}&_ts=${Date.now()}`;
        document.body.appendChild(a);
        a.click();
        a.remove();
    };

    function renderInvoicePreviews(data) {
        const grid = document.getElementById('invoicePreviewGrid');
        const loading = document.getElementById('invoicePreviewLoading');
        grid.innerHTML = '';

        (data.templates || []).forEach((tpl) => {
            const col = document.createElement('div');
            col.className = 'ff-inv-preview-col';
            col.innerHTML = `
                <div class="ff-inv-preview-head">
                    <span class="name"><i class="fa-solid fa-file-lines me-1"></i> ${tpl.name}</span>
                    <span class="badge text-bg-secondary">Template ${tpl.id}</span>
                </div>
                <div class="ff-inv-preview-frame-wrap">
                    <iframe title="${tpl.name} invoice preview" sandbox="allow-same-origin"></iframe>
                </div>
                <div class="ff-inv-preview-foot">
                    <button type="button" class="ff-acc-search-btn btn-sm ff-inv-download-btn" data-template="${tpl.id}">
                        <i class="fa-solid fa-download me-1"></i> Download PDF
                    </button>
                </div>
            `;
            col.querySelector('iframe').srcdoc = tpl.html;
            grid.appendChild(col);
        });

        grid.querySelectorAll('.ff-inv-download-btn').forEach((btn) => {
            btn.addEventListener('click', function () {
                const loadId = document.getElementById('invoicePreviewLoadId').value;
                downloadInvoice(parseInt(loadId, 10), btn.getAttribute('data-template'));
                if (window.showToast) { window.showToast('Invoice PDF download started.', 'success'); }
            });
        });

        loading.classList.add('d-none');
        grid.classList.remove('d-none');
    }

    function openInvoicePreview(loadId, reloadOnClose = false) {
        if (!previewModal) { return; }

        previewReloadOnClose = reloadOnClose;
        document.getElementById('invoicePreviewLoadId').value = loadId;
        document.getElementById('invoicePreviewLoading').classList.remove('d-none');
        document.getElementById('invoicePreviewGrid').classList.add('d-none');
        document.getElementById('invoicePreviewGrid').innerHTML = '';
        document.getElementById('invoicePreviewSubtitle').textContent = 'Loading previews…';
        previewModal.show();

        fetch(`${loadsBase}/${loadId}/invoice/preview`, { cache: 'no-store', headers: { 'Accept': 'application/json' } })
            .then((res) => res.json().then((data) => ({ ok: res.ok, data })))
            .then(({ ok, data }) => {
                if (!ok) { throw new Error(data.message || 'Unable to load invoice previews.'); }
                document.getElementById('invoicePreviewSubtitle').textContent =
                    `Load #${data.load_number} · Invoice #${data.invoice_number} — pick a template and download.`;
                const currencySelect = document.getElementById('invoicePreviewCurrency');
                if (currencySelect && data.currency) {
                    currencySelect.value = data.currency;
                }
                renderInvoicePreviews(data);
            })
            .catch((err) => {
                previewModal.hide();
                if (window.showToast) { window.showToast(err.message, 'danger'); }
            });
    }

    const invoicePreviewCurrencySelect = document.getElementById('invoicePreviewCurrency');
    if (invoicePreviewCurrencySelect) {
        invoicePreviewCurrencySelect.addEventListener('change', function () {
            const loadId = document.getElementById('invoicePreviewLoadId').value;
            if (!loadId) { return; }

            invoicePreviewCurrencySelect.disabled = true;
            patch(`${loadsBase}/${loadId}/currency`, { currency_code: invoicePreviewCurrencySelect.value })
                .then(() => {
                    if (window.showToast) { window.showToast('Invoice currency updated for this load only.', 'success'); }
                    openInvoicePreview(parseInt(loadId, 10), previewReloadOnClose);
                })
                .catch((err) => {
                    if (window.showToast) { window.showToast(err.message, 'danger'); }
                })
                .finally(() => {
                    invoicePreviewCurrencySelect.disabled = false;
                });
        });
    }

    if (previewModalEl) {
        previewModalEl.addEventListener('hidden.bs.modal', function () {
            if (previewReloadOnClose) {
                previewReloadOnClose = false;
                window.location.reload();
            }
        });
    }

    // ---- Notes (Edit Load) modal ----
    const notesModalEl = document.getElementById('loadNotesModal');
    const notesModal = notesModalEl ? new bootstrap.Modal(notesModalEl) : null;

    function setNote(name, value) {
        const el = notesModalEl.querySelector(`[data-note="${name}"]`);
        if (el) { el.value = value ?? ''; }
    }

    function openNotes(id) {
        document.getElementById('notesLoadId').value = id;
        fetch(`${loadsBase}/${id}/notes`, { headers: { 'Accept': 'application/json' } })
            .then((res) => res.json())
            .then((data) => {
                document.getElementById('notesLoadNumber').value = data.load_number || '';
                Object.entries(data.notes || {}).forEach(([k, v]) => setNote(k, v));
                Object.entries(data.contacts || {}).forEach(([k, v]) => setNote(k, v));
                Object.entries(data.receivables || {}).forEach(([k, v]) => {
                    const el = notesModalEl.querySelector(`[data-recv="${k}"]`);
                    if (el) {
                        if (v === null || v === undefined) {
                            el.value = 'N/A';
                        } else if (k === 'amount' && window.FlinkAmount) {
                            el.value = window.FlinkAmount.formatMoney(v);
                        } else {
                            el.value = v;
                        }
                    }
                });
                notesModal.show();
            })
            .catch(() => { if (window.showToast) { window.showToast('Unable to load notes.', 'danger'); } });
    }

    const notesSaveBtn = document.getElementById('notesSaveBtn');
    if (notesSaveBtn) {
        notesSaveBtn.addEventListener('click', function () {
            const id = document.getElementById('notesLoadId').value;
            const payload = {};
            notesModalEl.querySelectorAll('[data-note]').forEach((el) => {
                payload[el.getAttribute('data-note')] = el.value;
            });
            notesSaveBtn.disabled = true;
            post(`${loadsBase}/${id}/notes`, payload)
                .then((data) => {
                    if (window.showToast) { window.showToast(data.message || 'Saved.', 'success'); }
                    notesModal.hide();
                })
                .catch((err) => { if (window.showToast) { window.showToast(err.message, 'danger'); } })
                .finally(() => { notesSaveBtn.disabled = false; });
        });
    }

    // ---- Mark Paid modal ----
    const markPaidModalEl = document.getElementById('markPaidModal');
    const markPaidModal = markPaidModalEl ? new bootstrap.Modal(markPaidModalEl) : null;

    function openMarkPaid(id, loadNumber, prevReference, prevDate, prevDocumentName) {
        document.getElementById('markPaidLoadId').value = id;
        document.getElementById('markPaidLoadNumberDisplay').value = loadNumber || '';
        document.getElementById('markPaidLoadNumberConfirm').value = '';
        // Pre-fill from the last time this invoice was marked paid (kept on
        // the record even after Mark Unpaid), so re-confirming payment
        // doesn't mean re-typing everything from scratch.
        document.getElementById('markPaidReferenceNumber').value = prevReference || '';
        document.getElementById('markPaidDate').value = prevDate || '';
        document.getElementById('markPaidDocument').value = '';
        document.getElementById('markPaidLoadNumberError').classList.add('d-none');

        const prevDocHint = document.getElementById('markPaidPrevDocumentHint');
        const requiredMark = document.getElementById('markPaidDocumentRequiredMark');
        if (prevDocumentName) {
            // Built with textContent/createTextNode (not innerHTML) for the
            // filename specifically, since it's a user-supplied upload name
            // and must not be interpreted as HTML.
            prevDocHint.textContent = 'Already on file: ';
            const link = document.createElement('a');
            link.href = `${loadsBase}/${id}/payment-document`;
            link.target = '_blank';
            link.rel = 'noopener';
            const icon = document.createElement('i');
            icon.className = 'fa-solid fa-download me-1';
            link.appendChild(icon);
            link.appendChild(document.createTextNode(prevDocumentName));
            prevDocHint.appendChild(link);
            prevDocHint.appendChild(document.createTextNode('. Attaching a new document is optional — leave blank to keep this one.'));
            prevDocHint.classList.remove('d-none');
            // A document is already on file, so re-attaching isn't mandatory.
            requiredMark.classList.add('d-none');
        } else {
            prevDocHint.classList.add('d-none');
            requiredMark.classList.remove('d-none');
        }

        markPaidModal.show();
    }

    const markPaidSaveBtn = document.getElementById('markPaidSaveBtn');
    if (markPaidSaveBtn) {
        markPaidSaveBtn.addEventListener('click', function () {
            const id = document.getElementById('markPaidLoadId').value;
            const expectedLoadNumber = (document.getElementById('markPaidLoadNumberDisplay').value || '').trim();
            const typedLoadNumber = (document.getElementById('markPaidLoadNumberConfirm').value || '').trim();
            const errorEl = document.getElementById('markPaidLoadNumberError');

            if (typedLoadNumber !== expectedLoadNumber) {
                errorEl.classList.remove('d-none');
                return;
            }
            errorEl.classList.add('d-none');

            const form = new FormData();
            form.append('load_number_confirm', typedLoadNumber);
            form.append('payment_reference_number', document.getElementById('markPaidReferenceNumber').value);
            form.append('payment_date', document.getElementById('markPaidDate').value);
            const fileInput = document.getElementById('markPaidDocument');
            if (fileInput.files[0]) {
                form.append('payment_document', fileInput.files[0]);
            }

            markPaidSaveBtn.disabled = true;
            fetch(routes['mark-paid'](id), {
                method: 'POST',
                headers: { 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' },
                body: form,
            })
                .then(async (res) => {
                    const data = await res.json().catch(() => ({}));
                    if (!res.ok) { throw new Error(data.message || 'Unable to mark invoice as paid.'); }
                    return data;
                })
                .then((data) => {
                    if (window.showToast) { window.showToast(data.message || 'Invoice marked as paid.', 'success'); }
                    markPaidModal.hide();
                    setTimeout(() => window.location.reload(), 700);
                })
                .catch((err) => {
                    if (window.showToast) { window.showToast(err.message, 'danger'); }
                })
                .finally(() => { markPaidSaveBtn.disabled = false; });
        });
    }

    // ---- Mark Unpaid modal ----
    const markUnpaidModalEl = document.getElementById('markUnpaidModal');
    const markUnpaidModal = markUnpaidModalEl ? new bootstrap.Modal(markUnpaidModalEl) : null;

    function openMarkUnpaid(id, prevReason, prevReasonAt, prevReasonBy) {
        if (!markUnpaidModal) { return; }
        document.getElementById('markUnpaidLoadId').value = id;
        document.getElementById('markUnpaidReason').value = '';
        document.getElementById('markUnpaidReasonError').classList.add('d-none');

        const prevReasonHint = document.getElementById('markUnpaidPrevReasonHint');
        if (prevReason) {
            // textContent only - prevReason/prevReasonBy are free-text values
            // entered by a user, never treated as HTML.
            const who = prevReasonBy ? ` by ${prevReasonBy}` : '';
            const when = prevReasonAt ? ` on ${prevReasonAt}` : '';
            prevReasonHint.textContent = `Last marked unpaid${when}${who} — reason given: "${prevReason}"`;
            prevReasonHint.classList.remove('d-none');
        } else {
            prevReasonHint.classList.add('d-none');
        }

        markUnpaidModal.show();
    }

    const markUnpaidSaveBtn = document.getElementById('markUnpaidSaveBtn');
    if (markUnpaidSaveBtn) {
        markUnpaidSaveBtn.addEventListener('click', function () {
            const id = document.getElementById('markUnpaidLoadId').value;
            const reason = document.getElementById('markUnpaidReason').value.trim();
            const errorEl = document.getElementById('markUnpaidReasonError');

            if (!reason) {
                errorEl.classList.remove('d-none');
                return;
            }
            errorEl.classList.add('d-none');

            markUnpaidSaveBtn.disabled = true;
            post(routes['mark-unpaid'](id), { reason })
                .then((data) => {
                    if (window.showToast) { window.showToast(data.message || 'Invoice marked as unpaid.', 'success'); }
                    markUnpaidModal.hide();
                    setTimeout(() => window.location.reload(), 700);
                })
                .catch((err) => {
                    if (window.showToast) { window.showToast(err.message, 'danger'); }
                })
                .finally(() => { markUnpaidSaveBtn.disabled = false; });
        });
    }

    // ---- Email Invoice modal ----
    const emailInvoiceModalEl = document.getElementById('emailInvoiceModal');
    const emailInvoiceModal = emailInvoiceModalEl ? new bootstrap.Modal(emailInvoiceModalEl) : null;

    let emailInvoiceCurrentNumber = '';

    document.getElementById('emailInvoiceDownloadIcon')?.addEventListener('click', function () {
        const id = document.getElementById('emailInvoiceLoadId').value;
        if (!id) { return; }
        downloadInvoice(parseInt(id, 10), '1');
    });

    document.getElementById('emailInvoiceAttachToggle')?.addEventListener('click', function () {
        const menu = document.getElementById('emailInvoiceAttachMenu');
        const willOpen = menu.classList.contains('d-none');
        menu.classList.toggle('d-none', !willOpen);
        this.setAttribute('aria-expanded', String(willOpen));

        const chevron = this.querySelector('.fa-chevron-down, .fa-chevron-up');
        if (chevron) {
            chevron.classList.toggle('fa-chevron-down', !willOpen);
            chevron.classList.toggle('fa-chevron-up', willOpen);
        }
    });

    function updateEmailAttachToggleLabel() {
        const checked = document.querySelectorAll('#emailInvoiceAttachItems .email-invoice-attach-item:checked').length;
        const label = document.getElementById('emailInvoiceAttachToggleLabel');
        label.textContent = checked > 0
            ? `${checked + 1} invoices selected`
            : (emailInvoiceCurrentNumber ? `Invoice_${emailInvoiceCurrentNumber}.pdf` : 'Invoice.pdf');
    }

    function renderEmailAttachItems(items) {
        const container = document.getElementById('emailInvoiceAttachItems');
        const emptyMsg = document.getElementById('emailInvoiceAttachEmpty');
        const selectAll = document.getElementById('emailInvoiceAttachAll');
        container.innerHTML = '';
        selectAll.checked = false;

        if (!items || !items.length) {
            emptyMsg.classList.remove('d-none');
            selectAll.disabled = true;
            return;
        }

        emptyMsg.classList.add('d-none');
        selectAll.disabled = false;

        items.forEach((inv) => {
            const domId = `emailInvoiceAttach_${inv.id}`;
            const wrap = document.createElement('div');
            wrap.className = 'form-check';
            wrap.innerHTML = `
                <input class="form-check-input email-invoice-attach-item" type="checkbox" value="${inv.id}" id="${domId}">
                <label class="form-check-label" for="${domId}">Invoice ${inv.invoice_number || '—'} (Load ${inv.load_number})</label>
            `;
            container.appendChild(wrap);
        });
    }

    document.getElementById('emailInvoiceAttachAll')?.addEventListener('change', function () {
        document.querySelectorAll('#emailInvoiceAttachItems .email-invoice-attach-item').forEach((el) => {
            el.checked = this.checked;
        });
        updateEmailAttachToggleLabel();
    });

    document.getElementById('emailInvoiceAttachItems')?.addEventListener('change', function (event) {
        if (!event.target.classList.contains('email-invoice-attach-item')) { return; }

        const items = document.querySelectorAll('#emailInvoiceAttachItems .email-invoice-attach-item');
        const allChecked = items.length > 0 && Array.from(items).every((el) => el.checked);
        document.getElementById('emailInvoiceAttachAll').checked = allChecked;
        updateEmailAttachToggleLabel();
    });

    function openEmailInvoice(id) {
        if (!emailInvoiceModal) { return; }

        emailInvoiceCurrentNumber = '';
        document.getElementById('emailInvoiceLoadId').value = id;
        document.getElementById('emailInvoiceRecipient').value = '';
        document.getElementById('emailInvoiceSubject').value = '';
        document.getElementById('emailInvoiceMessage').value = '';
        document.getElementById('emailInvoiceNumberLabel').textContent = '';
        document.getElementById('emailInvoiceAttachToggleLabel').textContent = 'Loading…';
        renderEmailAttachItems([]);

        const attachMenu = document.getElementById('emailInvoiceAttachMenu');
        attachMenu.classList.add('d-none');
        const attachToggle = document.getElementById('emailInvoiceAttachToggle');
        attachToggle.setAttribute('aria-expanded', 'false');
        attachToggle.querySelector('.fa-chevron-up')?.classList.replace('fa-chevron-up', 'fa-chevron-down');

        // Reset POD dropdown
        const podSelect = document.getElementById('emailPodAttachSelect');
        if (podSelect) {
            podSelect.innerHTML = '<option value="">No POD attached</option>';
        }

        fetch(`${loadsBase}/${id}/email`, { headers: { 'Accept': 'application/json' } })
            .then((res) => res.json())
            .then((data) => {
                document.getElementById('emailInvoiceRecipient').value = data.recipient || '';
                document.getElementById('emailInvoiceSubject').value = data.subject || '';
                document.getElementById('emailInvoiceMessage').value = data.message || '';
                document.getElementById('emailInvoiceNumberLabel').textContent = data.invoice_number ? `# ${data.invoice_number}` : '';
                emailInvoiceCurrentNumber = data.invoice_number || '';
                renderEmailAttachItems(data.attachable_invoices || []);
                updateEmailAttachToggleLabel();

                // Populate POD dropdown if POD is available
                if (data.has_pod && podSelect) {
                    podSelect.innerHTML = `
                        <option value="">No POD attached</option>
                        <option value="pod">POD_${data.invoice_number || 'Load'}.pdf</option>
                    `;
                }
            })
            .catch(() => {
                if (window.showToast) { window.showToast('Unable to load invoice email details.', 'danger'); }
            });

        emailInvoiceModal.show();
    }

    const emailInvoiceSendBtn = document.getElementById('emailInvoiceSendBtn');
    if (emailInvoiceSendBtn) {
        emailInvoiceSendBtn.addEventListener('click', function () {
            const id = document.getElementById('emailInvoiceLoadId').value;
            const recipient = document.getElementById('emailInvoiceRecipient').value.trim();

            if (!recipient) {
                if (window.showToast) { window.showToast('Enter at least one email address.', 'danger'); }
                return;
            }

            const additionalLoadIds = Array.from(document.querySelectorAll('#emailInvoiceAttachItems .email-invoice-attach-item:checked'))
                .map((el) => parseInt(el.value, 10));

            const podSelect = document.getElementById('emailPodAttachSelect');
            const attachPod = podSelect && podSelect.value === 'pod';

            const payload = {
                recipient,
                subject: document.getElementById('emailInvoiceSubject').value,
                message: document.getElementById('emailInvoiceMessage').value,
                additional_load_ids: additionalLoadIds,
                attach_pod: attachPod,
            };

            emailInvoiceSendBtn.disabled = true;
            post(`${loadsBase}/${id}/email`, payload)
                .then((data) => {
                    if (window.showToast) { window.showToast(data.message || 'Invoice emailed.', 'success'); }
                    emailInvoiceModal.hide();
                })
                .catch((err) => {
                    if (window.showToast) { window.showToast(err.message, 'danger'); }
                })
                .finally(() => { emailInvoiceSendBtn.disabled = false; });
        });
    }

    document.querySelectorAll('[data-action]').forEach((btn) => {
        const action = btn.getAttribute('data-action');

        btn.addEventListener('click', function () {
            const id = btn.getAttribute('data-load');

            if (action === 'notes') {
                openNotes(id);
                return;
            }

            if (action === 'mark-paid') {
                openMarkPaid(
                    id,
                    btn.getAttribute('data-load-number'),
                    btn.getAttribute('data-prev-reference'),
                    btn.getAttribute('data-prev-date'),
                    btn.getAttribute('data-prev-document-name')
                );
                return;
            }

            if (action === 'mark-unpaid') {
                openMarkUnpaid(
                    id,
                    btn.getAttribute('data-prev-reason'),
                    btn.getAttribute('data-prev-reason-at'),
                    btn.getAttribute('data-prev-reason-by')
                );
                return;
            }

            if (action === 'download-pdf') {
                openInvoicePreview(parseInt(id, 10), false);
                return;
            }

            if (action === 'email') {
                openEmailInvoice(id);
                return;
            }

            if (action === 'revert-delivered') {
                if (!confirm('Are you sure you want to revert this load from Completed back to Delivered?')) {
                    return;
                }
                patch(routes['revert-delivered'](id), { revert_to_delivered: true })
                    .then((data) => {
                        if (window.showToast) { window.showToast(data.message || 'Load reverted to delivered.', 'success'); }
                        setTimeout(() => window.location.reload(), 700);
                    })
                    .catch((err) => {
                        btn.disabled = false;
                        if (window.showToast) { window.showToast(err.message, 'danger'); }
                    });
                return;
            }

            if (!routes[action] && action !== 'invoice-single') return;

            btn.disabled = true;

            const request = action === 'invoice-single'
                ? post(`{{ route('accounting.loads.batch-invoice') }}`, { load_ids: [parseInt(id, 10)], is_batch: false })
                : post(routes[action](id));

            request
                .then((data) => {
                    if (window.showToast) { window.showToast(data.message || 'Done.', 'success'); }
                    if (action === 'invoice-single') {
                        openInvoicePreview(parseInt(id, 10), true);
                        btn.disabled = false;
                        return;
                    }
                    setTimeout(() => window.location.reload(), 700);
                })
                .catch((err) => {
                    btn.disabled = false;
                    if (window.showToast) { window.showToast(err.message, 'danger'); }
                });
        });
    });

    const checkAll = document.getElementById('checkAll');
    if (checkAll) {
        checkAll.addEventListener('change', function () {
            document.querySelectorAll('.ff-acc-check').forEach((c) => { c.checked = checkAll.checked; });
        });
    }

    const batchBtn = document.getElementById('batchInvoiceBtn');
    if (batchBtn) {
        batchBtn.addEventListener('click', function () {
            const ids = Array.from(document.querySelectorAll('.ff-acc-check:checked')).map((c) => parseInt(c.value, 10));

            if (ids.length === 0) {
                if (window.showToast) { window.showToast('Select at least one load to invoice.', 'danger'); }
                return;
            }

            batchBtn.disabled = true;
            const payload = { load_ids: ids, is_batch: ids.length > 1 };

            post(`{{ route('accounting.loads.batch-invoice') }}`, payload)
                .then((data) => {
                    if (window.showToast) { window.showToast(data.message || 'Invoiced.', 'success'); }
                    openInvoicePreview(ids[0], true);
                    batchBtn.disabled = false;
                })
                .catch((err) => {
                    batchBtn.disabled = false;
                    if (window.showToast) { window.showToast(err.message, 'danger'); }
                });
        });
    }
});
</script>
@endpush