@php
    $q = $q ?? request('q', '');
    $status = $status ?? request('status', 'alle');
    $role = $role ?? request('role', 'alle');
@endphp

<x-layouts.app title="User · Ortstelle" userRole="Bezirksstelle">
    <div class="flex flex-col gap-4">

        <div class="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-3">
            <div>
                <div class="text-xl font-semibold">User · {{ $station->name }}</div>
                <div class="mt-1 text-sm text-rk-slate">Benutzer verwalten (aktiv/inaktiv, Rollen).</div>
            </div>

            <div class="flex items-center gap-2">
                <a href="{{ route('district.stations.show', ['station' => $station->id]) }}" class="btn-rk-soft">
                    Zurück
                </a>
                <a href="{{ route('district.stations.users.create', ['station' => $station->id]) }}"
                    class="btn-rk-soft-green">
                    User anlegen
                </a>
            </div>
        </div>

        <form method="GET" action="{{ route('district.stations.users.index', ['station' => $station->id]) }}"
            class="rounded-3xl bg-white border border-rk p-4 shadow-sm">
            <div class="grid grid-cols-1 lg:grid-cols-12 gap-3 lg:items-end">
                <div class="lg:col-span-6">
                    <label class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Suche</label>
                    <input name="q" value="{{ $q }}"
                        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="Name oder E-Mail…">
                </div>

                <div class="lg:col-span-3">
                    <label class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Status</label>
                    <select name="status" class="mt-2 w-full rounded-2xl border border-rk bg-white px-4 py-3 text-sm">
                        <option value="alle" @selected($status === 'alle')>Alle</option>
                        <option value="aktiv" @selected($status === 'aktiv')>Aktiv</option>
                        <option value="inaktiv" @selected($status === 'inaktiv')>Inaktiv</option>
                    </select>
                </div>

                <div class="lg:col-span-3">
                    <label class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Rolle</label>
                    <select name="role" class="mt-2 w-full rounded-2xl border border-rk bg-white px-4 py-3 text-sm">
                        <option value="alle" @selected($role === 'alle')>Alle</option>
                        <option value="ortstelle_admin" @selected($role === 'ortstelle_admin')>Ortstelle Admin</option>
                        <option value="ortstelle_user" @selected($role === 'ortstelle_user')>Ortstelle Benutzer</option>
                    </select>
                </div>

                <div class="lg:col-span-12 flex gap-2 pt-1">
                    <button
                        class="rounded-2xl bg-rk-red px-4 py-2.5 text-sm font-semibold text-white hover:bg-rk-red-dark">
                        Filtern
                    </button>
                    <a href="{{ route('district.stations.users.index', ['station' => $station->id]) }}"
                        class="rounded-2xl border border-rk bg-white px-4 py-2.5 text-sm font-semibold hover:bg-neutral-50">
                        Reset
                    </a>
                </div>
            </div>
        </form>

        <div class="rounded-3xl bg-white border border-rk shadow-sm overflow-hidden">
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead class="text-xs text-rk-slate/80 uppercase tracking-wider bg-neutral-50">
                        <tr class="border-t border-b border-rk">
                            <th class="py-3 px-5 text-left">Name</th>
                            <th class="py-3 px-5 text-left">E-Mail</th>
                            <th class="py-3 px-5 text-left">Rolle</th>
                            <th class="py-3 px-5 text-left">Status</th>
                            <th class="py-3 px-5 text-right">Aktion</th>
                        </tr>
                    </thead>

                    <tbody class="divide-y divide-[color:var(--rk-border)]">
                        @forelse($users as $u)
                            @php
                                $isActive = (int) ($u->active ?? 1) === 1;
                                $statusPill = $isActive
                                    ? 'bg-emerald-50 text-emerald-700 border-emerald-200'
                                    : 'bg-red-50 text-red-700 border-red-200';

                                $roleName = $u->roles->pluck('name')->first() ?? '—';
                                $roleLabel = match ($roleName) {
                                    'ortstelle_admin' => 'Ortstelle Admin',
                                    'ortstelle_user' => 'Ortstelle Benutzer',
                                    default => $roleName,
                                };
                            @endphp

                            <tr class="hover:bg-neutral-50">
                                <td class="py-4 px-5 font-medium">{{ $u->name }}</td>
                                <td class="py-4 px-5 text-rk-slate">{{ $u->email }}</td>
                                <td class="py-4 px-5">
                                    <span
                                        class="inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold border bg-neutral-100 text-rk-slate border-rk">
                                        {{ $roleLabel }}
                                    </span>
                                </td>
                                <td class="py-4 px-5">
                                    <span
                                        class="inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold border {{ $statusPill }}">
                                        {{ $isActive ? 'Aktiv' : 'Inaktiv' }}
                                    </span>
                                </td>
                                <td class="py-4 px-5 text-right">
                                    <div class="inline-flex items-center gap-3">
                                        <a class="text-rk-red font-semibold hover:underline"
                                            href="{{ route('district.stations.users.edit', ['station' => $station->id, 'user' => $u->id]) }}">
                                            Bearbeiten
                                        </a>

                                        <form method="POST"
                                            action="{{ route('district.stations.users.toggleActive', ['station' => $station->id, 'user' => $u->id]) }}">
                                            @csrf
                                            <button
                                                class="text-sm font-semibold {{ $isActive ? 'text-red-700' : 'text-emerald-700' }} hover:underline">
                                                {{ $isActive ? 'Deaktivieren' : 'Aktivieren' }}
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="py-10 px-5 text-center text-rk-slate">Keine Benutzer.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div class="px-5 py-4 border-t border-rk bg-white">
                {{ $users->links() }}
            </div>
        </div>

    </div>
</x-layouts.app>