@extends('layout.app')
@section('title', 'Edit Freight Invoice')

@push('header_script')
<style>
    .form-section-title {
        font-size: 0.95rem;
        font-weight: 600;
        color: #495057;
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid #e9ecef;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .form-section-title i {
        color: #0d6efd;
    }

    .bg-light-input {
        background-color: #f8f9fa;
    }

    .total-card {
        background: #f0f4f8;
        border: 1px dashed #cbd5e1;
    }

    /* Party Details Card */
    .party-card {
        height: 100%;
        border: 1px solid #e2e8f0;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }

    .party-card .card-header {
        background-color: #f2f2f9;
        padding: 0.6rem 1rem;
    }

    .party-card .card-body {
        padding: 1rem;
        background-color: #fff;
    }

    .party-info-row {
        display: flex;
        margin-bottom: 0.5rem;
        font-size: 0.9rem;
        border-bottom: 1px dashed #f1f5f9;
        padding-bottom: 0.5rem;
    }

    .party-info-row:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .party-info-row label {
        font-weight: 600;
        color: #64748b;
        width: 120px;
        flex-shrink: 0;
    }

    .party-info-row span {
        color: #334155;
        font-weight: 500;
        flex-grow: 1;
    }

    /* Table Styles */
    .goods-table th {
        background-color: #f8fafc;
        font-size: 0.8rem;
        font-weight: 700;
        text-transform: uppercase;
        color: #475569;
        padding: 0.6rem;
        border-bottom: 2px solid #e2e8f0;
    }

    .goods-table td {
        vertical-align: middle;
        font-size: 0.85rem;
        padding: 0.5rem;
    }

    .goods-table input.form-control-sm {
        padding: 0.25rem 0.5rem;
        font-size: 0.85rem;
        border-color: #e2e8f0;
    }

    .goods-table input.form-control-sm:focus {
        border-color: #0d6efd;
        box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.1);
    }

    .input-currency {
        text-align: right;
        font-weight: 600;
    }

    .readonly-input {
        background-color: #f1f5f9 !important;
        cursor: not-allowed;
        color: #64748b;
    }

    /* Calculation Section */
    .calc-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 0;
        font-size: 0.9rem;
    }

    .calc-label {
        color: #64748b;
        font-weight: 500;
    }

    .calc-value {
        width: 140px;
        text-align: right;
        font-weight: 600;
    }

    .gst-breakup {
        background-color: #f1fbfc;
        border: 1px solid #e2e8f0;
        border-left: 3px solid #0dcaf0;
        padding: 0.5rem;
        border-radius: 4px;
        font-size: 0.85rem;
        margin-top: 5px;
    }

    .btn-submit {
        padding: 0.8rem;
        font-weight: 600;
        letter-spacing: 0.5px;
    }
</style>
<link rel="stylesheet" href="{{ asset('theme/assets/vendor/daterange/daterange.css') }}">
@endpush

@section('content')
<div class="app-hero-header d-flex align-items-center">
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="javascript:void(0);">Freight Billing</a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">Edit Freight Invoice</li>
    </ol>
    <div class="ms-auto d-lg-flex flex-row">
        <a href="{{ route('freight-billing.index') }}" class="btn btn-sm btn-outline-secondary">
            <i class="ri-arrow-left-circle-line"></i> Back to List
        </a>
    </div>
</div>

