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

{% block title %}Vos informations - {{ order.event.title }} - E-Ticket{% endblock %}

{% block body %}
<div class="page-container">
    <h1 class="text-3xl font-black uppercase tracking-tighter italic heading-page">Vos informations</h1>
    <p class="font-bold text-gray-600 italic mb-2">Commande {{ order.orderNumber }} — {{ order.event.title }}</p>

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

    <div class="flex flex-col lg:flex-row gap-8">
        <div class="flex-1">
            <div class="card-brutal">
                <form method="post" action="{{ path('app_order_guest', {id: order.id}) }}" class="form-col">
                    <div class="form-row">
                        <div class="form-group">
                            <label for="guest_last_name" class="text-xs font-black uppercase tracking-widest form-label">Nom</label>
                            <input type="text" id="guest_last_name" name="last_name" required class="form-input focus:border-indigo-600" placeholder="Dupont" value="{{ order.lastName }}">
                        </div>
                        <div class="form-group">
                            <label for="guest_first_name" class="text-xs font-black uppercase tracking-widest form-label">Prenom</label>
                            <input type="text" id="guest_first_name" name="first_name" required class="form-input focus:border-indigo-600" placeholder="Jean" value="{{ order.firstName }}">
                        </div>
                    </div>

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

                    <div>
                        <button type="submit" class="w-full btn-brutal font-black uppercase text-sm tracking-widest bg-indigo-600 text-white hover:bg-indigo-800 transition-all">
                            Continuer vers le paiement
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <div class="w-full lg:w-[350px] flex-shrink-0">
            {% include 'order/_summary.html.twig' %}
        </div>
    </div>
</div>
{% endblock %}
