@extends('layouts.app')
@section('title', $event->title)

@section('content')
<a href="{{ route('organizer.events.index') }}" class="inline-flex items-center gap-1.5 text-sm font-semibold text-gray-500 hover:text-fuchsia-600 mb-5 transition-colors">
    <x-icon name="arrow-left" class="w-4 h-4" />
    Mes événements
</a>

<div class="bg-white border border-gray-100 rounded-3xl overflow-hidden mb-5 shadow-card">
    @if($event->cover_image)
        <div class="relative h-40 sm:h-52">
            <img src="{{ asset('storage/' . $event->cover_image) }}" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-gradient-to-t from-black/50 via-transparent to-transparent"></div>
        </div>
    @else
        <div class="w-full h-28 sm:h-36 bg-gradient-to-br from-fuchsia-500 via-pink-500 to-orange-400 flex items-center justify-center">
            <x-icon name="ticket" class="w-9 h-9 text-white/90" />
        </div>
    @endif

    <div class="p-5 sm:p-6">
        <div class="flex items-start justify-between gap-3 mb-1">
            <h1 class="font-display text-xl sm:text-2xl font-extrabold text-gray-900">{{ $event->title }}</h1>
            @php
                $statusStyles = [
                    'published' => ['bg-emerald-50 text-emerald-600', 'check-circle', 'Publié'],
                    'pending' => ['bg-amber-50 text-amber-600', 'clock-alert', 'En attente de validation'],
                    'draft' => ['bg-gray-100 text-gray-500', 'clock', 'Brouillon'],
                ];
                [$statusClass, $statusIcon, $statusLabel] = $statusStyles[$event->status] ?? $statusStyles['draft'];
            @endphp
            <span class="shrink-0 inline-flex items-center gap-1 text-xs font-bold px-2.5 py-1 rounded-full {{ $statusClass }}">
                <x-icon name="{{ $statusIcon }}" class="w-3.5 h-3.5" />
                {{ $statusLabel }}
            </span>
        </div>
        <p class="flex flex-wrap items-center gap-x-1.5 gap-y-1 text-sm text-gray-500">
            <x-icon name="calendar" class="w-4 h-4 text-gray-400" />
            {{ $event->starts_at->translatedFormat('d M Y · H:i') }}
            <span class="text-gray-300">—</span>
            <x-icon name="map-pin" class="w-4 h-4 text-gray-400" />
            {{ $event->location }}
        </p>

        @if($event->status === 'draft')
            <form method="POST" action="{{ route('organizer.events.publish', $event) }}" class="mt-5">
                @csrf
                <button class="inline-flex items-center gap-1.5 btn-gradient text-white px-4 py-2.5 rounded-xl text-sm font-bold shadow-glow hover:brightness-105 transition-all">
                    <x-icon name="sparkles" class="w-4 h-4" />
                    Soumettre pour validation
                </button>
            </form>
        @elseif($event->status === 'pending')
            <p class="flex items-center gap-1.5 mt-5 text-sm font-semibold text-amber-600">
                <x-icon name="clock-alert" class="w-4 h-4" />
                En attente de validation par l'administrateur
            </p>
        @else
            <a href="{{ route('events.show', $event->slug) }}" class="inline-flex items-center gap-1.5 mt-5 text-sm font-bold text-fuchsia-600 hover:text-fuchsia-700">
                Voir la page publique
                <x-icon name="arrow-right" class="w-4 h-4" />
            </a>
        @endif
    </div>
</div>

