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

{% block title %}Commande - Livraison - {{ parent() }}{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        .checkout-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem 1rem;
        }
        
        .checkout-progress {
            display: flex;
            justify-content: center;
            margin-bottom: 2rem;
            gap: 1rem;
        }
        
        .step {
            padding: 0.75rem 1.5rem;
            border: 2px solid #dee2e6;
            border-radius: 2rem;
            background: #f8f9fa;
            color: #6c757d;
            font-weight: 500;
            position: relative;
            min-width: 120px;
            text-align: center;
        }
        
        .step.active {
            background: #0d6efd;
            color: white;
            border-color: #0d6efd;
        }
        
        .step.completed {
            background: #198754;
            color: white;
            border-color: #198754;
        }
        
        .step::after {
            content: '';
            position: absolute;
            top: 50%;
            right: -1rem;
            width: 0;
            height: 0;
            border-left: 10px solid #0d6efd;
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
            transform: translateY(-50%);
            display: none;
        }
        
        .step.active::after {
            display: block;
        }
        
        .address-section {
            background: white;
            border: 1px solid #e9ecef;
            border-radius: 0.5rem;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
        }
        
        .same-address-checkbox {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 0.375rem;
            padding: 1rem;
            margin-bottom: 1rem;
        }
        
        .order-summary {
            background: #f8f9fa;
            border-radius: 0.5rem;
            padding: 1.5rem;
            position: sticky;
            top: 20px;
        }
        
        .shipping-calculator {
            border: 1px solid #e9ecef;
            border-radius: 0.375rem;
            padding: 1rem;
            margin-top: 1rem;
            background: white;
        }
        
        .shipping-options {
            margin-top: 1rem;
        }
        
        .shipping-option {
            border: 1px solid #e9ecef;
            border-radius: 0.375rem;
            padding: 1rem;
            margin-bottom: 0.5rem;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .shipping-option:hover {
            border-color: #0d6efd;
            background-color: #f8f9ff;
        }
        
        .shipping-option.selected {
            border-color: #0d6efd;
            background-color: #e7f3ff;
        }
        
        .shipping-option.quote-required {
            border-color: #ffc107;
            background-color: #fff8e1;
        }
        
        .secure-indicators {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-top: 1rem;
            padding: 1rem;
            background: #e7f3ff;
            border-radius: 0.375rem;
            border: 1px solid #b3d9ff;
        }
        
        .form-floating label {
            color: #6c757d;
        }
        
        @media (max-width: 768px) {
            .checkout-progress {
                flex-direction: column;
                align-items: center;
            }
            
            .step {
                min-width: 200px;
            }
            
            .order-summary {
                position: static;
                margin-top: 2rem;
            }
        }
    </style>
{% endblock %}

{% block body %}
<div class="checkout-container">
    <!-- Breadcrumb -->
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ path('app_home') }}">Accueil</a></li>
            <li class="breadcrumb-item"><a href="{{ path('cart_index') }}">Panier</a></li>
            <li class="breadcrumb-item active" aria-current="page">Commande</li>
        </ol>
    </nav>
    
    <!-- Progress -->
    <div class="checkout-progress">
        <div class="step active">
            <i class="fas fa-truck me-2"></i>
            1. Livraison
        </div>
        <div class="step">
            <i class="fas fa-credit-card me-2"></i>
            2. Paiement
        </div>
        <div class="step">
            <i class="fas fa-check me-2"></i>
            3. Confirmation
        </div>
    </div>
    
    {{ form_start(form, {'attr': {'id': 'checkout-form', 'novalidate': 'novalidate'}}) }}
    
    <div class="row">
        <div class="col-lg-8">
            <!-- Adresse de facturation -->
            <div class="address-section">
                <h5 class="mb-3">
                    <i class="fas fa-file-invoice me-2"></i>
                    Adresse de facturation
                </h5>
                
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-floating mb-3">
                            {{ form_widget(form.billingFirstName, {'attr': {'class': 'form-control', 'placeholder': 'Prénom'}}) }}
                            {{ form_label(form.billingFirstName) }}
                            {{ form_errors(form.billingFirstName) }}
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-floating mb-3">
                            {{ form_widget(form.billingLastName, {'attr': {'class': 'form-control', 'placeholder': 'Nom'}}) }}
                            {{ form_label(form.billingLastName) }}
                            {{ form_errors(form.billingLastName) }}
                        </div>
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-md-8">
                        <div class="form-floating mb-3">
                            {{ form_widget(form.billingEmail, {'attr': {'class': 'form-control', 'placeholder': 'Email', 'type': 'email'}}) }}
                            {{ form_label(form.billingEmail) }}
                            {{ form_errors(form.billingEmail) }}
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-floating mb-3">
                            {{ form_widget(form.billingPhone, {'attr': {'class': 'form-control', 'placeholder': 'Téléphone'}}) }}
                            {{ form_label(form.billingPhone) }}
                            {{ form_errors(form.billingPhone) }}
                        </div>
                    </div>
                </div>
                
                <div class="form-floating mb-3">
                    {{ form_widget(form.billingAddress, {'attr': {'class': 'form-control', 'placeholder': 'Adresse complète'}}) }}
                    {{ form_label(form.billingAddress) }}
                    {{ form_errors(form.billingAddress) }}
                </div>
                
                <div class="row">
                    <div class="col-md-8">
                        <div class="form-floating mb-3">
                            {{ form_widget(form.billingCity, {'attr': {'class': 'form-control', 'placeholder': 'Ville'}}) }}
                            {{ form_label(form.billingCity) }}
                            {{ form_errors(form.billingCity) }}
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-floating mb-3">
                            {{ form_widget(form.billingZipCode, {'attr': {'class': 'form-control', 'placeholder': 'Code postal'}}) }}
                            {{ form_label(form.billingZipCode) }}
                            {{ form_errors(form.billingZipCode) }}
                        </div>
                    </div>
                </div>
                
                <div class="form-floating mb-3">
                    {{ form_widget(form.billingCountry, {'attr': {'class': 'form-select'}}) }}
                    {{ form_label(form.billingCountry) }}
                    {{ form_errors(form.billingCountry) }}
                </div>
            </div>
            
            <!-- Adresse de livraison -->
            <div class="address-section">
                <h5 class="mb-3">
                    <i class="fas fa-shipping-fast me-2"></i>
                    Adresse de livraison
                </h5>
                
                <div class="same-address-checkbox">
                    <div class="form-check">
                        {{ form_widget(form.sameAddress, {'attr': {'class': 'form-check-input', 'id': 'same-address-checkbox'}}) }}
                        {{ form_label(form.sameAddress, null, {'label_attr': {'class': 'form-check-label', 'for': 'same-address-checkbox'}}) }}
                    </div>
                </div>
                
                <div id="shipping-address-fields">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-floating mb-3">
                                {{ form_widget(form.shippingFirstName, {'attr': {'class': 'form-control', 'placeholder': 'Prénom'}}) }}
                                {{ form_label(form.shippingFirstName) }}
                                {{ form_errors(form.shippingFirstName) }}
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-floating mb-3">
                                {{ form_widget(form.shippingLastName, {'attr': {'class': 'form-control', 'placeholder': 'Nom'}}) }}
                                {{ form_label(form.shippingLastName) }}
                                {{ form_errors(form.shippingLastName) }}
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-floating mb-3">
                        {{ form_widget(form.shippingAddress, {'attr': {'class': 'form-control', 'placeholder': 'Adresse complète'}}) }}
                        {{ form_label(form.shippingAddress) }}
                        {{ form_errors(form.shippingAddress) }}
                    </div>
                    
                    <div class="row">
                        <div class="col-md-8">
                            <div class="form-floating mb-3">
                                {{ form_widget(form.shippingCity, {'attr': {'class': 'form-control', 'placeholder': 'Ville'}}) }}
                                {{ form_label(form.shippingCity) }}
                                {{ form_errors(form.shippingCity) }}
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-floating mb-3">
                                {{ form_widget(form.shippingZipCode, {'attr': {'class': 'form-control', 'placeholder': 'Code postal'}}) }}
                                {{ form_label(form.shippingZipCode) }}
                                {{ form_errors(form.shippingZipCode) }}
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-floating mb-3">
                        {{ form_widget(form.shippingCountry, {'attr': {'class': 'form-select', 'id': 'shipping-country-select'}}) }}
                        {{ form_label(form.shippingCountry) }}
                        {{ form_errors(form.shippingCountry) }}
                    </div>
                </div>
            </div>
            
            <!-- Notes de commande -->
            {% if form.notes is defined %}
                <div class="address-section">
                    <h6 class="mb-3">
                        <i class="fas fa-sticky-note me-2"></i>
                        Notes de commande (optionnel)
                    </h6>
                    <div class="form-floating">
                        {{ form_widget(form.notes, {'attr': {'class': 'form-control', 'placeholder': 'Instructions spéciales pour la livraison...', 'rows': 3, 'style': 'height: 100px'}}) }}
                        {{ form_label(form.notes) }}
                        {{ form_errors(form.notes) }}
                    </div>
                </div>
            {% endif %}
        </div>
        
        <div class="col-lg-4">
            <!-- Récapitulatif de commande -->
            <div class="order-summary">
                <h5 class="mb-3">
                    <i class="fas fa-shopping-cart me-2"></i>
                    Récapitulatif
                </h5>
                
                <!-- Articles -->
                <div class="mb-3">
                    {% for cartItem in cart.items %}
                        <div class="d-flex align-items-center mb-2 pb-2 border-bottom">
                            <img src="{{ cartItem.item.mainImagePath|default('/images/placeholder.jpg') }}" 
                                 alt="{{ cartItem.item.title }}" 
                                 class="me-2"
                                 style="width: 40px; height: 40px; object-fit: cover; border-radius: 4px;">
                            <div class="flex-grow-1">
                                <div class="small fw-semibold">{{ cartItem.item.title|slice(0, 30) }}...</div>
                                <div class="small text-muted">{{ cartItem.unitPrice|number_format(2, ',', ' ') }} €</div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
                
                <!-- Totaux -->
                <div class="summary-totals">
                    <div class="d-flex justify-content-between mb-2">
                        <span>Sous-total ({{ cart.items|length }} article{{ cart.items|length > 1 ? 's' : '' }})</span>
                        <span>{{ cart.subtotalAmount|number_format(2, ',', ' ') }} €</span>
                    </div>
                    
                    <div class="d-flex justify-content-between mb-2" id="shipping-line">
                        <span>Frais de livraison</span>
                        <span class="text-muted" id="shipping-cost">À calculer</span>
                    </div>
                    
                    <hr>
                    
                    <div class="d-flex justify-content-between mb-3">
                        <strong>Total</strong>
                        <strong class="text-primary" id="total-amount">{{ cart.totalAmount|number_format(2, ',', ' ') }} €</strong>
                    </div>
                </div>
                
                <!-- Calculateur de frais -->
                <div class="shipping-calculator" id="shipping-calculator">
                    <h6 class="mb-2">
                        <i class="fas fa-calculator me-2"></i>
                        Frais de livraison
                    </h6>
                    <div id="shipping-options" class="shipping-options" style="display: none;">
                        <!-- Options de livraison calculées -->
                    </div>
                    <div id="shipping-loading" class="text-center py-3" style="display: none;">
                        <i class="fas fa-spinner fa-spin me-2"></i>
                        Calcul en cours...
                    </div>
                </div>
                
                <!-- Indicateurs de sécurité -->
                <div class="secure-indicators">
                    <div class="text-center w-100">
                        <div class="small text-muted mb-1">
                            <i class="fas fa-shield-alt text-success me-1"></i>
                            Commande sécurisée
                        </div>
                        <div class="small text-muted">
                            <i class="fas fa-truck text-info me-1"></i>
                            Livraison soignée
                        </div>
                    </div>
                </div>
                
                <!-- Bouton de continuation -->
                <div class="d-grid mt-3">
                    <button type="submit" class="btn btn-primary btn-lg" id="continue-button">
                        <i class="fas fa-arrow-right me-2"></i>
                        Continuer vers le paiement
                    </button>
                </div>
            </div>
        </div>
    </div>
    
    {{ form_end(form) }}
