{% extends "base.html" %}

{% block title %}Métodos de Pago - TallArt{% endblock %}

{% block extra_css %}
<style>
    .payment-container {
        min-height: 70vh;
        padding: 2rem 0;
    }
    
    .payment-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);
    }
    
    .payment-header h1 {
        font-weight: 800;
        margin: 0;
        font-size: 2.5rem;
        display: flex;
        align-items: center;
        gap: 1rem;
        justify-content: center;
    }
    
    .payment-methods {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 2rem;
        margin-bottom: 3rem;
    }
    
    .payment-method-card {
        background: white;
        padding: 2rem;
        border-radius: 20px;
        box-shadow: 0 5px 20px rgba(0,0,0,0.08);
        text-align: center;
        transition: all 0.3s ease;
        cursor: pointer;
        border: 3px solid transparent;
    }
    
    .payment-method-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 15px 35px rgba(139, 92, 246, 0.2);
        border-color: #8B5CF6;
    }
    
    .payment-method-card.selected {
        border-color: #8B5CF6;
        background: linear-gradient(135deg, rgba(139, 92, 246, 0.05) 0%, rgba(236, 72, 153, 0.05) 100%);
    }
    
    .payment-icon {
        font-size: 4rem;
        margin-bottom: 1rem;
    }
    
    .payment-name {
        font-size: 1.5rem;
        font-weight: 700;
        color: #1f2937;
        margin-bottom: 0.5rem;
    }
    
    .payment-description {
        color: #6b7280;
        font-size: 0.95rem;
        margin-bottom: 1.5rem;
    }
    
    .payment-features {
        list-style: none;
        padding: 0;
        margin: 1rem 0;
        text-align: left;
    }
    
    .payment-features li {
        padding: 0.5rem 0;
        color: #4b5563;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .payment-features li:before {
        content: "✓";
        color: #10b981;
        font-weight: bold;
        font-size: 1.2rem;
    }
    
    .btn-select-payment {
        background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
        color: white;
        border: none;
        padding: 1rem 2rem;
        border-radius: 12px;
        font-weight: 600;
        font-size: 1rem;
        cursor: pointer;
        transition: all 0.3s ease;
        width: 100%;
    }
    
    .btn-select-payment:hover {
        transform: scale(1.05);
        box-shadow: 0 10px 25px rgba(139, 92, 246, 0.3);
    }
    
    .order-summary {
        background: white;
        padding: 2rem;
        border-radius: 20px;
        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;
    }
    
    .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;
    }
    
    .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);
    }
</style>
{% endblock %}

{% block content %}
<div class="payment-header">
    <div class="container">
        <h1>Métodos de Pago</h1>
    </div>
</div>

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

    <div class="row">
        <div class="col-lg-8">
            <h2 class="mb-4">Selecciona tu método de pago</h2>
            
            <form method="POST" action="{{ url_for('payments.process_payment') }}" id="paymentForm">
                <input type="hidden" name="amount" value="{{ session.get('cart_total', 0) }}">
                <div class="payment-methods">
                    <!-- Tarjeta de Crédito/Débito -->
                    <div class="payment-method-card" onclick="selectPayment('card')">
                        <div class="payment-icon">💳</div>
                        <div class="payment-name">Tarjeta</div>
                        <div class="payment-description">Crédito o Débito</div>
                        <ul class="payment-features">
                            <li>Pago instantáneo</li>
                            <li>Seguro y protegido</li>
                            <li>Todas las tarjetas</li>
                        </ul>
                        <input type="radio" name="payment_method" value="card" class="d-none" id="card">
                        <button type="button" class="btn-select-payment" onclick="submitPayment('card')">
                            Pagar con Tarjeta
                        </button>
                    </div>

                    <!-- PayPal -->
                    <div class="payment-method-card" onclick="selectPayment('paypal')">
                        <div class="payment-icon">🅿️</div>
                        <div class="payment-name">PayPal</div>
                        <div class="payment-description">Pago seguro con PayPal</div>
                        <ul class="payment-features">
                            <li>Protección al comprador</li>
                            <li>Sin compartir datos</li>
                            <li>Rápido y fácil</li>
                        </ul>
                        <input type="radio" name="payment_method" value="paypal" class="d-none" id="paypal">
                        <button type="button" class="btn-select-payment" onclick="submitPayment('paypal')">
                            Pagar con PayPal
                        </button>
                    </div>

                    <!-- Yape -->
                    <div class="payment-method-card" onclick="selectPayment('yape')">
                        <div class="payment-icon">💜</div>
                        <div class="payment-name">Yape</div>
                        <div class="payment-description">Pago móvil instantáneo</div>
                        <ul class="payment-features">
                            <li>Pago instantáneo</li>
                            <li>Sin comisiones</li>
                            <li>100% seguro</li>
                        </ul>
                        <input type="radio" name="payment_method" value="yape" class="d-none" id="yape">
                        <button type="button" class="btn-select-payment" onclick="submitPayment('yape')">
                            Pagar con Yape
                        </button>
                    </div>

                    <!-- Transferencia Bancaria -->
                    <div class="payment-method-card" onclick="selectPayment('transfer')">
                        <div class="payment-icon">🏦</div>
                        <div class="payment-name">Transferencia</div>
                        <div class="payment-description">Transferencia bancaria</div>
                        <ul class="payment-features">
                            <li>Sin comisiones extra</li>
                            <li>Envío de comprobante</li>
                            <li>Verificación 24-48h</li>
                        </ul>
                        <input type="radio" name="payment_method" value="transfer" class="d-none" id="transfer">
                        <button type="button" class="btn-select-payment" onclick="submitPayment('transfer')">
                            Pagar con Transferencia
                        </button>
                    </div>
                </div>
            </form>
        </div>

        <div class="col-lg-4">
            <div class="order-summary">
                <h3>📋 Resumen del Pedido</h3>
                
                <div class="summary-item">
                    <span>Subtotal</span>
                    <span>${{ "%.2f"|format(session.get('cart_total', 0)) }}</span>
                </div>
                <div class="summary-item">
                    <span>Envío</span>
                    <span>Por calcular</span>
                </div>
                <div class="summary-item">
                    <span class="summary-total">Total</span>
                    <span class="summary-total">${{ "%.2f"|format(session.get('cart_total', 0)) }}</span>
                </div>

                <div class="mt-4">
                    <p class="text-muted small">
                        <i class="bi bi-shield-check"></i>
                        Compra 100% segura y protegida
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function selectPayment(method) {
    // Remover selección previa
    document.querySelectorAll('.payment-method-card').forEach(card => {
        card.classList.remove('selected');
    });
    
    // Seleccionar el método
    event.currentTarget.classList.add('selected');
    document.getElementById(method).checked = true;
}

function submitPayment(method) {
    event.preventDefault();
    event.stopPropagation();
    
    const amount = parseFloat(document.querySelector('input[name="amount"]').value);
    
    if (amount <= 0) {
        alert('El carrito está vacío');
        window.location.href = '{{ url_for("cart.view_cart") }}';
        return;
    }
    
    document.getElementById(method).checked = true;
    document.getElementById('paymentForm').submit();
}
</script>
{% endblock %}