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

{% block title %}Commande - Village de Menotey{% endblock %}

{% block stylesheets %}
{{ parent() }}
<style>
.order-form {
    background: white;
    border-radius: 15px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.1);
    overflow: hidden;
}

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

.form-section:last-child {
    border-bottom: none;
}

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

.payment-option {
    border: 2px solid #eee;
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.payment-option:hover {
    border-color: var(--primary-color);
    background: rgba(76, 175, 80, 0.05);
}

.payment-option.selected {
    border-color: var(--primary-color);
    background: rgba(76, 175, 80, 0.1);
}

.order-summary {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    padding: 2rem;
    border-radius: 15px;
    position: sticky;
    top: 100px;
}

.order-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}

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

.pickup-time {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 1rem;
    margin-top: 1rem;
    text-align: center;
}
</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">Finaliser votre commande</h1>
                <p class="lead fade-in">Plus qu'une étape avant de déguster nos pizzas !</p>
            </div>
        </div>
    </div>
</section>

<!-- Order Form Section -->
<section class="section">
    <div class="container">
        <div class="row">
            <!-- Order Form -->
            <div class="col-lg-8">
                <form class="order-form" action="{{ path('app_pizza_process') }}" method="POST" id="orderForm">
                    <!-- Customer Information -->
                    <div class="form-section">
                        <h4 class="section-title">
                            <i class="fas fa-user"></i>
                            Vos informations
                        </h4>
                        
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label for="firstName" class="form-label">Prénom *</label>
                                <input type="text" class="form-control" id="firstName" name="firstName" required>
                            </div>
                            
                            <div class="col-md-6">
                                <label for="lastName" class="form-label">Nom *</label>
                                <input type="text" class="form-control" id="lastName" name="lastName" required>
                            </div>
                            
                            <div class="col-md-6">
                                <label for="email" class="form-label">Email *</label>
                                <input type="email" class="form-control" id="email" name="email" required>
                            </div>
                            
                            <div class="col-md-6">
                                <label for="phone" class="form-label">Téléphone *</label>
                                <input type="tel" class="form-control" id="phone" name="phone" required>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Pickup Time -->
                    <div class="form-section">
                        <h4 class="section-title">
                            <i class="fas fa-clock"></i>
                            Heure de récupération
                        </h4>
                        
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label for="pickupDate" class="form-label">Date de récupération *</label>
                                <input type="date" class="form-control" id="pickupDate" name="pickupDate" required>
                            </div>
                            
                            <div class="col-md-6">
                                <label for="pickupTime" class="form-label">Heure de récupération *</label>
                                <select class="form-select" id="pickupTime" name="pickupTime" required>
                                    <option value="">Choisir une heure</option>
                                    <option value="18:00">18h00</option>
                                    <option value="18:30">18h30</option>
                                    <option value="19:00">19h00</option>
                                    <option value="19:30">19h30</option>
                                    <option value="20:00">20h00</option>
                                    <option value="20:30">20h30</option>
                                    <option value="21:00">21h00</option>
                                </select>
                            </div>
                        </div>
                        
                        <div class="pickup-time">
                            <i class="fas fa-info-circle text-primary"></i>
                            <strong>Horaires de récupération :</strong> Vendredi et Samedi de 18h à 21h30
                        </div>
                    </div>
                    
                    <!-- Payment Method -->
                    <div class="form-section">
                        <h4 class="section-title">
                            <i class="fas fa-credit-card"></i>
                            Mode de paiement
                        </h4>
                        
                        <div class="payment-option" data-payment="online">
                            <div class="d-flex align-items-center">
                                <input type="radio" name="paymentMethod" value="online" id="paymentOnline" class="form-check-input me-3">
                                <div>
                                    <label for="paymentOnline" class="form-check-label fw-bold">
                                        <i class="fas fa-credit-card text-primary"></i>
                                        Paiement en ligne
                                    </label>
                                    <p class="mb-0 text-muted">Paiement sécurisé par Stripe</p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="payment-option" data-payment="onsite">
                            <div class="d-flex align-items-center">
                                <input type="radio" name="paymentMethod" value="onsite" id="paymentOnsite" class="form-check-input me-3">
                                <div>
                                    <label for="paymentOnsite" class="form-check-label fw-bold">
                                        <i class="fas fa-money-bill-wave text-success"></i>
                                        Paiement sur place
                                    </label>
                                    <p class="mb-0 text-muted">Espèces ou carte à la récupération</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Comments -->
                    <div class="form-section">
                        <h4 class="section-title">
                            <i class="fas fa-comment"></i>
                            Commentaires (optionnel)
                        </h4>
                        
                        <textarea class="form-control" name="comments" rows="3" 
                                  placeholder="Allergies, demandes spéciales..."></textarea>
                    </div>
                    
                    <!-- Terms -->
                    <div class="form-section">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="terms" name="terms" required>
                            <label class="form-check-label" for="terms">
                                J'accepte les <a href="#" class="text-primary">conditions générales</a> *
                            </label>
                        </div>
                    </div>
                </form>
            </div>
            
            <!-- Order Summary -->
            <div class="col-lg-4">
                <div class="order-summary">
                    <h4 class="mb-4">Récapitulatif</h4>
                    
                    <div id="orderItems">
                        <!-- Items will be loaded by JavaScript -->
                    </div>
                    
                    <hr class="my-3" style="border-color: rgba(255,255,255,0.3);">
                    
                    <div class="d-flex justify-content-between mb-3">
                        <span>Sous-total</span>
                        <span class="fw-bold" id="subtotal">0,00€</span>
                    </div>
                    
                    <div class="d-flex justify-content-between mb-4">
                        <span class="fs-5 fw-bold">Total</span>
                        <span class="fs-5 fw-bold" id="total">0,00€</span>
                    </div>
                    
                    <div class="d-grid gap-2">
                        <button type="submit" form="orderForm" class="btn btn-light btn-lg" id="submitBtn">
                            <i class="fas fa-shopping-cart"></i> 
                            <span id="submitText">Valider la commande</span>
                        </button>
                        
                        <a href="{{ path('app_pizza_cart') }}" class="btn btn-outline-light">
                            <i class="fas fa-arrow-left"></i> Retour au panier
                        </a>
                    </div>
                    
                    <div class="text-center mt-3">
                        <small style="opacity: 0.8;">
                            <i class="fas fa-lock"></i> Commande sécurisée
                        </small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const cart = JSON.parse(localStorage.getItem('pizza-cart') || '{}');
    
    // Set minimum pickup date (today + 1 day)
    const tomorrow = new Date();
    tomorrow.setDate(tomorrow.getDate() + 1);
    document.getElementById('pickupDate').min = tomorrow.toISOString().split('T')[0];
    
    // Load cart items
    loadOrderSummary();
    
    // Payment method selection
    document.querySelectorAll('.payment-option').forEach(option => {
        option.addEventListener('click', function() {
            const radio = this.querySelector('input[type="radio"]');
            radio.checked = true;
            
            document.querySelectorAll('.payment-option').forEach(opt => {
                opt.classList.remove('selected');
            });
            this.classList.add('selected');
            
            updateSubmitButton();
        });
    });
    
    // Form submission
    document.getElementById('orderForm').addEventListener('submit', async function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        const cart = JSON.parse(localStorage.getItem('pizza-cart') || '{}');
        const cartItems = Object.values(cart);
        
        if (cartItems.length === 0) {
            alert('Votre panier est vide !');
            return;
        }
        
        const orderData = {
            customerName: formData.get('firstName') + ' ' + formData.get('lastName'),
            customerEmail: formData.get('email'),
            customerPhone: formData.get('phone'),
            pickupDate: formData.get('pickupDate'),
            pickupTime: formData.get('pickupTime'),
            specialInstructions: formData.get('comments') || '',
            paymentMethod: formData.get('paymentMethod'),
            cartItems: cartItems
        };
        
        try {
            // Créer la commande via API
            const response = await fetch('{{ path("app_pizza_create_order") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(orderData)
            });
            
            const result = await response.json();
            
            if (result.success) {
                if (result.paymentMethod === 'online') {
                    // Pour le paiement en ligne, on stocke les données de commande et on redirige vers Stripe
                    localStorage.setItem('stripe-order-data', JSON.stringify(orderData));
                    window.location.href = result.redirectUrl;
                } else {
                    // Pour le paiement sur place, vider le panier et rediriger vers la confirmation
                    localStorage.removeItem('pizza-cart');
                    window.location.href = result.redirectUrl;
                }
            } else {
                alert('Erreur lors de la création de la commande: ' + result.error);
            }
        } catch (error) {
            console.error('Erreur:', error);
            alert('Erreur lors de la création de la commande');
        }
    });
});

