{{-- Reusable line-items JS for forms with product picker + qty/price/disc/tax recalc.
     Required vars: $tableId, $searchUrl, $taxRate, $extraFee (input id name), $totShippingId
--}}
<script>
$(function () {
    const $body = $('#{{ $tableId }} tbody');
    const url   = '{{ $searchUrl }}';
    const TAX   = {{ $taxRate }};

    function rowHtml(idx) {
        return `
            <tr>
                <td>
                    <select name="items[${idx}][product_id]" class="form-control form-control-sm product-picker" style="width:100%"></select>
                </td>
                <td><input type="text" name="items[${idx}][description]" class="form-control form-control-sm desc" required></td>
                <td><input type="number" step="0.001" min="0.001" name="items[${idx}][quantity]" class="form-control form-control-sm qty" value="1" required></td>
                <td><input type="number" step="0.01" min="0" name="items[${idx}][unit_price]" class="form-control form-control-sm price" value="0" required></td>
                <td><input type="number" step="0.01" min="0" max="100" name="items[${idx}][discount_pct]" class="form-control form-control-sm disc" value="0"></td>
                <td><input type="number" step="0.01" min="0" max="100" name="items[${idx}][tax_pct]" class="form-control form-control-sm tax" value="${TAX}"></td>
                <td class="text-right line-total">0.00</td>
                <td><button type="button" class="btn btn-sm btn-danger remove-row"><i class="fas fa-times"></i></button></td>
            </tr>
        `;
    }

    function bindPicker($select) {
        $select.select2({
            placeholder: 'ابحث عن منتج…',
            ajax: {
                url, dataType: 'json', delay: 250,
                data: params => ({ q: params.term }),
                processResults: data => ({ results: data.map(p => ({ id: p.id, text: '['+p.sku+'] '+p.name, raw: p })) })
            },
            width: '100%', allowClear: true,
        }).on('select2:select', function (e) {
            const $row = $(this).closest('tr');
            const raw = e.params.data.raw;
            if (! $row.find('.desc').val())  $row.find('.desc').val(raw.name);
            if (! $row.find('.price').val() || $row.find('.price').val() === '0') {
                $row.find('.price').val(parseFloat(raw.cost_price || raw.sale_price || 0).toFixed(2));
            }
            recalc();
        });
    }

    function recalc() {
        let sub = 0, disc = 0, tax = 0;
        $body.find('tr').each(function () {
            const $r = $(this);
            const q = parseFloat($r.find('.qty').val()) || 0;
            const p = parseFloat($r.find('.price').val()) || 0;
            const dp = parseFloat($r.find('.disc').val()) || 0;
            const tp = parseFloat($r.find('.tax').val()) || 0;
            const s = q * p;
            const d = s * dp / 100;
            const t = (s - d) * tp / 100;
            $r.find('.line-total').text((s - d + t).toFixed(2));
            sub += s; disc += d; tax += t;
        });
        const ship = parseFloat($('#{{ $extraFee }}').val()) || 0;
        $('#totSubtotal').text(sub.toFixed(2));
        $('#totDiscount').text(disc.toFixed(2));
        $('#totTax').text(tax.toFixed(2));
        $('#{{ $totShippingId }}').text(ship.toFixed(2));
        $('#totGrand').text((sub - disc + tax + ship).toFixed(2));
    }

    function addRow() {
        const idx = $body.find('tr').length;
        const $row = $(rowHtml(idx));
        $body.append($row);
        bindPicker($row.find('.product-picker'));
    }

    $body.find('.product-picker').each(function () { bindPicker($(this)); });
    if ($body.find('tr').length === 0) addRow();

    $('#addRowBtn').on('click', addRow);
    $('#{{ $tableId }}').on('click', '.remove-row', function () { $(this).closest('tr').remove(); recalc(); });
    $('#{{ $tableId }}').on('input change', '.qty, .price, .disc, .tax', recalc);
    $('#{{ $extraFee }}').on('input change', recalc);

    recalc();
});
</script>