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

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

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

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

.payment-form {
    padding: 2rem;
}

.stripe-element {
    background: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    transition: border-color 0.3s ease;
}

.stripe-element:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.25);
}

.payment-summary {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.security-badges {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
    opacity: 0.7;
}

.security-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.loading-content {
    background: white;
    padding: 3rem;
    border-radius: 15px;
    text-align: center;
}

.spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid var(--primary-color);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    margin: 0 auto 1rem;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.payment-methods {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin: 1rem 0;
}

.payment-method-icon {
    width: 40px;
    height: 25px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.visa { background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCA0MCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjI0IiByeD0iNCIgZmlsbD0iIzAwNTFBNSIvPgo8dGV4dCB4PSI1IiB5PSIxNSIgZm9udC1mYW1pbHk9IkFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjgiIGZpbGw9IndoaXRlIj5WSVNBPC90ZXh0Pgo8L3N2Zz4K'); }
.mastercard { background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCA0MCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjI0IiByeD0iNCIgZmlsbD0iI0VCMDAxQiIvPgo8dGV4dCB4PSI4IiB5PSIxNSIgZm9udC1mYW1pbHk9IkFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjciIGZpbGw9IndoaXRlIj5NQzwvdGV4dD4KPC9zdmc+'); }
</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">Paiement sécurisé</h1>
                <p class="lead fade-in">Finalisez votre commande en toute sécurité</p>
            </div>
        </div>
    </div>
</section>

<!-- Payment Section -->
<section class="section">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="payment-container">
                    <div class="payment-header">
                        <h3><i class="fas fa-lock"></i> Paiement sécurisé</h3>
                        <p class="mb-0">Vos données sont protégées par cryptage SSL</p>
                    </div>
                    
                    <div class="payment-form">
                        <!-- Order Summary -->
                        <div class="payment-summary">
                            <h5 class="mb-3">Récapitulatif de votre commande</h5>
                            <div id="orderSummary">
                                <!-- Loaded by JavaScript -->
                            </div>
                            <hr>
                            <div class="d-flex justify-content-between">
                                <strong>Total à payer</strong>
                                <strong class="text-primary fs-5" id="totalAmount">0,00€</strong>
                            </div>
                        </div>
                        
                        <!-- Payment Form -->
                        <form id="payment-form">
                            <div class="mb-3">
                                <label for="card-holder-name" class="form-label">Nom du porteur de la carte *</label>
                                <input type="text" id="card-holder-name" class="form-control" required>
                            </div>
                            
                            <div class="mb-3">
                                <label class="form-label">Informations de la carte *</label>
                                <div id="card-element" class="stripe-element">
                                    <!-- Stripe Elements will create form elements here -->
                                </div>
                                <div id="card-errors" role="alert" class="text-danger mt-2"></div>
                            </div>
                            
                            <div class="payment-methods">
                                <div class="payment-method-icon visa"></div>
                                <div class="payment-method-icon mastercard"></div>
                                <span class="text-muted">et bien d'autres...</span>
                            </div>
                            
                            <div class="form-check mb-3">
                                <input class="form-check-input" type="checkbox" id="saveCard">
                                <label class="form-check-label" for="saveCard">
                                    Enregistrer cette carte pour les prochaines commandes
                                </label>
                            </div>
                            
                            <div class="d-grid gap-2">
                                <button type="submit" id="submit-button" class="btn btn-primary btn-lg">
                                    <i class="fas fa-lock"></i>
                                    Payer <span id="paymentAmount">0,00€</span>
                                </button>
                                
                                <a href="{{ path('app_pizza_order') }}" class="btn btn-outline-secondary">
                                    <i class="fas fa-arrow-left"></i> Retour aux informations
                                </a>
                            </div>
                        </form>
                        
                        <div class="security-badges">
                            <div class="security-badge">
                                <i class="fas fa-shield-alt text-success"></i>
                                <span>SSL Sécurisé</span>
                            </div>
                            <div class="security-badge">
                                <i class="fab fa-stripe text-primary"></i>
                                <span>Stripe</span>
                            </div>
                            <div class="security-badge">
                                <i class="fas fa-lock text-warning"></i>
                                <span>Données chiffrées</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Loading Overlay -->
<div class="loading-overlay" id="loadingOverlay">
    <div class="loading-content">
        <div class="spinner"></div>
        <h5>Traitement du paiement en cours...</h5>
        <p class="text-muted">Veuillez patienter, ne fermez pas cette page</p>
    </div>
</div>

<!-- Info Section -->
<section class="section bg-light">
    <div class="container">
        <div class="row g-4">
            <div class="col-md-3">
                <div class="text-center">
                    <i class="fas fa-shield-alt fa-3x text-success mb-3"></i>
                    <h6>Paiement sécurisé</h6>
                    <p class="small text-muted">Technologie SSL 256 bits</p>
                </div>
            </div>
            
            <div class="col-md-3">
                <div class="text-center">
                    <i class="fas fa-undo fa-3x text-primary mb-3"></i>
                    <h6>Remboursement</h6>
                    <p class="small text-muted">Garantie satisfait ou remboursé</p>
                </div>
            </div>
            
            <div class="col-md-3">
                <div class="text-center">
                    <i class="fas fa-headset fa-3x text-warning mb-3"></i>
                    <h6>Support 24/7</h6>
                    <p class="small text-muted">Assistance en cas de problème</p>
                </div>
            </div>
            
            <div class="col-md-3">
                <div class="text-center">
                    <i class="fas fa-clock fa-3x text-info mb-3"></i>
                    <h6>Préparation rapide</h6>
                    <p class="small text-muted">Pizzas fraîches en 20 minutes</p>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script src="https://js.stripe.com/v3/"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Load order data from the new Stripe data storage
    const stripeOrderData = JSON.parse(localStorage.getItem('stripe-order-data') || '{}');
    const cart = JSON.parse(localStorage.getItem('pizza-cart') || '{}');
    
    // Check if we have the necessary data
    if (Object.keys(stripeOrderData).length === 0 || Object.keys(cart).length === 0) {
        alert('Aucune donnée de commande trouvée. Redirection vers la page de commande.');
        window.location.href = '{{ path("app_pizza_order") }}';
        return;
    }
    
    loadOrderSummary();
    
    // Initialize Stripe with the public key from environment
    const stripe = Stripe('{{ stripe_public_key }}');
    const elements = stripe.elements();
    
    // Create card element
    const cardElement = elements.create('card', {
        style: {
            base: {
                fontSize: '16px',
                color: '#424770',
                '::placeholder': {
                    color: '#aab7c4',
                },
            },
        },
    });
    
    cardElement.mount('#card-element');
    
    // Handle real-time validation errors from the card Element
    cardElement.on('change', function(event) {
        const displayError = document.getElementById('card-errors');
        if (event.error) {
            displayError.textContent = event.error.message;
        } else {
            displayError.textContent = '';
        }
    });
    
    // Handle form submission
    const form = document.getElementById('payment-form');
    form.addEventListener('submit', async function(event) {
        event.preventDefault();
        
        const submitButton = document.getElementById('submit-button');
        const loadingOverlay = document.getElementById('loadingOverlay');
        
        // Disable submit button and show loading
        submitButton.disabled = true;
        loadingOverlay.style.display = 'flex';
        
        // Create payment method
        const {error, paymentMethod} = await stripe.createPaymentMethod({
            type: 'card',
            card: cardElement,
            billing_details: {
                name: document.getElementById('card-holder-name').value,
                email: stripeOrderData.customerEmail,
            },
        });
        
        if (error) {
            // Show error to customer
            document.getElementById('card-errors').textContent = error.message;
            submitButton.disabled = false;
            loadingOverlay.style.display = 'none';
        } else {
            // Send payment method to server
            handlePayment(paymentMethod.id);
        }
    });
    
    async function handlePayment(paymentMethodId) {
        try {
            const cart = JSON.parse(localStorage.getItem('pizza-cart') || '{}');
            const stripeOrderData = JSON.parse(localStorage.getItem('stripe-order-data') || '{}');
            const total = calculateTotal();
            
            // Préparer les données pour l'API en utilisant stripeOrderData
            const paymentData = {
                payment_method_id: paymentMethodId,
                amount: total,
                cart_data: Object.values(cart),
                customer_name: stripeOrderData.customerName || '',
                customer_email: stripeOrderData.customerEmail || '',
                customer_phone: stripeOrderData.customerPhone || '',
                pickup_time: stripeOrderData.pickupDate && stripeOrderData.pickupTime ? 
                    `${stripeOrderData.pickupDate} ${stripeOrderData.pickupTime}` : null,
                pickup_date: stripeOrderData.pickupDate || '',
                special_instructions: stripeOrderData.specialInstructions || ''
            };
            
            // Appel à l'API Stripe côté serveur
            const response = await fetch('{{ path("app_pizza_process_payment") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: JSON.stringify(paymentData)
            });
            
            const result = await response.json();
            
            if (result.success) {
                // Paiement réussi
                // const confirmationData = {
                //     paymentMethodId: paymentMethodId,
                //     total: total,
                //     confirmationCode: result.confirmation_code,
                //     paymentStatus: 'completed',
                //     paymentIntentId: result.payment_intent_id,
                //     customerData: {
                //         firstName: stripeOrderData.customerName.split(' ')[0] || '',
                //         lastName: stripeOrderData.customerName.split(' ').slice(1).join(' ') || '',
                //         email: stripeOrderData.customerEmail,
                //         phone: stripeOrderData.customerPhone
                //     },
                //     pickupData: {
                //         date: stripeOrderData.pickupDate,
                //         time: stripeOrderData.pickupTime
                //     },
                //     items: cart,
                //     comments: stripeOrderData.specialInstructions
                // };
                // 
                // localStorage.setItem('order-confirmation', JSON.stringify(confirmationData));
                console.log('Données sauvées dans order-confirmation:', confirmationData);
                // Ne pas vider le localStorage ici, le faire sur la page de confirmation
                
                // Redirection vers la page de confirmation
                window.location.href = result.redirect_url;
                
            } else if (result.requires_action) {
                // Action supplémentaire requise (3D Secure, etc.)
                const {error: confirmError, paymentIntent: confirmedPaymentIntent} = await stripe.confirmCardPayment(
                    result.payment_intent.client_secret
                );
                
                if (confirmError) {
                    document.getElementById('card-errors').textContent = confirmError.message;
                    document.getElementById('submit-button').disabled = false;
                    document.getElementById('loadingOverlay').style.display = 'none';
                } else if (confirmedPaymentIntent.status === 'succeeded') {
                    // Paiement 3D Secure confirmé avec succès
                    // Appeler de nouveau l'API pour finaliser la commande
                    const finalizeResponse = await fetch('{{ path("app_pizza_finalize_payment") }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest'
                        },
                        body: JSON.stringify({
                            payment_intent_id: confirmedPaymentIntent.id,
                            cart_data: Object.values(cart),
                            customer_name: stripeOrderData.customerName || '',
                            customer_email: stripeOrderData.customerEmail || '',
                            customer_phone: stripeOrderData.customerPhone || '',
                            pickup_time: stripeOrderData.pickupDate && stripeOrderData.pickupTime ? 
                                `${stripeOrderData.pickupDate} ${stripeOrderData.pickupTime}` : null,
                            pickup_date: stripeOrderData.pickupDate || '',
                            special_instructions: stripeOrderData.specialInstructions || ''
                        })
                    });
                    
                    const finalizeResult = await finalizeResponse.json();
                    
                    if (finalizeResult.success) {
                        // Ajouter les données de confirmation pour 3D Secure
                        // const confirmationData = {
                        //     paymentMethodId: paymentMethodId,
                        //     total: total,
                        //     confirmationCode: finalizeResult.confirmation_code,
                        //     paymentStatus: 'completed',
                        //     paymentIntentId: finalizeResult.payment_intent_id,
                        //     customerData: stripeOrderData.customer,
                        //     pickupData: stripeOrderData.pickup,
                        //     items: cart,
                        //     comments: stripeOrderData.specialInstructions
                        // };
                        // 
                        // localStorage.setItem('order-confirmation', JSON.stringify(confirmationData));
                        // console.log('Données sauvées dans order-confirmation (3D Secure):', confirmationData);
                        
                        window.location.href = finalizeResult.redirect_url;
                    } else {
                        document.getElementById('card-errors').textContent = 'Erreur lors de la finalisation du paiement.';
                        document.getElementById('submit-button').disabled = false;
                        document.getElementById('loadingOverlay').style.display = 'none';
                    }
                } else {
                    document.getElementById('card-errors').textContent = 'Le paiement n\'a pas pu être confirmé.';
                    document.getElementById('submit-button').disabled = false;
                    document.getElementById('loadingOverlay').style.display = 'none';
                }
            } else {
                // Erreur de paiement
                document.getElementById('card-errors').textContent = result.error || 'Une erreur est survenue lors du paiement.';
                document.getElementById('submit-button').disabled = false;
                document.getElementById('loadingOverlay').style.display = 'none';
            }
            
        } catch (error) {
            console.error('Payment error:', error);
            document.getElementById('card-errors').textContent = 'Une erreur de connexion est survenue. Veuillez réessayer.';
            document.getElementById('submit-button').disabled = false;
            document.getElementById('loadingOverlay').style.display = 'none';
        }
    }
});

