@extends('admin.layout')
@section('title', 'Events')

@section('content')

@php
    $sortLink = function(string $column, string $label) use ($sort, $dir): string {
        $newDir = ($sort === $column && $dir === 'asc') ? 'desc' : 'asc';
        $arrow  = $sort === $column ? ($dir === 'asc' ? ' ↑' : ' ↓') : '';
        $url    = route('admin.events.index', array_merge(request()->query(), ['sort' => $column, 'dir' => $newDir]));
        return '<a href="' . $url . '" class="hover:text-gray-700 transition">' . $label . $arrow . '</a>';
    };
    $modalityMap = ['in_person' => 'Fysiek', 'online' => 'Online', 'hybrid' => 'Hybride'];
@endphp

{{-- Filters --}}
<form method="GET" action="{{ route('admin.events.index') }}"
      class="bg-white rounded-lg border border-gray-100 p-4 mb-4 flex flex-wrap gap-3 items-end">

    <div class="flex-1 min-w-40">
        <label class="block text-xs text-gray-500 mb-1">Zoeken</label>
        <input type="text" name="q" value="{{ request('q') }}" placeholder="Titel of organisator…"
               class="w-full text-sm border border-gray-200 rounded-lg px-3 py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-400">
    </div>

    <div>
        <label class="block text-xs text-gray-500 mb-1">Modaliteit</label>
        <select name="modality" class="text-sm border border-gray-200 rounded-lg py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-400">
            <option value="">Alle</option>
            <option value="in_person" @selected(request('modality') === 'in_person')>Fysiek</option>
            <option value="online"    @selected(request('modality') === 'online')>Online</option>
            <option value="hybrid"    @selected(request('modality') === 'hybrid')>Hybride</option>
        </select>
    </div>

    <div>
        <label class="block text-xs text-gray-500 mb-1">Betaald</label>
        <select name="paid" class="text-sm border border-gray-200 rounded-lg py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-400">
            <option value="">Alle</option>
            <option value="1" @selected(request('paid') === '1')>Betaald</option>
            <option value="0" @selected(request('paid') === '0')>Gratis</option>
        </select>
    </div>

    <div>
        <label class="block text-xs text-gray-500 mb-1">Tijdstip</label>
        <select name="upcoming" class="text-sm border border-gray-200 rounded-lg py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-400">
            <option value="">Alle</option>
            <option value="1" @selected(request('upcoming') === '1')>Aankomend</option>
            <option value="0" @selected(request('upcoming') === '0')>Verleden</option>
        </select>
    </div>

    <div>
        <label class="block text-xs text-gray-500 mb-1">Zichtbaar</label>
        <select name="private" class="text-sm border border-gray-200 rounded-lg py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-400">
            <option value="">Alle</option>
            <option value="0" @selected(request('private') === '0')>Publiek</option>
            <option value="1" @selected(request('private') === '1')>Privé</option>
        </select>
    </div>

    <button type="submit"
            class="px-4 py-1.5 bg-blue-600 text-white text-sm rounded-lg hover:bg-blue-700 transition">
        Filteren
    </button>
    <a href="{{ route('admin.events.index') }}"
       class="px-4 py-1.5 border border-gray-200 text-gray-500 text-sm rounded-lg hover:bg-gray-50 transition">
        Reset
    </a>
</form>

