@php
    $editing = $pr !== null;
    $action = $editing ? route('kitchen.purchase-requisition.update', $pr) : route('kitchen.purchase-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';
    $lines = $editing ? $pr->lines : collect();
@endphp

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

    <div class="grid gap-3 md:grid-cols-3">
        <x-field label="Vote *" required>
            <select name="kitchen_vote_id" class="{{ $sel }}" required>
                <option value="">Select vote</option>
                @foreach ($votes as $vote)
                    <option value="{{ $vote->id }}" @selected(old('kitchen_vote_id', $editing ? $pr->kitchen_vote_id : '') == $vote->id)>
                        {{ $vote->name }} &mdash; {{ \App\Support\Fmt::money($vote->available()) }} available
                    </option>
                @endforeach
            </select>
        </x-field>
        <x-field label="Department *" required>
            <x-input name="department" value="{{ old('department', $editing ? $pr->department : '') }}" placeholder="e.g. Kitchen" required />
        </x-field>
        <x-field label="Raised on *" required>
            <x-input type="date" name="raised_on" value="{{ old('raised_on', $editing ? $pr->raised_on?->toDateString() : $today) }}" required />
        </x-field>
    </div>

    <div>
        <p class="mb-1.5 text-xs font-medium">Line items *</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">Description</th>
                        <th class="px-3 py-2 font-medium">Store item (optional)</th>
                        <th class="px-3 py-2 text-right font-medium">Qty</th>
                        <th class="px-3 py-2 font-medium">Unit</th>
                        <th class="px-3 py-2 text-right font-medium">Est. unit cost</th>
                        <th class="px-3 py-2 text-right font-medium">Line total</th>
                        <th class="px-3 py-2"></th>
                    </tr>
                </thead>
                <tbody data-pr-lines>
                    @forelse ($lines as $line)
                        <tr data-pr-line>
                            <td class="px-3 py-1.5">
                                <input type="text" name="lines[{{ $loop->index }}][description]" value="{{ $line->description }}"
                                       class="h-9 w-full rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring" required>
                            </td>
                            <td class="px-3 py-1.5">
                                <select name="lines[{{ $loop->index }}][item_id]" class="{{ $sel }}">
                                    <option value="">None</option>
                                    @foreach ($items as $item)
                                        <option value="{{ $item->id }}" @selected($line->item_id == $item->id)>
                                            {{ $item->name }} ({{ $item->store?->name }})
                                        </option>
                                    @endforeach
                                </select>
                            </td>
                            <td class="px-3 py-1.5">
                                <input type="number" step="0.01" min="0" name="lines[{{ $loop->index }}][qty]" value="{{ $line->qty }}"
                                       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 }}][unit]" value="{{ $line->unit }}"
                                       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">
                                <input type="number" step="0.01" min="0" name="lines[{{ $loop->index }}][est_unit_cost]" value="{{ $line->est_unit_cost }}"
                                       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 text-right text-xs tabular-nums" data-pr-line-total>{{ \App\Support\Fmt::money($line->lineTotal()) }}</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-pr-line>
                            <td class="px-3 py-1.5">
                                <input type="text" data-pr-field="description"
                                       class="h-9 w-full rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring" required>
                            </td>
                            <td class="px-3 py-1.5">
                                <select data-pr-field="item_id" class="{{ $sel }}">
                                    <option value="">None</option>
                                    @foreach ($items as $item)
                                        <option value="{{ $item->id }}">{{ $item->name }} ({{ $item->store?->name }})</option>
                                    @endforeach
                                </select>
                            </td>
                            <td class="px-3 py-1.5">
                                <input type="number" step="0.01" min="0" data-pr-field="qty" value="1"
                                       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-pr-field="unit"
                                       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">
                                <input type="number" step="0.01" min="0" data-pr-field="est_unit_cost" 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 text-right text-xs tabular-nums" data-pr-line-total>KSh 0</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 flex-wrap 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">Estimate: <strong data-pr-total>KSh 0</strong></span>
        </div>
    </div>

    <div>
        <button class="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90">
            {{ $editing ? 'Update draft' : 'Save as draft' }}
        </button>
        <a href="{{ route('kitchen.purchase-requisition') }}"
           class="ml-2 rounded-lg border border-border px-3 py-2 text-sm hover:bg-accent">Cancel</a>
        <p class="mt-1 text-xs text-muted-foreground">
            Lines with zero quantity are dropped. Committing happens only when a submitted requisition is approved.
        </p>
    </div>
</form>

<div class="hidden" data-pr-template>
    <tr data-pr-line>
        <td class="px-3 py-1.5">
            <input type="text" data-pr-field="description"
                   class="h-9 w-full rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring" required>
        </td>
        <td class="px-3 py-1.5">
            <select data-pr-field="item_id" class="{{ $sel }}">
                <option value="">None</option>
                @foreach ($items as $item)
                    <option value="{{ $item->id }}">{{ $item->name }} ({{ $item->store?->name }})</option>
                @endforeach
            </select>
        </td>
        <td class="px-3 py-1.5">
            <input type="number" step="0.01" min="0" data-pr-field="qty" value="1"
                   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-pr-field="unit"
                   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">
            <input type="number" step="0.01" min="0" data-pr-field="est_unit_cost" 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 text-right text-xs tabular-nums" data-pr-line-total>KSh 0</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 () {
                const fmt = (n) => 'KSh ' + new Intl.NumberFormat('en-KE', { maximumFractionDigits: 2 }).format(n || 0);

                function rowTotal(row) {
                    const qty = parseFloat(row.querySelector('[data-pr-field="qty"]')?.value || 0);
                    const cost = parseFloat(row.querySelector('[data-pr-field="est_unit_cost"]')?.value || 0);
                    return (isNaN(qty) ? 0 : qty) * (isNaN(cost) ? 0 : cost);
                }

                function recalc(form) {
                    let total = 0;
                    form.querySelectorAll('[data-pr-line]').forEach((row) => {
                        const t = rowTotal(row);
                        total += t;
                        const cell = row.querySelector('[data-pr-line-total]');
                        if (cell) cell.textContent = fmt(t);
                    });
                    const out = form.querySelector('[data-pr-total]');
                    if (out) out.textContent = fmt(total);
                }

                function reindexLines(form) {
                    form.querySelectorAll('[data-pr-line]').forEach((row, i) => {
                        row.querySelectorAll('[data-pr-field]').forEach((el) => {
                            el.name = `lines[${i}][${el.dataset.prField}]`;
                        });
                    });
                    recalc(form);
                }

                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-pr-lines]');
                        const tpl = form.parentElement.querySelector('[data-pr-template]') || document.querySelector('[data-pr-template]');
                        if (!body || !tpl) return;
                        const node = tpl.firstElementChild.cloneNode(true);
                        body.appendChild(node);
                        reindexLines(form);
                        return;
                    }
                    const rm = e.target.closest('[data-remove-line]');
                    if (rm) {
                        const form = rm.closest('form');
                        const body = form.querySelector('[data-pr-lines]');
                        if (body.querySelectorAll('[data-pr-line]').length <= 1) return;
                        rm.closest('[data-pr-line]').remove();
                        reindexLines(form);
                    }
                });

                document.addEventListener('input', function (e) {
                    const field = e.target.closest('[data-pr-field="qty"], [data-pr-field="est_unit_cost"]');
                    if (field) recalc(field.closest('form'));
                });

                document.addEventListener('DOMContentLoaded', function () {
                    document.querySelectorAll('form').forEach((f) => { if (f.querySelector('[data-pr-lines]')) reindexLines(f); });
                });
            })();
        </script>
    @endpush
@endonce