{% extends "base.html" %}

{% block title %}{{ evenement.nom }} - Gestion | BilletFest{% endblock %}

{% block content %}
<style>
    /* ============================================
       STYLES SPÉCIFIQUES DASHBOARD EVENT DETAIL
       Thème Festif & Chaleureux - Mobile-First
       ============================================ */
    .event-detail-container {
        max-width: 1000px;
        margin: 0 auto;
        padding: 1rem 0.5rem;
    }

    /* En-tête résumé */
    .event-header-card {
        background: white;
        border-radius: 28px;
        padding: 1.5rem 1.5rem;
        box-shadow: 0 12px 24px rgba(255, 140, 66, 0.08);
        border: 1px solid rgba(255, 140, 66, 0.15);
        margin-bottom: 2rem;
        display: flex;
        align-items: center;
        gap: 1.5rem;
        flex-wrap: wrap;
    }

    .event-header-info h1 {
        font-family: 'Poppins', sans-serif;
        font-size: 1.8rem;
        color: var(--warm-anthracite);
        margin-bottom: 0.3rem;
    }

    .event-header-info .event-date {
        color: #6b6b6b;
        font-weight: 500;
        background: #f5f5f5;
        padding: 0.3rem 1.2rem;
        border-radius: 30px;
        display: inline-block;
        font-size: 0.95rem;
    }

    /* Stats locales */
    .local-stats {
        display: flex;
        gap: 1.5rem;
        margin-bottom: 2.5rem;
        flex-wrap: wrap;
    }

    .stat-pill {
        background: rgba(255, 140, 66, 0.08);
        padding: 0.8rem 1.8rem;
        border-radius: 50px;
        border: 1px solid rgba(255, 140, 66, 0.2);
    }

    .stat-pill .label {
        font-size: 0.85rem;
        color: #6b6b6b;
        font-weight: 500;
    }

    .stat-pill .value {
        font-size: 1.8rem;
        font-weight: 800;
        color: var(--warm-anthracite);
        line-height: 1.2;
    }

    .stat-pill.highlight .value {
        color: var(--amber);
    }

    /* Section émission tickets */
    .section-title {
        font-family: 'Poppins', sans-serif;
        font-size: 1.6rem;
        font-weight: 700;
        color: var(--warm-anthracite);
        margin-bottom: 1.8rem;
        position: relative;
    }

    .section-title:after {
        content: '';
        display: block;
        width: 70px;
        height: 4px;
        background: var(--amber);
        border-radius: 4px;
        margin-top: 6px;
    }

    .ticket-types-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .ticket-type-card {
        background: white;
        border-radius: 28px;
        padding: 1.8rem 1.5rem;
        box-shadow: 0 12px 20px rgba(255, 140, 66, 0.06);
        border: 2px solid rgba(255, 140, 66, 0.1);
        transition: all 0.25s ease;
        display: flex;
        flex-direction: column;
    }

    .ticket-type-card:hover {
        border-color: var(--amber);
        box-shadow: 0 16px 28px rgba(255, 140, 66, 0.12);
        transform: translateY(-3px);
    }

    .ticket-type-name {
        font-family: 'Poppins', sans-serif;
        font-size: 1.8rem;
        font-weight: 700;
        color: var(--amber);
        margin-bottom: 0.5rem;
    }

    .ticket-type-price {
        font-size: 2.2rem;
        font-weight: 800;
        color: var(--warm-anthracite);
        margin-bottom: 1.5rem;
    }

    .ticket-type-price small {
        font-size: 0.9rem;
        font-weight: 500;
        color: #6b6b6b;
    }

    .btn-sell {
        background: var(--sunset-start);
        color: white;
        padding: 1rem 1.5rem;
        border-radius: 60px;
        font-weight: 700;
        font-size: 1.1rem;
        text-decoration: none;
        text-align: center;
        transition: all 0.2s ease;
        box-shadow: 0 8px 16px rgba(255, 108, 53, 0.2);
        border: none;
        cursor: pointer;
        margin-top: auto;
        border: 1px solid rgba(255,255,255,0.2);
        display: block;
    }

    .btn-sell:hover {
        background: #ff7a3d;
        transform: scale(1.02);
        box-shadow: 0 12px 20px rgba(255, 108, 53, 0.3);
    }

    /* État vide */
    .no-tickets {
        background: rgba(255, 140, 66, 0.03);
        border-radius: 30px;
        padding: 3rem 2rem;
        text-align: center;
        border: 2px dashed var(--amber);
        color: var(--warm-anthracite);
    }

    /* Responsive */
    @media (min-width: 640px) {
        .ticket-types-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (min-width: 900px) {
        .ticket-types-grid {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    @media (max-width: 480px) {
        .event-header-card {
            flex-direction: column;
            align-items: flex-start;
        }
    }
</style>

<div class="event-detail-container">
    {# Résumé de l'événement #}
    <div class="event-header-card">
        <div class="event-header-info">
            <h1>{{ evenement.nom }}</h1>
            <span class="event-date">
                📅 {{ evenement.date|date:"d E Y à H:i" }}
            </span>
        </div>
    </div>

    {# Stats locales #}
    <div class="local-stats">
        <div class="stat-pill">
            <div class="label">Tickets vendus</div>
            <div class="value">{{ stats_evenement.tickets_vendus }}</div>
        </div>
        <div class="stat-pill highlight">
            <div class="label">Chiffre d'affaires</div>
            <div class="value">{{ stats_evenement.chiffre_affaires|floatformat:0 }} <small>FCFA</small></div>
        </div>
    </div>

    {# Section Émettre un nouveau ticket #}
    <h2 class="section-title">Émettre un nouveau ticket</h2>

    <div class="ticket-types-grid">
        {% for ticket in evenement.types_tickets.all %}
            <div class="ticket-type-card">
                <div class="ticket-type-name">{{ ticket.nom }}</div>
                <div class="ticket-type-price">
                    {{ ticket.prix|floatformat:0 }} <small>FCFA</small>
                </div>
                <a href="{% url 'dashboard:ticket_create' evenement.id ticket.id %}" class="btn-sell">
                    🎟️ Vendre ce ticket
                </a>
            </div>
        {% empty %}
            <div class="no-tickets" style="grid-column: 1 / -1;">
                <p>Aucun type de ticket défini pour cet événement.</p>
                <p style="font-size: 0.9rem; margin-top: 0.5rem;">Ajoutez-en depuis l'administration.</p>
            </div>
        {% endfor %}
    </div>
</div>

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