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

{% block title %}Confirmation de commande - Village de Menotey{% endblock %}

{% block stylesheets %}
{{ parent() }}
<style>
.confirmation-container {
    background: white;
    border-radius: 15px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.1);
    overflow: hidden;
    margin-bottom: 2rem;
}

.confirmation-header {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    padding: 3rem 2rem;
    text-align: center;
}

.success-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    animation: bounce 1s ease-in-out;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-20px); }
    60% { transform: translateY(-10px); }
}

.confirmation-code {
    background: rgba(255,255,255,0.2);
    border-radius: 10px;
    padding: 1rem;
    margin-top: 1rem;
    font-size: 1.2rem;
    font-weight: bold;
    letter-spacing: 2px;
}

.order-details {
    padding: 2rem;
}

.detail-section {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #eee;
}

.detail-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.section-title {
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.order-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid #f0f0f0;
    min-height: 80px; /* Hauteur minimale fixe pour l'alignement */
    transition: background-color 0.2s ease;
}

.order-item:hover {
    background-color: #f8f9fa;
    border-radius: 8px;
    margin: 0 -0.5rem;
    padding: 1rem 0.5rem;
}

.order-item:last-child {
    border-bottom: none;
}

.order-item .row {
    width: 100%;
    margin: 0;
}

.order-item .col-2,
.order-item .col-6 {
    display: flex;
    align-items: center;
    min-height: 60px; /* Hauteur minimale pour les colonnes */
}

.order-item .col-2:last-child {
    justify-content: flex-end;
}

.pizza-image {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border: 2px solid #e9ecef;
}

.pizza-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.pizza-name {
    margin-bottom: 0.25rem;
    font-weight: 600;
    line-height: 1.2;
    color: #2c3e50;
}

.pizza-description {
    margin-top: 0.25rem;
    font-size: 0.85rem;
    line-height: 1.3;
    color: #6c757d;
}

.vegetarian-badge {
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
    margin-bottom: 0.25rem;
    display: inline-block;
    max-width: fit-content;
    line-height: 1;
}

.quantity-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 30px;
    font-size: 0.9rem;
    font-weight: 600;
}

.price-column {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 60px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-color);
}

.status-badge {
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
}

.status-badge.pending {
    background: #ffc107;
    color: #212529;
}

.status-badge.confirmed {
    background: #0dcaf0;
}

.status-badge.paid {
    background: #198754;
}

.status-badge.ready {
    background: #20c997;
}

.status-badge.completed {
    background: #6f42c1;
}

.status-badge.cancelled {
    background: #dc3545;
}

.status-badge.default {
    background: var(--primary-color);
}

.pickup-info {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 1.5rem;
    text-align: center;
    margin-bottom: 2rem;
}

