@if (!$freightDatas->isEmpty())
<style>
    .pending-freight-table {
        border-collapse: collapse !important;
        width: 100% !important;
        border: 1px solid #dee2e6 !important;
    }
    .pending-freight-table th,
    .pending-freight-table td {
        border: 1px solid #dee2e6 !important;
        vertical-align: middle !important;
        padding: 6px 8px !important;
    }
    .pending-freight-table thead th {
        background-color: #f8f9fa !important;
        border-bottom: 2px solid #dee2e6 !important;
        font-weight: 600;
        text-align: center;
        white-space: nowrap;
    }
    .pending-freight-table input.form-control {
        padding: 4px 6px !important;
        font-size: 0.9rem !important;
        height: 34px !important;
    }
    .col-subtotal, .col-netamount {
        min-width: 120px !important;
        width: 120px !important;
    }
    .col-charge {
        min-width: 85px !important;
        width: 85px !important;
    }
</style>
<div class="col-sm-12 col-12 mt-3">
    <div class="table-responsive">
        <table class="table table-bordered pending-freight-table">
            <thead>
                <tr>
                    <th style="min-width: 45px;">S.no</th>
                    <th style="min-width: 60px;">GR No</th>
                    <th style="min-width: 105px;">Dispatch Date</th>
                    <th style="min-width: 110px;">Truck No.</th>
                    <th style="min-width: 130px;">Party Name</th>
                    <th style="min-width: 90px;">From</th>
                    <th style="min-width: 90px;">To</th>
                    <th class="col-subtotal">Sub Total</th>
                    <th class="col-charge">+ Halting</th>
                    <th class="col-charge">+ Extra charge</th>
                    <th class="col-charge">Any Deduction</th>
                    <th class="col-netamount">Net Amount</th>
                    <th style="min-width: 80px;">
                        <input type="checkbox" value="1" id="checkall">
                        <label for="checkall">&nbsp; Select All</label>
                    </th>
                </tr>
            </thead>
            <tbody>
                @php $rowNum = 1; @endphp
                @foreach ($freightDatas as $freight)
                @php
                    $partyName = \App\Http\Helpers\CommonHelper::getPartyByFreightPaidBy(
                        $freight->id,
                        $freight->paid_by,
                    );
                    $partyId = match ($freight->paid_by) {
                        'Consignor' => $freight->consignor_id,
                        'Consignee' => $freight->consignee_id,
                        'Transporter' => $freight->party_id,
                        default => null,
                    };
                @endphp
                <tr>
                    <td class="text-center">{{ $rowNum }}</td>
                    <td class="text-center">{{ $freight->lr_no }}</td>
                    <td class="text-center text-nowrap">{{ date('d-M-Y', strtotime($freight->date)) }}</td>
                    <td class="text-nowrap">{{ $freight->vehicle->vehicle_no ?? '' }}</td>
                    <td>{{ $partyName }}</td>
                    <td>{{ $freight->from_location }}</td>
                    <td>{{ $freight->to_location }}</td>
                    <td class="col-subtotal">
                        <input type="text" class="form-control floatnumber readonly text-end" value="{{ number_format($freight->sub_total, 2) }}" readonly style="min-width: 105px;">
                    </td>
                    <td class="col-charge">
                        <input type="text" name="halting[]" class="form-control floatnumber halting text-end"
                            value="0" data-freight-id="{{ $freight->id }}">
                    </td>
                    <td class="col-charge">
                        <input type="text" name="extra_charge[]"
                            class="form-control floatnumber extra_charge text-end" value="0"
                            data-freight-id="{{ $freight->id }}">
                    </td>
                    <td class="col-charge">
                        <input type="text" name="any_deduction[]"
                            class="form-control floatnumber any_deduction text-end" value="0"
                            data-freight-id="{{ $freight->id }}">
                    </td>
                    <td class="col-netamount">
                        <input type="text" name="net_amount[]"
                            class="form-control floatnumber readonly net_amount text-end"
                            value="{{ number_format($freight->sub_total, 2) }}" readonly
                            data-freight-id="{{ $freight->id }}" style="min-width: 105px;">
                        <input type="hidden" name="party_total[]" value="{{ $freight->sub_total }}"
                            data-freight-id="{{ $freight->id }}">
                    </td>
                    <td class="text-center">
                        <input type="checkbox" class="form-check-input check" name="freight_check[]"
                            value="{{ $freight->id }}" data-freight-id="{{ $freight->id }}" data-party-id="{{ $partyId }}">
                    </td>
                </tr>
                @php $rowNum++; @endphp
                @endforeach
            </tbody>
        </table>
    </div>
</div>

