{% extends 'base.html.twig' %}

{% block title %}Inscription - E-Ticket{% endblock %}
{% block description %}Creez votre compte E-Ticket en tant qu'acheteur ou organisateur d'evenements{% endblock %}

{% block body %}
<div class="page-container-sm">
    <h1 class="heading-page text-3xl font-black uppercase tracking-tighter italic">Inscription</h1>
    <p class="font-bold text-gray-600 italic mb-8">Creez votre compte.</p>

    {% if app.environment == 'prod' %}
    <div class="card-brutal-lg text-center">
        <div class="text-5xl mb-4">&#128679;</div>
        <h2 class="text-2xl font-black uppercase tracking-tighter italic mb-4">Inscriptions</h2>
        <p class="font-bold text-gray-500 italic mb-8">Ouverture des inscriptions prochainement !</p>
        <p class="text-sm font-bold text-gray-600 mb-8">La plateforme E-Ticket est en cours de preparation. Les inscriptions seront bientot disponibles.</p>
        <a href="{{ path('app_home') }}" class="btn-brutal font-black uppercase text-sm tracking-widest hover:bg-indigo-600 hover:text-white transition-all">
            Retour a l'accueil
        </a>
    </div>
    {% else %}

    {% for message in app.flashes('success') %}
        <div class="flash-success mb-8">
            <p class="font-black text-sm">{{ message }}</p>
        </div>
    {% endfor %}

    {% for message in app.flashes('error') %}
        <div class="flash-error mb-8">
            <p class="font-black text-sm">{{ message }}</p>
        </div>
    {% endfor %}

    <div class="flex overflow-x-auto mb-8">
        <button data-tab="tab-buyer" type="button"
            class="flex-1 py-3 border-3 border-gray-900 border-r-0 cursor-pointer bg-gray-900 text-white font-black uppercase text-sm tracking-widest transition-all">
            Acheteur
        </button>
        <button data-tab="tab-organizer" type="button"
            class="flex-1 py-3 border-3 border-gray-900 cursor-pointer bg-white text-gray-900 font-black uppercase text-sm tracking-widest transition-all">
            Organisateur
        </button>
    </div>

    <div id="tab-buyer" class="block">
        <form method="post" action="{{ path('app_register') }}" class="form-col">
            <input type="hidden" name="type" value="buyer">
            <div class="form-row">
                <div class="form-group min-w-[150px]">
                    <label for="buyer_last_name" class="form-label text-xs font-black uppercase tracking-widest">Nom</label>
                    <input type="text" id="buyer_last_name" name="last_name" required
                        class="form-input focus:border-indigo-600"
                        placeholder="Dupont">
                </div>
                <div class="form-group min-w-[150px]">
                    <label for="buyer_first_name" class="form-label text-xs font-black uppercase tracking-widest">Prenom</label>
                    <input type="text" id="buyer_first_name" name="first_name" required
                        class="form-input focus:border-indigo-600"
                        placeholder="Jean">
                </div>
            </div>

            <div>
                <label for="buyer_email" class="form-label text-xs font-black uppercase tracking-widest">Email</label>
                <input type="email" id="buyer_email" name="email" required
                    class="form-input focus:border-indigo-600"
                    placeholder="jean.dupont@exemple.fr">
            </div>

            <div>
                <label for="buyer_password" class="form-label text-xs font-black uppercase tracking-widest">Mot de passe</label>
                <input type="password" id="buyer_password" name="password" required minlength="8"
                    class="form-input focus:border-indigo-600"
                    placeholder="••••••••">
            </div>

            <div>
                <button type="submit"
                    class="btn-brutal-full bg-yellow-400 font-black uppercase text-sm tracking-widest hover:bg-indigo-600 hover:text-white transition-all">
                    Creer mon compte
                </button>
            </div>
        </form>
    </div>

    <div id="tab-organizer" class="hidden">
        <form method="post" action="{{ path('app_register') }}" class="form-col">
            <input type="hidden" name="type" value="organizer">
            <div class="form-row">
                <div class="form-group min-w-[150px]">
                    <label for="orga_last_name" class="form-label text-xs font-black uppercase tracking-widest">Nom</label>
                    <input type="text" id="orga_last_name" name="last_name" required
                        class="form-input focus:border-indigo-600"
                        placeholder="Dupont">
                </div>
                <div class="form-group min-w-[150px]">
                    <label for="orga_first_name" class="form-label text-xs font-black uppercase tracking-widest">Prenom</label>
                    <input type="text" id="orga_first_name" name="first_name" required
                        class="form-input focus:border-indigo-600"
                        placeholder="Jean">
                </div>
            </div>

            <div>
                <label for="orga_company" class="form-label text-xs font-black uppercase tracking-widest">Raison sociale / Nom de l'association</label>
                <input type="text" id="orga_company" name="company_name" required
                    class="form-input focus:border-indigo-600"
                    placeholder="Mon association">
            </div>

            <div>
                <label for="orga_siret" class="form-label text-xs font-black uppercase tracking-widest">SIRET</label>
                <input type="text" id="orga_siret" name="siret" required pattern="[0-9]{14}" maxlength="14"
                    class="form-input focus:border-indigo-600"
                    placeholder="12345678901234">
            </div>

            <div>
                <label for="orga_email" class="form-label text-xs font-black uppercase tracking-widest">Email</label>
                <input type="email" id="orga_email" name="email" required
                    class="form-input focus:border-indigo-600"
                    placeholder="contact@association.fr">
            </div>

            <div>
                <label for="orga_address" class="form-label text-xs font-black uppercase tracking-widest">Adresse</label>
                <input type="text" id="orga_address" name="address" required
                    class="form-input focus:border-indigo-600"
                    placeholder="12 rue de la Paix">
            </div>

            <div class="form-row">
                <div class="form-group min-w-[120px]">
                    <label for="orga_postal" class="form-label text-xs font-black uppercase tracking-widest">Code postal</label>
                    <input type="text" id="orga_postal" name="postal_code" required pattern="[0-9]{5}" maxlength="5"
                        class="form-input focus:border-indigo-600"
                        placeholder="75001">
                </div>
                <div class="form-group min-w-[150px] flex-[2]">
                    <label for="orga_city" class="form-label text-xs font-black uppercase tracking-widest">Ville</label>
                    <input type="text" id="orga_city" name="city" required
                        class="form-input focus:border-indigo-600"
                        placeholder="Paris">
                </div>
            </div>

            <div>
                <label for="orga_phone" class="form-label text-xs font-black uppercase tracking-widest">Telephone</label>
                <input type="tel" id="orga_phone" name="phone" required
                    class="form-input focus:border-indigo-600"
                    placeholder="06 12 34 56 78">
            </div>

            <div>
                <label for="orga_password" class="form-label text-xs font-black uppercase tracking-widest">Mot de passe</label>
                <input type="password" id="orga_password" name="password" required minlength="8"
                    class="form-input focus:border-indigo-600"
                    placeholder="••••••••">
            </div>

            <div>
                <button type="submit"
                    class="btn-brutal-full bg-yellow-400 font-black uppercase text-sm tracking-widest hover:bg-indigo-600 hover:text-white transition-all">
                    Creer mon compte organisateur
                </button>
            </div>
        </form>
    </div>

    <div class="mt-8 text-center">
        <p class="text-sm font-bold text-gray-600">Deja un compte ? <a href="{{ path('app_login') }}" class="text-indigo-600 hover:underline font-black">Connexion</a></p>
    </div>
    {% endif %}
</div>
{% endblock %}