@php
    $catalog = $catalogItems ?? collect();
@endphp
<div class="space-y-3">
    <div class="flex items-center justify-between">
        <h3 class="text-sm font-bold text-white">{{ trans('dashboard.line_items') }}</h3>
        <button type="button" id="add-line-btn" class="px-3 py-1.5 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-200 text-[11px] font-bold">
            {{ trans('dashboard.add_line') }}
        </button>
    </div>

    @if($catalog->isNotEmpty())
        <div>
            <label class="block text-[11px] text-slate-400 mb-1">{{ trans('dashboard.insert_saved_item') }}</label>
            <select id="catalog-picker" class="rounded-xl bg-navy-950 border border-slate-700 text-slate-100 px-3 py-2 text-xs focus:border-brand-500 focus:outline-none transition w-full sm:w-80">
                <option value="">{{ trans('dashboard.select_item') }}</option>
                @foreach($catalog as $item)
                    <option
                        value="{{ $item->uuid }}"
                        data-name="{{ $item->name }}"
                        data-price="{{ $item->unit_price }}"
                        data-vat="{{ $item->vat_rate }}"
                        data-unit="{{ $item->unit }}"
                    >{{ $item->name }} — {{ number_format($item->unit_price, 2) }} {{ trans('dashboard.sar_currency') }}</option>
                @endforeach
            </select>
        </div>
    @endif

    <div class="overflow-x-auto">
        <table class="w-full text-xs">
            <thead class="text-slate-400">
                <tr>
                    <th class="pb-2 text-start">{{ trans('dashboard.line_name') }}</th>
                    <th class="pb-2 text-start w-24">{{ trans('dashboard.line_qty') }}</th>
                    <th class="pb-2 text-start w-28">{{ trans('dashboard.line_price') }}</th>
                    <th class="pb-2 text-start w-24">{{ trans('dashboard.line_discount') }}</th>
                    <th class="pb-2 text-start w-24">{{ trans('dashboard.line_vat') }}</th>
                    <th class="pb-2 w-10"></th>
                </tr>
            </thead>
            <tbody id="lines-body"></tbody>
        </table>
    </div>
    <p class="text-[11px] text-slate-400">{{ trans('dashboard.computed_total') }}: <span id="lines-total" class="font-bold text-emerald-400 code-font inline-flex items-center gap-1.5" dir="ltr"><x-riyal-symbol class="w-[1.05em] h-[1.05em]" /> <span>0.00</span></span></p>
</div>

<template id="line-row-template">
    <tr class="line-row align-top">
        <td class="pb-2 pe-2">
            <input type="text" name="lines[__INDEX__][name]" required class="rounded-xl bg-navy-950 border border-slate-700 text-slate-100 px-3 py-2 text-xs w-full" placeholder="{{ trans('dashboard.line_name') }}">
            <input type="hidden" name="lines[__INDEX__][unit]" value="PCE">
        </td>
        <td class="pb-2 pe-2">
            <input type="number" step="0.001" min="0.001" name="lines[__INDEX__][quantity]" value="1" required class="line-qty rounded-xl bg-navy-950 border border-slate-700 text-slate-100 px-3 py-2 text-xs w-full">
        </td>
        <td class="pb-2 pe-2">
            <input type="number" step="0.01" min="0" name="lines[__INDEX__][unit_price]" value="0" required class="line-price rounded-xl bg-navy-950 border border-slate-700 text-slate-100 px-3 py-2 text-xs w-full">
        </td>
        <td class="pb-2 pe-2">
            <input type="number" step="0.01" min="0" name="lines[__INDEX__][discount]" value="0" class="line-discount rounded-xl bg-navy-950 border border-slate-700 text-slate-100 px-3 py-2 text-xs w-full">
        </td>
        <td class="pb-2 pe-2">
            <select name="lines[__INDEX__][vat_rate]" class="line-vat rounded-xl bg-navy-950 border border-slate-700 text-slate-100 px-3 py-2 text-xs w-full">
                <option value="15">15%</option>
                <option value="5">5%</option>
                <option value="0">0%</option>
            </select>
        </td>
        <td class="pb-2">
            <button type="button" class="remove-line text-rose-400 hover:text-rose-300 text-lg leading-none">×</button>
        </td>
    </tr>
</template>

<script>
(function () {
    const body = document.getElementById('lines-body');
    const template = document.getElementById('line-row-template');
    const addBtn = document.getElementById('add-line-btn');
    const picker = document.getElementById('catalog-picker');
    const totalEl = document.getElementById('lines-total');
    const riyalSvg = @js(view('components.riyal-symbol', ['class' => 'inline-block w-[1.05em] h-[1.05em] align-middle me-1'])->render());
    let index = 0;

    function recalc() {
        let total = 0;
        body.querySelectorAll('.line-row').forEach((row) => {
            const qty = parseFloat(row.querySelector('.line-qty').value) || 0;
            const price = parseFloat(row.querySelector('.line-price').value) || 0;
            const discount = parseFloat(row.querySelector('.line-discount').value) || 0;
            const vat = parseFloat(row.querySelector('.line-vat').value) || 0;
            const net = Math.max(0, (qty * price) - discount);
            total += net + (net * vat / 100);
        });
        totalEl.innerHTML = `${riyalSvg} <span>${total.toFixed(2)}</span>`;
    }

    function addLine(data = {}) {
        const html = template.innerHTML.replaceAll('__INDEX__', String(index++));
        body.insertAdjacentHTML('beforeend', html);
        const row = body.lastElementChild;
        if (data.name) row.querySelector('input[name$="[name]"]').value = data.name;
        if (data.unit_price != null) row.querySelector('.line-price').value = data.unit_price;
        if (data.vat_rate != null) row.querySelector('.line-vat').value = String(data.vat_rate);
        if (data.unit) row.querySelector('input[name$="[unit]"]').value = data.unit;
        row.querySelector('.remove-line').addEventListener('click', () => {
            if (body.querySelectorAll('.line-row').length > 1) {
                row.remove();
                recalc();
            }
        });
        row.querySelectorAll('input, select').forEach((el) => el.addEventListener('input', recalc));
        recalc();
    }

    addBtn.addEventListener('click', () => addLine());
    if (picker) {
        picker.addEventListener('change', function () {
            const opt = this.options[this.selectedIndex];
            if (!opt.value) return;
            addLine({
                name: opt.dataset.name,
                unit_price: opt.dataset.price,
                vat_rate: opt.dataset.vat,
                unit: opt.dataset.unit,
            });
            this.value = '';
        });
    }

    addLine();
})();
</script>