{% extends 'revervation/base.twig' %}

{% block title %}Créer mon compte | Ludik Event{% endblock %}

{% block body %}
    <div class="max-w-2xl mx-auto my-12 px-4">
        <div class="bg-white rounded-[3rem] p-8 md:p-12 shadow-2xl shadow-blue-100 border border-gray-50">

            <div class="text-center mb-10">
                <h1 class="text-4xl font-black text-gray-900 tracking-tight">Rejoignez Ludik Event</h1>
                <p class="text-gray-400 mt-2 font-medium">Créez votre compte pour gérer vos réservations</p>
            </div>

            <form method="POST" class="grid grid-cols-1 md:grid-cols-2 gap-6">

                {# Type de compte #}
                <div class="md:col-span-2 flex p-1 bg-gray-100 rounded-2xl">
                    <label class="flex-1 text-center py-3 rounded-xl cursor-pointer transition-all font-bold text-sm has-[:checked]:bg-white has-[:checked]:text-blue-600 has-[:checked]:shadow-sm text-gray-500">
                        <input type="radio" name="type" value="particular" class="hidden" checked onchange="toggleSiret(false)">
                        Particulier
                    </label>
                    <label class="flex-1 text-center py-3 rounded-xl cursor-pointer transition-all font-bold text-sm has-[:checked]:bg-white has-[:checked]:text-blue-600 has-[:checked]:shadow-sm text-gray-500">
                        <input type="radio" name="type" value="buisness" class="hidden" onchange="toggleSiret(true)">
                        Professionnel / Asso / Mairie
                    </label>
                </div>

                {# Civilité #}
                <div class="md:col-span-2">
                    <label class="block text-xs font-bold text-gray-400 uppercase mb-2 ml-2">Civilité</label>
                    <select name="civ" class="w-full bg-gray-50 border-none rounded-2xl px-6 py-4 focus:ring-2 focus:ring-blue-500 outline-none appearance-none font-medium">
                        <option value="M.">Monsieur (M.)</option>
                        <option value="Mme">Madame (Mme)</option>
                    </select>
                </div>

                {# Nom / Prénom #}
                <div>
                    <label class="block text-xs font-bold text-gray-400 uppercase mb-2 ml-2">Nom</label>
                    <input type="text" name="name" required placeholder="Ex: Dupont"
                           class="w-full bg-gray-50 border-none rounded-2xl px-6 py-4 focus:ring-2 focus:ring-blue-500 outline-none">
                </div>
                <div>
                    <label class="block text-xs font-bold text-gray-400 uppercase mb-2 ml-2">Prénom</label>
                    <input type="text" name="surname" required placeholder="Ex: Jean"
                           class="w-full bg-gray-50 border-none rounded-2xl px-6 py-4 focus:ring-2 focus:ring-blue-500 outline-none">
                </div>

                {# Email / Tel #}
                <div>
                    <label class="block text-xs font-bold text-gray-400 uppercase mb-2 ml-2">Email</label>
                    <input type="email" name="email" required placeholder="jean@mail.com"
                           class="w-full bg-gray-50 border-none rounded-2xl px-6 py-4 focus:ring-2 focus:ring-blue-500 outline-none">
                </div>
                <div>
                    <label class="block text-xs font-bold text-gray-400 uppercase mb-2 ml-2">Téléphone</label>
                    <input type="tel" name="phone" required placeholder="06 00 00 00 00"
                           class="w-full bg-gray-50 border-none rounded-2xl px-6 py-4 focus:ring-2 focus:ring-blue-500 outline-none">
                </div>

                {# SIRET & Business Fields (Caché par défaut) #}
                <div id="siret-container" class="md:col-span-2 hidden grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="md:col-span-2">
                        <label class="block text-xs font-bold text-gray-400 uppercase mb-2 ml-2">Type d'organisation</label>
                        <select name="typCompany" class="w-full bg-gray-50 border-none rounded-2xl px-6 py-4 focus:ring-2 focus:ring-blue-500 outline-none appearance-none font-medium">
                            <option value="Entreprise">Entreprise</option>
                            <option value="Association">Association</option>
                            <option value="Service Public">Service Public (Mairie, École...)</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-xs font-bold text-gray-400 uppercase mb-2 ml-2">Raison Sociale</label>
                        <input type="text" name="raisonSocial" placeholder="Ex: Ma Société SAS"
                               class="w-full bg-gray-50 border-none rounded-2xl px-6 py-4 focus:ring-2 focus:ring-blue-500 outline-none">
                    </div>
                    <div>
                        <label class="block text-xs font-bold text-gray-400 uppercase mb-2 ml-2">Numéro SIRET</label>
                        <input type="text" name="siret" placeholder="123 456 789 00012"
                               class="w-full bg-gray-50 border-none rounded-2xl px-6 py-4 focus:ring-2 focus:ring-blue-500 outline-none">
                    </div>
                </div>

                {# Mot de passe #}
                <div class="md:col-span-2">
                    <label class="block text-xs font-bold text-gray-400 uppercase mb-2 ml-2">Mot de passe</label>
                    <input type="password" name="password" required placeholder="••••••••"
                           class="w-full bg-gray-50 border-none rounded-2xl px-6 py-4 focus:ring-2 focus:ring-blue-500 outline-none">
                </div>

                <div class="md:col-span-2 pt-4">
                    <button type="submit" class="w-full bg-blue-600 text-white font-black py-5 rounded-2xl shadow-xl shadow-blue-100 hover:bg-blue-700 transition-all transform active:scale-95 uppercase tracking-widest text-sm">
                        Créer mon compte gratuit
                    </button>
                </div>
            </form>

            <div class="mt-10 text-center border-t border-gray-50 pt-8">
                <p class="text-gray-400 text-sm font-medium">
                    Déjà client ?
                    <a href="{{ path('reservation_login') }}" class="text-blue-600 font-bold hover:underline ml-1">Connectez-vous ici</a>
                </p>
            </div>
        </div>
    </div>

{% endblock %}