{% extends 'sites/template-default/base.html.twig' %}

{% block title %}Finaliser ma commande{% endblock %}

{% block body %}
<div class="checkout-page">
    <div class="container">
        <div class="checkout-header">
            <h1><i class="fas fa-credit-card"></i> Finaliser ma commande</h1>
            <div class="checkout-steps">
                <div class="step active"><i class="fas fa-shopping-cart"></i> Panier</div>
                <div class="step active"><i class="fas fa-shipping-fast"></i> Livraison</div>
                <div class="step"><i class="fas fa-check-circle"></i> Confirmation</div>
            </div>
        </div>

        <div class="checkout-content">
            <div class="checkout-form-section">
                <form id="checkout-form" method="POST">
                    <div class="form-section">
                        <h2><i class="fas fa-user"></i> Informations personnelles</h2>

                        <div class="form-row">
                            <div class="form-group">
                                <label for="firstname">Prénom *</label>
                                <input type="text" id="firstname" name="firstname" required>
                            </div>
                            <div class="form-group">
                                <label for="lastname">Nom *</label>
                                <input type="text" id="lastname" name="lastname" required>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="email">Email *</label>
                            <input type="email" id="email" name="email" required>
                        </div>

                        <div class="form-group">
                            <label for="phone">Téléphone *</label>
                            <input type="tel" id="phone" name="phone" required>
                        </div>
                    </div>

                    <div class="form-section">
                        <h2><i class="fas fa-map-marker-alt"></i> Adresse de livraison</h2>

                        <div class="form-group">
                            <label for="address">Adresse *</label>
                            <input type="text" id="address" name="address" required>
                        </div>

                        <div class="form-row">
                            <div class="form-group">
                                <label for="postal_code">Code postal *</label>
                                <input type="text" id="postal_code" name="postal_code" required>
                            </div>
                            <div class="form-group">
                                <label for="city">Ville *</label>
                                <input type="text" id="city" name="city" required>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="country">Pays *</label>
                            <select id="country" name="country" required>
                                <option value="France" selected>France</option>
                                <option value="Belgique">Belgique</option>
                                <option value="Suisse">Suisse</option>
                                <option value="Luxembourg">Luxembourg</option>
                            </select>
                        </div>
                    </div>

                    <input type="hidden" id="cart-data" name="cart">

                    <div class="form-actions">
                        <a href="/shop/cart" class="btn-back">
                            <i class="fas fa-arrow-left"></i> Retour au panier
                        </a>
                        <button type="submit" class="btn-submit">
                            Valider la commande <i class="fas fa-check"></i>
                        </button>
                    </div>
                </form>
            </div>

            <div class="checkout-summary">
                <h2>Récapitulatif</h2>
                <div id="order-summary">
                    <div class="summary-loading">
                        <i class="fas fa-spinner fa-spin"></i> Chargement...
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.checkout-page {
    min-height: 70vh;
    padding: 4rem 0;
    background: #f8f9fa;
}

.checkout-header {
    text-align: center;
    margin-bottom: 3rem;
}

.checkout-header h1 {
    font-size: 2.5rem;
    color: #1e293b;
    font-weight: 700;
    margin-bottom: 2rem;
}

.checkout-header h1 i {
    color: var(--site-primary-color, #10b981);
    margin-right: 1rem;
}

.checkout-steps {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: #e2e8f0;
    border-radius: 50px;
    color: #64748b;
    font-weight: 600;
}

.step.active {
    background: var(--site-primary-color, #10b981);
    color: white;
}

.checkout-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.checkout-form-section {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

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

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

.form-section h2 {
    font-size: 1.5rem;
    color: #1e293b;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.form-section h2 i {
    color: var(--site-primary-color, #10b981);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.5rem;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--site-primary-color, #10b981);
}

.form-actions {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

.btn-back,
.btn-submit {
    flex: 1;
    padding: 1rem 2rem;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-back {
    background: #e2e8f0;
    color: #1e293b;
}

.btn-back:hover {
    background: #cbd5e1;
}

.btn-submit {
    background: var(--site-primary-color, #10b981);
    color: white;
}

.btn-submit:hover {
    background: var(--site-primary-color-dark, #059669);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.checkout-summary {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    height: fit-content;
    position: sticky;
    top: 2rem;
}

.checkout-summary h2 {
    font-size: 1.5rem;
    color: #1e293b;
    margin-bottom: 1.5rem;
}

.summary-loading {
    text-align: center;
    padding: 2rem;
    color: #64748b;
}

.summary-item {
    display: flex;
    justify-content: space-between;
    padding: 1rem 0;
    border-bottom: 1px solid #e2e8f0;
}

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

.summary-item-info {
    flex: 1;
}

.summary-item-name {
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.25rem;
}

.summary-item-qty {
    font-size: 0.9rem;
    color: #64748b;
}

.summary-item-price {
    font-weight: 600;
    color: var(--site-primary-color, #10b981);
}

.summary-totals {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 2px solid #e2e8f0;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    font-size: 1.1rem;
}

.summary-row.total {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--site-primary-color, #10b981);
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}

@media (max-width: 992px) {
    .checkout-content {
        grid-template-columns: 1fr;
    }

    .checkout-summary {
        position: static;
    }

    .form-row {
        grid-template-columns: 1fr;
    }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    loadOrderSummary();

    const form = document.getElementById('checkout-form');
    form.addEventListener('submit', handleCheckout);
});

function loadOrderSummary() {
    const summaryDiv = document.getElementById('order-summary');
    const cart = JSON.parse(localStorage.getItem('izibrick_cart') || '[]');

    if (cart.length === 0) {
        window.location.href = '/shop/cart';
        return;
    }

    let total = 0;
    let itemsHtml = '';

    cart.forEach(item => {
        const itemTotal = item.price * item.quantity;
        total += itemTotal;

        itemsHtml += `
            <div class="summary-item">
                <div class="summary-item-info">
                    <div class="summary-item-name">${item.name}</div>
                    <div class="summary-item-qty">Quantité: ${item.quantity}</div>
                </div>
                <div class="summary-item-price">${itemTotal.toFixed(2)} €</div>
            </div>
        `;
    });

    summaryDiv.innerHTML = `
        ${itemsHtml}
        <div class="summary-totals">
            <div class="summary-row">
                <span>Sous-total</span>
                <span>${total.toFixed(2)} €</span>
            </div>
            <div class="summary-row">
                <span>Livraison</span>
                <span>Offerte</span>
            </div>
            <div class="summary-row total">
                <span>Total</span>
                <span>${total.toFixed(2)} €</span>
            </div>
        </div>
    `;
}

function handleCheckout(e) {
    e.preventDefault();

    const cart = JSON.parse(localStorage.getItem('izibrick_cart') || '[]');
    document.getElementById('cart-data').value = JSON.stringify(cart);

    // Soumettre le formulaire
    e.target.submit();
}
</script>
{% endblock %}