{{-- resources/views/ui/consumption/create.blade.php --}}

@php
    $today = now()->format('Y-m-d\TH:i');
    $oldItems = old('items', [['product_id' => '', 'variant_id' => '', 'quantity' => 1]]);

    // Nur Ausgang (Verbrauch) Gründe
    $reasons = [
        'verbrauch_einsatz' => 'Verbrauch – Einsatz',
        'verbrauch_uebung' => 'Verbrauch – Übung',
        'verbrauch_verfall' => 'Verbrauch – Verfall',
        'verbrauch_defekt' => 'Verbrauch – Defekt',
    ];

    $productsJson = $products
        ->map(function ($p) {
            return [
                'id' => $p->id,
                'name' => $p->name,
                'variants' => $p->variants
                    ->where('active', true)
                    ->values()
                    ->map(fn($v) => ['id' => $v->id, 'name' => $v->name])
                    ->values(),
            ];
        })
        ->values();
@endphp

<x-layouts.app title="Verbrauch erfassen" userRole="Ortstelle">
    <div class="flex flex-col gap-4">

        {{-- Header --}}
        <div class="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-3">
            <div>
                <div class="text-xl font-semibold">Verbrauch erfassen</div>
                <div class="mt-1 text-sm text-rk-slate">
                    Es wird ausschließlich Ausgang (Verbrauch) gebucht. Bestand darf nicht negativ werden.
                </div>
            </div>

            <a href="{{ route('consumption.index') }}" class="btn-rk-soft">
                Zurück
            </a>
        </div>

        {{-- Errors --}}
        @if ($errors->any())
            <div class="rounded-3xl border border-red-200 bg-red-50 p-4 text-sm text-red-800">
                <div class="font-semibold">Bitte prüfen:</div>
                <ul class="mt-2 list-disc pl-5 space-y-1">
                    @foreach ($errors->all() as $e)
                        <li>{{ $e }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form method="POST" action="{{ route('consumption.store') }}"
            class="rounded-3xl bg-white border border-rk p-6 shadow-sm space-y-6">
            @csrf

            {{-- Meta: Zeitpunkt + Grund auf einer Linie --}}
            <div class="grid grid-cols-1 lg:grid-cols-12 gap-4 lg:items-end">
                {{-- Zeitpunkt --}}
                <div class="lg:col-span-4">
                    <label class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Zeitpunkt</label>
                    <input type="datetime-local" name="booked_at" value="{{ old('booked_at', $today) }}"
                        class="mt-2 w-full rounded-2xl border border-rk bg-white px-4 py-3 text-sm focus:ring-2 ring-rk focus:border-transparent">
                    <div class="mt-2 text-xs text-rk-slate">Optional. Standard: jetzt.</div>
                </div>

                {{-- Grund --}}
                <div class="lg:col-span-8">
                    <label class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Grund</label>
                    <select name="reason" required
                        class="mt-2 w-full rounded-2xl border border-rk bg-white px-4 py-3 text-sm focus:ring-2 ring-rk focus:border-transparent">
                        <option value="">Bitte wählen…</option>
                        @foreach ($reasons as $k => $lbl)
                            <option value="{{ $k }}" @selected(old('reason') === $k)>{{ $lbl }}
                            </option>
                        @endforeach
                    </select>
                </div>

                {{-- Notiz volle Breite --}}
                <div class="lg:col-span-12">
                    <label class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Notiz
                        (optional)</label>
                    <textarea name="note" rows="3"
                        class="mt-2 w-full rounded-2xl border border-rk bg-white px-4 py-3 text-sm focus:ring-2 ring-rk focus:border-transparent"
                        placeholder="Freitext…">{{ old('note') }}</textarea>
                </div>
            </div>

            {{-- Items --}}
            <div class="rounded-3xl border border-rk bg-neutral-50 p-4">
                <div class="flex items-start justify-between gap-3">
                    <div>
                        <div class="text-sm font-semibold">Positionen</div>
                        <div class="mt-1 text-xs text-rk-slate">
                            Menge ist der Verbrauch pro Position (wird vom Bestand abgezogen).
                        </div>
                    </div>

                    <button type="button" id="addRow" class="btn-rk-soft-green">
                        + Position
                    </button>
                </div>

                <div class="mt-4 overflow-x-auto">
                    <table class="w-full text-sm" id="itemsTable">
                        <thead class="text-xs text-rk-slate/80 uppercase tracking-wider">
                            <tr class="border-b border-rk">
                                <th class="py-3 text-left w-[40%]">Artikel</th>
                                <th class="py-3 text-left w-[35%]">Variante</th>
                                <th class="py-3 text-left w-[15%]">Menge</th>
                                <th class="py-3 text-right w-[10%]">Aktion</th>
                            </tr>
                        </thead>

                        <tbody class="divide-y divide-[color:var(--rk-border)]" id="rows">
                            @foreach ($oldItems as $i => $row)
                                @php
                                    $oldProductId = $row['product_id'] ?? '';
                                    $oldVariantId = $row['variant_id'] ?? '';
                                    $oldQty = $row['quantity'] ?? 1;
                                @endphp

                                <tr class="align-top">
                                    <td class="py-3 pr-3">
                                        <select name="items[{{ $i }}][product_id]"
                                            class="productSel w-full rounded-2xl border border-rk bg-white px-4 py-3 text-sm">
                                            <option value="">Bitte wählen…</option>
                                            @foreach ($products as $p)
                                                <option value="{{ $p->id }}" @selected((string) $oldProductId === (string) $p->id)>
                                                    {{ $p->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </td>

                                    <td class="py-3 pr-3">
                                        <select name="items[{{ $i }}][variant_id]"
                                            class="variantSel w-full rounded-2xl border border-rk bg-white px-4 py-3 text-sm">
                                            <option value="">—</option>
                                        </select>
                                        <input type="hidden" class="oldVariant" value="{{ $oldVariantId }}">
                                    </td>

                                    <td class="py-3 pr-3">
                                        <input type="number" min="1" required
                                            name="items[{{ $i }}][quantity]" value="{{ $oldQty }}"
                                            class="w-full rounded-2xl border border-rk bg-white px-4 py-3 text-sm focus:ring-2 ring-rk focus:border-transparent">
                                    </td>

                                    <td class="py-4 px-6 text-right">
                                        <button type="button"
                                            class="inline-flex items-center justify-center h-10 w-10 rounded-2xl border border-rk bg-white hover:bg-neutral-50 transition-rk"
                                            title="Öffnen" aria-label="Öffnen">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                                aria-hidden="true" class="text-rk-red">
                                                <path d="M2 6h18" />
                                                <path d="M8 6V4h8v2" />
                                                <path d="M6 6l1 16h10l1-16" />
                                                <path d="M10 11v7" />
                                                <path d="M14 11v7" />
                                            </svg>
                                        </button>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>

            {{-- Submit --}}
            <div class="flex flex-col sm:flex-row sm:justify-end gap-2">
                <a href="{{ route('consumption.index') }}" class="btn-rk-soft">
                    Abbrechen
                </a>

                <button class="btn-rk-soft-green">
                    Verbrauch speichern
                </button>
            </div>
        </form>
    </div>

    <script>
        window.__PRODUCTS__ = @json($productsJson);
    </script>

    <script>
        (function() {
            const products = window.__PRODUCTS__ || [];
            const byId = new Map(products.map(p => [String(p.id), p]));

            const rowsEl = document.getElementById('rows');
            const addBtn = document.getElementById('addRow');

            if (!rowsEl || !addBtn) return;

            function escapeHtml(str) {
                return String(str ?? '')
                    .replaceAll('&', '&amp;')
                    .replaceAll('<', '&lt;')
                    .replaceAll('>', '&gt;')
                    .replaceAll('"', '&quot;')
                    .replaceAll("'", '&#039;');
            }

            function populateVariants(row, selectedVariantId = '') {
                const productSel = row.querySelector('.productSel');
                const variantSel = row.querySelector('.variantSel');
                const oldVarEl = row.querySelector('.oldVariant');

                if (!productSel || !variantSel) return;

                const productId = productSel.value;
                variantSel.innerHTML = '<option value="">—</option>';

                const p = byId.get(String(productId));
                const vars = p?.variants ?? [];

                for (const v of vars) {
                    const opt = document.createElement('option');
                    opt.value = v.id;
                    opt.textContent = v.name;
                    if (String(selectedVariantId) === String(v.id)) opt.selected = true;
                    variantSel.appendChild(opt);
                }

                if (!vars.length) {
                    variantSel.disabled = true;
                    variantSel.classList.add('opacity-70');
                } else {
                    variantSel.disabled = false;
                    variantSel.classList.remove('opacity-70');
                }

                // Nur beim ersten Init: oldVariant wieder leeren, damit es nicht „klebt“
                if (oldVarEl) oldVarEl.value = '';
            }

            function reindexNames() {
                rowsEl.querySelectorAll('tr').forEach((tr, idx) => {
                    tr.querySelector('.productSel').name = `items[${idx}][product_id]`;
                    tr.querySelector('.variantSel').name = `items[${idx}][variant_id]`;
                    tr.querySelector('input[type="number"]').name = `items[${idx}][quantity]`;
                });
            }

            function bindRow(row) {
                const productSel = row.querySelector('.productSel');
                const removeBtn = row.querySelector('.removeRow');
                const oldVarEl = row.querySelector('.oldVariant');

                const restoreVariant = oldVarEl ? (oldVarEl.value || '') : '';
                populateVariants(row, restoreVariant);

                productSel.addEventListener('change', () => populateVariants(row, ''));

                removeBtn.addEventListener('click', () => {
                    const trCount = rowsEl.querySelectorAll('tr').length;
                    if (trCount <= 1) return;
                    row.remove();
                    reindexNames();
                });
            }

            // bind existing rows
            rowsEl.querySelectorAll('tr').forEach(tr => bindRow(tr));

            addBtn.addEventListener('click', () => {
                const idx = rowsEl.querySelectorAll('tr').length;

                const tr = document.createElement('tr');
                tr.className = 'align-top hover:bg-neutral-50';
                tr.innerHTML = `
                    <td class="py-3 pr-3">
                        <select class="productSel w-full rounded-2xl border border-rk bg-white px-4 py-3 text-sm" name="items[${idx}][product_id]">
                            <option value="">Bitte wählen…</option>
                            ${products.map(p => `<option value="${p.id}">${escapeHtml(p.name)}</option>`).join('')}
                        </select>
                    </td>
                    <td class="py-3 pr-3">
                        <select class="variantSel w-full rounded-2xl border border-rk bg-white px-4 py-3 text-sm" name="items[${idx}][variant_id]">
                            <option value="">—</option>
                        </select>
                        <input type="hidden" class="oldVariant" value="">
                    </td>
                    <td class="py-3 pr-3">
                        <input type="number" min="1" required
                               class="w-full rounded-2xl border border-rk bg-white px-4 py-3 text-sm focus:ring-2 ring-rk focus:border-transparent"
                               name="items[${idx}][quantity]" value="1">
                    </td>
                    <td class="py-3 text-right">
                        <button type="button" class="removeRow text-sm font-semibold text-red-700 hover:underline"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
     stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
  <path d="M3 6h18"/>
  <path d="M8 6V4h8v2"/>
  <path d="M6 6l1 16h10l1-16"/>
  <path d="M10 11v7"/>
  <path d="M14 11v7"/>
</svg>
</button>
                    </td>
                `;

                rowsEl.appendChild(tr);
                bindRow(tr);
                reindexNames();
            });
        })();
    </script>
</x-layouts.app>