@extends('layouts.app')
@section('title', 'Nouvel événement')

@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="max-w-xl">
    <h1 class="font-display text-2xl font-extrabold text-gray-900 mb-1">Créer un événement</h1>
    <p class="text-sm text-gray-500 mb-6">Remplis les informations pour publier ton événement</p>

    <div class="bg-white border border-gray-100 rounded-3xl p-6 sm:p-7 shadow-card">
        <form method="POST" action="{{ route('organizer.events.store') }}" enctype="multipart/form-data" class="space-y-4">
            @csrf

            <div>
                <label class="block text-sm font-bold text-gray-700 mb-1.5">Photo de couverture</label>
                <label for="cover_image" class="group 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" class="hidden absolute inset-0 w-full h-full object-cover" alt="Aperçu">
                    <div id="cover_placeholder" class="flex flex-col items-center gap-1.5 text-gray-400 group-hover: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" accept="image/*" class="sr-only"
                           onchange="const f=this.files[0]; if(f){const r=new FileReader(); r.onload=e=>{document.getElementById('cover_preview').src=e.target.result; document.getElementById('cover_preview').classList.remove('hidden'); document.getElementById('cover_placeholder').classList.add('hidden');}; r.readAsDataURL(f);}">
                </label>
            </div>

            <div>
                <label class="block text-sm font-bold text-gray-700 mb-1.5">Titre</label>
                <input name="title" value="{{ old('title') }}" required placeholder="Ex : Festival Sunu Gui"
                       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" placeholder="Décris ton événement..."
                          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') }}</textarea>
            </div>

            <div>
                <label class="block text-sm font-bold text-gray-700 mb-1.5">Lieu</label>
                <div class="relative">
                    <span class="absolute inset-y-0 left-0 flex items-center pl-3.5 text-gray-400">
                        <x-icon name="map-pin" class="w-4.5 h-4.5" />
                    </span>
                    <input name="location" value="{{ old('location') }}" required placeholder="Ex : Kaolack, Sénégal"
                           class="w-full border border-gray-200 rounded-xl pl-10 pr-3.5 py-3 text-base focus:outline-none focus:ring-2 focus:ring-fuchsia-300 focus:border-fuchsia-300">
                </div>
            </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" 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"
                           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') }}" placeholder="Concert, Conférence, Sport..."
                       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 btn-gradient text-white rounded-xl py-3.5 font-bold shadow-glow hover:brightness-105 hover:-translate-y-0.5 active:translate-y-0 transition-all flex items-center justify-center gap-2">
                <x-icon name="plus-circle" class="w-4.5 h-4.5" />
                Créer l'événement
            </button>
        </form>
    </div>
</div>
@endsection