function loadOrderSummary() {
    const cart = JSON.parse(localStorage.getItem('pizza-cart') || '{}');
    const stripeOrderData = JSON.parse(localStorage.getItem('stripe-order-data') || '{}');
    const orderSummary = document.getElementById('orderSummary');
    let total = 0;
    
    orderSummary.innerHTML = '';
    
    // Afficher les informations client
    if (stripeOrderData.customer) {
        const customerInfo = document.createElement('div');
        customerInfo.className = 'mb-3 p-3 bg-light rounded';
        customerInfo.innerHTML = `
            <h6 class="mb-2"><i class="fas fa-user"></i> Informations client</h6>
            <p class="mb-1"><strong>Nom :</strong> ${stripeOrderData.customer.firstName} ${stripeOrderData.customer.lastName}</p>
            <p class="mb-1"><strong>Email :</strong> ${stripeOrderData.customer.email}</p>
            <p class="mb-1"><strong>Téléphone :</strong> ${stripeOrderData.customer.phone}</p>
            ${stripeOrderData.pickup ? `<p class="mb-0"><strong>Récupération :</strong> ${stripeOrderData.pickup.date} à ${stripeOrderData.pickup.time}</p>` : ''}
        `;
        orderSummary.appendChild(customerInfo);
    }
    
    // Afficher les items
    Object.values(cart).forEach(item => {
        const itemTotal = item.price * item.quantity;
        total += itemTotal;
        
        const itemElement = document.createElement('div');
        itemElement.className = 'd-flex justify-content-between mb-2';
        itemElement.innerHTML = `
            <span>${item.name} x ${item.quantity}</span>
            <span>${itemTotal.toFixed(2).replace('.', ',')}€</span>
        `;
        
        orderSummary.appendChild(itemElement);
    });
    
    const totalFormatted = total.toFixed(2).replace('.', ',') + '€';
    document.getElementById('totalAmount').textContent = totalFormatted;
    document.getElementById('paymentAmount').textContent = totalFormatted;
}

function calculateTotal() {
    const cart = JSON.parse(localStorage.getItem('pizza-cart') || '{}');
    return Object.values(cart).reduce((sum, item) => sum + (item.price * item.quantity), 0);
}
</script>
{% endblock %}