{% extends "base.html" %}

{% block title %}Finalizar Compra - TallArt{% endblock %}

{% block extra_css %}
<style>
    .checkout-container {
        min-height: 70vh;
        padding: 2rem 0;
    }
    
    .checkout-header {
        background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
        color: white;
        padding: 3rem 0;
        margin-bottom: 3rem;
        border-radius: 0 0 30px 30px;
        box-shadow: 0 10px 30px rgba(139, 92, 246, 0.3);
    }
    
    .checkout-header h1 {
        font-weight: 800;
        margin: 0;
        font-size: 2.5rem;
        display: flex;
        align-items: center;
        gap: 1rem;
        justify-content: center;
    }
    
    .checkout-steps {
        display: flex;
        justify-content: space-between;
        margin-bottom: 3rem;
        padding: 0 1rem;
    }
    
    .step {
        flex: 1;
        text-align: center;
        position: relative;
    }
    
    .step:not(:last-child):after {
        content: '';
        position: absolute;
        top: 20px;
        right: -50%;
        width: 100%;
        height: 2px;
        background: #e5e7eb;
        z-index: 0;
    }
    
    .step.active:not(:last-child):after {
        background: #8B5CF6;
    }
    
    .step-circle {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #e5e7eb;
        color: #9ca3af;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 0.5rem;
        font-weight: bold;
        position: relative;
        z-index: 1;
    }
    
    .step.active .step-circle {
        background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
        color: white;
    }
    
    .step-label {
        font-size: 0.9rem;
        color: #6b7280;
        font-weight: 500;
    }
    
    .step.active .step-label {
        color: #8B5CF6;
        font-weight: 700;
    }
    
    .checkout-form {
        background: white;
        border-radius: 20px;
        padding: 2rem;
        box-shadow: 0 5px 20px rgba(0,0,0,0.08);
        margin-bottom: 2rem;
    }
    
    .form-section {
        margin-bottom: 2rem;
    }
    
    .form-section h3 {
        color: #1f2937;
        font-weight: 700;
        margin-bottom: 1.5rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .form-group {
        margin-bottom: 1.5rem;
    }
    
    .form-group label {
        font-weight: 600;
        color: #4b5563;
        margin-bottom: 0.5rem;
        display: block;
    }
    
    .form-group input,
    .form-group select,
    .form-group textarea {
        width: 100%;
        padding: 0.75rem 1rem;
        border: 2px solid #e5e7eb;
        border-radius: 8px;
        font-size: 1rem;
        transition: all 0.3s ease;
    }
    
    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
        outline: none;
        border-color: #8B5CF6;
        box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
    }
    
    .order-summary {
        background: white;
        border-radius: 20px;
        padding: 2rem;
        box-shadow: 0 5px 20px rgba(0,0,0,0.08);
        position: sticky;
        top: 100px;
    }
    
    .order-summary h3 {
        font-weight: 700;
        color: #1f2937;
        margin-bottom: 1.5rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .cart-item-mini {
        display: flex;
        gap: 1rem;
        padding: 1rem 0;
        border-bottom: 1px solid #e5e7eb;
    }
    
    .cart-item-mini:last-child {
        border-bottom: none;
    }
    
    .cart-item-img {
        width: 60px;
        height: 60px;
        object-fit: cover;
        border-radius: 8px;
        flex-shrink: 0;
    }
    
    .cart-item-info {
        flex: 1;
    }
    
    .cart-item-name {
        font-weight: 600;
        color: #1f2937;
        font-size: 0.9rem;
        margin-bottom: 0.25rem;
    }
    
    .cart-item-quantity {
        color: #6b7280;
        font-size: 0.85rem;
    }
    
    .cart-item-price {
        font-weight: 700;
        color: #8B5CF6;
    }
    
    .summary-item {
        display: flex;
        justify-content: space-between;
        padding: 0.75rem 0;
        border-bottom: 1px solid #e5e7eb;
    }
    
    .summary-item:last-child {
        border-bottom: none;
    }
    
    .summary-total {
        font-weight: 700;
        font-size: 1.5rem;
        color: #8B5CF6;
    }
    
    .btn-checkout {
        background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
        color: white;
        border: none;
        padding: 1rem 2rem;
        border-radius: 12px;
        font-weight: 600;
        font-size: 1.1rem;
        cursor: pointer;
        transition: all 0.3s ease;
        width: 100%;
        margin-top: 1.5rem;
    }
    
    .btn-checkout:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 25px rgba(139, 92, 246, 0.3);
    }
    
    .back-link {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        color: #6b7280;
        text-decoration: none;
        margin-bottom: 2rem;
        transition: all 0.3s ease;
    }
    
    .back-link:hover {
        color: #8B5CF6;
        transform: translateX(-5px);
    }
    
    .security-badge {
        background: #f9fafb;
        border-radius: 12px;
        padding: 1rem;
        margin-top: 1.5rem;
        text-align: center;
    }
    
    .security-badge i {
        font-size: 2rem;
        color: #10b981;
        margin-bottom: 0.5rem;
    }
    
    .security-badge p {
        color: #6b7280;
        font-size: 0.85rem;
        margin: 0;
    }
