@php
    use App\Models\KitchenS11;
    $editing = $s11 !== null;
    $action = $editing
        ? route('kitchen.counter-requisition.update', $s11)
        : route('kitchen.counter-requisition.store');
    $method = $editing ? 'PUT' : 'POST';
    $sel = $sel ?? 'h-9 w-full rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50';
    $existing = $editing ? $s11->lines : collect();
@endphp

<form method="post" action="{{ $action }}" class="grid gap-3 md:grid-cols-4">
    @csrf @method($method)

    <x-field label="Store the goods leave *" required>
        <select name="from_store_id" class="{{ $sel }}" required>
            <option value="">Select store</option>
            @foreach ($stores as $store)
                <option value="{{ $store->id }}" @selected(old('from_store_id', $editing ? $s11->from_store_id : '') == $store->id)>
                    {{ $store->name }}
                </option>
            @endforeach
        </select>
    </x-field>

    <x-field label="Point of use *" required>
        <select name="point_of_use" class="{{ $sel }}" required>
            <option value="">Select point of use</option>
            @foreach (KitchenS11::POINTS_OF_USE as $p)
                <option value="{{ $p }}" @selected(old('point_of_use', $editing ? $s11->point_of_use : '') === $p)>{{ $p }}</option>
            @endforeach
        </select>
    </x-field>

    <x-field label="Date *" required>
        <x-input type="date" name="raised_on" value="{{ old('raised_on', $editing ? $s11->raised_on?->toDateString() : now()->toDateString()) }}" required />
    </x-field>

    <x-field label="Purpose">
        <x-input name="purpose" value="{{ old('purpose', $editing ? $s11->purpose : '') }}" placeholder="e.g. Friday staff lunch" />
    </x-field>

    <div class="md:col-span-4">
        <p class="mb-1.5 text-xs font-medium">Lines *</p>
        <div class="overflow-x-auto rounded-lg border border-border">
            <table class="w-full text-sm">
                <thead>
                    <tr class="border-b border-border bg-muted/30 text-left text-xs text-muted-foreground">
                        <th class="px-3 py-2 font-medium">Item</th>
                        <th class="px-3 py-2 font-medium">Store</th>
                        <th class="px-3 py-2 font-medium">On hand</th>
                        <th class="px-3 py-2 text-right font-medium">Qty required</th>
                        <th class="px-3 py-2 font-medium">Remarks</th>
                        <th class="px-3 py-2"></th>
                    </tr>
                </thead>
                <tbody id="s11-lines" data-s11-lines>
                    @forelse ($existing as $line)
                        <tr data-s11-line>
                            <td class="px-3 py-1.5">
                                <select name="lines[{{ $loop->index }}][item_id]" class="{{ $sel }}" required>
                                    <option value="">Select item</option>
                                    @foreach ($items as $item)
                                        <option value="{{ $item->id }}" data-store="{{ $item->store_id }}" @selected($line->item_id == $item->id)>
                                            {{ $item->name }} ({{ $item->store?->name }})
                                        </option>
                                    @endforeach
                                </select>
                            </td>
                            <td class="px-3 py-1.5 text-xs text-muted-foreground">{{ $line->item?->store?->name ?? '—' }}</td>
                            <td class="px-3 py-1.5 text-right text-xs tabular-nums">{{ \App\Support\Fmt::plain($line->item?->on_hand ?? 0, 2) }}</td>
                            <td class="px-3 py-1.5">
                                <input type="number" step="0.01" min="0" name="lines[{{ $loop->index }}][qty_required]" value="{{ $line->qty_required }}"
                                       class="h-9 w-full rounded-lg border border-input bg-transparent px-3 text-right text-sm tabular-nums outline-none focus-visible:border-ring" required>
                            </td>
                            <td class="px-3 py-1.5">
                                <input type="text" name="lines[{{ $loop->index }}][remarks]" value="{{ $line->remarks }}"
                                       class="h-9 w-full rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                            </td>
                            <td class="px-3 py-1.5 text-right">
                                <button type="button" data-remove-line class="rounded-md border border-border px-2 py-1 text-[11px] hover:bg-accent">Remove</button>
                            </td>
                        </tr>
                    @empty
                        <tr data-s11-line>
                            <td class="px-3 py-1.5">
                                <select name="lines[0][item_id]" class="{{ $sel }}" required>
                                    <option value="">Select item</option>
                                    @foreach ($items as $item)
                                        <option value="{{ $item->id }}" data-store="{{ $item->store_id }}">{{ $item->name }} ({{ $item->store?->name }})</option>
                                    @endforeach
                                </select>
                            </td>
                            <td class="px-3 py-1.5 text-xs text-muted-foreground">—</td>
                            <td class="px-3 py-1.5 text-right text-xs tabular-nums">—</td>
                            <td class="px-3 py-1.5">
                                <input type="number" step="0.01" min="0" name="lines[0][qty_required]" value="0"
                                       class="h-9 w-full rounded-lg border border-input bg-transparent px-3 text-right text-sm tabular-nums outline-none focus-visible:border-ring" required>
                            </td>
                            <td class="px-3 py-1.5">
                                <input type="text" name="lines[0][remarks]"
                                       class="h-9 w-full rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                            </td>
                            <td class="px-3 py-1.5 text-right">
                                <button type="button" data-remove-line class="rounded-md border border-border px-2 py-1 text-[11px] hover:bg-accent">Remove</button>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="mt-2 flex items-center gap-2">
            <button type="button" data-add-line
                    class="rounded-lg border border-border px-3 py-1.5 text-sm hover:bg-accent">Add line</button>
            <span class="text-xs text-muted-foreground">Only items belonging to the selected store are saved.</span>
        </div>
    </div>

    <div class="md:col-span-4">
        <button class="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90">
            {{ $editing ? 'Save draft' : 'Save as draft' }}
        </button>
        <a href="{{ route('kitchen.counter-requisition') }}"
           class="ml-2 rounded-lg border border-border px-3 py-2 text-sm hover:bg-accent">Cancel</a>
    </div>
