@extends('layout.app')
@section('title', 'Generate 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 - Styled like Freight Entry Consignor/Consignee */
    .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;
        /* Primary Blue */
        /* color: white; */
        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">Generate Invoice</li>
    </ol>
    <div class="ms-auto d-lg-flex flex-row">
        <a href="{{ route('freight-billing.create') }}" class="btn btn-sm btn-outline-secondary">
            <i class="ri-arrow-left-circle-line"></i> Back to Selection
        </a>
    </div>
</div>

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

    <div class="row gx-3">
        {{-- ========================================
                SECTION 1: INVOICE DETAILS
                ======================================== --}}
        <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="{{ 'FB/' . date('Y') . '/' . str_pad($freightBillCount + 1, 3, '0', STR_PAD_LEFT) }}">
                        </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') }}">
                            </div>
                            <div class="text-danger">{{ $errors->first('invoice_date') }}</div>
                        </div>


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

    <div class="row gx-3">
        {{-- ========================================
                PARTY DETAILS CARD
                ======================================== --}}
        <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">
                    <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 --}}
                    @if (isset($partyDetail->id))
                    <input type="hidden" name="party_id" value="{{ $partyDetail->id }}">
                    <input type="hidden" id="party_state_id" value="{{ $partyDetail->state_id ?? '' }}">
                    @endif
                </div>
            </div>
        </div>

        {{-- ========================================
                BANK DETAILS CARD
                ======================================== --}}
        <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,
                            old('client_bank_id', $defaultBankId ?? null),
                            [
                            '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>

    {{-- ========================================
            SECTION 3: SELECTED GR SUMMARY TABLE
            ======================================== --}}
    <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($freightDatas) }} 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%">Freight Amount</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 ($freightDatas as $index => $freight)
                                @php
                                $selectedData = $selectedGRs[$freight->id] ?? null;

                                // GROUP QTY BY UNIT
                                $groupedUnits = $freight->items->groupBy('weight_unit');

                                // USE FREIGHT ENTRY SUB-TOTAL AS BASE
                                $freightSubTotal = floatval($freight->sub_total ?? 0);

                                $halting = floatval($selectedData['halting'] ?? 0);
                                $extra = floatval($selectedData['extra_charge'] ?? 0);
                                $deduction = floatval($selectedData['any_deduction'] ?? 0);

                                $netAmount = $freightSubTotal + $halting + $extra - $deduction;
                                @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[{{ $freight->id }}]" 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[{{ $freight->id }}]"
                                            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[{{ $freight->id }}]"
                                            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[{{ $freight->id }}]"
                                            value="{{ number_format($netAmount, 2, '.', '') }}" 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_check[]" value="{{ $freight->id }}">
                                </tr>
                                @endforeach
                            </tbody>
                            <tfoot>
                                <tr class="table-light fw-bold">
                                    <td colspan="6" class="text-end">Total</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>
                                </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') }}</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="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', 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="0.00">
                    </div>

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

                    {{-- GST Section --}}
                    <div class="mb-2">
                        @php
                        $taxSettings = \App\Http\Helpers\CommonHelper::checkTaxSetting('enable_gst');
                        @endphp

                        <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>



                    {{-- Other Amount --}}
                    {{-- <div class="calc-row">
                            <span class="calc-label">Add/Less: Round Off</span>
                            <input type="number" step="0.01" name="round_off" id="round_off"
                                class="form-control form-control-sm calc-value" placeholder="0.00"
                                value="{{ old('round_off', 0) }}">
                </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">₹ 0.00</h4>
                    <input type="hidden" name="grand_total" id="grand_total" value="0.00">
                </div>
            </div>
        </div> <input type="hidden" id="company_state_id"
            value="{{ data_get($company_details, 'company.state_id') }}">
        {{-- 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> Generate 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 for Invoice</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 roundOff = n($('#round_off').val());
        let grand = companyGstMode === 'rcm' ? (taxable + roundOff) : (taxable + gstAmt + roundOff);

        $('#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);
</script>
<script>
    // Open Modal
    $('#addGrBtn').click(function() {
        let partyId = $('input[name="party_id"]').val();


        let selectedIds = [];
        $('input[name="freight_check[]"]').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 no GR left
            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');
        });
    });


    $('#confirmAddGr').on('click', function(e) {
        e.preventDefault();

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

        $('.gr-checkbox:checked').each(function() {

            // decode stored object
            let gr = JSON.parse(decodeURIComponent($(this).attr('data-gr')));
            if (!gr) return;

            rowCount++;

            let qtyHtml = '';
            let rateHtml = '';
            let freight = 0;

            // SAFETY: handle undefined items
            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[${gr.id}]" 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[${gr.id}]" 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[${gr.id}]" value="0">
                </td>
                <td>
                    <input type="text"
                        class="form-control form-control-sm text-end fw-bold row-net readonly-input"
                        name="net_amount[${gr.id}]" 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_check[]" value="${gr.id}">
            </tr>`;

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

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

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

    // Auto-remove 0 or 0.00 on focus for inputs, restore on blur if empty
    $(document).on('focus', 'input[type="number"], input[type="text"]', function() {
        var val = $(this).val();
        if (val === '0' || val === '0.00') {
            $(this).data('zero-val', val);
            $(this).val('');
        } else {
            $(this).data('zero-val', null);
        }
    });
    $(document).on('blur', 'input[type="number"], input[type="text"]', function() {
        if ($(this).val() === '' && $(this).data('zero-val')) {
            $(this).val($(this).data('zero-val'));
            $(this).trigger('input'); // Trigger input so calculations can run
            $(this).trigger('change');
        }
    });
</script>
@endpush