@php
    $active = $tab ?? 'profil';
    $tabs = [
        'profil' => 'Profil',
        'lager' => 'Lager',
        'mindestbestand' => 'Mindestbestände',
        'bestellungen' => 'Bestellungen',
        'verbrauch' => 'Verbrauch',
    ];
@endphp

<x-layouts.app :title="'Ortstelle · ID ' . $id">
    <div class="flex flex-col gap-4">

        {{-- Header --}}
        <div class="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-3">
            <div>
                <div class="text-xl font-semibold">Ortstelle Graz-Umgebung</div>
                <div class="mt-1 text-sm text-rk-slate">
                    Interne ID: {{ $id }} · Status: <span class="font-semibold text-rk-charcoal">Aktiv</span>
                </div>
            </div>

            <div class="flex flex-wrap items-center gap-2">
                <button
                    class="rounded-2xl border border-rk bg-white px-4 py-2.5 text-sm font-semibold hover:bg-neutral-50">
                    Passwort-Reset (später)
                </button>
                <button
                    class="rounded-2xl border border-rk bg-white px-4 py-2.5 text-sm font-semibold hover:bg-neutral-50">
                    Deaktivieren
                </button>
                <button class="rounded-2xl bg-rk-red px-4 py-2.5 text-sm font-semibold text-white hover:bg-rk-red-dark">
                    Bearbeiten
                </button>
            </div>
        </div>

        {{-- Tabs --}}
        <div class="rounded-3xl bg-white border border-rk shadow-sm">
            <div class="px-4 sm:px-5 py-3 border-b border-rk overflow-x-auto">
                <div class="flex gap-2">
                    @foreach ($tabs as $key => $label)
                        <a href="{{ route('ui.stations.show', $id) }}?tab={{ $key }}"
                            class="whitespace-nowrap rounded-2xl px-4 py-2 text-sm font-semibold border
                           {{ $active === $key ? 'bg-rk-red text-white border-transparent' : 'bg-white border-rk hover:bg-neutral-50 text-rk-charcoal' }}">
                            {{ $label }}
                        </a>
                    @endforeach
                </div>
            </div>

            {{-- Tab content --}}
            <div class="p-5">
                @if ($active === 'profil')
                    <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
                        <div class="lg:col-span-2 rounded-3xl border border-rk p-5">
                            <div class="text-sm font-semibold">Stammdaten</div>
                            <div class="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-4">
                                <div>
                                    <div class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Name
                                    </div>
                                    <div class="mt-2 text-sm">Ortstelle Graz-Umgebung</div>
                                </div>
                                <div>
                                    <div class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Bezirk
                                    </div>
                                    <div class="mt-2 text-sm">Graz-Umgebung</div>
                                </div>
                                <div>
                                    <div class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">E-Mail
                                    </div>
                                    <div class="mt-2 text-sm">graz-umgebung@rk.at</div>
                                </div>
                                <div>
                                    <div class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Telefon
                                    </div>
                                    <div class="mt-2 text-sm">+43 316 000000</div>
                                </div>
                            </div>
                        </div>

                        <div class="rounded-3xl border border-rk p-5">
                            <div class="text-sm font-semibold">Kurzstatus</div>
                            <div class="mt-4 space-y-3 text-sm text-rk-slate">
                                <div class="flex items-center justify-between">
                                    <span>Warnungen</span>
                                    <span class="font-semibold text-rk-charcoal">5</span>
                                </div>
                                <div class="flex items-center justify-between">
                                    <span>Kritisch</span>
                                    <span class="font-semibold text-rk-charcoal">2</span>
                                </div>
                                <div class="flex items-center justify-between">
                                    <span>Letzte Bestellung</span>
                                    <span class="font-semibold text-rk-charcoal">Heute</span>
                                </div>
                            </div>
                        </div>
                    </div>
                @elseif($active === 'lager')
                    <div class="rounded-3xl border border-rk p-5">
                        <div class="flex items-center justify-between">
                            <div>
                                <div class="text-sm font-semibold">Lager</div>
                                <div class="mt-1 text-xs text-rk-slate">Bestände dieser Ortstelle (UI).</div>
                            </div>
                            <button
                                class="rounded-2xl border border-rk bg-white px-4 py-2.5 text-sm font-semibold hover:bg-neutral-50">
                                Buchung erfassen
                            </button>
                        </div>

                        <div class="mt-4 overflow-x-auto">
                            <table class="w-full text-sm">
                                <thead class="text-xs text-rk-slate/80 uppercase tracking-wider">
                                    <tr class="border-b border-rk">
                                        <th class="py-3 text-left">Artikel</th>
                                        <th class="py-3 text-left">Variante</th>
                                        <th class="py-3 text-right">Ist</th>
                                        <th class="py-3 text-right">Mindest</th>
                                        <th class="py-3 text-left">Status</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-[color:var(--rk-border)]">
                                    <tr class="hover:bg-neutral-50">
                                        <td class="py-4 font-medium">Einmalhandschuhe Nitril</td>
                                        <td class="py-4 text-rk-slate">Größe M</td>
                                        <td class="py-4 text-right font-semibold">12</td>
                                        <td class="py-4 text-right text-rk-slate">40</td>
                                        <td class="py-4">
                                            <span
                                                class="inline-flex items-center rounded-full bg-red-50 px-3 py-1 text-xs font-semibold text-red-700 border border-red-200">
                                                Kritisch
                                            </span>
                                        </td>
                                    </tr>
                                    <tr class="hover:bg-neutral-50">
                                        <td class="py-4 font-medium">Infusion NaCl 0,9%</td>
                                        <td class="py-4 text-rk-slate">500 ml</td>
                                        <td class="py-4 text-right font-semibold">18</td>
                                        <td class="py-4 text-right text-rk-slate">20</td>
                                        <td class="py-4">
                                            <span
                                                class="inline-flex items-center rounded-full bg-amber-50 px-3 py-1 text-xs font-semibold text-amber-700 border border-amber-200">
                                                Warnung
                                            </span>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                @elseif($active === 'mindestbestand')
                    <div class="rounded-3xl border border-rk p-5">
                        <div class="flex items-center justify-between">
                            <div>
                                <div class="text-sm font-semibold">Mindestbestände</div>
                                <div class="mt-1 text-xs text-rk-slate">Pro globalem Artikel je Ortstelle definierbar
                                    (UI).</div>
                            </div>
                            <button
                                class="rounded-2xl bg-rk-red px-4 py-2.5 text-sm font-semibold text-white hover:bg-rk-red-dark">
                                Speichern
                            </button>
                        </div>

                        <div class="mt-4 overflow-x-auto">
                            <table class="w-full text-sm">
                                <thead class="text-xs text-rk-slate/80 uppercase tracking-wider">
                                    <tr class="border-b border-rk">
                                        <th class="py-3 text-left">Artikel</th>
                                        <th class="py-3 text-left">Variante</th>
                                        <th class="py-3 text-right">Mindestbestand</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-[color:var(--rk-border)]">
                                    <tr class="hover:bg-neutral-50">
                                        <td class="py-4 font-medium">Einmalhandschuhe Nitril</td>
                                        <td class="py-4 text-rk-slate">Größe M</td>
                                        <td class="py-4 text-right">
                                            <input
                                                class="w-28 rounded-2xl border border-rk px-3 py-2 text-sm text-right focus:ring-2 ring-rk focus:border-transparent"
                                                value="40">
                                        </td>
                                    </tr>
                                    <tr class="hover:bg-neutral-50">
                                        <td class="py-4 font-medium">Infusion NaCl 0,9%</td>
                                        <td class="py-4 text-rk-slate">500 ml</td>
                                        <td class="py-4 text-right">
                                            <input
                                                class="w-28 rounded-2xl border border-rk px-3 py-2 text-sm text-right focus:ring-2 ring-rk focus:border-transparent"
                                                value="20">
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                @elseif($active === 'bestellungen')
                    <div class="rounded-3xl border border-rk p-5">
                        <div class="text-sm font-semibold">Bestellungen</div>
                        <div class="mt-2 text-sm text-rk-slate">Historie + Status-Workflow (UI folgt im
                            Bestellungen-Modul).</div>
                    </div>
                @else
                    <div class="rounded-3xl border border-rk p-5">
                        <div class="text-sm font-semibold">Verbrauch</div>
                        <div class="mt-2 text-sm text-rk-slate">Verbrauchsbuchungen (UI folgt im Verbrauch-Modul).</div>
                    </div>
                @endif
            </div>
        </div>

        <div class="flex justify-between">
            <a class="text-sm text-rk-slate hover:underline" href="{{ route('ui.stations') }}">← Zurück zur
                Übersicht</a>
        </div>
    </div>
</x-layouts.app>