{% extends "base.html" %}

{% block title %}Nouveau Billet | {{ type_ticket.nom }}{% endblock %}

{% block content %}
<style>
    /* ============================================
       STYLES SPÉCIFIQUES TICKET FORM
       Formulaire d'émission de billet - Mobile-First
       ============================================ */
    .ticket-form-container {
        max-width: 600px;
        margin: 0 auto;
        padding: 1rem 0.5rem;
    }

    /* Fil d'Ariane */
    .breadcrumb {
        margin-bottom: 1.5rem;
        font-size: 0.95rem;
    }

    .breadcrumb a {
        color: var(--sunset-start);
        text-decoration: none;
        font-weight: 500;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        transition: transform 0.2s;
    }

    .breadcrumb a:hover {
        transform: translateX(-4px);
        text-decoration: underline;
    }

    .breadcrumb span {
        color: #6b6b6b;
        margin: 0 6px;
    }

    /* En-tête */
    .form-header {
        margin-bottom: 2rem;
    }

    .form-header h1 {
        font-family: 'Poppins', sans-serif;
        font-size: 1.8rem;
        color: var(--warm-anthracite);
        margin-bottom: 0.5rem;
        line-height: 1.2;
    }

    .form-header .event-name {
        color: var(--sunset-start);
        font-weight: 600;
        background: rgba(255, 140, 66, 0.1);
        display: inline-block;
        padding: 0.2rem 1.2rem;
        border-radius: 30px;
        font-size: 1rem;
    }

    /* Carte formulaire */
    .form-card {
        background: white;
        border-radius: 32px;
        padding: 2rem 1.5rem;
        box-shadow: 0 20px 30px rgba(255, 140, 66, 0.08);
        border: 1px solid rgba(255, 140, 66, 0.15);
    }

    .form-group {
        margin-bottom: 1.8rem;
    }

    .form-group label {
        display: block;
        margin-bottom: 0.6rem;
        font-weight: 600;
        color: var(--warm-anthracite);
        font-size: 1rem;
    }

    .input-icon-wrapper {
        position: relative;
        display: flex;
        align-items: center;
    }

    .input-icon {
        position: absolute;
        left: 18px;
        color: var(--sunset-start);
        font-size: 1.2rem;
        pointer-events: none;
    }

    .form-card input[type="text"],
    .form-card input[type="tel"] {
        width: 100%;
        padding: 1rem 1rem 1rem 3rem;
        font-size: 1rem;
        border: 2px solid #e9e3db;
        border-radius: 60px;
        background: white;
        transition: all 0.2s;
        font-family: 'Inter', sans-serif;
    }

    .form-card input:focus {
        border-color: var(--sunset-start);
        box-shadow: 0 0 0 4px rgba(255, 140, 66, 0.15);
        outline: none;
    }

    /* Erreurs formulaire */
    .errorlist {
        list-style: none;
        padding: 0.6rem 1rem;
        margin: 0.8rem 0 0 0;
        background: #FFE5E5;
        border-radius: 30px;
        color: #b91c1c;
        font-size: 0.9rem;
        border-left: 4px solid #D9534F;
    }

    .errorlist li {
        margin: 0.2rem 0;
    }

    /* Bouton de validation */
    .btn-generate {
        background: linear-gradient(145deg, var(--sunset-start), var(--sunset-end));
        color: white;
        border: none;
        width: 100%;
        padding: 1.1rem;
        font-size: 1.2rem;
        font-weight: 700;
        border-radius: 60px;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 10px 20px rgba(255, 108, 53, 0.3);
        margin-top: 1rem;
        font-family: 'Poppins', sans-serif;
        border: 1px solid rgba(255,255,255,0.2);
    }

    .btn-generate:hover {
        transform: translateY(-3px);
        box-shadow: 0 16px 28px rgba(255, 108, 53, 0.4);
        background: linear-gradient(145deg, #ff9a5a, #ff7a3d);
    }

    .btn-generate:active {
        transform: translateY(1px);
    }

    /* Help text */
    .help-text {
        font-size: 0.85rem;
        color: #6b6b6b;
        margin-top: 0.4rem;
        margin-left: 1rem;
    }

    /* Responsive */
    @media (min-width: 640px) {
        .form-card {
            padding: 2.5rem 2rem;
        }
        .form-header h1 {
            font-size: 2.2rem;
        }
    }
</style>

<div class="ticket-form-container">
    {# Fil d'Ariane #}
    <div class="breadcrumb">
        <a href="{% url 'dashboard:evenement_detail' evenement.id %}">
            ← Retour à {{ evenement.nom }}
        </a>
    </div>

    {# En-tête #}
    <div class="form-header">
        <h1>Émission d'un billet {{ type_ticket.nom }}</h1>
        <span class="event-name">🎉 {{ evenement.nom }}</span>
    </div>

    {# Formulaire #}
    <div class="form-card">
        <form method="POST" novalidate>
            {% csrf_token %}

            {# Affichage des erreurs non liées aux champs #}
            {% if form.non_field_errors %}
                <ul class="errorlist">
                    {% for error in form.non_field_errors %}
                        <li>{{ error }}</li>
                    {% endfor %}
                </ul>
            {% endif %}

            <div class="form-group">
                <label for="id_client_nom">Nom du client</label>
                <div class="input-icon-wrapper">
                    <span class="input-icon">👤</span>
                    <input 
                        type="text" 
                        name="client_nom" 
                        id="id_client_nom" 
                        placeholder="Ex: Jean Dupont"
                        value="{{ form.client_nom.value|default:'' }}"
                        required
                        autofocus
                    >
                </div>
                {% if form.client_nom.errors %}
                    <ul class="errorlist">
                        {% for error in form.client_nom.errors %}
                            <li>{{ error }}</li>
                        {% endfor %}
                    </ul>
                {% endif %}
                <div class="help-text">Nom complet du participant</div>
            </div>

            <div class="form-group">
                <label for="id_client_contact">Contact (WhatsApp recommandé)</label>
                <div class="input-icon-wrapper">
                    <span class="input-icon">📱</span>
                    <input 
                        type="tel" 
                        name="client_contact" 
                        id="id_client_contact" 
                        placeholder="Ex: 229XXXXXXXX"
                        value="{{ form.client_contact.value|default:'' }}"
                    >
                </div>
                {% if form.client_contact.errors %}
                    <ul class="errorlist">
                        {% for error in form.client_contact.errors %}
                            <li>{{ error }}</li>
                        {% endfor %}
                    </ul>
                {% endif %}
                <div class="help-text">Optionnel, pour recevoir le billet par WhatsApp</div>
            </div>

            <button type="submit" class="btn-generate">
                ✨ Générer et Prévisualiser le Billet ✨
            </button>
        </form>
    </div>
</div>

{# Aucun JS supplémentaire requis #}
{% endblock %}