</style>
{% endblock %}

{% block content %}
<div class="checkout-header">
    <div class="container">
        <h1>🛒 Finalizar Compra</h1>
    </div>
</div>

<div class="container checkout-container">
    <a href="{{ url_for('cart.view_cart') }}" class="back-link">
        ← Volver al Carrito
    </a>

    <!-- Pasos de Checkout -->
    <div class="checkout-steps">
        <div class="step active">
            <div class="step-circle">1</div>
            <div class="step-label">Información</div>
        </div>
        <div class="step">
            <div class="step-circle">2</div>
            <div class="step-label">Envío</div>
        </div>
        <div class="step">
            <div class="step-circle">3</div>
            <div class="step-label">Pago</div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <form method="POST" action="{{ url_for('payments.process_payment') }}" class="checkout-form">
                <!-- Información de Contacto -->
                <div class="form-section">
                    <h3>📧 Información de Contacto</h3>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="nombre">Nombre Completo *</label>
                                <input type="text" id="nombre" name="nombre" 
                                       value="{{ user_data.get('NombreCompleto', '') if user_data else '' }}" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="email">Correo Electrónico *</label>
                                <input type="email" id="email" name="email" 
                                       value="{{ user_data.get('Email', '') if user_data else '' }}" required>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="telefono">Teléfono *</label>
                                <input type="tel" id="telefono" name="telefono" 
                                       value="{{ user_data.get('Telefono', '') if user_data else '' }}"
                                       placeholder="+51 999 999 999" required>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Dirección de Envío -->
                <div class="form-section">
                    <h3>📍 Dirección de Envío</h3>
                    <div class="form-group">
                        <label for="direccion">Dirección Completa *</label>
                        <input type="text" id="direccion" name="direccion" 
                               value="{{ user_data.get('Direccion', '') if user_data else '' }}"
                               placeholder="Calle, número, colonia" required>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="ciudad">Ciudad *</label>
                                <input type="text" id="ciudad" name="ciudad" 
                                       value="{{ user_data.get('Ciudad', '') if user_data else '' }}" required>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="estado">Estado *</label>
                                <input type="text" id="estado" name="estado" 
                                       value="Perú" required>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="codigo_postal">C.P. *</label>
                                <input type="text" id="codigo_postal" name="codigo_postal" 
                                       placeholder="15001" required>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="referencias">Referencias (Opcional)</label>
                        <textarea id="referencias" name="referencias" rows="2" 
                                  placeholder="Entre qué calles, color de la casa, etc."></textarea>
                    </div>
                </div>

                <!-- Método de Pago -->
                <div class="form-section">
                    <h3>💳 Método de Pago</h3>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="payment-method-option">
                                <input type="radio" id="method_card" name="payment_method" value="card" required>
                                <label for="method_card">
                                    <i class="bi bi-credit-card">💳</i>
                                    <span>Tarjeta de Crédito/Débito</span>
                                </label>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="payment-method-option">
                                <input type="radio" id="method_yape" name="payment_method" value="yape" required>
                                <label for="method_yape">
                                    <i class="bi bi-phone">📱</i>
                                    <span>Yape / Plin</span>
                                </label>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="payment-method-option">
                                <input type="radio" id="method_transfer" name="payment_method" value="transfer" required>
                                <label for="method_transfer">
                                    <i class="bi bi-bank">🏦</i>
                                    <span>Transferencia Bancaria</span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Notas Adicionales -->
                <div class="form-section">
                    <h3>📝 Notas del Pedido (Opcional)</h3>
                    <div class="form-group">
                        <label for="notas">¿Alguna instrucción especial?</label>
                        <textarea id="notas" name="notas" rows="3" 
                                  placeholder="Ej: Es un regalo, por favor empaquétalo especialmente"></textarea>
                    </div>
                </div>

                <!-- Botón de Continuar -->
                <button type="submit" class="btn-checkout">
                    🛒 Finalizar y Confirmar Pedido
                </button>
            </form>
        </div>

        <div class="col-lg-4">
            <div class="order-summary">
                <h3>📋 Resumen del Pedido</h3>
                
                <!-- Lista de Productos -->
                <div class="mb-4">
                    {% if cart_items %}
                        {% for item in cart_items %}
                        <div class="cart-item-mini">
                            <img src="{% if item.ImagenPrincipal %}{{ url_for('static', filename='uploads/' + item.ImagenPrincipal) }}{% else %}{{ url_for('static', filename='graficos/Logo.png') }}{% endif %}" 
                                 alt="{{ item.Nombre }}" class="cart-item-img">
                            <div class="cart-item-info">
                                <div class="cart-item-name">{{ item.Nombre }}</div>
                                <div class="cart-item-quantity">Cantidad: {{ item.quantity }}</div>
                            </div>
                            <div class="cart-item-price">
                                ${{ "%.2f"|format(item.subtotal) }}
                            </div>
                        </div>
                        {% endfor %}
                    {% endif %}
                </div>
                
                <!-- Totales -->
                <div class="summary-item">
                    <span>Subtotal</span>
                    <span>${{ "%.2f"|format(total) }}</span>
                </div>
                <div class="summary-item">
                    <span>Envío</span>
                    <span>Por calcular</span>
                </div>
                <div class="summary-item">
                    <span>IVA (16%)</span>
                    <span>${{ "%.2f"|format(total * 0.16) }}</span>
                </div>
                <div class="summary-item">
                    <span class="summary-total">Total</span>
                    <span class="summary-total">${{ "%.2f"|format(total * 1.16) }}</span>
                </div>

                <!-- Badge de Seguridad -->
                <div class="security-badge">
                    <i class="bi bi-shield-check">🔒</i>
                    <p><strong>Compra 100% Segura</strong></p>
                    <p>Tus datos están protegidos</p>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Validación del formulario
document.querySelector('.checkout-form').addEventListener('submit', function(e) {
    const requiredFields = this.querySelectorAll('[required]');
    let isValid = true;
    
    requiredFields.forEach(field => {
        if (!field.value.trim()) {
            isValid = false;
            field.style.borderColor = '#ef4444';
        } else {
            field.style.borderColor = '#e5e7eb';
        }
    });
    
    if (!isValid) {
        e.preventDefault();
        alert('Por favor completa todos los campos requeridos');
    }
});

// Limpiar error al escribir
document.querySelectorAll('input, textarea, select').forEach(field => {
    field.addEventListener('input', function() {
        this.style.borderColor = '#e5e7eb';
    });
});
</script>
{% endblock %}