.next-steps {
    background: linear-gradient(135deg, #e3f2fd, #f3e5f5);
    border-radius: 15px;
    padding: 2rem;
    margin-top: 2rem;
}

.step-item {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    padding: 1rem;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.step-number {
    background: var(--primary-color);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-right: 1rem;
    flex-shrink: 0;
}

.print-section {
    text-align: center;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 2px dashed #ddd;
}

@media print {
    .no-print { display: none !important; }
    .confirmation-container { box-shadow: none; border: 1px solid #000; }
}
</style>
{% endblock %}

{% block body %}
<!-- Hero Section -->
<section class="hero">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-8 mx-auto text-center">
                <h1 class="fade-in">Commande confirmée !</h1>
                <p class="lead fade-in">Merci pour votre confiance</p>
            </div>
        </div>
    </div>
</section>

<!-- Confirmation Section -->
<section class="section">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-10">
                <div class="confirmation-container">
                    <div class="confirmation-header">
                        <i class="fas fa-check-circle success-icon"></i>
                        <h2>Commande confirmée !</h2>
                        <p class="mb-0">Votre commande a été enregistrée avec succès</p>
                        
                        <div class="confirmation-code">
                            <i class="fas fa-barcode"></i>
                            Code de confirmation : <span>{{ order.reservationCode }}</span>
                        </div>
                    </div>
                    
                    <div class="order-details">
                        <!-- Customer Information -->
                        <div class="detail-section">
                            <h5 class="section-title">
                                <i class="fas fa-user"></i>
                                Informations client
                            </h5>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <p><strong>Nom :</strong> <span>{{ order.customerName }}</span></p>
                                    {% if order.customerEmail %}
                                    <p><strong>Email :</strong> <span>{{ order.customerEmail }}</span></p>
                                    {% endif %}
                                </div>
                                <div class="col-md-6">
                                    {% if order.customerPhone %}
                                    <p><strong>Téléphone :</strong> <span>{{ order.customerPhone }}</span></p>
                                    {% endif %}
                                    <p><strong>Statut :</strong> 
                                        <span class="status-badge {% if order.status == 'pending' %}pending{% elseif order.status == 'confirmed' %}confirmed{% elseif order.status == 'paid' %}paid{% elseif order.status == 'ready' %}ready{% elseif order.status == 'completed' %}completed{% elseif order.status == 'cancelled' %}cancelled{% else %}default{% endif %}">
                                            {% if order.status == 'pending' %}
                                                En attente
                                            {% elseif order.status == 'confirmed' %}
                                                Confirmée
                                            {% elseif order.status == 'paid' %}
                                                Payée
                                            {% elseif order.status == 'ready' %}
                                                Prête
                                            {% elseif order.status == 'completed' %}
                                                Terminée
                                            {% elseif order.status == 'cancelled' %}
                                                Annulée
                                            {% else %}
                                                {{ order.status|title }}
                                            {% endif %}
                                        </span>
                                    </p>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Order Items -->
                        <div class="detail-section">
                            <h5 class="section-title">
                                <i class="fas fa-pizza-slice"></i>
                                Votre commande
                            </h5>
                            
                            <div>
                                {% for item in order.items %}
                                <div class="order-item">
                                    <div class="row align-items-center w-100">
                                        <div class="col-2">
                                            <img src="https://placehold.co/60x60/8fbc8f/ffffff?text=🍕" alt="{{ item.pizza.name }}" class="pizza-image img-fluid rounded">
                                        </div>
                                        <div class="col-6">
                                            <div class="pizza-details">
                                                <h6 class="pizza-name">{{ item.pizza.name }}</h6>
                                                {% if item.pizza.vegetarian %}
                                                    <span class="badge bg-success vegetarian-badge">🌱 Végétarien</span>
                                                {% endif %}
                                                <small class="pizza-description">{{ item.pizza.description|slice(0, 80) }}{% if item.pizza.description|length > 80 %}...{% endif %}</small>
                                            </div>
                                        </div>
                                        <div class="col-2 text-center">
                                            <span class="badge bg-primary quantity-badge">{{ item.quantity }}</span>
                                        </div>
                                        <div class="col-2">
                                            <div class="price-column">
                                                {{ (item.quantity * item.unitPrice)|number_format(2, ',', ' ') }} €
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                            
                            <div class="row mt-3">
                                <div class="col-md-8"></div>
                                <div class="col-md-4">
                                    <div class="d-flex justify-content-between">
                                        <strong>Total :</strong>
                                        <strong class="text-primary fs-5">{{ order.totalAmount|number_format(2, ',', ' ') }} €</strong>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Pickup Information -->
                        <div class="detail-section">
                            <h5 class="section-title">
                                <i class="fas fa-clock"></i>
                                Récupération
                            </h5>
                            
                            <div class="pickup-info">
                                <div class="row align-items-center">
                                    <div class="col-md-6">
                                        <h6><i class="fas fa-calendar"></i> Date et heure</h6>
                                        <p class="mb-0">{{ order.pickupTime|date('d/m/Y à H:i') }}</p>
                                    </div>
                                    <div class="col-md-6">
                                        <h6><i class="fas fa-map-marker-alt"></i> Lieu de récupération</h6>
                                        <p class="mb-0">Village de Menotey<br>Place de la Mairie</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Payment Information -->
                        <div class="detail-section">
                            <h5 class="section-title">
                                <i class="fas fa-credit-card"></i>
                                Paiement
                            </h5>
                            
                            <div class="row">
                                <div class="col-md-12">
                                    <p><strong>Mode de paiement :</strong> 
                                        <span>
                                            {% if order.paymentMethod == 'stripe' %}
                                                Paiement en ligne
                                            {% else %}
                                                Paiement à la réception
                                            {% endif %}
                                        </span>
                                    </p>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Comments -->
                        <div class="detail-section" id="commentsSection" style="display: none;">
                            <h5 class="section-title">
                                <i class="fas fa-comment"></i>
                                Commentaires
                            </h5>
                            <p id="orderComments"></p>
                        </div>
                    </div>
                </div>
                
                <!-- Next Steps -->
                <div class="next-steps">
                    <h4 class="text-center mb-4">Prochaines étapes</h4>
                    
                    <div class="step-item">
                        <div class="step-number">1</div>
                        <div>
                            <h6>Confirmation par email</h6>
                            <p class="mb-0">Vous allez recevoir un email de confirmation avec tous les détails de votre commande.</p>
                        </div>
                    </div>
                    
                    <div class="step-item">
                        <div class="step-number">2</div>
                        <div>
                            <h6>Préparation de votre commande</h6>
                            <p class="mb-0">Nos pizzaïolos préparent vos pizzas fraîches le jour de votre récupération.</p>
                        </div>
                    </div>
                    
                    <div class="step-item">
                        <div class="step-number">3</div>
                        <div>
                            <h6>Récupération</h6>
                            <p class="mb-0">Présentez-vous à l'heure prévue avec votre code de confirmation.</p>
                        </div>
                    </div>
                </div>
                
                <!-- Action Buttons -->
                <div class="print-section no-print">
                    <div class="d-grid gap-2 d-md-flex justify-content-md-center">
                        <a href="{{ path('app_pizza_receipt_pdf', {'code': order.reservationCode}) }}" class="btn btn-outline-primary">
                            <i class="fas fa-download me-2"></i> Télécharger le reçu PDF
                        </a>
                        
                        <a href="{{ path('app_pizza_list') }}" class="btn btn-primary">
                            <i class="fas fa-pizza-slice me-2"></i> Commander à nouveau
                        </a>
                        
                        <a href="{{ path('app_home') }}" class="btn btn-outline-secondary" style="display: flex; justify-content: center; align-items: center;">
                            <i class="fas fa-home ms-1 me-2"></i> Retour à l'accueil
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Contact Section -->
<section class="section bg-light no-print">
    <div class="container text-center">
        <h4>Besoin d'aide ?</h4>
        <p class="text-muted">Notre équipe est là pour vous aider</p>
        
        <div class="row g-4 mt-3">
            <div class="col-md-4">
                <div class="card border-0 h-100">
                    <div class="card-body">
                        <i class="fas fa-phone fa-2x text-primary mb-3"></i>
                        <h6>Téléphone</h6>
                        <p>03 84 XX XX XX</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card border-0 h-100">
                    <div class="card-body">
                        <i class="fas fa-envelope fa-2x text-success mb-3"></i>
                        <h6>Email</h6>
                        <p>contact@menotey.fr</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card border-0 h-100">
                    <div class="card-body">
                        <i class="fas fa-clock fa-2x text-warning mb-3"></i>
                        <h6>Horaires</h6>
                        <p>Ven-Sam : 18h-21h30</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script>
// Animations au chargement
document.addEventListener('DOMContentLoaded', function() {
    // Animation pour les éléments fade-in
    const fadeElements = document.querySelectorAll('.fade-in');
    fadeElements.forEach((element, index) => {
        element.style.animationDelay = `${index * 0.1}s`;
    });
    
    // Nettoyage du localStorage
    localStorage.removeItem('pizza-cart');
    localStorage.removeItem('order-confirmation');
    localStorage.removeItem('customerData');
    localStorage.removeItem('pickupData');
});

function downloadReceipt() {
    // Redirection vers la génération du PDF avec le code de commande
    const pdfUrl = '{{ path('app_pizza_receipt_pdf', {"code": order.reservationCode}) }}';
    window.open(pdfUrl, '_blank');
}
</script>
{% endblock %}