@extends('layout.app')
@section('title', 'Freight Entry List')
@push('header_script')
<link rel="stylesheet" href="{{ asset('theme/assets/vendor/datatables/dataTables.bs5.css') }}">
<link rel="stylesheet" href="{{ asset('theme/assets/vendor/datatables/dataTables.bs5-custom.css') }}">
<link rel="stylesheet" href="{{ asset('theme/assets/vendor/datatables/buttons/dataTables.bs5-custom.css') }}">
<link rel="stylesheet" href="{{ asset('theme/assets/sweetalert/sweet-alert.css') }}" type="text/css">
<link rel="stylesheet" href="{{ asset('theme/assets/vendor/daterange/daterange.css') }}">
<style>
    .fleet-workflow-pills .nav-link {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        color: #475569;
        border-radius: 8px;
        padding: 8px 16px;
        font-size: 13px;
        font-weight: 600;
        transition: all 0.2s ease;
        display: inline-flex;
        align-items: center;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    }
    .fleet-workflow-pills .nav-link:hover {
        background: #f8fafc;
        color: #0f172a;
        border-color: #cbd5e1;
    }
    .fleet-workflow-pills .nav-link.active.tab-btn-blue {
        background: #2563eb !important;
        color: #ffffff !important;
        border-color: #2563eb !important;
        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25) !important;
    }
    .fleet-workflow-pills .nav-link.active.tab-btn-amber {
        background: #d97706 !important;
        color: #ffffff !important;
        border-color: #d97706 !important;
        box-shadow: 0 4px 12px rgba(217, 119, 6, 0.25) !important;
    }
    .fleet-workflow-pills .nav-link.active.tab-btn-green {
        background: #059669 !important;
        color: #ffffff !important;
        border-color: #059669 !important;
        box-shadow: 0 4px 12px rgba(5, 150, 105, 0.25) !important;
    }
    .fleet-workflow-pills .nav-link.active.tab-btn-indigo {
        background: #4f46e5 !important;
        color: #ffffff !important;
        border-color: #4f46e5 !important;
        box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25) !important;
    }
    .fleet-workflow-pills .nav-link.active.tab-btn-purple {
        background: #9333ea !important;
        color: #ffffff !important;
        border-color: #9333ea !important;
        box-shadow: 0 4px 12px rgba(147, 51, 234, 0.25) !important;
    }
    .summary-badge-amount {
        background: #ecfdf5;
        color: #047857;
        border: 1px solid #a7f3d0;
        border-radius: 6px;
        padding: 4px 10px;
        font-family: 'JetBrains Mono', monospace;
        font-weight: 700;
        font-size: 13px;
    }
    .summary-badge-weight {
        background: #f1f5f9;
        color: #1e293b;
        border: 1px solid #cbd5e1;
        border-radius: 6px;
        padding: 4px 10px;
        font-family: 'JetBrains Mono', monospace;
        font-weight: 700;
        font-size: 13px;
    }
</style>
@endpush
@section('content')
<div class="app-hero-header d-flex align-items-center justify-content-between mb-3 py-2">
    <div>
        <ol class="breadcrumb m-0 fs-12 text-muted">
            <li class="breadcrumb-item"><a href="{{ url('/') }}" class="text-decoration-none text-muted"><i class="ri-home-4-line me-1"></i>Home</a></li>
            <li class="breadcrumb-item text-primary fw-medium" aria-current="page">Freight Entries &amp; GR List</li>
        </ol>
    </div>
    <div>
        <a href="{{ route('freight-entry.create') }}" class="btn btn-primary px-3 py-2 rounded-3 shadow-sm fw-semibold">
            <i class="ri-add-circle-line me-1 fs-15"></i> New Freight Entry
        </a>
    </div>
</div>

