{{--
    جدول بنود ديناميكي مشترك بين عروض الأسعار والفواتير.
    المتغيرات المطلوبة: $items (مصفوفة البنود)، $products (مجموعة المنتجات)
--}}
<div class="form-section-title mt-4"><i class="fa-solid fa-list"></i>البنود</div>

<div class="table-responsive">
    <table class="table table-bordered align-middle" id="itemsTable">
        <thead class="table-light">
        <tr>
            <th style="width:20%">المنتج</th>
            <th style="width:22%">البيان</th>
            <th style="width:10%">الكمية</th>
            <th style="width:13%">السعر</th>
            <th style="width:10%">الخصم</th>
            <th style="width:9%">ضريبة %</th>
            <th style="width:14%">الإجمالي</th>
            <th style="width:2%"></th>
        </tr>
        </thead>
        <tbody>
        @foreach ($items as $index => $row)
            <tr class="item-row">
                <td>
                    <select name="items[{{ $index }}][product_id]" class="form-select form-select-sm item-product">
                        <option value="">— يدوي —</option>
                        @foreach ($products as $p)
                            <option value="{{ $p->id }}"
                                    data-price="{{ $p->sale_price }}"
                                    data-tax="{{ $p->tax_rate }}"
                                    data-name="{{ $p->name }}"
                                @selected((int) ($row['product_id'] ?? 0) === $p->id)>
                                {{ $p->name }}
                            </option>
                        @endforeach
                    </select>
                </td>
                <td><input type="text" name="items[{{ $index }}][description]" value="{{ $row['description'] ?? '' }}" class="form-control form-control-sm item-desc"></td>
                <td><input type="number" step="0.01" min="0" name="items[{{ $index }}][quantity]" value="{{ $row['quantity'] ?? 1 }}" class="form-control form-control-sm item-qty"></td>
                <td><input type="number" step="0.01" min="0" name="items[{{ $index }}][price]" value="{{ $row['price'] ?? 0 }}" class="form-control form-control-sm item-price"></td>
                <td><input type="number" step="0.01" min="0" name="items[{{ $index }}][discount]" value="{{ $row['discount'] ?? 0 }}" class="form-control form-control-sm item-discount"></td>
                <td><input type="number" step="0.01" min="0" max="100" name="items[{{ $index }}][tax_rate]" value="{{ $row['tax_rate'] ?? setting('tax_rate', 15) }}" class="form-control form-control-sm item-tax"></td>
                <td><input type="text" class="form-control form-control-sm item-total bg-light" readonly></td>
                <td class="text-center">
                    <button type="button" class="btn btn-sm btn-outline-danger remove-row"><i class="fa-solid fa-trash"></i></button>
                </td>
            </tr>
        @endforeach
        </tbody>
    </table>
</div>

<button type="button" class="btn btn-sm btn-outline-primary" id="addRow"><i class="fa-solid fa-plus ms-1"></i>إضافة بند</button>

@push('scripts')
<script>
$(function () {
    let rowIndex = {{ count($items) }};

    function recalc() {
        let subtotal = 0, taxTotal = 0;

        $('#itemsTable tbody tr').each(function () {
            const qty = parseFloat($(this).find('.item-qty').val()) || 0;
            const price = parseFloat($(this).find('.item-price').val()) || 0;
            const disc = parseFloat($(this).find('.item-discount').val()) || 0;
            const taxRate = parseFloat($(this).find('.item-tax').val()) || 0;

            const base = Math.max(0, qty * price - disc);
            const tax = base * taxRate / 100;

            $(this).find('.item-total').val(fmt(base + tax));
            subtotal += base;
            taxTotal += tax;
        });

        const globalDiscount = parseFloat($('#discountInput').val()) || 0;

        $('#subtotalDisplay').text(fmt(subtotal));
        $('#taxDisplay').text(fmt(taxTotal));
        $('#grandTotal').text(fmt(Math.max(0, subtotal + taxTotal - globalDiscount)));
    }

    $('#itemsTable').on('input change', '.item-qty, .item-price, .item-discount, .item-tax', recalc);
    $('#discountInput').on('input', recalc);

    $('#itemsTable').on('change', '.item-product', function () {
        const opt = $(this).find('option:selected');
        const $row = $(this).closest('tr');

        if (opt.val()) {
            $row.find('.item-price').val(opt.data('price'));
            $row.find('.item-tax').val(opt.data('tax'));
            if (!$row.find('.item-desc').val()) $row.find('.item-desc').val(opt.data('name'));
        }
        recalc();
    });

    $('#addRow').on('click', function () {
        const $row = $('#itemsTable tbody tr:first').clone();
        $row.find('select, input').each(function () {
            const name = $(this).attr('name');
            if (name) $(this).attr('name', name.replace(/\[\d+\]/, '[' + rowIndex + ']'));

            if ($(this).is('select')) $(this).val('');
            else if ($(this).hasClass('item-qty')) $(this).val(1);
            else if ($(this).hasClass('item-tax')) $(this).val('{{ setting('tax_rate', 15) }}');
            else if ($(this).hasClass('item-desc')) $(this).val('');
            else $(this).val(0);
        });
        $('#itemsTable tbody').append($row);
        rowIndex++;
        recalc();
    });

    $('#itemsTable').on('click', '.remove-row', function () {
        if ($('#itemsTable tbody tr').length > 1) {
            $(this).closest('tr').remove();
            recalc();
        }
    });

    recalc();
});
</script>
@endpush