{{-- resources/views/ui/products/edit.blade.php --}}

<x-layouts.app title="Artikel bearbeiten"
    userRole="{{ auth()->user()->isDistrictUser() ? 'Bezirksstelle' : 'Ortstelle' }}">
    <div class="flex items-end justify-between gap-3">
        <div>
            <div class="text-xl font-semibold">Artikel bearbeiten</div>
            <div class="mt-1 text-sm text-rk-slate">{{ $product->name }}</div>
        </div>

        <div class="flex items-center gap-2">
            <a href="{{ route('products.show', $product) }}"
                class="rounded-2xl border border-rk bg-white px-4 py-2.5 text-sm font-semibold hover:bg-neutral-50">
                Zurück
            </a>
        </div>
    </div>

    <form method="POST" action="{{ route('products.update', $product) }}"
        class="mt-6 rounded-3xl bg-white border border-rk p-6 shadow-sm space-y-5">
        @csrf
        @method('PATCH')

        <div>
            <label class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Name</label>
            <input name="name" value="{{ old('name', $product->name) }}"
                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"
                required>
            @error('name')
                <div class="mt-2 text-xs text-red-600">{{ $message }}</div>
            @enderror
        </div>

        <div>
            <label class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Beschreibung
                (optional)</label>
            <textarea name="description" rows="5"
                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="Kurzbeschreibung…">{{ old('description', $product->description) }}</textarea>
            @error('description')
                <div class="mt-2 text-xs text-red-600">{{ $message }}</div>
            @enderror
        </div>

        <div class="rounded-2xl border border-rk bg-neutral-50 p-4">
            <label class="flex items-start gap-3">
                <input type="checkbox" name="active" value="1" @checked(old('active', (int) $product->active) === 1)
                    class="mt-1 h-4 w-4 rounded border-rk">
                <span>
                    <div class="text-sm font-semibold">Aktiv</div>
                    <div class="mt-1 text-xs text-rk-slate">
                        Wenn inaktiv, kann der Artikel (und seine Varianten) nicht bestellt werden.
                    </div>
                </span>
            </label>
        </div>

        {{-- Hinweis: Varianten werden auf der Detailseite verwaltet --}}
        <div class="rounded-2xl border border-rk bg-white p-4">
            <div class="text-sm font-semibold">Varianten</div>
            <div class="mt-1 text-xs text-rk-slate">
                Varianten verwaltest du auf der Artikel-Detailseite (Aktiv/Inaktiv, neue Variante).
            </div>
            <div class="mt-3">
                <a href="{{ route('products.show', $product) }}"
                    class="inline-flex items-center rounded-2xl border border-rk bg-white px-4 py-2.5 text-sm font-semibold hover:bg-neutral-50">
                    Zur Detailseite →
                </a>
            </div>
        </div>

        <div class="flex flex-col sm:flex-row sm:justify-end gap-2 pt-2">
            <a href="{{ route('products.show', $product) }}"
                class="rounded-2xl border border-rk bg-white px-5 py-3 text-sm font-semibold hover:bg-neutral-50 text-center">
                Abbrechen
            </a>

            <button class="rounded-2xl bg-rk-red px-5 py-3 text-sm font-semibold text-white hover:bg-rk-red-dark">
                Speichern
            </button>
        </div>
    </form>
</x-layouts.app>