function loadOrderSummary() {
    const cart = JSON.parse(localStorage.getItem('pizza-cart') || '{}');
    console.log('Cart data:', cart);
    console.log('Cart values:', Object.values(cart));
    
    const orderItems = document.getElementById('orderItems');
    let total = 0;
    
    orderItems.innerHTML = '';
    
    // Vérifier si le panier est vide
    if (Object.keys(cart).length === 0) {
        orderItems.innerHTML = '<div class="text-muted">Votre panier est vide. <a href="{{ path("app_pizza_list") }}">Voir nos pizzas</a></div>';
        document.getElementById('subtotal').textContent = '0,00€';
        document.getElementById('total').textContent = '0,00€';
        return;
    }
    
    Object.values(cart).forEach(item => {
        const itemTotal = item.price * item.quantity;
        total += itemTotal;
        
        const itemElement = document.createElement('div');
        itemElement.className = 'order-item';
        itemElement.innerHTML = `
            <div>
                <div class="fw-bold">${item.name}</div>
                <div class="small">${item.quantity} x ${item.price.toFixed(2)}€</div>
            </div>
            <div class="fw-bold">${itemTotal.toFixed(2)}€</div>
        `;
        
        orderItems.appendChild(itemElement);
    });
    
    document.getElementById('subtotal').textContent = total.toFixed(2).replace('.', ',') + '€';
    document.getElementById('total').textContent = total.toFixed(2).replace('.', ',') + '€';
}

function updateSubmitButton() {
    const paymentMethod = document.querySelector('input[name="paymentMethod"]:checked');
    const submitText = document.getElementById('submitText');
    
    if (paymentMethod) {
        if (paymentMethod.value === 'online') {
            submitText.innerHTML = '<i class="fas fa-credit-card"></i> Procéder au paiement';
        } else {
            submitText.innerHTML = '<i class="fas fa-check"></i> Confirmer la commande';
        }
    }
}
</script>
{% endblock %}