<div class="app-body">
    <!-- FILTER CARD -->
    <div class="card mb-3 border bg-white rounded-3 shadow-sm">
        <div class="card-body p-3">
            <div class="d-flex align-items-center justify-content-between mb-2 pb-2 border-bottom">
                <div class="d-flex align-items-center gap-2">
                    <span class="badge bg-primary-subtle text-primary p-2 rounded-2"><i class="ri-filter-3-line fs-14"></i></span>
                    <span class="fw-bold text-dark fs-14">Search &amp; Filter Shipments</span>
                </div>
                <button type="button" class="btn btn-sm btn-outline-secondary py-1 px-2 fs-12 rounded-2" onclick="resetFilters()">
                    <i class="ri-refresh-line me-1"></i> Reset Filters
                </button>
            </div>
            <div class="row g-2 align-items-end pt-1">
                <div class="col-lg-2 col-md-4 col-sm-6">
                    <label class="form-label text-muted fs-12 fw-semibold mb-1" for="date_period"><i class="ri-calendar-line me-1 text-primary"></i>Period</label>
                    <select id="date_period" class="form-select form-select-sm">
                        <option value="all" selected>All (Financial Year)</option>
                        <option value="today">Today</option>
                        <option value="yesterday">Yesterday</option>
                        <option value="last_7">Last 7 Days</option>
                        <option value="last_30">Last 30 Days</option>
                        <option value="this_month">This Month</option>
                        <option value="last_month">Last Month</option>
                        <option value="custom">Custom Range</option>
                    </select>
                </div>
                <div class="col-lg-2 col-md-4 col-sm-6">
                    <label class="form-label text-muted fs-12 fw-semibold mb-1" for="from_date">From Date</label>
                    <input type="text" id="from_date" class="form-control form-control-sm datepicker" value="{{ $financial_year_start }}">
                </div>
                <div class="col-lg-2 col-md-4 col-sm-6">
                    <label class="form-label text-muted fs-12 fw-semibold mb-1" for="to_date">To Date</label>
                    <input type="text" id="to_date" class="form-control form-control-sm datepicker" value="{{ date('d-m-Y') }}">
                </div>
                <div class="col-lg-3 col-md-6 col-sm-6">
                    <label class="form-label text-muted fs-12 fw-semibold mb-1"><i class="ri-truck-line me-1 text-info"></i>Filter by Vehicle</label>
                    {!! Form::select('vehicle_id', ['' => '-- All Vehicles --'] + $vehicle, old('vehicle_id'), [
                    'class' => 'form-control form-control-sm select2',
                    'id' => 'vehicle_id',
                    ]) !!}
                </div>
                <div class="col-lg-3 col-md-6 col-sm-12">
                    <label class="form-label text-muted fs-12 fw-semibold mb-1"><i class="ri-building-line me-1 text-warning"></i>Filter by Party</label>
                    {!! Form::select('party_id', ['' => '-- All Parties --'] + $party, old('party_id'), [
                    'class' => 'form-control form-control-sm select2',
                    'id' => 'party_id',
                    ]) !!}
                </div>
            </div>
        </div>
    </div>

    <!-- WORKFLOW TABS -->
    <div class="col-sm-12">
        <ul class="nav nav-pills gap-2 mb-3 fleet-workflow-pills" id="tripWorkflowTabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active fw-bold tab-btn-blue" id="tab-freight-entry" data-bs-toggle="tab" data-bs-target="#pane-freight-entry" type="button" role="tab">
                    <i class="ri-file-list-3-line me-1"></i> 1. Freight Entry (GR)
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link fw-bold tab-btn-amber" id="tab-loading-parchi" data-bs-toggle="tab" data-bs-target="#pane-loading-parchi" type="button" role="tab">
                    <i class="ri-truck-line me-1"></i> 2. Loading Parchi
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link fw-bold tab-btn-green" id="tab-pod" data-bs-toggle="tab" data-bs-target="#pane-pod" type="button" role="tab">
                    <i class="ri-checkbox-circle-line me-1"></i> 3. POD for Delivery
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link fw-bold tab-btn-indigo" id="tab-payment" data-bs-toggle="tab" data-bs-target="#pane-payment" type="button" role="tab">
                    <i class="ri-money-dollar-circle-line me-1"></i> 4. Payment / Received
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link fw-bold tab-btn-purple" id="tab-ledger" data-bs-toggle="tab" data-bs-target="#pane-ledger" type="button" role="tab">
                    <i class="ri-booklet-line me-1"></i> 5. Ledger Explorer
                </button>
            </li>
        </ul>

        <div class="tab-content bg-white border rounded-3 p-3 shadow-sm" id="tripWorkflowTabsContent">
                
                <!-- TAB 1: FREIGHT ENTRY -->
                <div class="tab-pane fade show active" id="pane-freight-entry" role="tabpanel">
                    <div class="table-responsive">
                        <table id="datatable" class="table truncate m-0 align-middle w-100">
                            <thead>
                                <tr>
                                    <th>S.no.</th>
                                    <th>Date</th>
                                    <th>Bilty/GR No.</th>
                                    <th>Vehicle No.</th>
                                    <th>Consignor/Transporter</th>
                                    <th>Consignee</th>
                                    <th>From</th>
                                    <th>To</th>
                                    <th>Weight</th>
                                    <th>Amount</th>
                                    <th>Freight Paid By</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                            <tfoot>
                                <tr>
                                    <th colspan="8" style="text-align:right">Total Weight:</th>
                                    <th id="totalWeight"></th>
                                    <th style="text-align:right">Total Amount:</th>
                                    <th id="totalAmount"></th>
                                    <th></th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>

                <!-- TAB 2: LOADING PARCHI -->
                <div class="tab-pane fade" id="pane-loading-parchi" role="tabpanel">
                    <div class="d-flex justify-content-between mb-3">
                        <h6 class="m-0">Loading Parchis</h6>
                        <button type="button" class="btn btn-sm btn-primary" onclick="$('#addParchiModal').modal('show')">+ New Loading Parchi</button>
                    </div>
                    <div class="table-responsive">
                        <table id="parchiTable" class="table truncate m-0 align-middle w-100">
                            <thead>
                                <tr>
                                    <th>Parchi No.</th>
                                    <th>LR No.</th>
                                    <th>Date</th>
                                    <th>Truck No.</th>
                                    <th>Consignor</th>
                                    <th>Consignee</th>
                                    <th>Material</th>
                                    <th>Weight (Ton)</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>

                <!-- TAB 3: POD -->
                <div class="tab-pane fade" id="pane-pod" role="tabpanel">
                    <div class="table-responsive">
                        <table id="podTable" class="table truncate m-0 align-middle w-100">
                            <thead>
                                <tr>
                                    <th>GR / LR No.</th>
                                    <th>Consignee</th>
                                    <th>Delivery Date</th>
                                    <th>Delivery Time</th>
                                    <th>Received By</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>

                <!-- TAB 4: PAYMENT / RECEIVED -->
                <div class="tab-pane fade" id="pane-payment" role="tabpanel">
                    <div class="table-responsive">
                        <table id="paymentTable" class="table truncate m-0 align-middle w-100">
                            <thead>
                                <tr>
                                    <th>LR / GR No.</th>
                                    <th>Date</th>
                                    <th>Truck / Transporter &amp; Ledger</th>
                                    <th>Consignor / Consignee &amp; Ledgers</th>
                                    <th>Net Freight</th>
                                    <th>POD Status</th>
                                    <th>Payment Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>

                <!-- TAB 5: LEDGER -->
                <div class="tab-pane fade" id="pane-ledger" role="tabpanel">
                    <!-- Quick Ledger Selector & Search Card -->
                    <div class="card mb-3 border">
                        <div class="card-header bg-light py-2">
                            <h6 class="m-0 fw-bold"><i class="ri-booklet-line me-1"></i> Quick Account Ledger Explorer</h6>
                        </div>
                        <div class="card-body">
                            <div class="row g-3 align-items-end">
                                <div class="col-md-5">
                                    <label class="form-label fw-semibold">Select Account Ledger (Consignor / Consignee / Truck Transporter)</label>
                                    <select id="tab_account_ledger_id" class="form-control select2">
                                        <option value="">-- Select Ledger --</option>
                                        @foreach($allLedgers ?? [] as $l)
                                            <option value="{{ $l->id }}">{{ $l->ledger_name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label fw-semibold">Date Range</label>
                                    <input type="text" id="tab_ledger_date_range" class="form-control" value="{{ $financial_year_start ?? date('01-04-Y') }} to {{ date('d-m-Y') }}">
                                </div>
                                <div class="col-md-4">
                                    <button type="button" class="btn btn-primary" onclick="loadTabLedgerStatement()"><i class="ri-search-line me-1"></i> Load Statement</button>
                                    <button type="button" class="btn btn-outline-secondary ms-1" onclick="openFullLedgerReport()"><i class="ri-external-link-line me-1"></i> Full Page</button>
                                </div>
                            </div>
                            
                            <div id="tab_ledger_statement_container" class="mt-4">
                                <div class="alert alert-info py-2 mb-0"><i class="ri-information-line me-1"></i> Select a ledger above or click "View Ledger" from the list below to inspect transactions and balance directly in this tab.</div>
                            </div>
                        </div>
                    </div>

                    <!-- Quick Ledger Directory by Category -->
                    <div class="row g-3">
                        <!-- Consignors & Consignees Ledgers -->
                        <div class="col-md-6">
                            <div class="card border h-100">
                                <div class="card-header bg-light py-2 d-flex justify-content-between align-items-center">
                                    <span class="fw-bold"><i class="ri-user-shared-line me-1"></i> Parties (Consignors &amp; Consignees)</span>
                                    <span class="badge bg-secondary">{{ count($partyLedgers ?? []) }} Parties</span>
                                </div>
                                <div class="card-body p-2" style="max-height: 350px; overflow-y: auto;">
                                    <table class="table table-sm table-hover m-0">
                                        <thead>
                                            <tr>
                                                <th>Party Name</th>
                                                <th>City / State</th>
                                                <th class="text-end">Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @forelse($partyLedgers ?? [] as $p)
                                            <tr>
                                                <td class="fw-medium">{{ $p->party_name }}</td>
                                                <td><small class="text-muted">{{ $p->city ?? '-' }}</small></td>
                                                <td class="text-end">
                                                    @if($p->account_ledger_id)
                                                    <button type="button" class="btn btn-xs btn-outline-primary" onclick="quickViewLedger({{ $p->account_ledger_id }})">View Ledger</button>
                                                    @else
                                                    <span class="text-muted small">No Ledger</span>
                                                    @endif
                                                </td>
                                            </tr>
                                            @empty
                                            <tr><td colspan="3" class="text-center text-muted">No parties found</td></tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <!-- Truck / Transporter Ledgers -->
                        <div class="col-md-6">
                            <div class="card border h-100">
                                <div class="card-header bg-light py-2 d-flex justify-content-between align-items-center">
                                    <span class="fw-bold"><i class="ri-truck-line me-1"></i> Trucks / Transporters</span>
                                    <span class="badge bg-primary">{{ count($vehicleLedgers ?? []) }} Trucks</span>
                                </div>
                                <div class="card-body p-2" style="max-height: 350px; overflow-y: auto;">
                                    <table class="table table-sm table-hover m-0">
                                        <thead>
                                            <tr>
                                                <th>Truck No.</th>
                                                <th>Owner / Transporter</th>
                                                <th class="text-end">Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @forelse($vehicleLedgers ?? [] as $v)
                                            <tr>
                                                <td class="fw-bold text-primary">{{ $v->vehicle_no }}</td>
                                                <td><small class="text-muted">{{ $v->owner_name ?? '-' }} ({{ ucfirst($v->vehicle_type) }})</small></td>
                                                <td class="text-end">
                                                    @if($v->account_ledger_id)
                                                    <button type="button" class="btn btn-xs btn-outline-primary" onclick="quickViewLedger({{ $v->account_ledger_id }})">View Ledger</button>
                                                    @else
                                                    <span class="text-muted small">No Ledger</span>
                                                    @endif
                                                </td>
                                            </tr>
                                            @empty
                                            <tr><td colspan="3" class="text-center text-muted">No trucks found</td></tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

<!-- Loading Parchi & Upload POD Modals -->
@include('common.modal.loading_parchi')
@include('common.modal.upload_pod')
@endsection
@push('footer_script')
<script src="{{ asset('theme/assets/vendor/datatables/dataTables.min.js') }}"></script>
<script src="{{ asset('theme/assets/vendor/datatables/dataTables.bootstrap.min.js') }}"></script>
<script src="{{ asset('theme/assets/vendor/datatables/custom/custom-datatables.js') }}"></script>
<script src="{{ asset('theme/assets/sweetalert/sweet-alert.min.js') }}"></script>
<script src="{{ asset('theme/assets/vendor/daterange/daterange.js') }}"></script>
<script>
    $(document).ready(function() {
        $('#from_date, #to_date').daterangepicker({
            singleDatePicker: true,
            autoUpdateInput: true,
            locale: {
                format: 'DD-MM-YYYY'
            }
        });

        $('#date_period').on('change', function() {
            var val = $(this).val();
            var start, end;

            switch (val) {
                case 'today':
                    start = moment();
                    end = moment();
                    break;
                case 'yesterday':
                    start = moment().subtract(1, 'days');
                    end = moment().subtract(1, 'days');
                    break;
                case 'last_7':
                    start = moment().subtract(6, 'days');
                    end = moment();
                    break;
                case 'last_30':
                    start = moment().subtract(29, 'days');
                    end = moment();
                    break;
                case 'this_month':
                    start = moment().startOf('month');
                    end = moment().endOf('month');
                    break;
                case 'last_month':
                    start = moment().subtract(1, 'month').startOf('month');
                    end = moment().subtract(1, 'month').endOf('month');
                    break;
                case 'all':
                    start = moment("{{ $financial_year_start }}", "DD-MM-YYYY");
                    end = moment();
                    break;
                default:
                    return;
            }

            $('#from_date').data('daterangepicker').setStartDate(start);
            $('#from_date').data('daterangepicker').setEndDate(start);
            $('#from_date').val(start.format('DD-MM-YYYY'));

            $('#to_date').data('daterangepicker').setStartDate(end);
            $('#to_date').data('daterangepicker').setEndDate(end);
            $('#to_date').val(end.format('DD-MM-YYYY'));

            $('#datatable').DataTable().draw();
        });

        $('#from_date, #to_date').on('apply.daterangepicker', function(ev, picker) {
            $(this).val(picker.startDate.format('DD-MM-YYYY'));
            $('#date_period').val('custom');
            $('#datatable').DataTable().draw();
        });

        $("#from_date, #to_date, #vehicle_id, #party_id").on('change', function() {
            $('#datatable').DataTable().draw(false);
            if ($.fn.DataTable.isDataTable('#parchiTable')) $('#parchiTable').DataTable().draw(false);
            if ($.fn.DataTable.isDataTable('#podTable')) $('#podTable').DataTable().draw(false);
            if ($.fn.DataTable.isDataTable('#paymentTable')) $('#paymentTable').DataTable().draw(false);
        });

        $('#datatable').DataTable({
            processing: true,
            serverSide: true,
            stateSave: true,
            responsive: true,
            ajax: {
                url: '{{ route('freight-entry.getData') }}',

                data: function(d) {
                    d.startdate = moment($('#from_date').val(), "DD-MM-YYYY").format("YYYY-MM-DD");
                    d.enddate = moment($('#to_date').val(), "DD-MM-YYYY").format("YYYY-MM-DD");
                    d.vehicle_id = $('#vehicle_id').val();
                    d.party_id = $('#party_id').val();
                }
            },
            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    searchable: false
                },
                {
                    data: 'date',
                    name: 'date',
                    render: function(data, type, row) {
                        return '<span class="fw-bold font-mono fs-12" style="color: #0f172a !important; white-space: nowrap;"><i class="ri-calendar-event-line me-1 text-primary"></i>' + data + '</span>';
                    }
                },
                {
                    data: 'lr_no',
                    name: 'lr_no',
                    render: function(data, type, row) {
                        return '<span class="badge-lr font-mono"><i class="ri-file-text-line me-1"></i>' + (data || '-') + '</span>';
                    }
                },
                {
                    data: 'vehicle_no',
                    name: 'vehicle_no',
                    render: function(data, type, row) {
                        return '<span class="vehicle-plate"><span class="plate-badge">IND</span> ' + (data || '-') + '</span>';
                    }
                },
                {
                    data: 'consignor_name',
                    name: 'consignor_name',
                    render: function(data, type, row) {
                        return '<span class="fw-semibold text-dark fs-12">' + (data || '-') + '</span>';
                    }
                },
                {
                    data: 'consignee_name',
                    name: 'consignee_name',
                    render: function(data, type, row) {
                        return '<span class="fw-semibold text-dark fs-12">' + (data || '-') + '</span>';
                    }
                },
                {
                    data: 'from_location',
                    name: 'from_location',
                    render: function(data, type, row) {
                        return '<span class="fw-semibold text-dark fs-12"><i class="ri-map-pin-2-fill text-danger me-1"></i>' + (data || '-') + '</span>';
                    }
                },
                {
                    data: 'to_location',
                    name: 'to_location',
                    render: function(data, type, row) {
                        return '<span class="fw-semibold text-dark fs-12"><i class="ri-flag-fill text-success me-1"></i>' + (data || '-') + '</span>';
                    }
                },
                {
                    data: 'weight_mt',
                    name: 'weight_mt',
                    render: function(data, type, row) {
                        let w = parseFloat(data || 0);
                        return '<span class="badge bg-light text-dark font-mono border px-2 py-1"><span class="fw-bold">' + w.toFixed(2) + '</span> <small class="text-muted">MT</small></span>';
                    }
                },
                {
                    data: 'net_total',
                    name: 'net_total',
                    render: function(data, type, row) {
                        let num = parseFloat(data || 0);
                        return '<span class="font-mono fw-bold text-success fs-13">₹ ' + num.toLocaleString('en-IN', {minimumFractionDigits: 2, maximumFractionDigits: 2}) + '</span>';
                    }
                },
                {
                    data: 'paid_by',
                    name: 'paid_by',
                    render: function(data, type, row) {
                        let cls = 'badge-soft-primary';
                        if (data === 'Consignor') cls = 'badge-soft-info';
                        else if (data === 'Consignee') cls = 'badge-soft-purple';
                        else if (data === 'Transporter') cls = 'badge-soft-warning';
                        return '<span class="badge-pill ' + cls + '">' + (data || '-') + '</span>';
                    }
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false,
                    searchable: false
                },
            ],
            drawCallback: function() {
                var api = this.api();

                // Calculate total weight
                var totalWeight = api
                    .column(8, {
                        page: 'current'
                    })
                    .data()
                    .reduce((a, b) => {
                        return parseFloat(a) + parseFloat(b);
                    }, 0);

                // Calculate total amount
                var totalAmount = api
                    .column(9, {
                        page: 'current'
                    })
                    .data()
                    .reduce((a, b) => {
                        return parseFloat(a) + parseFloat(b);
                    }, 0);

                // Display the totals in the footer
                $('#totalWeight').html('<span class="summary-badge-weight">' + totalWeight.toFixed(2) + ' MT</span>');
                $('#totalAmount').html('<span class="summary-badge-amount">₹ ' + totalAmount.toLocaleString('en-IN', {minimumFractionDigits: 2, maximumFractionDigits: 2}) + '</span>');
            }
        });

        // Tab Event Listeners
        $('button[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) {
            let target = $(e.target).attr("data-bs-target");
            
            if (target === "#pane-loading-parchi") {
                if (!$.fn.DataTable.isDataTable('#parchiTable')) {
                    initParchiTable();
                } else {
                    $('#parchiTable').DataTable().columns.adjust().draw(false);
                }
            } else if (target === "#pane-pod") {
                if (!$.fn.DataTable.isDataTable('#podTable')) {
                    initPodTable();
                } else {
                    $('#podTable').DataTable().columns.adjust().draw(false);
                }
            } else if (target === "#pane-payment") {
                if (!$.fn.DataTable.isDataTable('#paymentTable')) {
                    initPaymentTable();
                } else {
                    $('#paymentTable').DataTable().columns.adjust().draw(false);
                }
            }
        });

        function getCommonFilters() {
            return {
                startdate: moment($('#from_date').val(), "DD-MM-YYYY").format("YYYY-MM-DD"),
                enddate: moment($('#to_date').val(), "DD-MM-YYYY").format("YYYY-MM-DD"),
                vehicle_id: $('#vehicle_id').val(),
                party_id: $('#party_id').val()
            };
        }

        function initParchiTable() {
            $('#parchiTable').DataTable({
                processing: true, serverSide: true, responsive: true,
                ajax: {
                    url: '{{ route('loading-parchi.getData') }}',
                    data: function(d) { Object.assign(d, getCommonFilters()); }
                },
                columns: [
                    { data: 'id', name: 'id' },
                    { 
                        data: 'lr_no', 
                        name: 'lr_no',
                        render: function(data) {
                            return '<span class="badge-lr font-mono"><i class="ri-file-text-line me-1"></i>' + (data || '-') + '</span>';
                        }
                    },
                    { 
                        data: 'created_at', 
                        name: 'created_at',
                        render: function(data) {
                            let d = data ? moment(data).format('DD-MMM-YYYY') : '-';
                            return '<span class="fw-bold font-mono fs-12" style="color: #0f172a !important; white-space: nowrap;"><i class="ri-calendar-event-line me-1 text-primary"></i>' + d + '</span>';
                        }
                    },
                    { 
                        data: 'vehicle_no', 
                        name: 'vehicle_no',
                        render: function(data) {
                            return '<span class="vehicle-plate"><span class="plate-badge">IND</span> ' + (data || '-') + '</span>';
                        }
                    },
                    { data: 'consignor_name', name: 'consignor_name' },
                    { data: 'consignee_name', name: 'consignee_name' },
                    { data: 'material_details', name: 'material_details' },
                    { 
                        data: 'weight', 
                        name: 'weight',
                        render: function(data) {
                            return '<span class="badge bg-light text-dark font-mono border px-2 py-1">' + parseFloat(data || 0).toFixed(2) + ' MT</span>';
                        }
                    },
                    { 
                        data: 'status', 
                        name: 'status',
                        render: function(data) {
                            let cls = (data === 'Linked' || data === 'Completed') ? 'badge-soft-success' : 'badge-soft-warning';
                            return '<span class="badge-pill ' + cls + '">' + (data || 'Pending') + '</span>';
                        }
                    },
                    { data: 'action', name: 'action', orderable: false, searchable: false }
                ]
            });
        }

        function initPodTable() {
            $('#podTable').DataTable({
                processing: true, serverSide: true, responsive: true,
                ajax: {
                    url: '{{ route('freight-entry.getPodData') }}',
                    data: function(d) { Object.assign(d, getCommonFilters()); }
                },
                columns: [
                    { 
                        data: 'lr_no', 
                        name: 'lr_no',
                        render: function(data) {
                            return '<span class="badge-lr font-mono"><i class="ri-file-text-line me-1"></i>' + (data || '-') + '</span>';
                        }
                    },
                    { data: 'consignee_name', name: 'consignee_name' },
                    { 
                        data: 'delivery_date', 
                        name: 'delivery_date',
                        render: function(data) {
                            return '<span class="fw-bold font-mono fs-12" style="color: #0f172a !important; white-space: nowrap;"><i class="ri-calendar-check-line me-1 text-success"></i>' + (data || '-') + '</span>';
                        }
                    },
                    { data: 'delivery_time', name: 'delivery_time' },
                    { data: 'received_by', name: 'received_by' },
                    { 
                        data: 'pod_status', 
                        name: 'pod_status',
                        render: function(data) {
                            if (data === 'Approved' || data === 'verified') {
                                return '<span class="badge-pill badge-soft-success"><i class="ri-checkbox-circle-fill me-1"></i>Approved</span>';
                            }
                            return '<span class="badge-pill badge-soft-warning"><i class="ri-time-line me-1"></i>Pending</span>';
                        }
                    },
                    { data: 'action', name: 'action', orderable: false, searchable: false }
                ]
            });
        }

        function initPaymentTable() {
            $('#paymentTable').DataTable({
                processing: true, serverSide: true, responsive: true,
                ajax: {
                    url: '{{ route('freight-entry.getPaymentData') }}',
                    data: function(d) { Object.assign(d, getCommonFilters()); }
                },
                columns: [
                    { 
                        data: 'lr_no', 
                        name: 'lr_no',
                        render: function(data) {
                            return '<span class="badge-lr font-mono"><i class="ri-file-text-line me-1"></i>' + (data || '-') + '</span>';
                        }
                    },
                    { 
                        data: 'date', 
                        name: 'date',
                        render: function(data) {
                            return '<span class="fw-bold font-mono fs-12" style="color: #0f172a !important; white-space: nowrap;"><i class="ri-calendar-event-line me-1 text-primary"></i>' + (data || '-') + '</span>';
                        }
                    },
                    { data: 'truck_details', name: 'truck_details', orderable: false, searchable: false },
                    { data: 'party_details', name: 'party_details', orderable: false, searchable: false },
                    { 
                        data: 'net_total', 
                        name: 'net_total',
                        render: function(data) {
                            let num = parseFloat(data || 0);
                            return '<span class="font-mono fw-bold text-success fs-13">₹ ' + num.toLocaleString('en-IN', {minimumFractionDigits: 2}) + '</span>';
                        }
                    },
                    { 
                        data: 'pod_status', 
                        name: 'pod_status', 
                        orderable: false, 
                        searchable: false,
                        render: function(data) {
                            if (data === 'Approved' || data === 'verified') {
                                return '<span class="badge-pill badge-soft-success">Approved</span>';
                            }
                            return '<span class="badge-pill badge-soft-warning">Pending</span>';
                        }
                    },
                    { 
                        data: 'payment_status', 
                        name: 'payment_status',
                        render: function(data) {
                            if (data === 'Paid') return '<span class="badge-pill badge-soft-success">Paid</span>';
                            if (data === 'To Pay') return '<span class="badge-pill badge-soft-warning">To Pay</span>';
                            return '<span class="badge-pill badge-soft-primary">TBB (Billed)</span>';
                        }
                    },
                    { data: 'action', name: 'action', orderable: false, searchable: false }
                ]
            });
        }

        window.resetFilters = function() {
            $('#date_period').val('all').trigger('change');
            $('#vehicle_id').val('').trigger('change');
            $('#party_id').val('').trigger('change');
        };

        $('#tab_account_ledger_id').select2({
            placeholder: "-- Select Ledger --",
            allowClear: true,
            width: '100%'
        });

        $('#tab_ledger_date_range').daterangepicker({
            locale: {
                format: 'DD-MM-YYYY',
                separator: ' to '
            }
        });
    });

    function quickViewLedger(ledgerId) {
        let triggerEl = document.querySelector('#tripWorkflowTabs button[data-bs-target="#pane-ledger"]');
        let tab = bootstrap.Tab.getOrCreateInstance(triggerEl);
        tab.show();
        $('#tab_account_ledger_id').val(ledgerId).trigger('change');
        loadTabLedgerStatement();
        $('html, body').animate({
            scrollTop: $("#tab_ledger_statement_container").offset().top - 120
        }, 300);
    }

    function loadTabLedgerStatement() {
        let ledgerId = $('#tab_account_ledger_id').val();
        if (!ledgerId) {
            swal("Select Ledger", "Please select an account ledger first.", "warning");
            return;
        }

        let dates = $('#tab_ledger_date_range').val().split(' to ');
        let fromDate = dates[0] ? dates[0].trim() : '{{ $financial_year_start ?? date('01-04-Y') }}';
        let toDate = dates[1] ? dates[1].trim() : '{{ date('d-m-Y') }}';

        $('#tab_ledger_statement_container').html('<div class="text-center py-4"><div class="spinner-border text-primary" role="status"></div><p class="text-muted mt-2">Loading ledger statement...</p></div>');

        $.ajax({
            url: "{{ route('account-ledger-report.getData') }}",
            type: "GET",
            data: {
                account_ledger_id: ledgerId,
                from_date: fromDate,
                to_date: toDate
            },
            success: function(res) {
                $('#tab_ledger_statement_container').html(res);
            },
            error: function() {
                $('#tab_ledger_statement_container').html('<div class="alert alert-danger mb-0">Error loading ledger statement. Please ensure transactions exist.</div>');
            }
        });
    }

    function openFullLedgerReport() {
        let ledgerId = $('#tab_account_ledger_id').val();
        let url = "{{ route('account-ledger-report.index') }}";
        if (ledgerId) {
            url += '?ledger_id=' + ledgerId;
        }
        window.open(url, '_blank');
    }

    // Handle POD Modal Open
    function openPodModal(id, lr_no = '') {
        $('#pod_freight_entry_id').val(id);
        $('#pod_lr_display').text(lr_no ? lr_no : 'GR-' + id);
        $('#form-upload-pod')[0].reset();
        $('#pod_file_display_name').text('Drag & drop signed POD photo or PDF, or click to upload');
        $('.pod-error').html('');
        $('#uploadPodModal').modal('show');
    }

    $('#uploadPodModal').on('shown.bs.modal', function() {
        if (!$('#pod_delivery_date').data('daterangepicker')) {
            $('#pod_delivery_date').daterangepicker({
                singleDatePicker: true,
                locale: {
                    format: 'DD-MM-YYYY'
                }
            });
        }
    });

    $('#addParchiModal').on('shown.bs.modal', function() {
        $('.select2-parchi-modal').select2({
            dropdownParent: $('#addParchiModal'),
            placeholder: "Select...",
            width: '100%'
        });
        if (!$('#lp_parchi_date').data('daterangepicker')) {
            $('#lp_parchi_date').daterangepicker({
                singleDatePicker: true,
                timePicker: true,
                timePicker24Hour: true,
                locale: {
                    format: 'DD-MM-YYYY HH:mm'
                }
            });
        }
    });

    $('#addParchiModal').on('show.bs.modal', function() {
        $('#form-add-parchi')[0].reset();
        $('.lp-error').html('');
        $('.select2-parchi-modal').val('').trigger('change');
    });

    function submitPod() {
        let form = document.getElementById('form-upload-pod');
        let formData = new FormData(form);
        let id = $('#pod_freight_entry_id').val();
        let btn = $('#podBtnSubmit');
        btn.prop('disabled', true).text('Saving...');
        $('.pod-error').html('');

        $.ajax({
            url: "/freight-entry/" + id + "/pod",
            type: "POST",
            data: formData,
            contentType: false,
            processData: false,
            success: function(res) {
                btn.prop('disabled', false).text('Save POD');
                if(res.success) {
                    swal("Success", res.message, "success");
                    $('#uploadPodModal').modal('hide');
                    if ($.fn.DataTable.isDataTable('#podTable')) $('#podTable').DataTable().ajax.reload();
                    $('#datatable').DataTable().ajax.reload();
                } else {
                    swal("Error", res.message, "error");
                }
            },
            error: function(xhr) {
                btn.prop('disabled', false).text('Save POD');
                let errors = xhr.responseJSON ? xhr.responseJSON.errors : null;
                if (errors) {
                    $.each(errors, function(field, messages) {
                        $('[data-field="' + field + '"].pod-error').html(messages[0]);
                    });
                } else {
                    swal("Error", "Error saving POD. Please check the fields.", "error");
                }
            }
        });
    }

    // Submit Parchi Form via AJAX
    $('#form-add-parchi').submit(function(e){
        e.preventDefault();
        let form = $(this);
        let btn = $('#lpBtnSubmit');
        btn.prop('disabled', true).text('Saving...');
        $('.lp-error').html('');

        $.ajax({
            url: form.attr('action'),
            type: 'POST',
            data: form.serialize(),
            success: function(res) {
                btn.prop('disabled', false).text('Save Loading Parchi');
                if(res.success) {
                    swal("Success", res.message, "success");
                    $('#addParchiModal').modal('hide');
                    if ($.fn.DataTable.isDataTable('#parchiTable')) $('#parchiTable').DataTable().ajax.reload();
                    form[0].reset();
                } else {
                    swal("Error", res.message, "error");
                }
            },
            error: function(xhr) {
                btn.prop('disabled', false).text('Save Loading Parchi');
                let errors = xhr.responseJSON ? xhr.responseJSON.errors : null;
                if (errors) {
                    $.each(errors, function(field, messages) {
                        $('[data-field="' + field + '"].lp-error').html(messages[0]);
                    });
                } else {
                    swal("Error", "Error creating Loading Parchi. Please check fields.", "error");
                }
            }
        });
    });

    function deleteIt(id) {
        swal({
                title: "Are you sure?",
                text: "You will not be able to recover this data!",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: '#DD6B55',
                confirmButtonText: 'Yes, I am sure!',
                cancelButtonText: "No, cancel it!",
                closeOnConfirm: false,
                closeOnCancel: false,
                cancelButtonClass: 'btn-default btn-md waves-effect',
                confirmButtonClass: 'btn-danger btn-md waves-effect waves-light',
            },
            function(isConfirm) {
                if (isConfirm) {
                    $.ajax({
                        url: '{{ url('freight-entry') }}/' + id,
                        type: 'delete',
                        dataType: "JSON",
                        data: {
                            "_token": "{{ csrf_token() }}"
                        },
                        success: function() {
                            $("#datatable").DataTable().draw(false);
                        }
                    });
                    swal("Deleted!", "Data has been deleted!", "success");
                } else {
                    swal("Cancelled", "Data is safe :)", "error");
                }

            });
    }
</script>
@endpush