<details class="bg-white border border-gray-100 rounded-3xl mb-5 shadow-card group">
    <summary class="p-6 flex items-center justify-between cursor-pointer list-none select-none">
        <span class="font-display font-bold text-lg flex items-center gap-2 text-gray-900">
            <span class="w-8 h-8 rounded-lg bg-fuchsia-50 flex items-center justify-center">
                <x-icon name="building" class="w-4.5 h-4.5 text-fuchsia-600" />
            </span>
            Modifier les informations
        </span>
        <x-icon name="chevron-right" class="w-5 h-5 text-gray-400 group-open:rotate-90 transition-transform" />
    </summary>

    <form method="POST" action="{{ route('organizer.events.update', $event) }}" enctype="multipart/form-data" class="px-6 pb-6 space-y-4 border-t border-gray-100 pt-5">
        @csrf
        @method('PUT')

        <div>
            <label class="block text-sm font-bold text-gray-700 mb-1.5">Photo de couverture</label>
            <label for="cover_image_edit" class="group/upload relative flex flex-col items-center justify-center gap-2 border-2 border-dashed border-gray-200 hover:border-fuchsia-300 rounded-2xl h-40 cursor-pointer overflow-hidden bg-gray-50/60 transition-colors">
                <img id="cover_preview_edit" class="{{ $event->cover_image ? '' : 'hidden' }} absolute inset-0 w-full h-full object-cover"
                     src="{{ $event->cover_image ? asset('storage/' . $event->cover_image) : '' }}" alt="Aperçu">
                <div id="cover_placeholder_edit" class="{{ $event->cover_image ? 'hidden' : '' }} flex flex-col items-center gap-1.5 text-gray-400 group-hover/upload:text-fuchsia-500 transition-colors">
                    <x-icon name="ticket" class="w-7 h-7" />
                    <span class="text-xs font-semibold">Ajouter une image (JPG, PNG — 4 Mo max)</span>
                </div>
                <input type="file" name="cover_image" id="cover_image_edit" accept="image/*" class="sr-only"
                       onchange="const f=this.files[0]; if(f){const r=new FileReader(); r.onload=e=>{document.getElementById('cover_preview_edit').src=e.target.result; document.getElementById('cover_preview_edit').classList.remove('hidden'); document.getElementById('cover_placeholder_edit').classList.add('hidden'); const rm=document.getElementById('remove_cover_wrap'); if(rm) rm.classList.add('hidden');}; r.readAsDataURL(f);}">
            </label>
            @if($event->cover_image)
                <label id="remove_cover_wrap" class="inline-flex items-center gap-1.5 mt-2 text-xs font-bold text-red-500 hover:text-red-600 cursor-pointer">
                    <input type="checkbox" name="remove_cover_image" value="1" class="rounded border-gray-300 text-red-500 focus:ring-red-300">
                    Supprimer la photo actuelle
                </label>
            @endif
        </div>

        <div>
            <label class="block text-sm font-bold text-gray-700 mb-1.5">Titre</label>
            <input name="title" value="{{ old('title', $event->title) }}" required
                   class="w-full border border-gray-200 rounded-xl px-3.5 py-3 text-base focus:outline-none focus:ring-2 focus:ring-fuchsia-300 focus:border-fuchsia-300">
        </div>

        <div>
            <label class="block text-sm font-bold text-gray-700 mb-1.5">Description</label>
            <textarea name="description" rows="4"
                      class="w-full border border-gray-200 rounded-xl px-3.5 py-3 text-base focus:outline-none focus:ring-2 focus:ring-fuchsia-300 focus:border-fuchsia-300">{{ old('description', $event->description) }}</textarea>
        </div>

        <div>
            <label class="block text-sm font-bold text-gray-700 mb-1.5">Lieu</label>
            <input name="location" value="{{ old('location', $event->location) }}" required
                   class="w-full border border-gray-200 rounded-xl px-3.5 py-3 text-base focus:outline-none focus:ring-2 focus:ring-fuchsia-300 focus:border-fuchsia-300">
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
            <div>
                <label class="block text-sm font-bold text-gray-700 mb-1.5">Date de début</label>
                <input type="datetime-local" name="starts_at" value="{{ old('starts_at', $event->starts_at->format('Y-m-d\TH:i')) }}" required
                       class="w-full border border-gray-200 rounded-xl px-3.5 py-3 text-base focus:outline-none focus:ring-2 focus:ring-fuchsia-300 focus:border-fuchsia-300">
            </div>
            <div>
                <label class="block text-sm font-bold text-gray-700 mb-1.5">Date de fin</label>
                <input type="datetime-local" name="ends_at" value="{{ old('ends_at', optional($event->ends_at)->format('Y-m-d\TH:i')) }}"
                       class="w-full border border-gray-200 rounded-xl px-3.5 py-3 text-base focus:outline-none focus:ring-2 focus:ring-fuchsia-300 focus:border-fuchsia-300">
            </div>
        </div>

        <div>
            <label class="block text-sm font-bold text-gray-700 mb-1.5">Catégorie</label>
            <input name="category" value="{{ old('category', $event->category) }}"
                   class="w-full border border-gray-200 rounded-xl px-3.5 py-3 text-base focus:outline-none focus:ring-2 focus:ring-fuchsia-300 focus:border-fuchsia-300">
        </div>

        <button class="w-full sm:w-auto inline-flex items-center justify-center gap-1.5 btn-gradient text-white rounded-xl px-6 py-3 font-bold shadow-glow hover:brightness-105 transition-all">
            <x-icon name="check-circle" class="w-4.5 h-4.5" />
            Enregistrer les modifications
        </button>
    </form>
</details>

