{{--
Reusable line-items table for stock operations.
Required vars:
  $columns       array of header labels in order (e.g. ['المنتج','الكمية','تكلفة','إجمالي','حذف'])
  $itemFields    array of input names matching the columns (e.g. ['product_id','quantity','cost_price'])
                 'product_id' is mandatory; the rest are simple numeric inputs.
  $extraFields   optional array of extras shown last per row before the delete button (each: ['name','type','attrs'])
  $tableId       html id to bind JS to
Pass into create.blade.php views; the JS adds/removes rows and uses Select2 AJAX picker.
--}}
@php
    $columns     = $columns     ?? ['المنتج', 'الكمية', 'سعر التكلفة', 'الإجمالي', ''];
    $tableId     = $tableId     ?? 'itemsTable';
    $showCost    = $showCost    ?? true;
    $showActual  = $showActual  ?? false;
    $showSystem  = $showSystem  ?? false;
@endphp

<div class="table-responsive">
    <table class="table table-bordered" id="{{ $tableId }}">
        <thead class="bg-light">
            <tr>
                <th style="width:35%">المنتج / variant *</th>
                @if($showSystem)<th style="width:12%">رصيد النظام</th>@endif
                <th style="width:12%">{{ $showActual ? 'الكمية الفعلية' : 'الكمية' }} *</th>
                @if($showCost)<th style="width:12%">سعر الوحدة</th>@endif
                @if(! $showActual && $showCost)<th style="width:12%">الإجمالي</th>@endif
                @if($showActual)<th style="width:12%">الفرق</th>@endif
                <th style="width:20%">ملاحظات</th>
                <th style="width:5%"></th>
            </tr>
        </thead>
        <tbody></tbody>
        <tfoot>
            <tr>
                <td colspan="{{ 3 + ($showSystem ? 1 : 0) + ($showCost ? 1 : 0) + (! $showActual && $showCost ? 1 : 0) + ($showActual ? 1 : 0) }}">
                    <button type="button" class="btn btn-sm btn-success add-item-row">
                        <i class="fas fa-plus"></i> إضافة سطر
                    </button>
                </td>
                @if($showCost && ! $showActual)
                    <td class="text-right">
                        <strong>الإجمالي:</strong>
                        <span id="grandTotal" class="ml-2">0.00</span>
                    </td>
                    <td></td>
                @endif
            </tr>
        </tfoot>
    </table>
</div>

@push('scripts')
<script>
window.OFPStock = window.OFPStock || {};

OFPStock.attachLineItems = function (cfg) {
    const $table = $('#' + cfg.tableId);
    const $body  = $table.find('tbody');
    const showCost   = !!cfg.showCost;
    const showActual = !!cfg.showActual;
    const showSystem = !!cfg.showSystem;

    function rowHtml(idx) {
        let h = '<tr>';
        h += '<td>'
           + '<select name="items['+idx+'][product_id]" class="form-control form-control-sm product-picker" required></select>'
           + '<input type="hidden" name="items['+idx+'][variant_id]" value="">'
           + '</td>';
        if (showSystem) h += '<td><input type="text" name="items['+idx+'][system_qty_display]" class="form-control form-control-sm system-qty" readonly></td>';
        h += '<td><input type="number" step="0.001" min="'+(showActual?'0':'0.001')+'" name="items['+idx+']['+(showActual?'actual_qty':'quantity')+']" class="form-control form-control-sm qty" required></td>';
        if (showCost)  h += '<td><input type="number" step="0.01" min="0" name="items['+idx+'][cost_price]" class="form-control form-control-sm cost"></td>';
        if (!showActual && showCost) h += '<td class="line-total text-right">0.00</td>';
        if (showActual) h += '<td class="diff text-right">—</td>';
        h += '<td><input type="text" name="items['+idx+'][notes]" class="form-control form-control-sm"></td>';
        h += '<td class="text-center"><button type="button" class="btn btn-sm btn-danger remove-row"><i class="fas fa-times"></i></button></td>';
        h += '</tr>';
        return h;
    }

    function recalc() {
        let grand = 0;
        $body.find('tr').each(function () {
            const $r = $(this);
            const qty  = parseFloat($r.find('.qty').val()) || 0;
            const cost = parseFloat($r.find('.cost').val()) || 0;
            if (showCost && !showActual) {
                const total = qty * cost;
                $r.find('.line-total').text(total.toFixed(2));
                grand += total;
            }
            if (showActual) {
                const sys = parseFloat($r.find('.system-qty').val()) || 0;
                const diff = qty - sys;
                const sign = diff > 0 ? '+' : '';
                $r.find('.diff').html('<span class="'+(diff>=0?'text-success':'text-danger')+'">'+sign+diff.toFixed(3)+'</span>');
            }
        });
        $('#grandTotal').text(grand.toFixed(2));
    }

    function bindPicker($select) {
        $select.select2({
            placeholder: 'ابحث عن منتج…',
            ajax: {
                url: cfg.searchUrl,
                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%',
        }).on('select2:select', function (e) {
            const $row = $(this).closest('tr');
            const raw = e.params.data.raw;
            // pre-fill cost from product cost_price if empty
            if (showCost) {
                const $cost = $row.find('.cost');
                if (! $cost.val()) $cost.val((raw.cost_price ?? 0).toFixed(2));
            }
            // for adjustments, fetch system qty
            if (showSystem) {
                $.get(cfg.systemQtyUrl, {
                    warehouse_id: cfg.getWarehouseId(),
                    product_id: raw.id,
                }).done(d => {
                    $row.find('.system-qty').val(parseFloat(d.system_qty).toFixed(3));
                    if (! $row.find('.qty').val()) $row.find('.qty').val(parseFloat(d.system_qty).toFixed(3));
                    recalc();
                });
            }
            recalc();
        });
    }

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

    $table.on('click', '.add-item-row', addRow);
    $table.on('click', '.remove-row', function () {
        $(this).closest('tr').remove();
        recalc();
    });
    $table.on('input', '.qty, .cost', recalc);

    // start with one empty row
    addRow();
};
</script>
@endpush