@extends('layouts.app')

@section('content')
<div class="lg:grid lg:grid-cols-12 lg:gap-8 items-start">

    {{-- Colonne gauche : affiche + infos --}}
    <aside class="hidden lg:block lg:col-span-5 lg:mb-0 lg:sticky lg:top-6 space-y-5">

        @if (file_exists(public_path('images/affiche-vide-grenier.png')))
        <div class="rounded-2xl overflow-hidden shadow-poster ring-4 ring-white/60">
            <img src="{{ asset('images/affiche-vide-grenier.png') }}"
                alt="Affiche Vide Grenier — 7 juin 2026, Salle Elio Omici, Esmans"
                class="w-full h-auto block">
        </div>
        @else
        <div class="text-center py-6">
            <h1 class="font-display font-extrabold text-4xl md:text-5xl title-outline">VIDE GRENIER</h1>
        </div>
        @endif

        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-1 gap-3">
            <div class="info-pill rounded-2xl px-4 py-3 text-white text-center">
                <p class="font-display font-bold text-lg leading-tight">7 Juin 2026</p>
                <p class="font-body text-sm font-semibold opacity-95">de 8h00 à 18h00</p>
            </div>
            <div class="info-pill rounded-2xl px-4 py-3 text-white text-center">
                <p class="font-display font-bold text-base leading-tight">Salle Elio Omici</p>
                <p class="font-body text-sm font-semibold opacity-95">Esmans</p>
            </div>
        </div>

        <div class="info-pill-teal rounded-2xl px-4 py-3 text-white text-center font-body text-sm font-semibold">
            Restauration &amp; Buvette sur place
        </div>

        <div class="wood-panel rounded-2xl p-5 text-vg-cream relative">
            <div class="absolute top-3 left-4 wood-nail"></div>
            <div class="absolute top-3 right-4 wood-nail"></div>

            <p class="font-display text-xl md:text-2xl font-bold text-center text-white drop-shadow-md pt-2">
                Vous souhaitez exposer ?
            </p>

            <div class="mt-4 bg-vg-wood-dark/40 rounded-xl px-4 py-3 text-center border-2 border-vg-wood-dark/50">
                <p class="font-display text-2xl font-extrabold text-white">2€</p>
                <p class="font-body text-sm font-semibold">le mètre linéaire</p>
            </div>

            <ul class="mt-4 space-y-2.5 font-body text-sm">
                <li class="flex items-start gap-2">
                    <span class="shrink-0 w-6 h-6 rounded-full bg-white/20 flex items-center justify-center text-xs">🕕</span>
                    <span>Installation dès <strong>6h00</strong></span>
                </li>
                <li class="flex items-start gap-2">
                    <span class="shrink-0 w-6 h-6 rounded-full bg-white/20 flex items-center justify-center text-xs">📅</span>
                    <span>Inscriptions avant le <strong>3 juin 2026</strong></span>
                </li>
                <li class="flex items-start gap-2">
                    <span class="shrink-0 w-6 h-6 rounded-full bg-white/20 flex items-center justify-center text-xs">🚗</span>
                    <span>Emplacement avec voiture à partir de <strong>5 mètres</strong></span>
                </li>
                <li class="flex items-start gap-2">
                    <span class="shrink-0 w-6 h-6 rounded-full bg-white/20 flex items-center justify-center text-xs">👤</span>
                    <span>Réservé aux <strong>particuliers</strong> uniquement</span>
                </li>
            </ul>
        </div>
    </aside>

    {{-- Colonne droite : formulaire --}}
    <div class="lg:col-span-7">
        <div class="form-card rounded-3xl shadow-card overflow-hidden">

            <div class="bg-gradient-to-r from-vg-teal to-vg-sky-deep px-6 py-5 text-white">
                <h2 class="font-display text-2xl md:text-3xl font-bold">Inscription en ligne</h2>
                <p class="font-body text-sm text-white/85 mt-1">Réservez votre emplacement en quelques minutes</p>
            </div>

            <div class="p-6 md:p-8">

                @if (session('success'))
                    <div class="mb-6 flex gap-3 items-start bg-emerald-50 border-2 border-emerald-200 text-emerald-800 px-4 py-4 rounded-2xl font-body">
                        <span class="text-2xl shrink-0">✓</span>
                        <p class="text-sm leading-relaxed">{{ session('success') }}</p>
                    </div>
                @endif

                @if (session('error'))
                    <div class="mb-6 bg-red-50 border-2 border-red-200 text-red-700 px-4 py-3 rounded-2xl font-body text-sm">
                        {{ session('error') }}
                    </div>
                @endif

                @if ($errors->any())
                    <div class="mb-6 bg-red-50 border-2 border-red-200 text-red-700 px-4 py-4 rounded-2xl font-body text-sm">
                        <p class="font-bold mb-2">Veuillez corriger les points suivants :</p>
                        <ul class="list-disc list-inside space-y-1">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <form method="POST" action="{{ route('inscriptions.store') }}" class="space-y-8" id="inscription-form">
                    @csrf

                    <section class="section-card rounded-2xl p-5 md:p-6">
                        <h3 class="font-display text-xl font-bold text-vg-teal flex items-center gap-2 mb-5">
                            <span class="w-8 h-8 rounded-lg bg-vg-sky/20 flex items-center justify-center text-base">1</span>
                            Vos coordonnées
                        </h3>

                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                            <div>
                                <label for="nom" class="block text-sm font-bold text-slate-600 mb-1.5">Nom</label>
                                <input id="nom" type="text" name="nom" value="{{ old('nom') }}" required
                                    class="input-field @error('nom') input-error @enderror" autocomplete="family-name">
                                @error('nom')<p class="mt-1 text-sm text-red-500">{{ $message }}</p>@enderror
                            </div>
                            <div>
                                <label for="prenom" class="block text-sm font-bold text-slate-600 mb-1.5">Prénom</label>
                                <input id="prenom" type="text" name="prenom" value="{{ old('prenom') }}" required
                                    class="input-field @error('prenom') input-error @enderror" autocomplete="given-name">
                                @error('prenom')<p class="mt-1 text-sm text-red-500">{{ $message }}</p>@enderror
                            </div>
                            <div class="sm:col-span-2">
                                <label for="adresse" class="block text-sm font-bold text-slate-600 mb-1.5">Adresse</label>
                                <input id="adresse" type="text" name="adresse" value="{{ old('adresse') }}" required
                                    class="input-field @error('adresse') input-error @enderror" autocomplete="street-address">
                                @error('adresse')<p class="mt-1 text-sm text-red-500">{{ $message }}</p>@enderror
                            </div>
                            <div>
                                <label for="email" class="block text-sm font-bold text-slate-600 mb-1.5">Email</label>
                                <input id="email" type="email" name="email" value="{{ old('email') }}" required
                                    class="input-field @error('email') input-error @enderror" autocomplete="email">
                                @error('email')<p class="mt-1 text-sm text-red-500">{{ $message }}</p>@enderror
                            </div>
                            <div>
                                <label for="telephone" class="block text-sm font-bold text-slate-600 mb-1.5">Téléphone</label>
                                <input id="telephone" type="tel" name="telephone" value="{{ old('telephone') }}" required
                                    class="input-field @error('telephone') input-error @enderror" autocomplete="tel"
                                    placeholder="06 12 34 56 78">
                                @error('telephone')<p class="mt-1 text-sm text-red-500">{{ $message }}</p>@enderror
                            </div>
                        </div>
                    </section>

                    <section class="section-card rounded-2xl p-5 md:p-6">
                        <h3 class="font-display text-xl font-bold text-vg-teal flex items-center gap-2 mb-5">
                            <span class="w-8 h-8 rounded-lg bg-vg-sky/20 flex items-center justify-center text-base">2</span>
                            Votre emplacement
                        </h3>

                        <label for="metrage" class="block text-sm font-bold text-slate-600 mb-3">
                            Nombre de mètres linéaires
                        </label>

                        <div class="flex items-center justify-center gap-4 mb-6">
                            <button type="button" id="metrage-minus" class="btn-meter" aria-label="Réduire">−</button>
                            <div class="text-center">
                                <input id="metrage" type="number" name="metrage" min="1" max="30"
                                    value="{{ old('metrage', 1) }}" required
                                    class="w-20 text-center text-3xl font-display font-bold text-vg-teal border-0 bg-transparent focus:outline-none focus:ring-0 @error('metrage') text-red-500 @enderror">
                                <p class="text-xs text-slate-500 font-body mt-1">mètre(s)</p>
                            </div>
                            <button type="button" id="metrage-plus" class="btn-meter" aria-label="Augmenter">+</button>
                        </div>
                        @error('metrage')<p class="text-sm text-red-500 text-center -mt-4 mb-4">{{ $message }}</p>@enderror

                        <div id="montant-display" class="price-badge rounded-2xl px-6 py-4 text-center text-white mb-5">
                            <p class="font-body text-sm font-semibold uppercase tracking-wide opacity-90">Montant estimé</p>
                            <p class="font-display text-4xl font-extrabold mt-1">
                                <span id="montant-value">{{ (int) old('metrage', 1) * 2 }}</span> €
                            </p>
                            <p class="font-body text-xs opacity-80 mt-1">2 € × <span id="metrage-label">{{ (int) old('metrage', 1) }}</span> m</p>
                        </div>

                        <div id="vehicule-block" class="{{ (int) old('metrage', 1) >= 5 ? '' : 'hidden' }}">
                            <label class="flex items-start gap-3 p-4 rounded-xl bg-vg-cream border-2 border-vg-wood/20 cursor-pointer hover:border-vg-grass/50 transition-colors">
                                <input type="hidden" name="vehicule" value="0">
                                <input type="checkbox" name="vehicule" value="1"
                                    {{ old('vehicule') === '1' ? 'checked' : '' }}
                                    class="mt-1 w-5 h-5 rounded border-vg-sky text-vg-grass focus:ring-vg-grass/40">
                                <span class="text-sm text-slate-700 font-body leading-relaxed">
                                    <span class="font-bold text-vg-teal">Emplacement avec voiture</span><br>
                                    <span class="text-slate-500">Disponible pour les réservations de 5 mètres et plus</span>
                                </span>
                            </label>
                            @error('vehicule')<p class="mt-2 text-sm text-red-500">{{ $message }}</p>@enderror
                        </div>
                    </section>

                    <section class="rounded-2xl border-2 border-dashed border-vg-sky/50 bg-vg-cloud/80 p-4">
                        <label class="flex items-start gap-3 cursor-pointer">
                            <input type="checkbox" name="particulier" required
                                class="mt-0.5 w-5 h-5 rounded border-vg-sky text-vg-grass focus:ring-vg-grass/40">
                            <span class="text-sm text-slate-600 font-body leading-relaxed">
                                Je certifie être un <strong class="text-vg-teal">particulier</strong>.
                                Le vide grenier n'accepte pas les exposants professionnels.
                            </span>
                        </label>
                    </section>

                    <button type="submit"
                        class="w-full bg-gradient-to-r from-vg-grass to-vg-grass-dark text-white py-4 rounded-2xl font-display text-xl font-bold
                        shadow-lg hover:shadow-xl hover:brightness-105 focus:outline-none focus:ring-4 focus:ring-vg-grass/40
                        transition-all duration-200 active:scale-[0.99]">
                        Réserver mon emplacement
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
const metrageInput = document.getElementById('metrage');
const montantValue = document.getElementById('montant-value');
const metrageLabel = document.getElementById('metrage-label');
const vehiculeBlock = document.getElementById('vehicule-block');
const btnMinus = document.getElementById('metrage-minus');
const btnPlus = document.getElementById('metrage-plus');
const PRIX_PAR_METRE = 2;
const MIN = 1;
const MAX = 30;

function clampMetrage(value) {
    return Math.min(MAX, Math.max(MIN, value));
}

function updateForm() {
    const metrage = clampMetrage(parseInt(metrageInput.value, 10) || MIN);
    metrageInput.value = metrage;
    montantValue.textContent = metrage * PRIX_PAR_METRE;
    metrageLabel.textContent = metrage;

    if (metrage >= 5) {
        vehiculeBlock.classList.remove('hidden');
    } else {
        vehiculeBlock.classList.add('hidden');
        const vehiculeCheckbox = vehiculeBlock.querySelector('input[type="checkbox"]');
        if (vehiculeCheckbox) vehiculeCheckbox.checked = false;
    }
}

btnMinus.addEventListener('click', () => {
    metrageInput.value = clampMetrage((parseInt(metrageInput.value, 10) || MIN) - 1);
    updateForm();
});

btnPlus.addEventListener('click', () => {
    metrageInput.value = clampMetrage((parseInt(metrageInput.value, 10) || MIN) + 1);
    updateForm();
});

metrageInput.addEventListener('input', updateForm);
updateForm();
</script>
@endsection