@php $items = $items ?? collect(); @endphp
<div class="table-responsive">
    <table class="table table-hover align-middle mb-0">
        <thead class="bg-light">
            <tr>
                <th class="border-0 px-3 py-2 fw-semibold text-muted small" style="width:22%">Product</th>
                <th class="border-0 px-3 py-2 fw-semibold text-muted small">Description</th>
                <th class="border-0 px-3 py-2 fw-semibold text-muted small text-end" style="width:10%">Qty</th>
                <th class="border-0 px-3 py-2 fw-semibold text-muted small" style="width:8%">Unit</th>
                <th class="border-0 px-3 py-2 fw-semibold text-muted small text-end" style="width:12%">Unit Price</th>
                <th class="border-0 px-3 py-2 fw-semibold text-muted small text-end" style="width:12%">Amount</th>
                <th class="border-0 px-3 py-2 fw-semibold text-muted small text-center" style="width:5%"></th>
            </tr>
        </thead>
        <tbody id="orderItemsBody">
            @forelse($items as $index => $item)
            <tr class="item-row">
                <td class="px-3">
                    <select name="items[{{ $index }}][product_id]" class="form-select form-select-sm product-select">
                        <option value="">Select</option>
                        @foreach($products ?? [] as $product)
                            <option value="{{ $product->id }}" {{ ($item->product_id ?? '') == $product->id ? 'selected' : '' }} data-price="{{ $product->unit_price ?? 0 }}">{{ $product->name }}</option>
                        @endforeach
                    </select>
                </td>
                <td class="px-3"><input type="text" name="items[{{ $index }}][description]" class="form-control form-control-sm" value="{{ $item->description ?? '' }}"></td>
                <td class="px-3"><input type="number" step="0.01" name="items[{{ $index }}][quantity]" class="form-control form-control-sm text-end qty-input" value="{{ $item->quantity ?? '' }}"></td>
                <td class="px-3">
                    <select name="items[{{ $index }}][unit]" class="form-select form-select-sm">
                        @foreach(['MT', 'KG', 'LT', 'GL', 'PCS', 'SET'] as $u)
                            <option value="{{ $u }}" {{ ($item->unit ?? 'MT') == $u ? 'selected' : '' }}>{{ $u }}</option>
                        @endforeach
                    </select>
                </td>
                <td class="px-3"><input type="number" step="0.01" name="items[{{ $index }}][unit_price]" class="form-control form-control-sm text-end price-input" value="{{ $item->unit_price ?? '' }}"></td>
                <td class="px-3 text-end fw-medium line-total">{{ number_format(($item->quantity ?? 0) * ($item->unit_price ?? 0), 2) }}</td>
                <td class="px-3 text-center"><button type="button" class="btn btn-sm btn-outline-danger removeItem"><i class="bi bi-trash"></i></button></td>
            </tr>
            @empty
            <tr class="empty-row" id="orderEmptyRow"><td colspan="7" class="text-center py-4 text-muted">No items. Click "Add" to begin.</td></tr>
            @endforelse
        </tbody>
    </table>
</div>

<script type="text/html" id="orderItemTemplate">
<tr class="item-row">
    <td class="px-3"><select name="items[{{index}}][product_id]" class="form-select form-select-sm product-select"><option value="">Select</option>@foreach($products ?? [] as $p)<option value="{{ $p->id }}" data-price="{{ $p->unit_price ?? 0 }}">{{ $p->name }}</option>@endforeach</select></td>
    <td class="px-3"><input type="text" name="items[{{index}}][description]" class="form-control form-control-sm"></td>
    <td class="px-3"><input type="number" step="0.01" name="items[{{index}}][quantity]" class="form-control form-control-sm text-end qty-input"></td>
    <td class="px-3"><select name="items[{{index}}][unit]" class="form-select form-select-sm">@foreach(['MT','KG','LT','GL','PCS','SET'] as $u)<option value="{{ $u }}">{{ $u }}</option>@endforeach</select></td>
    <td class="px-3"><input type="number" step="0.01" name="items[{{index}}][unit_price]" class="form-control form-control-sm text-end price-input"></td>
    <td class="px-3 text-end fw-medium line-total">0.00</td>
    <td class="px-3 text-center"><button type="button" class="btn btn-sm btn-outline-danger removeItem"><i class="bi bi-trash"></i></button></td>
</tr>
</script>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    let idx = {{ $items->count() }};
    document.getElementById('addOrderItemBtn')?.addEventListener('click', function() {
        idx++;
        const empty = document.getElementById('orderEmptyRow');
        if (empty) empty.remove();
        document.getElementById('orderItemsBody').insertAdjacentHTML('beforeend', document.getElementById('orderItemTemplate').innerHTML.replace(/\{\{index\}\}/g, idx));
    });

    document.getElementById('orderItemsBody')?.addEventListener('click', function(e) {
        if (e.target.closest('.removeItem')) {
            e.target.closest('.item-row').remove();
            calculateOrderTotals();
            if (!document.querySelector('#orderItemsBody .item-row')) {
                document.getElementById('orderItemsBody').innerHTML = '<tr class="empty-row" id="orderEmptyRow"><td colspan="7" class="text-center py-4 text-muted">No items.</td></tr>';
            }
        }
    });

    document.getElementById('orderItemsBody')?.addEventListener('input', function(e) {
        const row = e.target.closest('.item-row');
        if (row && (e.target.classList.contains('qty-input') || e.target.classList.contains('price-input'))) {
            const qty = parseFloat(row.querySelector('.qty-input')?.value) || 0;
            const price = parseFloat(row.querySelector('.price-input')?.value) || 0;
            row.querySelector('.line-total').textContent = (qty * price).toFixed(2);
            calculateOrderTotals();
        }
    });

    document.getElementById('orderItemsBody')?.addEventListener('change', function(e) {
        if (e.target.classList.contains('product-select')) {
            const opt = e.target.options[e.target.selectedIndex];
            const row = e.target.closest('.item-row');
            const pi = row.querySelector('.price-input');
            if (opt.dataset.price) pi.value = opt.dataset.price;
            pi.dispatchEvent(new Event('input'));
        }
    });

    function calculateOrderTotals() {
        let sub = 0;
        document.querySelectorAll('#orderItemsBody .line-total').forEach(el => sub += parseFloat(el.textContent) || 0);
        const subEl = document.getElementById('subtotal');
        const taxEl = document.getElementById('taxAmount');
        const totEl = document.getElementById('grandTotal');
        if (subEl) subEl.textContent = sub.toFixed(2);
        if (taxEl) taxEl.textContent = '0.00';
        if (totEl) totEl.textContent = sub.toFixed(2);
    }
});
</script>
@endpush