<div class="bg-white border border-gray-100 rounded-3xl p-6 mb-5 shadow-card">
    <h2 class="font-display font-bold text-lg mb-4 flex items-center gap-2 text-gray-900">
        <span class="w-8 h-8 rounded-lg bg-fuchsia-50 flex items-center justify-center">
            <x-icon name="ticket" class="w-4.5 h-4.5 text-fuchsia-600" />
        </span>
        Types de billets
    </h2>

    <div class="space-y-2.5 mb-5">
        @forelse($event->ticketTypes as $type)
            <div x-data="{ editing: false }" class="border border-gray-100 bg-gray-50/60 rounded-xl px-4 py-3 text-sm">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="font-bold text-gray-900">{{ $type->name }}</p>
                        <p class="text-gray-500 flex items-center gap-1.5 mt-0.5">
                            <span class="font-semibold text-fuchsia-600">{{ number_format($type->price, 0, ',', ' ') }} FCFA</span>
                            <span class="text-gray-300">·</span>
                            {{ $type->sold }}/{{ $type->quota }} vendus
                        </p>
                    </div>
                    <div class="flex items-center gap-3">
                        <button type="button" @click="editing = !editing"
                                class="inline-flex items-center gap-1 text-gray-500 hover:text-fuchsia-600 text-xs font-bold">
                            <x-icon name="chevron-right" class="w-3.5 h-3.5" x-bind:class="editing ? 'rotate-90' : ''" />
                            Modifier
                        </button>
                        @if($type->sold === 0)
                            <form method="POST" action="{{ route('organizer.ticket-types.destroy', [$event, $type->id]) }}">
                                @csrf @method('DELETE')
                                <button class="inline-flex items-center gap-1 text-red-500 hover:text-red-600 text-xs font-bold">
                                    <x-icon name="trash" class="w-3.5 h-3.5" />
                                    Supprimer
                                </button>
                            </form>
                        @endif
                    </div>
                </div>

                <form x-show="editing" x-cloak method="POST" action="{{ route('organizer.ticket-types.update', [$event, $type->id]) }}"
                      class="grid grid-cols-1 sm:grid-cols-3 gap-2 mt-3 pt-3 border-t border-dashed border-gray-200">
                    @csrf @method('PUT')
                    <input name="name" value="{{ $type->name }}" required
                           class="border border-gray-200 rounded-xl px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-fuchsia-300">
                    <input type="number" step="0.01" name="price" value="{{ $type->price }}" required
                           class="border border-gray-200 rounded-xl px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-fuchsia-300">
                    <input type="number" name="quota" value="{{ $type->quota }}" min="{{ $type->sold }}" required
                           class="border border-gray-200 rounded-xl px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-fuchsia-300">
                    @if($type->sold > 0)
                        <p class="sm:col-span-3 text-xs text-gray-400">Quota minimum : {{ $type->sold }} (billets déjà vendus).</p>
                    @endif
                    <button class="sm:col-span-3 inline-flex items-center justify-center gap-1.5 bg-fuchsia-600 hover:bg-fuchsia-700 text-white rounded-xl py-2.5 text-sm font-bold transition-colors">
                        Enregistrer les modifications
                    </button>
                </form>
            </div>
        @empty
            <p class="text-gray-500 text-sm py-4 text-center">Aucun type de billet pour l'instant.</p>
        @endforelse
    </div>

    <form method="POST" action="{{ route('organizer.ticket-types.store', $event) }}" class="grid grid-cols-1 sm:grid-cols-3 gap-2 pt-4 border-t border-dashed border-gray-200">
        @csrf
        <input name="name" placeholder="Nom (ex: VIP)" required class="border border-gray-200 rounded-xl px-3 py-3 text-base sm:col-span-1 focus:outline-none focus:ring-2 focus:ring-fuchsia-300">
        <input type="number" step="0.01" name="price" placeholder="Prix FCFA" required class="border border-gray-200 rounded-xl px-3 py-3 text-base focus:outline-none focus:ring-2 focus:ring-fuchsia-300">
        <input type="number" name="quota" placeholder="Quantité" required class="border border-gray-200 rounded-xl px-3 py-3 text-base focus:outline-none focus:ring-2 focus:ring-fuchsia-300">
        <button class="sm:col-span-3 inline-flex items-center justify-center gap-1.5 bg-gray-900 hover:bg-gray-800 text-white rounded-xl py-3 text-sm font-bold mt-1 transition-colors">
            <x-icon name="plus" class="w-4 h-4" />
            Ajouter ce type de billet
        </button>
    </form>
</div>
@endsection