{{-- Table --}}
<div class="bg-white rounded-lg border border-gray-100 overflow-hidden">
    <div class="px-4 py-3 border-b border-gray-100">
        <span class="text-sm text-gray-500">{{ $events->total() }} event(s) gevonden</span>
    </div>

    <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <thead class="bg-gray-50 text-xs text-gray-400 uppercase tracking-wide">
                <tr>
                    <th class="px-4 py-3 text-left">{!! $sortLink('id', 'ID') !!}</th>
                    <th class="px-4 py-3 text-left">{!! $sortLink('title', 'Titel') !!}</th>
                    <th class="px-4 py-3 text-left">Organisator</th>
                    <th class="px-4 py-3 text-left">Type</th>
                    <th class="px-4 py-3 text-left">{!! $sortLink('starts_at', 'Datum') !!}</th>
                    <th class="px-4 py-3 text-center">Privé</th>
                    <th class="px-4 py-3 text-center">ND</th>
                    <th class="px-4 py-3 text-right">{!! $sortLink('registrations_count', 'Reg.') !!}</th>
                    <th class="px-4 py-3 text-right">{!! $sortLink('confirmed_registrations_count', 'Bevestigd') !!}</th>
                    <th class="px-4 py-3 text-right">{!! $sortLink('total_revenue', 'Omzet') !!}</th>
                    <th class="px-4 py-3 text-left col-lg">{!! $sortLink('created_at', 'Aangemaakt') !!}</th>
                    <th class="px-4 py-3"></th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-50">
                @forelse ($events as $event)
                    <tr class="hover:bg-gray-50 transition">
                        <td class="px-4 py-3 text-xs font-mono">
                            <a href="{{ route('admin.events.show', $event) }}"
                               class="text-blue-500 hover:text-blue-700 transition">{{ $event->id }}</a>
                        </td>
                        <td class="px-4 py-3">
                            <a href="{{ route('admin.events.show', $event) }}"
                               class="font-medium text-gray-800 hover:text-blue-600 transition truncate max-w-xs block">
                                {{ $event->title }}
                            </a>
                            @if ($event->group)
                                <span class="text-xs text-gray-400">{{ $event->group->name }}</span>
                            @endif
                        </td>
                        <td class="px-4 py-3">
                            <a href="{{ route('admin.users.show', $event->organiser) }}"
                               class="text-xs text-gray-600 hover:text-blue-600 transition">
                                {{ $event->organiser?->name ?? '—' }}
                            </a>
                        </td>
                        <td class="px-4 py-3 text-xs text-gray-500">
                            {{ $modalityMap[$event->event_modality ?? ''] ?? '—' }}
                            @if ($event->registration_price > 0)
                                <span class="ml-1 text-emerald-600 font-medium">€{{ number_format($event->registration_price, 2, ',', '.') }}</span>
                            @endif
                        </td>
                        <td class="px-4 py-3 text-xs text-gray-500 whitespace-nowrap">
                            @if ($event->starts_at)
                                <span class="{{ $event->starts_at->isPast() ? 'text-gray-300' : 'text-gray-700' }}">
                                    {{ $event->starts_at->format('d/m/Y H:i') }}
                                </span>
                            @else
                                —
                            @endif
                        </td>
                        <td class="px-4 py-3 text-center">
                            @if ($event->is_private)
                                <span class="text-amber-400" title="Privé">🔒</span>
                            @else
                                <span class="text-green-400 text-xs">✓</span>
                            @endif
                        </td>
                        <td class="px-4 py-3 text-center">
                            @if ($event->nd_friendly)
                                <span class="text-emerald-500 text-xs">✓</span>
                            @else
                                <span class="text-gray-200 text-xs">—</span>
                            @endif
                        </td>
                        <td class="px-4 py-3 text-right text-xs text-gray-500">{{ $event->registrations_count }}</td>
                        <td class="px-4 py-3 text-right text-xs text-gray-500">{{ $event->confirmed_registrations_count }}</td>
                        <td class="px-4 py-3 text-right text-xs font-medium {{ $event->total_revenue > 0 ? 'text-emerald-600' : 'text-gray-300' }}">
                            @if ($event->total_revenue > 0)
                                €{{ number_format($event->total_revenue, 2, ',', '.') }}
                            @else
                                —
                            @endif
                        </td>
                        <td class="px-4 py-3 text-xs text-gray-400 whitespace-nowrap col-lg">
                            {{ $event->created_at->format('d/m/Y') }}
                        </td>
                        <td class="px-4 py-3 text-right">
                            <form method="POST" action="{{ route('admin.events.destroy', $event) }}"
                                  onsubmit="return confirm('Event verwijderen?')">
                                @csrf @method('DELETE')
                                <button type="submit"
                                        class="text-xs text-red-400 hover:text-red-600 transition">
                                    Verwijder
                                </button>
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="12" class="px-4 py-8 text-center text-sm text-gray-400">
                            Geen events gevonden.
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    @if ($events->hasPages())
        <div class="px-5 py-4 border-t border-gray-100">
            {{ $events->links() }}
        </div>
    @endif
</div>

@endsection