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

<x-layouts.app title="Artikel" userRole="{{ auth()->user()->isDistrictUser() ? 'Bezirksstelle' : 'Ortstelle' }}">
    @php
        $canUpdate = auth()->user()?->can('perm', 'products.update') ?? false;

        $statusPill = function (bool $active) {
            return $active
                ? 'bg-emerald-50 text-emerald-700 border-emerald-200'
                : 'bg-red-50 text-red-700 border-red-200';
        };
    @endphp

    <div class="flex flex-col gap-4">

        {{-- Header --}}
        <div class="rounded-3xl bg-white border border-rk p-6 shadow-sm">
            <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
                <div class="min-w-0">
                    <div class="flex items-center gap-3 flex-wrap">
                        <div class="text-xl font-semibold truncate">{{ $product->name }}</div>

                        <span
                            class="inline-flex items-center rounded-full border border-rk bg-neutral-50 px-3 py-1 text-xs font-semibold text-rk-slate">
                            Artikel #{{ $product->id }}
                        </span>

                        @if ($product->active ?? true)
                            <span
                                class="inline-flex items-center rounded-full border px-3 py-1 text-xs font-semibold bg-emerald-50 text-emerald-700 border-emerald-200">
                                Aktiv
                            </span>
                        @else
                            <span
                                class="inline-flex items-center rounded-full border px-3 py-1 text-xs font-semibold bg-red-50 text-red-700 border-red-200">
                                Inaktiv
                            </span>
                        @endif
                    </div>

                    <div class="mt-2 text-sm text-rk-slate">
                        {{ $product->description ?: 'Keine Beschreibung hinterlegt.' }}
                    </div>
                </div>

                <div class="flex items-center gap-2 shrink-0">
                    <a href="{{ route('products.index') }}" class="btn-rk-soft">Zurück</a>

                    @if ($canUpdate)
                        <a href="{{ route('products.edit', $product) }}" class="btn-rk-soft-green">
                            Bearbeiten
                        </a>
                    @endif
                </div>
            </div>

            {{-- Quick stats --}}
            <div class="mt-5 grid grid-cols-1 sm:grid-cols-3 gap-3">
                <div class="rounded-2xl border border-rk bg-neutral-50 p-4">
                    <div class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Varianten</div>
                    <div class="mt-1 text-lg font-semibold">{{ $product->variants->count() }}</div>
                    <div class="mt-1 text-xs text-rk-slate">Gesamt</div>
                </div>
                <div class="rounded-2xl border border-rk bg-neutral-50 p-4">
                    <div class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Aktiv</div>
                    <div class="mt-1 text-lg font-semibold">
                        {{ $product->variants->where('active', true)->count() }}
                    </div>
                    <div class="mt-1 text-xs text-rk-slate">Bestellbar</div>
                </div>
                <div class="rounded-2xl border border-rk bg-neutral-50 p-4">
                    <div class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Inaktiv</div>
                    <div class="mt-1 text-lg font-semibold">
                        {{ $product->variants->where('active', false)->count() }}
                    </div>
                    <div class="mt-1 text-xs text-rk-slate">Nicht bestellbar</div>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 xl:grid-cols-12 gap-4">

            {{-- Varianten-Liste --}}
            <div class="xl:col-span-8 rounded-3xl bg-white border border-rk shadow-sm overflow-hidden">
                <div class="px-6 py-5 border-b border-rk bg-neutral-50 flex items-start justify-between gap-3">
                    <div>
                        <div class="text-sm font-semibold">Varianten</div>
                        <div class="mt-1 text-xs text-rk-slate">z.B. Größe, Ausführung, Typ.</div>
                    </div>

                    <div class="hidden sm:flex items-center gap-2 text-xs text-rk-slate">
                        <span class="inline-flex items-center gap-2">
                            <span class="h-2.5 w-2.5 rounded-full bg-emerald-500/70"></span> Aktiv
                        </span>
                        <span class="inline-flex items-center gap-2">
                            <span class="h-2.5 w-2.5 rounded-full bg-red-500/70"></span> Inaktiv
                        </span>
                    </div>
                </div>

                <div class="p-6">
                    <div class="space-y-3">
                        @forelse($product->variants as $v)
                            @php
                                $pill = $statusPill((bool) $v->active);
                            @endphp

                            <div class="rounded-3xl border border-rk bg-white overflow-hidden">
                                <div class="px-5 py-4 flex items-start justify-between gap-3">
                                    <div class="min-w-0">
                                        <div class="flex items-center gap-2 flex-wrap">
                                            <div class="text-sm font-semibold truncate">{{ $v->name }}</div>

                                            <span
                                                class="inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold border {{ $pill }}">
                                                {{ $v->active ? 'Aktiv' : 'Inaktiv' }}
                                            </span>

                                            <span
                                                class="inline-flex items-center rounded-full border border-rk bg-neutral-50 px-3 py-1 text-[11px] font-semibold text-rk-slate">
                                                Variante #{{ $v->id }}
                                            </span>
                                        </div>

                                        <div class="mt-1 text-xs text-rk-slate">
                                            {{ $v->active ? 'Kann bestellt/gebucht werden.' : 'Wird in Auswahl & Bestellungen ausgeblendet.' }}
                                        </div>
                                    </div>

                                    @if ($canUpdate)
                                        <form method="POST"
                                            action="{{ route('products.variants.toggle', [$product, $v]) }}">
                                            @csrf
                                            <button type="submit"
                                                class="rounded-2xl border border-rk bg-white px-4 py-2.5 text-xs font-semibold hover:bg-neutral-50 transition-rk">
                                                {{ $v->active ? 'Deaktivieren' : 'Aktivieren' }}
                                            </button>
                                        </form>
                                    @endif
                                </div>
                            </div>
                        @empty
                            <div class="rounded-3xl border border-rk bg-white p-6 text-sm text-rk-slate">
                                Keine Varianten vorhanden.
                            </div>
                        @endforelse
                    </div>
                </div>
            </div>

            {{-- Variante anlegen --}}
            @if ($canUpdate)
                <div class="xl:col-span-4">
                    <div class="rounded-3xl bg-white border border-rk shadow-sm overflow-hidden sticky top-24">
                        <div class="px-6 py-5 border-b border-rk bg-neutral-50">
                            <div class="text-sm font-semibold">Variante anlegen</div>
                            <div class="mt-1 text-xs text-rk-slate">Wird dem Artikel zugeordnet.</div>
                        </div>

                        <form method="POST" action="{{ route('products.variants.store', $product) }}"
                            class="p-6 space-y-4">
                            @csrf

                            <div>
                                <label
                                    class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Name</label>
                                <input name="name" value="{{ old('name') }}"
                                    class="mt-2 w-full rounded-2xl border border-rk bg-white px-4 py-3 text-sm outline-none focus:ring-2 ring-rk focus:border-transparent"
                                    placeholder="z.B. Größe M" required>
                                @error('name')
                                    <div class="mt-2 text-xs text-red-700">{{ $message }}</div>
                                @enderror
                            </div>

                            <label class="flex items-start gap-3 rounded-3xl border border-rk bg-neutral-50 p-4">
                                <input type="checkbox" name="active" value="1"
                                    class="mt-1 h-4 w-4 rounded border-rk" @checked(old('active', '1') === '1')>
                                <span class="min-w-0">
                                    <div class="text-sm font-semibold">Aktiv</div>
                                    <div class="mt-1 text-xs text-rk-slate">
                                        Inaktive Varianten können nicht bestellt werden.
                                    </div>
                                </span>
                            </label>

                            <button type="submit"
                                class="w-full rounded-2xl bg-rk-red px-4 py-3 text-sm font-semibold text-white shadow-sm hover:bg-rk-red-dark focus:outline-none focus:ring-2 ring-rk focus:ring-offset-2 transition-rk">
                                Variante speichern
                            </button>

                            <div class="text-xs text-rk-slate">
                                Tipp: Verwende konsistente Namensschemata (z.B. „Größe S/M/L“, „500 ml“, „Set 10 Stk“).
                            </div>
                        </form>
                    </div>
                </div>
            @endif
        </div>
    </div>
</x-layouts.app>