</form>

<div class="hidden" data-s11-template>
    <tr data-s11-line>
        <td class="px-3 py-1.5">
            <select data-s11-field="item_id" class="{{ $sel }}" required>
                <option value="">Select item</option>
                @foreach ($items as $item)
                    <option value="{{ $item->id }}" data-store="{{ $item->store_id }}">{{ $item->name }} ({{ $item->store?->name }})</option>
                @endforeach
            </select>
        </td>
        <td class="px-3 py-1.5 text-xs text-muted-foreground">—</td>
        <td class="px-3 py-1.5 text-right text-xs tabular-nums">—</td>
        <td class="px-3 py-1.5">
            <input type="number" step="0.01" min="0" data-s11-field="qty_required" value="0"
                   class="h-9 w-full rounded-lg border border-input bg-transparent px-3 text-right text-sm tabular-nums outline-none focus-visible:border-ring" required>
        </td>
        <td class="px-3 py-1.5">
            <input type="text" data-s11-field="remarks"
                   class="h-9 w-full rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
        </td>
        <td class="px-3 py-1.5 text-right">
            <button type="button" data-remove-line class="rounded-md border border-border px-2 py-1 text-[11px] hover:bg-accent">Remove</button>
        </td>
    </tr>
</div>

@once
    @push('scripts')
        <script>
            (function () {
                function reindex(form) {
                    const rows = form.querySelectorAll('[data-s11-line]');
                    rows.forEach((row, i) => {
                        row.querySelectorAll('[data-s11-field]').forEach((el) => {
                            el.name = `lines[${i}][${el.dataset.s11Field}]`;
                        });
                    });
                }

                function syncRow(row) {
                    const sel = row.querySelector('[data-s11-field="item_id"]');
                    const opt = sel?.selectedOptions?.[0];
                    const storeCell = row.children[1];
                    const onHandCell = row.children[2];
                    if (storeCell) storeCell.textContent = opt?.dataset.store
                        ? (sel.options[sel.selectedIndex].textContent.match(/\(([^)]+)\)\s*$/)?.[1] ?? '—')
                        : '—';
                    if (onHandCell) onHandCell.textContent = '—';
                }

                document.addEventListener('click', function (e) {
                    const add = e.target.closest('[data-add-line]');
                    if (add) {
                        const form = add.closest('form');
                        const body = form.querySelector('[data-s11-lines]');
                        const tpl = form.parentElement.querySelector('[data-s11-template]') || document.querySelector('[data-s11-template]');
                        if (!body || !tpl) return;
                        const node = tpl.firstElementChild.cloneNode(true);
                        node.querySelectorAll('[data-s11-field]').forEach((el) => { el.value = ''; });
                        const qty = node.querySelector('[data-s11-field="qty_required"]');
                        if (qty) qty.value = '0';
                        body.appendChild(node);
                        reindex(form);
                        syncRow(node);
                        return;
                    }

                    const rm = e.target.closest('[data-remove-line]');
                    if (rm) {
                        const form = rm.closest('form');
                        const body = form.querySelector('[data-s11-lines]');
                        if (body.querySelectorAll('[data-s11-line]').length <= 1) return;
                        rm.closest('[data-s11-line]').remove();
                        reindex(form);
                    }
                });

                document.addEventListener('change', function (e) {
                    const sel = e.target.closest('[data-s11-field="item_id"]');
                    if (sel) syncRow(sel.closest('[data-s11-line]'));
                });
            })();
        </script>
    @endpush
@endonce