@extends('layouts.app')
@section('title', 'Postes de contrôle')

@section('content')
@include('admin._nav')

<div class="flex items-center justify-between mb-5 gap-3">
    <div>
        <h1 class="font-display text-2xl font-extrabold text-gray-900 flex items-center gap-2">
            <span class="w-9 h-9 rounded-xl bg-fuchsia-50 flex items-center justify-center">
                <x-icon name="qr-code" class="w-5 h-5 text-fuchsia-600" />
            </span>
            Postes de contrôle
        </h1>
        <p class="text-sm text-gray-500 mt-1">
            Génère un lien par porte/poste d'entrée : le staff l'ouvre sur son téléphone et scanne, sans compte ni app à installer.
        </p>
    </div>
</div>

{{-- ---------- Formulaire de création ---------- --}}
<div class="bg-white rounded-[1.5rem] border border-gray-100 shadow-card p-5 mb-6">
    <h2 class="font-display font-bold text-gray-900 mb-4 flex items-center gap-2">
        <x-icon name="plus-circle" class="w-4.5 h-4.5 text-fuchsia-500" />
        Créer un nouveau lien de scan
    </h2>

    @if($events->isEmpty())
        <p class="text-sm text-gray-400">Aucun événement publié pour l'instant — publie un événement avant de créer un poste de contrôle.</p>
    @else
        <form method="POST" action="{{ route('admin.scan-posts.store') }}" class="flex flex-wrap items-end gap-3">
            @csrf

            <div class="flex-1 min-w-[220px]">
                <label class="block text-xs font-bold uppercase tracking-wide text-gray-400 mb-1.5">Événement</label>
                <select name="event_id" required
                        class="w-full px-3 py-2.5 rounded-xl border border-gray-200 text-sm focus:outline-none focus:ring-2 focus:ring-fuchsia-300">
                    <option value="">Choisir un événement…</option>
                    @foreach($events as $event)
                        <option value="{{ $event->id }}" @selected(old('event_id') == $event->id)>{{ $event->title }}</option>
                    @endforeach
                </select>
            </div>

            <div class="flex-1 min-w-[220px]">
                <label class="block text-xs font-bold uppercase tracking-wide text-gray-400 mb-1.5">Nom du poste</label>
                <input type="text" name="label" required maxlength="100" value="{{ old('label') }}"
                       placeholder="Ex : Porte principale, Entrée VIP…"
                       class="w-full px-3 py-2.5 rounded-xl border border-gray-200 text-sm focus:outline-none focus:ring-2 focus:ring-fuchsia-300">
            </div>

            <button class="btn-gradient text-white px-5 py-2.5 rounded-xl font-bold shadow-glow hover:brightness-105 transition-all inline-flex items-center gap-1.5">
                <x-icon name="plus" class="w-4 h-4" />
                Générer le lien
            </button>
        </form>
    @endif
</div>

{{-- ---------- Liste des liens existants ---------- --}}
<div class="space-y-4" x-data="{ copied: null }">
    @forelse($scanPosts as $scanPost)
        <div class="bg-white rounded-[1.5rem] border border-gray-100 shadow-card p-5 flex flex-col sm:flex-row gap-5">

            <div class="shrink-0 flex sm:flex-col items-center gap-3 sm:gap-2">
                <div class="bg-white p-2 rounded-xl border border-gray-100">
                    {!! QrCode::size(120)->margin(0)->generate($scanPost->scanUrl()) !!}
                </div>
                <p class="text-[11px] text-gray-400 text-center">À scanner pour ouvrir le poste</p>
            </div>

            <div class="flex-1 min-w-0">
                <div class="flex flex-wrap items-center gap-2 mb-1.5">
                    <h3 class="font-display font-bold text-gray-900">{{ $scanPost->label }}</h3>
                    @if($scanPost->is_active)
                        <span class="inline-flex items-center px-2.5 py-1 rounded-full bg-emerald-50 text-emerald-600 text-xs font-bold">Actif</span>
                    @else
                        <span class="inline-flex items-center px-2.5 py-1 rounded-full bg-gray-100 text-gray-500 text-xs font-bold">Désactivé</span>
                    @endif
                </div>

                <p class="text-sm text-gray-500 mb-3">
                    <span class="font-semibold text-gray-700">{{ optional($scanPost->event)->title ?? 'Événement supprimé' }}</span>
                    @if($scanPost->last_used_at)
                        · dernier scan le {{ $scanPost->last_used_at->format('d/m/Y H:i') }}
                    @else
                        · jamais utilisé
                    @endif
                </p>

                <div class="flex items-center gap-2 mb-3">
                    <input type="text" readonly value="{{ $scanPost->scanUrl() }}"
                           x-ref="url{{ $scanPost->id }}"
                           class="flex-1 min-w-0 px-3 py-2 rounded-xl border border-gray-200 bg-gray-50 text-xs font-mono text-gray-600 focus:outline-none">
                    <button type="button"
                            @click="navigator.clipboard.writeText($refs.url{{ $scanPost->id }}.value); copied = {{ $scanPost->id }}; setTimeout(() => copied = null, 1500)"
                            class="shrink-0 inline-flex items-center gap-1.5 bg-gray-900 text-white px-3 py-2 rounded-xl text-xs font-bold hover:bg-gray-800 transition-colors">
                        <x-icon name="arrow-down-tray" class="w-3.5 h-3.5" />
                        <span x-text="copied === {{ $scanPost->id }} ? 'Copié !' : 'Copier'"></span>
                    </button>
                    <a href="{{ $scanPost->scanUrl() }}" target="_blank"
                       class="shrink-0 inline-flex items-center gap-1.5 text-xs font-bold text-fuchsia-600 hover:text-fuchsia-700 px-2">
                        Ouvrir
                        <x-icon name="arrow-right" class="w-3.5 h-3.5" />
                    </a>
                </div>

                <div class="flex items-center gap-4">
                    <form method="POST" action="{{ route('admin.scan-posts.toggle', $scanPost) }}">
                        @csrf
                        <button class="text-xs font-bold {{ $scanPost->is_active ? 'text-amber-600 hover:text-amber-700' : 'text-emerald-600 hover:text-emerald-700' }}">
                            {{ $scanPost->is_active ? 'Désactiver' : 'Réactiver' }}
                        </button>
                    </form>
                    <form method="POST" action="{{ route('admin.scan-posts.destroy', $scanPost) }}"
                          onsubmit="return confirm('Supprimer définitivement ce lien ? Le poste ne pourra plus scanner de billets.');">
                        @csrf
                        @method('DELETE')
                        <button class="text-xs font-bold text-rose-600 hover:text-rose-700">Supprimer</button>
                    </form>
                </div>
            </div>
        </div>
    @empty
        <div class="bg-white rounded-[1.5rem] border border-gray-100 shadow-card p-10 text-center text-gray-400">
            Aucun poste de contrôle créé pour l'instant.
        </div>
    @endforelse
</div>
@endsection