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

{% block title %}Commande - Paiement - {{ 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;
            min-width: 120px;
            text-align: center;
        }
        
        .step.completed {
            background: #198754;
            color: white;
            border-color: #198754;
        }
        
        .step.active {
            background: #0d6efd;
            color: white;
            border-color: #0d6efd;
        }
        
        .payment-section {
            background: white;
            border: 1px solid #e9ecef;
            border-radius: 0.5rem;
            padding: 2rem;
            margin-bottom: 1.5rem;
        }
        
        .quote-section {
            background: linear-gradient(135deg, #fff8e1 0%, #fffbf0 100%);
            border: 2px solid #ffc107;
            border-radius: 0.5rem;
            padding: 2rem;
            text-align: center;
        }
        
        .order-summary {
            background: #f8f9fa;
            border-radius: 0.5rem;
            padding: 1.5rem;
            position: sticky;
            top: 20px;
        }
        
        #payment-element {
            margin-bottom: 1.5rem;
        }
        
        .payment-methods {
            display: flex;
            justify-content: center;
            gap: 1rem;
            margin-bottom: 1.5rem;
            padding: 1rem;
            background: #f8f9fa;
            border-radius: 0.375rem;
        }
        
        .payment-method {
            opacity: 0.6;
            transition: opacity 0.3s ease;
        }
        
        .security-badges {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 2rem;
            margin: 1.5rem 0;
            padding: 1rem;
            background: #e7f3ff;
            border-radius: 0.375rem;
            border: 1px solid #b3d9ff;
        }
        
        .security-badge {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: #0d6efd;
            font-size: 0.875rem;
            font-weight: 500;
        }
        
        .quote-timeline {
            margin: 1.5rem 0;
        }
        
        .timeline-step {
            display: flex;
            align-items: center;
            margin-bottom: 1rem;
            padding: 0.75rem;
            background: white;
            border-radius: 0.375rem;
            border: 1px solid #e9ecef;
        }
        
        .timeline-step.active {
            border-color: #ffc107;
            background: #fffbf0;
        }
        
        .timeline-step .step-number {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: #6c757d;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            margin-right: 1rem;
        }
        
        .timeline-step.active .step-number {
            background: #ffc107;
            color: #000;
        }
        
        .timeline-step.completed .step-number {
            background: #198754;
        }
        
        .spinner-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0.9);
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 0.5rem;
            z-index: 10;
        }
        
        @media (max-width: 768px) {
            .checkout-progress {
                flex-direction: column;
                align-items: center;
            }
            
            .step {
                min-width: 200px;
            }
            
            .order-summary {
                position: static;
                margin-top: 2rem;
            }
            
            .security-badges {
                flex-direction: column;
                gap: 1rem;
            }
        }
    </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">Paiement</li>
        </ol>
    </nav>
    
    <!-- Progress -->
    <div class="checkout-progress">
        <div class="step completed">
            <i class="fas fa-check me-2"></i>
            1. Livraison
        </div>
        <div class="step active">
            <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>
    
    <div class="row">
        <div class="col-lg-8">
            {% if requiresQuote %}
                <!-- Section devis requis -->
                <div class="quote-section">
                    <div class="mb-4">
                        <i class="fas fa-file-invoice fa-4x text-warning mb-3"></i>
                        <h3>Devis de livraison requis</h3>
                        <p class="lead">Le vendeur doit vous fournir un devis personnalisé pour les frais de livraison de cette commande.</p>
                    </div>
                    
                    <!-- Timeline du processus -->
                    <div class="quote-timeline">
                        <div class="timeline-step completed">
                            <div class="step-number">1</div>
                            <div>
                                <strong>Commande créée</strong>
                                <div class="small text-muted">Vos informations ont été enregistrées</div>
                            </div>
                        </div>
                        <div class="timeline-step active">
                            <div class="step-number">2</div>
                            <div>
                                <strong>En attente du devis</strong>
                                <div class="small text-muted">Le vendeur prépare votre devis de livraison</div>
                            </div>
                        </div>
                        <div class="timeline-step">
                            <div class="step-number">3</div>
                            <div>
                                <strong>Validation et paiement</strong>
                                <div class="small text-muted">Vous pourrez valider et payer</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="alert alert-info mb-4">
                        <i class="fas fa-info-circle me-2"></i>
                        <strong>Que se passe-t-il maintenant ?</strong>
                        <ul class="mb-0 mt-2">
                            <li>Le vendeur a 15 jours pour vous envoyer un devis</li>
                            <li>Vous recevrez un email dès que le devis sera disponible</li>
                            <li>Le devis sera valable 30 jours</li>
                            <li>Vous pourrez négocier le prix si nécessaire</li>
                        </ul>
                    </div>
                    
                    <form method="post" action="{{ path('checkout_quote_request') }}">
                        <button type="submit" class="btn btn-warning btn-lg" id="request-quote-btn">
                            <i class="fas fa-paper-plane me-2"></i>
                            Demander le devis
                        </button>
                    </form>
                </div>
                
            {% else %}
                <!-- Section paiement Stripe -->
                <div class="payment-section" style="position: relative;">
                    <h4 class="mb-4">
                        <i class="fas fa-credit-card me-2"></i>
                        Paiement sécurisé
                    </h4>
                    
                    <!-- Méthodes de paiement acceptées -->
                    <div class="payment-methods">
                        <img src="/images/payment/visa.svg" alt="Visa" class="payment-method" style="height: 24px;">
                        <img src="/images/payment/mastercard.svg" alt="Mastercard" class="payment-method" style="height: 24px;">
                        <img src="/images/payment/amex.svg" alt="American Express" class="payment-method" style="height: 24px;">
                        <img src="/images/payment/sepa.svg" alt="SEPA" class="payment-method" style="height: 24px;">
                    </div>
                    
                    <form id="payment-form">
                        <!-- Stripe Elements va être injecté ici -->
                        <div id="payment-element">
                            <!-- Stripe Payment Element -->
                        </div>
                        
                        <!-- Messages d'erreur -->
                        <div id="payment-errors" role="alert" class="alert alert-danger" style="display: none;">
                            <!-- Erreurs de paiement -->
                        </div>
                        
                        <!-- Badges de sécurité -->
                        <div class="security-badges">
                            <div class="security-badge">
                                <i class="fas fa-shield-alt"></i>
                                <span>Paiement sécurisé SSL</span>
                            </div>
                            <div class="security-badge">
                                <i class="fab fa-stripe"></i>
                                <span>Propulsé par Stripe</span>
                            </div>
                            <div class="security-badge">
                                <i class="fas fa-lock"></i>
                                <span>Données cryptées</span>
                            </div>
                        </div>
                        
                        <!-- Conditions générales -->
                        <div class="form-check mb-3">
                            <input class="form-check-input" type="checkbox" id="terms-checkbox" required>
                            <label class="form-check-label" for="terms-checkbox">
                                J'accepte les <a href="{{ path('legal_terms') }}" target="_blank">conditions générales de vente</a> 
                                et la <a href="{{ path('legal_privacy') }}" target="_blank">politique de confidentialité</a>
                            </label>
                        </div>
                        
                        <!-- Bouton de paiement -->
                        <button id="submit-payment" class="btn btn-success btn-lg w-100" disabled>
                            <span id="button-text">
                                <i class="fas fa-lock me-2"></i>
                                Payer {{ order.totalAmount|number_format(2, ',', ' ') }} €
                            </span>
                            <div id="spinner" class="spinner-border spinner-border-sm" style="display: none;"></div>
                        </button>
                    </form>
                    
                    <!-- Overlay de chargement -->
                    <div id="payment-loading" class="spinner-overlay" style="display: none;">
                        <div class="text-center">
                            <div class="spinner-border text-primary mb-3"></div>
                            <div>Traitement du paiement en cours...</div>
                        </div>
                    </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 de commande
                </h5>
                
                <!-- Informations vendeur -->
                <div class="border-bottom pb-3 mb-3">
                    <h6 class="text-muted mb-1">Vendeur</h6>
                    <div class="fw-semibold">{{ order.seller.company|default(order.seller.firstName ~ ' ' ~ order.seller.lastName) }}</div>
                    {% if order.seller.city %}
                        <div class="small text-muted">{{ order.seller.city }}</div>
                    {% endif %}
                </div>
                
                <!-- Articles -->
                <div class="mb-3">
                    {% for orderItem in order.orderItems %}
                        <div class="d-flex align-items-center mb-3 pb-3 border-bottom">
                            <img src="{{ orderItem.itemImage|default('/images/placeholder.jpg') }}" 
                                 alt="{{ orderItem.itemTitle }}" 
                                 class="me-3"
                                 style="width: 50px; height: 50px; object-fit: cover; border-radius: 4px;">
                            <div class="flex-grow-1">
                                <div class="fw-semibold">{{ orderItem.itemTitle }}</div>
                                <div class="small text-muted">Quantité: {{ orderItem.quantity }}</div>
                                <div class="text-primary fw-bold">{{ orderItem.unitPrice|number_format(2, ',', ' ') }} €</div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
                
                <!-- Adresses -->
                <div class="mb-3">
                    <h6 class="text-muted mb-2">Livraison</h6>
                    <div class="small">
                        <strong>{{ order.shippingFirstName }} {{ order.shippingLastName }}</strong><br>
                        {{ order.shippingAddress }}<br>
                        {{ order.shippingZipCode }} {{ order.shippingCity }}<br>
                        {{ order.shippingCountry }}
                    </div>
                </div>
                
                <!-- Totaux -->
                <div class="border-top pt-3">
                    <div class="d-flex justify-content-between mb-2">
                        <span>Sous-total</span>
                        <span>{{ order.subtotalAmount|number_format(2, ',', ' ') }} €</span>
                    </div>
                    
                    {% if order.shippingAmount %}
                        <div class="d-flex justify-content-between mb-2">
                            <span>Frais de livraison</span>
                            <span>{{ order.shippingAmount|number_format(2, ',', ' ') }} €</span>
                        </div>
                    {% else %}
                        <div class="d-flex justify-content-between mb-2">
                            <span>Frais de livraison</span>
                            <span class="text-warning">Devis requis</span>
                        </div>
                    {% endif %}
                    
                    <hr>
                    
                    <div class="d-flex justify-content-between mb-3">
                        <strong class="fs-5">Total</strong>
                        <strong class="fs-5 text-primary">{{ order.totalAmount|number_format(2, ',', ' ') }} €</strong>
                    </div>
                </div>
                
                <!-- Numéro de commande -->
                <div class="text-center">
                    <small class="text-muted">
                        Commande n° <strong>{{ order.orderNumber }}</strong>
                    </small>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {% if not requiresQuote %}
        <script src="https://js.stripe.com/v3/"></script>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                new StripePayment({
                    publishableKey: '{{ stripePublishableKey }}',
                    clientSecret: '{{ paymentIntent.client_secret }}',
                    orderNumber: '{{ order.orderNumber }}',
                    orderTotal: {{ order.totalAmount }}
                });
            });
        </script>
    {% else %}
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                new QuoteRequest({
                    orderNumber: '{{ order.orderNumber }}'
                });
            });
        </script>
    {% endif %}
    
    <script>
        class StripePayment {
            constructor(options) {
                this.stripe = Stripe(options.publishableKey);
                this.clientSecret = options.clientSecret;
                this.orderNumber = options.orderNumber;
                this.orderTotal = options.orderTotal;
                this.isProcessing = false;
                this.init();
            }
            
            init() {
                this.setupElements();
                this.bindEvents();
            }
            
            setupElements() {
                const appearance = {
                    theme: 'stripe',
                    variables: {
                        colorPrimary: '#0d6efd',
                        colorBackground: '#ffffff',
                        colorText: '#212529',
                        colorDanger: '#dc3545',
                        fontFamily: 'system-ui, sans-serif',
                        spacingUnit: '4px',
                        borderRadius: '8px',
                    }
                };
                
                this.elements = this.stripe.elements({
                    appearance,
                    clientSecret: this.clientSecret
                });
                
                this.paymentElement = this.elements.create('payment');
                this.paymentElement.mount('#payment-element');
                
                this.paymentElement.on('ready', () => {
                    this.hideLoadingOverlay();
                    this.enablePaymentButton();
                });
                
                this.paymentElement.on('change', (event) => {
                    this.displayError(event.error?.message || '');
                });
            }
            
            bindEvents() {
                const form = document.getElementById('payment-form');
                const termsCheckbox = document.getElementById('terms-checkbox');
                const submitButton = document.getElementById('submit-payment');
                
                // Activer/désactiver le bouton selon les conditions
                termsCheckbox.addEventListener('change', () => {
                    submitButton.disabled = !termsCheckbox.checked || this.isProcessing;
                });
                
                form.addEventListener('submit', this.handleSubmit.bind(this));
            }
            
            async handleSubmit(event) {
                event.preventDefault();
                
                if (this.isProcessing) return;
                
                const termsCheckbox = document.getElementById('terms-checkbox');
                if (!termsCheckbox.checked) {
                    alert('Veuillez accepter les conditions générales');
                    return;
                }
                
                this.setLoading(true);
                this.showLoadingOverlay();
                
                const {error} = await this.stripe.confirmPayment({
                    elements: this.elements,
                    confirmParams: {
                        return_url: window.location.origin + '/checkout/confirmation/' + this.orderNumber,
                    }
                });
                
                if (error) {
                    this.handlePaymentError(error);
                } else {
                    // Le paiement sera traité par le return_url
                }
            }
            
            handlePaymentError(error) {
                this.setLoading(false);
                this.hideLoadingOverlay();
                
                let message = 'Une erreur inattendue s\'est produite.';
                
                if (error.type === "card_error" || error.type === "validation_error") {
                    message = error.message;
                } else if (error.type === "invalid_request_error") {
                    message = 'Requête invalide. Veuillez réessayer.';
                }
                
                this.displayError(message);
                
                // Log pour débogage
                console.error('Erreur de paiement:', error);
            }
            
            displayError(message) {
                const errorElement = document.getElementById('payment-errors');
                if (message) {
                    errorElement.textContent = message;
                    errorElement.style.display = 'block';
                } else {
                    errorElement.style.display = 'none';
                }
            }
            
            setLoading(isLoading) {
                this.isProcessing = isLoading;
                const submitButton = document.getElementById('submit-payment');
                const buttonText = document.getElementById('button-text');
                const spinner = document.getElementById('spinner');
                const termsCheckbox = document.getElementById('terms-checkbox');
                
                if (isLoading) {
                    submitButton.disabled = true;
                    buttonText.style.display = 'none';
                    spinner.style.display = 'inline-block';
                } else {
                    const termsChecked = termsCheckbox.checked;
                    submitButton.disabled = !termsChecked;
                    buttonText.style.display = 'inline';
                    spinner.style.display = 'none';
                }
            }
            
            enablePaymentButton() {
                const termsCheckbox = document.getElementById('terms-checkbox');
                const submitButton = document.getElementById('submit-payment');
                
                if (termsCheckbox.checked) {
                    submitButton.disabled = false;
                }
            }
            
            showLoadingOverlay() {
                document.getElementById('payment-loading').style.display = 'flex';
            }
            
            hideLoadingOverlay() {
                document.getElementById('payment-loading').style.display = 'none';
            }
        }
        
        class QuoteRequest {
            constructor(options) {
                this.orderNumber = options.orderNumber;
                this.bindEvents();
            }
            
            bindEvents() {
                const requestButton = document.getElementById('request-quote-btn');
                if (requestButton) {
                    requestButton.addEventListener('click', this.handleQuoteRequest.bind(this));
                }
            }
            
            async handleQuoteRequest(event) {
                event.preventDefault();
                
                const button = event.target;
                const originalText = button.innerHTML;
                
                button.disabled = true;
                button.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Envoi en cours...';
                
                try {
                    const response = await fetch(button.closest('form').action, {
                        method: 'POST',
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    });
                    
                    if (response.ok) {
                        window.location.href = `/checkout/confirmation/${this.orderNumber}`;
                    } else {
                        throw new Error('Erreur lors de la demande de devis');
                    }
                } catch (error) {
                    console.error('Erreur:', error);
                    alert('Une erreur est survenue lors de la demande de devis');
                    button.disabled = false;
                    button.innerHTML = originalText;
                }
            }
        }
    </script>
{% endblock %}