@extends('layouts.admin')

@section('title', 'Registrations')
@section('heading', 'Registrations')
@section('subheading', number_format($registrations->total()).' result'.($registrations->total() === 1 ? '' : 's'))

@php
    $f = fn (string $key, $default = '') => $filters[$key] ?? $default;
    $tz = config('event.timezone');
    $hasFilters = collect($filters)->filter(fn ($v) => $v !== null && $v !== '')->except('sort')->isNotEmpty();
    $canExport = auth()->user()->isSuperAdmin() || auth()->user()->hasAnyRole([\App\Enums\UserRole::EventManager, \App\Enums\UserRole::RegistrationOfficer, \App\Enums\UserRole::Auditor]);
@endphp

@section('content')
    <form method="GET" action="{{ route('admin.registrations.index') }}" class="surface p-4 sm:p-5" role="search">
        <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
            <div class="sm:col-span-2">
                <label for="q" class="label">Search</label>
                <input id="q" type="search" name="q" value="{{ $f('q') }}" class="field" placeholder="Name, e-mail, phone or reference">
            </div>
            <div>
                <label for="status" class="label">Status</label>
                <select id="status" name="status" class="field">
                    <option value="">All statuses</option>
                    @foreach ($statuses as $status)
                        <option value="{{ $status->value }}" @selected($f('status') === $status->value)>{{ $status->label() }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label for="category" class="label">Category</label>
                <select id="category" name="category" class="field">
                    <option value="">All categories</option>
                    @foreach ($categories as $category)
                        <option value="{{ $category->id }}" @selected((string) $f('category') === (string) $category->id)>{{ $category->name }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label for="from" class="label">From</label>
                <input id="from" type="date" name="from" value="{{ $f('from') }}" class="field">
            </div>
            <div>
                <label for="to" class="label">To</label>
                <input id="to" type="date" name="to" value="{{ $f('to') }}" class="field">
                <x-input-error :messages="$errors->get('to')" class="mt-1" />
            </div>
            <div>
                <label for="verified" class="label">Verified</label>
                <select id="verified" name="verified" class="field">
                    <option value="">Any</option>
                    <option value="yes" @selected($f('verified') === 'yes')>Verified</option>
                    <option value="no" @selected($f('verified') === 'no')>Not verified</option>
                </select>
            </div>
            <div>
                <label for="sort" class="label">Sort</label>
                <select id="sort" name="sort" class="field">
                    <option value="newest" @selected($f('sort', 'newest') === 'newest')>Newest first</option>
                    <option value="oldest" @selected($f('sort') === 'oldest')>Oldest first</option>
                    <option value="name" @selected($f('sort') === 'name')>Name A–Z</option>
                </select>
            </div>
        </div>
        <div class="mt-4 flex flex-wrap items-center gap-3">
            <button type="submit" class="btn-primary">Apply filters</button>
            @if ($hasFilters || $f('sort'))
                <a href="{{ route('admin.registrations.index') }}" class="btn-ghost">Reset</a>
            @endif
            @if ($canExport && Route::has('admin.reports.registrations'))
                <a href="{{ route('admin.reports.registrations', request()->query()) }}" class="ml-auto text-sm font-semibold text-emerald-600 hover:underline">Export CSV (filtered)</a>
            @endif
        </div>
    </form>

    {{-- Desktop table --}}
    <div class="surface mt-6 hidden overflow-hidden md:block">
        <table class="min-w-full divide-y divide-navy-100 text-sm">
            <thead class="bg-navy-50 text-left text-xs font-semibold uppercase tracking-wider text-navy-500">
                <tr>
                    <th scope="col" class="px-4 py-3">Registrant</th>
                    <th scope="col" class="px-4 py-3">Category</th>
                    <th scope="col" class="px-4 py-3">Status</th>
                    <th scope="col" class="px-4 py-3">Verified</th>
                    <th scope="col" class="px-4 py-3">Submitted</th>
                    <th scope="col" class="px-4 py-3"><span class="sr-only">Open</span></th>
                </tr>
            </thead>
            <tbody class="divide-y divide-navy-100">
                @forelse ($registrations as $registration)
                    <tr class="hover:bg-mist">
                        <td class="px-4 py-3">
                            <a href="{{ route('admin.registrations.show', $registration) }}" class="font-semibold text-navy-900 hover:text-emerald-600">{{ $registration->full_name }}</a>
                            <p class="text-xs text-navy-500">{{ $registration->reference }} &middot; {{ $registration->email }}</p>
                            @if ($registration->organisation)<p class="text-xs text-navy-500">{{ $registration->organisation->name }}</p>@endif
                        </td>
                        <td class="px-4 py-3 text-navy-700">{{ $registration->category?->name }}</td>
                        <td class="px-4 py-3"><x-status-badge :status="$registration->status" /></td>
                        <td class="px-4 py-3">
                            @if ($registration->isVerified())
                                <span class="text-emerald-600" title="Verified">&#10003;</span>
                            @else
                                <span class="text-navy-200" title="Not verified">&mdash;</span>
                            @endif
                        </td>
                        <td class="whitespace-nowrap px-4 py-3 text-navy-500">{{ $registration->created_at->timezone($tz)->format('j M Y, H:i') }}</td>
                        <td class="px-4 py-3 text-right"><a href="{{ route('admin.registrations.show', $registration) }}" class="font-semibold text-emerald-600 hover:underline">View</a></td>
                    </tr>
                @empty
                    <tr><td colspan="6" class="px-4 py-12 text-center text-navy-500">No registrations match these filters.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>

    {{-- Mobile list --}}
    <ul class="mt-6 space-y-3 md:hidden">
        @forelse ($registrations as $registration)
            <li>
                <a href="{{ route('admin.registrations.show', $registration) }}" class="surface block p-4">
                    <div class="flex items-start justify-between gap-3">
                        <div class="min-w-0">
                            <p class="truncate font-semibold text-navy-900">{{ $registration->full_name }}</p>
                            <p class="truncate text-xs text-navy-500">{{ $registration->reference }}</p>
                        </div>
                        <x-status-badge :status="$registration->status" />
                    </div>
                    <p class="mt-2 text-sm text-navy-500">{{ $registration->category?->name }} &middot; {{ $registration->created_at->timezone($tz)->format('j M, H:i') }}@if ($registration->isVerified()) &middot; <span class="text-emerald-600">verified</span>@endif</p>
                </a>
            </li>
        @empty
            <li class="surface p-8 text-center text-navy-500">No registrations match these filters.</li>
        @endforelse
    </ul>

    <div class="mt-6">{{ $registrations->links() }}</div>
@endsection