</div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Initialiser le checkout shipping
            new CheckoutShipping();
        });
        
        class CheckoutShipping {
            constructor() {
                this.init();
            }
            
            init() {
                this.bindEvents();
                this.initSameAddressToggle();
                this.initShippingCalculator();
            }
            
            bindEvents() {
                // Même adresse
                const sameAddressCheckbox = document.getElementById('same-address-checkbox');
                if (sameAddressCheckbox) {
                    sameAddressCheckbox.addEventListener('change', this.toggleShippingAddress.bind(this));
                }
                
                // Changement de pays de livraison
                const shippingCountrySelect = document.getElementById('shipping-country-select');
                if (shippingCountrySelect) {
                    shippingCountrySelect.addEventListener('change', this.calculateShipping.bind(this));
                }
                
                // Validation du formulaire
                const form = document.getElementById('checkout-form');
                if (form) {
                    form.addEventListener('submit', this.validateForm.bind(this));
                }
            }
            
            initSameAddressToggle() {
                const checkbox = document.getElementById('same-address-checkbox');
                if (checkbox && checkbox.checked) {
                    this.toggleShippingAddress();
                }
            }
            
            toggleShippingAddress() {
                const checkbox = document.getElementById('same-address-checkbox');
                const shippingFields = document.getElementById('shipping-address-fields');
                
                if (checkbox.checked) {
                    // Copier les valeurs de facturation
                    this.copyBillingToShipping();
                    shippingFields.style.opacity = '0.5';
                    shippingFields.style.pointerEvents = 'none';
                } else {
                    shippingFields.style.opacity = '1';
                    shippingFields.style.pointerEvents = 'auto';
                }
            }
            
            copyBillingToShipping() {
                const billingFields = [
                    'billingFirstName', 'billingLastName', 'billingAddress',
                    'billingCity', 'billingZipCode', 'billingCountry'
                ];
                
                billingFields.forEach(field => {
                    const billingElement = document.querySelector(`[name="checkout_shipping[${field}]"]`);
                    const shippingField = field.replace('billing', 'shipping');
                    const shippingElement = document.querySelector(`[name="checkout_shipping[${shippingField}]"]`);
                    
                    if (billingElement && shippingElement) {
                        shippingElement.value = billingElement.value;
                    }
                });
                
                // Calculer les frais après copie
                setTimeout(() => this.calculateShipping(), 100);
            }
            
            initShippingCalculator() {
                // Calculer automatiquement si un pays est déjà sélectionné
                const countrySelect = document.getElementById('shipping-country-select');
                if (countrySelect && countrySelect.value) {
                    this.calculateShipping();
                }
            }
            
            async calculateShipping() {
                const countrySelect = document.getElementById('shipping-country-select');
                const shippingOptions = document.getElementById('shipping-options');
                const shippingLoading = document.getElementById('shipping-loading');
                const shippingCost = document.getElementById('shipping-cost');
                
                if (!countrySelect || !countrySelect.value) {
                    shippingOptions.style.display = 'none';
                    shippingCost.textContent = 'À calculer';
                    return;
                }
                
                shippingLoading.style.display = 'block';
                shippingOptions.style.display = 'none';
                
                try {
                    const response = await fetch('/checkout/api/shipping-cost', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest'
                        },
                        body: JSON.stringify({
                            country: countrySelect.value
                        })
                    });
                    
                    const data = await response.json();
                    
                    shippingLoading.style.display = 'none';
                    
                    if (data.success) {
                        if (data.requires_quote) {
                            this.displayQuoteRequired(data.message);
                        } else {
                            this.displayShippingCost(data);
                        }
                    } else {
                        this.displayError('Erreur lors du calcul');
                    }
                } catch (error) {
                    console.error('Erreur calcul frais:', error);
                    shippingLoading.style.display = 'none';
                    this.displayError('Erreur de connexion');
                }
            }
            
            displayShippingCost(data) {
                const shippingOptions = document.getElementById('shipping-options');
                const shippingCost = document.getElementById('shipping-cost');
                const totalAmount = document.getElementById('total-amount');
                
                shippingCost.textContent = data.formatted_cost;
                shippingCost.classList.remove('text-muted');
                shippingCost.classList.add('text-success');
                
                // Mettre à jour le total (temporaire, sera fait côté serveur)
                const currentTotal = parseFloat(document.querySelector('.summary-totals [data-amount]')?.dataset.amount || 0);
                const newTotal = currentTotal + data.cost;
                if (totalAmount) {
                    totalAmount.textContent = newTotal.toLocaleString('fr-FR', { minimumFractionDigits: 2 }) + ' €';
                }
                
                shippingOptions.innerHTML = `
                    <div class="shipping-option selected">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <strong>${data.rule_name || 'Livraison standard'}</strong>
                                ${data.estimated_days ? `<div class="small text-muted">Délai estimé: ${data.estimated_days} jours</div>` : ''}
                            </div>
                            <div class="text-success fw-bold">${data.formatted_cost}</div>
                        </div>
                    </div>
                `;
                shippingOptions.style.display = 'block';
            }
            
            displayQuoteRequired(message) {
                const shippingOptions = document.getElementById('shipping-options');
                const shippingCost = document.getElementById('shipping-cost');
                
                shippingCost.textContent = 'Devis requis';
                shippingCost.classList.remove('text-muted');
                shippingCost.classList.add('text-warning');
                
                shippingOptions.innerHTML = `
                    <div class="shipping-option quote-required">
                        <div class="text-center">
                            <i class="fas fa-file-invoice fa-2x text-warning mb-2"></i>
                            <h6>Devis de livraison requis</h6>
                            <p class="small text-muted mb-0">${message}</p>
                        </div>
                    </div>
                `;
                shippingOptions.style.display = 'block';
            }
            
            displayError(message) {
                const shippingOptions = document.getElementById('shipping-options');
                shippingOptions.innerHTML = `
                    <div class="alert alert-danger small mb-0">
                        <i class="fas fa-exclamation-triangle me-1"></i>
                        ${message}
                    </div>
                `;
                shippingOptions.style.display = 'block';
            }
            
            validateForm(e) {
                // Validation basique
                const requiredFields = document.querySelectorAll('#checkout-form [required]');
                let isValid = true;
                
                requiredFields.forEach(field => {
                    if (!field.value.trim()) {
                        field.classList.add('is-invalid');
                        isValid = false;
                    } else {
                        field.classList.remove('is-invalid');
                    }
                });
                
                if (!isValid) {
                    e.preventDefault();
                    alert('Veuillez remplir tous les champs obligatoires.');
                }
            }
        }
    </script>
{% endblock %}