<div class="app-body">
    {!! Form::open([
    'route' => ['freight-billing.update', $freightBilling->id],
    'class' => 'needs-validation',
    'method' => 'put',
    'autocomplete' => 'off',
    'id' => 'invoiceForm',
    'onsubmit' => 'document.getElementById("BtnSubmit").disabled = true',
    ]) !!}

    <div class="row gx-3">
        <div class="col-12">
            <div class="card mb-3">
                <div class="card-body">
                    <div class="form-section-title">
                        <i class="ri-file-list-3-line"></i> Invoice Details
                    </div>

                    <div class="row g-3">
                        <div class="col-md-6 col-12">
                            <label class="form-label" for="invoice_no">Invoice No <span
                                    class="text-danger">*</span></label>
                            <input type="text" class="form-control fw-bold readonly-input" name="invoice_no" readonly
                                value="{{ $freightBilling->invoice_no }}">
                        </div>

                        <div class="col-md-6 col-12">
                            <label class="form-label" for="invoice_date">Invoice Date <span
                                    class="text-danger">*</span></label>
                            <div class="input-group">
                                <span class="input-group-text">
                                    <i class="ri-calendar-todo-line"></i>
                                </span>
                                <input type="text" class="form-control datepicker" name="invoice_date" required
                                    value="{{ date('d-m-Y', strtotime($freightBilling->invoice_date)) }}">
                            </div>
                            <div class="text-danger">{{ $errors->first('invoice_date') }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row gx-3">
        <div class="col-md-6">
            <div class="card party-card mb-3">
                <div class="card-header">
                    <small class="fw-bold text-uppercase"><i class="ri-user-star-line"></i> Party Details</small>
                </div>
                <div class="card-body">
                    @php
                    $partyDetail = $freightBilling->party;
                    @endphp
                    <div class="party-info-row">
                        <label>Party Name</label>
                        <span class="fw-bold ">{{ $partyDetail->party_name ?? 'N/A' }}</span>
                    </div>
                    <div class="party-info-row">
                        <label>GST No</label>
                        <span class="fw-bold">{{ $partyDetail->gst_no ?? 'N/A' }}</span>
                    </div>
                    <div class="party-info-row">
                        <label>Mobile</label>
                        <span>{{ $partyDetail->mobile_no ?? 'N/A' }}</span>
                    </div>
                    <div class="party-info-row">
                        <label>Address</label>
                        <span>{{ $partyDetail->address ?? 'N/A' }}</span>
                    </div>
                    <div class="party-info-row">
                        <label>City/State</label>
                        <span>{{ $partyDetail->city ?? '' }} - {{ $partyDetail->state->state_name ?? '' }}</span>
                    </div>

                    {{-- Hidden inputs --}}
                    <input type="hidden" name="party_id" value="{{ $freightBilling->party_id }}">
                    <input type="hidden" id="party_state_id" value="{{ $partyDetail->state_id ?? '' }}">
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card mb-3 h-100">
                <div class="card-header bg-light">
                    <small class="fw-bold text-uppercase text-dark"><i class="ri-bank-line"></i> Bank Details</small>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-12">
                            <label class="form-label text-muted small">Select Bank Account <span
                                    class="text-danger">*</span></label>
                            {!! Form::select('client_bank_id', ['' => '--Select Bank Account--'] + $bank, $freightBilling->client_bank_id, [
                            'class' => 'form-control select2',
                            'id' => 'client_bank_id',
                            'required',
                            ]) !!}
                        </div>
                    </div>

                    <div class="mt-3 p-2 bg-light rounded border">
                        <div class="d-flex justify-content-between mb-1">
                            <small class="text-muted">Bank Name:</small>
                            <small class="fw-bold text-dark" id="disp_bank_name">-</small>
                        </div>
                        <div class="d-flex justify-content-between mb-1">
                            <small class="text-muted">Account No:</small>
                            <small class="fw-bold text-dark" id="disp_acc_no">-</small>
                        </div>
                        <div class="d-flex justify-content-between">
                            <small class="text-muted">IFSC Code:</small>
                            <small class="fw-bold text-dark" id="disp_ifsc">-</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row gx-3">
        <div class="col-12">
            <div class="card mb-3">
                <div class="card-header py-2 d-flex justify-content-between align-items-center bg-white border-bottom">
                    <div>
                        <span class="fw-bold text-dark">
                            <i class="ri-file-list-line text-primary"></i> Selected GR Details
                        </span>
                    </div>
                    <div class="d-flex gap-2">
                        <button type="button" class="btn btn-sm btn-success" id="addGrBtn">
                            <i class="ri-add-line"></i> Add GR
                        </button>
                        {{-- <span class="badge bg-primary rounded-pill" id="grCount">{{ count($freightBilling->freightBillDetail) }} Items</span> --}}
                    </div>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-bordered mb-0 goods-table text-center align-middle" id="grTable">
                            <thead class="table-light">
                                <tr>
                                    <th style="width: 4%">#</th>
                                    <th style="width: 10%">GR No</th>
                                    <th style="width: 9%">Date</th>
                                    <th style="width: 9%">Truck No</th>
                                    <th style="width: 12%">From - To</th>
                                    <th style="width: 6%">Qty</th>
                                    <th style="width: 7%">Rate</th>
                                    <th style="width: 9%">Sub Total</th>
                                    <th style="width: 9%">(+) Halting</th>
                                    <th style="width: 9%">(+) Extra</th>
                                    <th style="width: 9%">(-) Deduct</th>
                                    <th style="width: 10%">Net Amount</th>
                                    <th style="width: 4%">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @php $rowNum = 1; @endphp

                                @foreach ($freightBilling->freightBillDetail as $detail)
                                @php
                                $freight = $detail->freightEntry;


                                $groupedUnits = $freight->items->groupBy('weight_unit');


                                $freightSubTotal = floatval($freight->sub_total ?? 0);

                                $halting = floatval($detail->halting_charge ?? 0);
                                $extra = floatval($detail->extra_charge ?? 0);
                                $deduction = floatval($detail->any_deduction ?? 0);
                                $netAmount = floatval($detail->net_amount ?? 0);
                                @endphp

                                <tr class="gr-row">
                                    <td>{{ $rowNum++ }}</td>
                                    <td class="fw-bold text-primary">{{ $freight->lr_no }}</td>
                                    <td>{{ date('d-M-y', strtotime($freight->date)) }}</td>
                                    <td>{{ $freight->vehicle->vehicle_no ?? '-' }}</td>

                                    {{-- FROM TO --}}
                                    <td>
                                        <div class="d-flex flex-column small">
                                            <span>{{ $freight->from_location }}</span>
                                            <span class="text-muted"><i class="ri-arrow-down-line"></i></span>
                                            <span>{{ $freight->to_location }}</span>
                                        </div>
                                    </td>

                                    {{-- QTY MULTI UNIT --}}
                                    <td class="text-center qty-cell">
                                        @foreach ($groupedUnits as $unit => $rows)
                                        <div style="line-height:14px;">
                                            {{ number_format($rows->sum('charge_weight'), 2) }} {{ $unit }}
                                        </div>
                                        @endforeach
                                    </td>

                                    {{-- RATE MULTI UNIT --}}
                                    <td class="text-center">
                                        @foreach ($freight->items as $item)
                                        <div style="line-height:14px;">
                                            {{ number_format($item->rate, 2) }} / {{ $item->weight_unit }}
                                        </div>
                                        @endforeach
                                    </td>

                                    {{-- SUB TOTAL (AUTO CALCULATED) --}}
                                    <td>
                                        <input type="text"
                                            class="form-control form-control-sm text-end readonly-input row-freight"
                                            value="{{ number_format($freightSubTotal, 2, '.', '') }}" readonly>
                                    </td>

                                    {{-- HALTING --}}
                                    <td>
                                        <input type="number" step="0.01"
                                            class="form-control form-control-sm text-end row-halting calc-input"
                                            name="halting_charge[]" value="{{ $halting }}">
                                    </td>

                                    {{-- EXTRA --}}
                                    <td>
                                        <input type="number" step="0.01"
                                            class="form-control form-control-sm text-end row-extra calc-input"
                                            name="extra_charge[]" value="{{ $extra }}">
                                    </td>

                                    {{-- DEDUCTION --}}
                                    <td>
                                        <input type="number" step="0.01"
                                            class="form-control form-control-sm text-end row-deduct calc-input"
                                            name="any_deduction[]" value="{{ $deduction }}">
                                    </td>

                                    {{-- NET --}}
                                    <td>
                                        <input type="text"
                                            class="form-control form-control-sm text-end fw-bold row-net readonly-input"
                                            name="net_amount[]" value="{{ number_format($netAmount, 2, '.', '') }}" readonly>
                                    </td>

                                    {{-- Hidden IDs for Update --}}
                                    <input type="hidden" name="freight_entry_id[]" value="{{ $detail->freight_entry_id }}">
                                    <input type="hidden" name="freight_bill_detail_id[]" value="{{ $detail->id }}">

                                    {{-- Remove Button --}}
                                    <td>
                                        <button type="button" class="btn btn-sm btn-danger remove-gr">
                                            <i class="ri-delete-bin-line"></i>
                                        </button>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                            <tfoot>
                                <tr class="table-light fw-bold">
                                    <td colspan="6" class="text-end">Total</td>
                                    {{-- <td id="totalQty">0</td> --}}
                                    <td></td>
                                    <td class="text-end" id="totalFreight">0.00</td>
                                    <td class="text-end" id="totalHalting">0.00</td>
                                    <td class="text-end" id="totalExtra">0.00</td>
                                    <td class="text-end" id="totalDeduct">0.00</td>
                                    <td class="text-end text-primary" id="totalNet">0.00</td>
                                    <td></td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row gx-3">

        <div class="col-md-7">
            <div class="card mb-3">
                <div class="card-body">
                    <label class="form-label fw-bold small text-muted text-uppercase mb-2">Remarks / Notes</label>
                    <textarea name="remarks" class="form-control" rows="4" placeholder="Type any remarks here...">{{ old('remarks', $freightBilling->remarks) }}</textarea>
                </div>
            </div>
        </div>


        <div class="col-md-5">
            <div class="card total-card mb-3">
                <div class="card-body">
                    <h6 class="fw-bold mb-3 border-bottom pb-2 text-primary">Invoice Summary</h6>

                    {{-- Total Amount --}}
                    <div class="calc-row">
                        <span class="calc-label">Sub Total</span>
                        <input type="text" id="baseTotal" name="base_total"
                            class="form-control form-control-sm calc-value bg-light" readonly value="{{ $freightBilling->sub_total ?? '0.00' }}">
                    </div>

                    {{-- Less Discount --}}
                    <div class="calc-row">
                        <span class="calc-label">Discount</span>
                        <input type="number" step="0.01" name="discount" id="discount"
                            class="form-control form-control-sm calc-value" placeholder="0.00"
                            value="{{ old('discount', $freightBilling->discount ?? 0) }}">
                    </div>

                    {{-- Total After Discount --}}
                    <div class="calc-row">
                        <span class="calc-label fw-bold text-dark">Taxable Amount</span>
                        <input type="text" id="totalAfterDiscount" name="total_after_discount"
                            class="form-control form-control-sm calc-value fw-bold bg-light" readonly value="{{ $freightBilling->taxable_amount ?? '0.00' }}">
                    </div>

                    <div class="calc-row divider"></div>

                    {{-- GST Section --}}
                    <div class="mb-2">
                        <input type="hidden" id="company_state_id"
                            value="{{ data_get($company_details, 'company.state_id') ?? '' }}">
                        <input type="hidden" id="company_gst_mode"
                            value="{{ optional($taxSettings)->enable_gst_type ?? '' }}">

                        @if (($taxSettings['enable_gst_type'] ?? '') == 'rcm')
                        <div class="gst-breakup text-center">
                            <span class="badge bg-warning text-dark">RCM Applied (5%)</span>
                        </div>
                        @else
                        <div class="d-flex justify-content-between align-items-center mb-1">
                            <label class="calc-label small mb-0">GST Rate:</label>
                            <select class="form-select form-select-sm" name="gst_percent" id="gst_percent"
                                style="width: 140px;">
                                @foreach ($gstSlabs as $slab)
                                @if ($slab == 0 || $slab == 18)
                                <option value="{{ $slab }}"
                                    {{ old('gst_percent', 18) == $slab ? 'selected' : '' }}>
                                    {{ $slab == 0 ? 'NIL (0%)' : 'GST (' . $slab . '%)' }}
                                </option>
                                @endif
                                @endforeach
                            </select>

                        </div>
                        <div id="gstBreakup"></div>
                        <input type="hidden" name="gst_type" id="gst_type">
                        {{-- GST Amount --}}
                        <div class="calc-row">
                            <span class="calc-label fw-bold"> GST Amount</span>
                            <input type="text" id="gstAmount" name="gst_amount"
                                class="form-control form-control-sm calc-value fw-bold bg-light" readonly
                                value="0.00">
                        </div>
                        @endif
                    </div>

                    <div class="calc-row divider"></div>

                    {{-- Final Total --}}
                    <div class="d-flex justify-content-between align-items-center mt-2">
                        <h5 class="fw-bold m-0 text-dark">Grand Total</h5>
                        <h4 class="fw-bold m-0 text-primary" id="displayGrandTotal">₹ {{ number_format($freightBilling->grand_total, 2) }}</h4>
                        <input type="hidden" name="grand_total" id="grand_total" value="{{ $freightBilling->grand_total }}">
                    </div>
                </div>
            </div>

            {{-- Submit Button --}}
            <div class="d-grid gap-2">
                <button type="submit" class="btn btn-primary btn-lg btn-submit" id="BtnSubmit">
                    <i class="ri-check-double-line"></i> Update Invoice
                </button>
            </div>
        </div>
    </div>

    <!-- GR Selection Modal -->
    <div class="modal fade" id="grModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5>Select GR to Add</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>Select</th>
                                <th>GR No</th>
                                <th>Date</th>
                                <th>From - To</th>
                                <th>Freight</th>
                            </tr>
                        </thead>
                        <tbody id="availableGrList">
                            <!-- AJAX Data -->
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary" id="confirmAddGr">Add Selected GR</button>
                </div>
            </div>
        </div>
    </div>

    {!! Form::close() !!}
</div>
@endsection

@push('footer_script')
<script src="{{ asset('theme/assets/vendor/daterange/daterange.js') }}"></script>

<script>
    // Init Plugins
    $('.datepicker').daterangepicker({
        singleDatePicker: true,
        locale: {
            format: 'DD-MM-YYYY'
        }
    });

    $(document).ready(function() {
        calcTableTotals();

        // Auto show bank details if preselected
        if ($('#client_bank_id').val()) {
            $('#client_bank_id').trigger('change');
        }
    });

    $('.select2').select2({
        width: '100%'
    });

    // Bank Details Data
    const bankDetailsData = @json($bankDetails);

    // Handle Bank Selection
    $('#client_bank_id').on('change', function() {
        const selectedBankId = $(this).val();
        if (selectedBankId) {
            const bank = bankDetailsData.find(b => b.id == selectedBankId);
            if (bank) {
                $('#disp_bank_name').text(bank.bank_name);
                $('#disp_acc_no').text(bank.account_no);
                $('#disp_ifsc').text(bank.ifsc_code || '-');
            }
        } else {
            $('#disp_bank_name').text('-');
            $('#disp_acc_no').text('-');
            $('#disp_ifsc').text('-');
        }
    });

    // Utility
    const n = (val) => parseFloat(val) || 0;
    const f = (val) => n(val).toFixed(2);

    // --- CALCULATION LOGIC ---

    // 1. Row Level Calculation
    function calcRow($row) {
        let freight = n($row.find('.row-freight').val());
        let halting = n($row.find('.row-halting').val());
        let extra = n($row.find('.row-extra').val());
        let deduct = n($row.find('.row-deduct').val());

        let net = freight + halting + extra - deduct;
        if (net < 0) net = 0;

        $row.find('.row-net').val(f(net));
        return {
            freight,
            halting,
            extra,
            deduct,
            net
        };
    }

    // 2. Table Totals Calculation
    function calcTableTotals() {
        let tQty = 0,
            tFreight = 0,
            tHalting = 0,
            tExtra = 0,
            tDeduct = 0,
            tNet = 0;

        $('#grTable tbody tr').each(function() {
            let $row = $(this);
            // Qty (static text)
            tQty += n($row.find('.qty-cell').text());

            // Calculate Row
            let vals = calcRow($row);

            tFreight += vals.freight;
            tHalting += vals.halting;
            tExtra += vals.extra;
            tDeduct += vals.deduct;
            tNet += vals.net;
        });

        // Update Footer
        $('#totalQty').text(tQty);
        $('#totalFreight').text(f(tFreight));
        $('#totalHalting').text(f(tHalting));
        $('#totalExtra').text(f(tExtra));
        $('#totalDeduct').text(f(tDeduct));
        $('#totalNet').text(f(tNet));

        // Update Base Total for Summary
        $('#baseTotal').val(f(tNet));

        // Trigger Grand Total Calc
        calcGrandTotal();
    }

    // 3. Grand Total Calculation
    function calcGrandTotal() {
        let baseTotal = n($('#baseTotal').val());
        let discount = n($('#discount').val());

        let taxable = baseTotal - discount;
        if (taxable < 0) taxable = 0;
        $('#totalAfterDiscount').val(f(taxable));

        // GST
        let gstPercent = n($('#gst_percent').val());
        let companyGstMode = $('#company_gst_mode').val();
        let gstAmt = 0;

        if (companyGstMode === 'rcm') {
            gstAmt = (taxable * 5) / 100;
            $('#gst_type').val('RCM');
        } else {
            if (gstPercent > 0) {
                gstAmt = (taxable * gstPercent) / 100;
                // Show Breakup
                updateGstBreakup(gstPercent, gstAmt);
            } else {
                $('#gstBreakup').html('');
                $('#gst_type').val('NIL');
            }
        }
        $('#gstAmount').val(f(gstAmt));

        // Final
        let grand = companyGstMode === 'rcm' ? taxable : (taxable + gstAmt);

        $('#displayGrandTotal').text('₹ ' + f(grand));
        $('#grand_total').val(f(grand));
    }

    function updateGstBreakup(percent, amt) {
        let compState = $('#company_state_id').val();
        let partyState = $('#party_state_id').val();
        let html = '';

        if (compState && partyState && compState == partyState) {
            let halfRate = percent / 2;
            let halfAmt = amt / 2;
            html = `<div class="d-flex justify-content-between text-muted small">
                            <span>CGST (${halfRate}%)</span> <span>₹ ${f(halfAmt)}</span>
                        </div>
                        <div class="d-flex justify-content-between text-muted small">
                            <span>SGST (${halfRate}%)</span> <span>₹ ${f(halfAmt)}</span>
                        </div>`;
            $('#gst_type').val('CGST_SGST');
        } else {
            html = `<div class="d-flex justify-content-between text-muted small">
                            <span>IGST (${percent}%)</span> <span>₹ ${f(amt)}</span>
                        </div>`;
            $('#gst_type').val('IGST');
        }
        $('#gstBreakup').html(html);
        $('#gstBreakup').addClass('gst-breakup');
    }

    // Events
    $(document).on('input', '.calc-input', calcTableTotals);
    $('#discount, #round_off').on('input', calcGrandTotal);
    $('#gst_percent').on('change', calcGrandTotal);

    // Initial Run
    $(document).ready(calcTableTotals);

    // =====================
    // ADD GR MODAL LOGIC
    // =====================

    // Open Modal: load available GRs for this party via AJAX
    $('#addGrBtn').click(function() {
        let partyId = $('input[name="party_id"]').val();

        // Collect already-selected freight_entry_ids
        let selectedIds = [];
        $('input[name="freight_entry_id[]"]').each(function() {
            selectedIds.push($(this).val());
        });

        $.get("{{ url('freight-billing/available-gr') }}/" + partyId, function(data) {
            let html = '';

            data.forEach(gr => {
                if (selectedIds.includes(gr.id.toString())) return;

                let grData = encodeURIComponent(JSON.stringify(gr));
                html += `
                    <tr>
                        <td><input type="checkbox" class="gr-checkbox" data-gr="${grData}"></td>
                        <td>${gr.lr_no}</td>
                        <td>${gr.date}</td>
                        <td>${gr.from_location} - ${gr.to_location}</td>
                        <td>${parseFloat(gr.sub_total ?? 0).toFixed(2)}</td>
                    </tr>`;
            });

            if (html === '') {
                html = `<tr><td colspan="5" class="text-center text-muted">No GR available (all already selected)</td></tr>`;
            }

            $('#availableGrList').html(html);
            $('#grModal').modal('show');
        });
    });

    // Confirm: append selected GRs as new rows
    $('#confirmAddGr').on('click', function(e) {
        e.preventDefault();

        let rowCount = $('#grTable tbody tr').length;

        $('.gr-checkbox:checked').each(function() {
            let gr = JSON.parse(decodeURIComponent($(this).attr('data-gr')));
            if (!gr) return;

            rowCount++;

            let qtyHtml = '';
            let rateHtml = '';
            let freight = 0;
            let items = gr.items || [];

            items.forEach(item => {
                let qty = parseFloat(item.charge_weight ?? 0);
                let rate = parseFloat(item.rate ?? 0);
                let unit = item.weight_unit ?? '';

                qtyHtml += `<div style="line-height:14px;">${qty.toFixed(2)} ${unit}</div>`;
                rateHtml += `<div style="line-height:14px;">${rate.toFixed(2)} / ${unit}</div>`;
                freight += qty * rate;
            });

            freight = freight.toFixed(2);

            let newRow = `
            <tr class="gr-row">
                <td>${rowCount}</td>
                <td class="fw-bold text-primary">${gr.lr_no}</td>
                <td>${gr.date}</td>
                <td>${gr.vehicle ? gr.vehicle.vehicle_no : '-'}</td>
                <td>
                    <div class="d-flex flex-column small">
                        <span>${gr.from_location}</span>
                        <span class="text-muted"><i class="ri-arrow-down-line"></i></span>
                        <span>${gr.to_location}</span>
                    </div>
                </td>
                <td class="text-center qty-cell">${qtyHtml}</td>
                <td class="text-center">${rateHtml}</td>
                <td>
                    <input type="text" class="form-control form-control-sm text-end readonly-input row-freight"
                        value="${freight}" readonly>
                </td>
                <td>
                    <input type="number" step="0.01"
                        class="form-control form-control-sm text-end row-halting calc-input"
                        name="halting_charge[]" value="0">
                </td>
                <td>
                    <input type="number" step="0.01"
                        class="form-control form-control-sm text-end row-extra calc-input"
                        name="extra_charge[]" value="0">
                </td>
                <td>
                    <input type="number" step="0.01"
                        class="form-control form-control-sm text-end row-deduct calc-input"
                        name="any_deduction[]" value="0">
                </td>
                <td>
                    <input type="text"
                        class="form-control form-control-sm text-end fw-bold row-net readonly-input"
                        name="net_amount[]" value="${freight}" readonly>
                </td>
                <td>
                    <button type="button" class="btn btn-sm btn-danger remove-gr">
                        <i class="ri-delete-bin-line"></i>
                    </button>
                </td>
                <input type="hidden" name="freight_entry_id[]" value="${gr.id}">
                <input type="hidden" name="freight_bill_detail_id[]" value="0">
            </tr>`;

            $('#grTable tbody').append(newRow);
        });

        $('#grModal').modal('hide');
        calcTableTotals();
    });

    // Remove GR Row
    $(document).on('click', '.remove-gr', function() {
        $(this).closest('tr').remove();
        calcTableTotals();
    });
</script>
@endpush