{{-- ================= JS ================= --}}
<script>
    // Allow only numbers
    $('.floatnumber').on('input', function() {
        this.value = this.value.replace(/[^0-9.]/g, '')
            .replace(/(\..*)\./g, '$1');
    });

    // Select all
    $('#checkall').on('change', function() {
        $('.check').prop('checked', this.checked);
    });

    // Recalculate net amount on any change
    function recalculateNetAmount(freightId) {
        const rows = document.querySelectorAll(`input[data-freight-id="${freightId}"]`);
        const row = rows[0].closest('tr');

        // Get base amount
        const baseAmount = parseFloat(
            row.querySelector(`input[name="party_total[]"][data-freight-id="${freightId}"]`).value
        ) || 0;

        // Get all charges for this freight
        const halting = parseFloat(
            row.querySelector(`input[name="halting[]"][data-freight-id="${freightId}"]`).value
        ) || 0;

        const extraCharge = parseFloat(
            row.querySelector(`input[name="extra_charge[]"][data-freight-id="${freightId}"]`).value
        ) || 0;

        const deduction = parseFloat(
            row.querySelector(`input[name="any_deduction[]"][data-freight-id="${freightId}"]`).value
        ) || 0;

        // Calculate final amount
        let finalAmount = baseAmount + halting + extraCharge - deduction;

        row.querySelector(`input[name="net_amount[]"][data-freight-id="${freightId}"]`).value =
            Math.max(0, finalAmount).toFixed(2);
    }

    $(document).on('input', '.halting', function() {
        const freightId = $(this).data('freight-id');
        recalculateNetAmount(freightId);
    });

    $(document).on('input', '.extra_charge', function() {
        const freightId = $(this).data('freight-id');
        recalculateNetAmount(freightId);
    });

    $(document).on('input', '.any_deduction', function() {
        const freightId = $(this).data('freight-id');
        recalculateNetAmount(freightId);
    });


    // $(document).on('input', '.rate-input', function() {
    //     const freightId = $(this).data('freight-id');
    //     const rate = parseFloat($(this).val()) || 0;
    //     const qty = parseFloat($(this).closest('tr').find('td:nth-child(10)').text()) || 0;
    //     const amount = (rate * qty).toFixed(2);

    //     $(this).closest('tr').find('.freight-amount').val(amount);
    // });


    // Proceed to Generate Invoice
    // function proceedToGenerateInvoice() {
    //     const selectedGRs = [];
    //     const party_id = $('#party_id').val();

    //     if (!party_id) {
    //         alert('Please select a party first.');
    //         return;
    //     }

    //     // Collect all checked freight entries
    //     $('.check:checked').each(function() {
    //         const freightId = $(this).data('freight-id');
    //         const row = $(this).closest('tr');

    //         // Get all the values for this freight entry
    //         const halting = parseFloat(row.find(`input[name="halting[]"][data-freight-id="${freightId}"]`)
    //         .val()) || 0;
    //         const extraCharge = parseFloat(row.find(
    //             `input[name="extra_charge[]"][data-freight-id="${freightId}"]`).val()) || 0;
    //         const deduction = parseFloat(row.find(
    //             `input[name="any_deduction[]"][data-freight-id="${freightId}"]`).val()) || 0;
    //         const netAmount = parseFloat(row.find(`input[name="net_amount[]"][data-freight-id="${freightId}"]`)
    //             .val()) || 0;

    //         selectedGRs.push({
    //             freight_id: freightId,
    //             halting: halting,
    //             extra_charge: extraCharge,
    //             any_deduction: deduction,
    //             net_amount: netAmount
    //         });
    //     });

    //     if (selectedGRs.length === 0) {
    //         alert('Please select at least one GR to proceed.');
    //         return;
    //     }

    //     // Create a form and submit
    //     const form = $('<form>', {
    //         method: 'POST',
    //         action: '{{ route('freight-billing.proceedToInvoice') }}'
    //     });

    //     // Add CSRF token
    //     form.append($('<input>', {
    //         type: 'hidden',
    //         name: '_token',
    //         value: '{{ csrf_token() }}'
    //     }));

    //     // Add party_id
    //     form.append($('<input>', {
    //         type: 'hidden',
    //         name: 'party_id',
    //         value: party_id
    //     }));

    //     // Add selected GRs data
    //     form.append($('<input>', {
    //         type: 'hidden',
    //         name: 'selected_grs',
    //         value: JSON.stringify(selectedGRs)
    //     }));

    //     // Append form to body and submit
    //     $('body').append(form);
    //     form.submit();
    // }
    function proceedToGenerateInvoice() {

        const selectedGRs = [];
        let detectedPartyId = null;
        let invalidPartySelection = false;

        $('.check:checked').each(function() {

            const freightId = $(this).data('freight-id');
            const partyId = $(this).data('party-id');

            // Detect first party
            if (!detectedPartyId) {
                detectedPartyId = partyId;
            }

            // If another party found → error
            if (detectedPartyId != partyId) {
                invalidPartySelection = true;
            }

            const row = $(this).closest('tr');

            const halting = parseFloat(row.find(`input[name="halting[]"][data-freight-id="${freightId}"]`)
                .val()) || 0;
            const extraCharge = parseFloat(row.find(
                `input[name="extra_charge[]"][data-freight-id="${freightId}"]`).val()) || 0;
            const deduction = parseFloat(row.find(
                `input[name="any_deduction[]"][data-freight-id="${freightId}"]`).val()) || 0;
            const netAmount = parseFloat(row.find(`input[name="net_amount[]"][data-freight-id="${freightId}"]`)
                .val()) || 0;

            selectedGRs.push({
                freight_id: freightId,
                halting: halting,
                extra_charge: extraCharge,
                any_deduction: deduction,
                net_amount: netAmount
            });
        });

        if (selectedGRs.length === 0) {
            alert('Please select at least one GR to proceed.');
            return;
        }

        if (invalidPartySelection) {
            alert('All selected GR must belong to same party.');
            return;
        }

        // Create form
        const form = $('<form>', {
            method: 'POST',
            action: '{{ route('freight-billing.proceedToInvoice') }}'

        });

        form.append($('<input>', {
            type: 'hidden',
            name: '_token',
            value: '{{ csrf_token() }}'
        }));

        form.append($('<input>', {
            type: 'hidden',
            name: 'party_id',
            value: detectedPartyId
        }));

        form.append($('<input>', {
            type: 'hidden',
            name: 'selected_grs',
            value: JSON.stringify(selectedGRs)
        }));

        $('body').append(form);
        form.submit();
    }

    // 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>
@else
<p class="text-danger fw-bold">Data Not Found</p>
@endif