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

{% block title %}Finaliser mon inscription - E-Ticket{% endblock %}

{% block body %}
<div class="bg-[#fbfbfb] overflow-x-hidden italic font-sans">
    <section class="py-12 px-4">
        <div class="max-w-xl mx-auto">
            <div class="text-center mb-8">
                <div class="inline-block px-4 py-1 border-3 border-gray-900 bg-[#fabf04] font-black uppercase text-xs tracking-widest mb-4 shadow-[4px_4px_0px_rgba(0,0,0,1)]">Compte pre-approuve</div>
                <h1 class="text-3xl font-black uppercase tracking-tighter italic heading-page">Finaliser votre inscription</h1>
                <p class="font-bold text-gray-600 mt-2">{{ invitation.companyName }}</p>
            </div>

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

            <div class="border-4 border-gray-900 bg-white p-6 shadow-[6px_6px_0px_rgba(0,0,0,1)]">
                <form method="post" action="{{ path('app_invitation_register', {token: invitation.token}) }}" class="space-y-4">

                    <div class="border-2 border-gray-200 bg-gray-50 p-4">
                        <p class="text-[10px] font-black uppercase tracking-widest text-gray-400 mb-2">Informations pre-remplies</p>
                        <div class="space-y-1 text-sm font-bold text-gray-600">
                            <p>Raison sociale : <span class="text-gray-900">{{ invitation.companyName }}</span></p>
                            <p>Email : <span class="text-gray-900">{{ invitation.email }}</span></p>
                            <p>Offre : <span class="text-indigo-600">{% if invitation.offer == 'free' %}Gratuit{% elseif invitation.offer == 'basic' %}Basic{% elseif invitation.offer == 'custom' %}Sur-mesure{% endif %}</span>
                            {% if invitation.commissionRate is not null %} — Commission : <span class="text-indigo-600">{{ invitation.commissionRate }}%</span>{% endif %}</p>
                        </div>
                    </div>

                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label for="reg_last_name" class="text-xs font-black uppercase tracking-widest form-label">Nom *</label>
                            <input type="text" id="reg_last_name" name="last_name" required class="form-input focus:border-indigo-600" value="{{ invitation.lastName }}" placeholder="Dupont">
                        </div>
                        <div>
                            <label for="reg_first_name" class="text-xs font-black uppercase tracking-widest form-label">Prenom *</label>
                            <input type="text" id="reg_first_name" name="first_name" required class="form-input focus:border-indigo-600" value="{{ invitation.firstName }}" placeholder="Jean">
                        </div>
                    </div>

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

                    <hr class="border-gray-200">

                    <div>
                        <label for="reg_siret" class="text-xs font-black uppercase tracking-widest form-label">SIRET</label>
                        <input type="text" id="reg_siret" name="siret" maxlength="14" class="form-input focus:border-indigo-600" placeholder="12345678901234">
                    </div>

                    <div>
                        <label for="reg_address" class="text-xs font-black uppercase tracking-widest form-label">Adresse</label>
                        <input type="text" id="reg_address" name="address" class="form-input focus:border-indigo-600" placeholder="42 rue de Saint-Quentin">
                    </div>

                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label for="reg_postal_code" class="text-xs font-black uppercase tracking-widest form-label">Code postal</label>
                            <input type="text" id="reg_postal_code" name="postal_code" maxlength="10" class="form-input focus:border-indigo-600" placeholder="02800">
                        </div>
                        <div>
                            <label for="reg_city" class="text-xs font-black uppercase tracking-widest form-label">Ville</label>
                            <input type="text" id="reg_city" name="city" class="form-input focus:border-indigo-600" placeholder="Beautor">
                        </div>
                    </div>

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

                    <button type="submit" class="w-full px-6 py-4 border-4 border-gray-900 bg-[#fabf04] font-black uppercase text-sm tracking-widest shadow-[6px_6px_0px_rgba(0,0,0,1)] hover:shadow-[8px_8px_0px_rgba(0,0,0,1)] hover:translate-y-[-2px] transition-all cursor-pointer">
                        Creer mon compte organisateur
                    </button>
                </form>
            </div>

            <p class="text-xs font-bold text-gray-400 text-center mt-4">Votre compte sera directement actif, sans validation supplementaire.</p>
        </div>
    </section>
</div>
{% endblock %}
