{% load static %}
{% load lb_tags %}
<!DOCTYPE html>
<html lang="es" data-theme="labb-light" class="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Checkout | {{ course.title }}</title>
    <link rel="icon" type="image/svg+xml" href="{% static 'courses/img/labb/favicon/favicon.svg' %}">
    <c-lb.m.dependencies />
    <!-- Force CSS Cache Busting -->
    <link rel="stylesheet" href="{% static 'css/output.css' %}?v=2.0.1">
</head>
<body class="min-h-screen bg-zinc-50 text-zinc-900 antialiased selection:bg-emerald-500 selection:text-white">
    <!-- Encabezado Minimalista -->
    <header class="bg-white border-b border-zinc-200/80 h-16 shadow-xs sticky top-0 z-40">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-full flex items-center justify-between">
            <a href="{% url 'courses:course_detail' slug=course.slug %}" class="flex items-center space-x-2 text-zinc-600 hover:text-emerald-700 transition-colors">
                <c-lbi.rmx.arrow-left w="1.25rem" h="1.25rem" />
                <span class="font-bold text-sm tracking-wider uppercase">Volver al curso</span>
            </a>
            <div class="flex items-center space-x-2 text-xs font-bold text-zinc-500 truncate">
                <span class="w-2 h-2 rounded-full bg-amber-500 shrink-0"></span>
                <span class="uppercase tracking-wider font-extrabold text-zinc-800">Checkout Seguro</span>
            </div>
        </div>
    </header>

    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-10">
            <!-- Columna Izquierda: Formulario de Pago (Mock Niubiz) -->
            <div class="space-y-6">
                <div class="bg-white border border-zinc-200 rounded-3xl p-6 sm:p-8 shadow-xl">
                    <div class="flex items-center justify-between mb-8 pb-4 border-b border-zinc-100">
                        <h1 class="text-xl font-black text-zinc-900 tracking-tight">Pago con Tarjeta</h1>
                        <div class="flex items-center gap-2 text-zinc-400">
                            <c-lbi.rmx.visa w="2rem" h="2rem" class="text-blue-600" />
                            <c-lbi.rmx.mastercard w="2rem" h="2rem" class="text-red-500" />
                        </div>
                    </div>

                    <form method="post" action="{% url 'ecommerce:process_payment' slug=course.slug %}" class="space-y-5">
                        {% csrf_token %}
                        
                        <!-- Pestañas de método de pago -->
                        <div class="flex p-1 bg-zinc-100 rounded-xl mb-6">
                            <div class="flex-1 text-center py-2 text-xs font-black uppercase tracking-wider text-emerald-800 bg-white rounded-lg shadow-sm border border-zinc-200 cursor-pointer">
                                Tarjeta (Niubiz)
                            </div>
                            <div class="flex-1 text-center py-2 text-xs font-black uppercase tracking-wider text-zinc-500 hover:text-zinc-700 cursor-not-allowed opacity-60">
                                Transferencia
                            </div>
                        </div>

                        <div>
                            <label class="block text-xs font-bold text-zinc-700 uppercase tracking-wider mb-2">
                                Titular de la Tarjeta
                            </label>
                            <input type="text" placeholder="Ej. Juan Pérez" required class="w-full px-4 py-3 bg-white border border-zinc-300 rounded-xl text-sm font-medium text-zinc-800 focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500 transition-colors">
                        </div>

                        <div>
                            <label class="block text-xs font-bold text-zinc-700 uppercase tracking-wider mb-2">
                                Número de Tarjeta
                            </label>
                            <div class="relative">
                                <input type="text" placeholder="0000 0000 0000 0000" maxlength="19" required class="w-full pl-4 pr-12 py-3 bg-white border border-zinc-300 rounded-xl text-sm font-medium text-zinc-800 focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500 transition-colors tracking-widest font-mono">
                                <div class="absolute right-4 top-1/2 -translate-y-1/2 flex gap-1">
                                    <div class="w-6 h-4 bg-zinc-200 rounded-sm"></div>
                                </div>
                            </div>
                        </div>

                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="block text-xs font-bold text-zinc-700 uppercase tracking-wider mb-2">
                                    Vencimiento
                                </label>
                                <input type="text" placeholder="MM/AA" maxlength="5" required class="w-full px-4 py-3 bg-white border border-zinc-300 rounded-xl text-sm font-medium text-zinc-800 focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500 transition-colors text-center font-mono">
                            </div>
                            <div>
                                <label class="block text-xs font-bold text-zinc-700 uppercase tracking-wider mb-2">
                                    CVV
                                </label>
                                <div class="relative">
                                    <input type="password" placeholder="•••" maxlength="4" required class="w-full px-4 py-3 bg-white border border-zinc-300 rounded-xl text-sm font-medium text-zinc-800 focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500 transition-colors text-center font-mono tracking-[0.3em]">
                                    <c-lbi.rmx.question w="1rem" h="1rem" class="absolute right-3 top-1/2 -translate-y-1/2 text-zinc-400 cursor-help" title="Código de 3 o 4 dígitos en el reverso de tu tarjeta" />
                                </div>
                            </div>
                        </div>

                        <div class="pt-6">
                            <button type="submit" class="w-full py-4 px-6 bg-gradient-to-r from-emerald-600 to-emerald-700 hover:from-emerald-700 hover:to-emerald-800 text-white font-black rounded-xl shadow-lg shadow-emerald-600/20 uppercase tracking-widest text-sm transition-all transform hover:-translate-y-0.5 active:translate-y-0 flex items-center justify-center space-x-3">
                                <c-lbi.rmx.lock-password w="1.25rem" h="1.25rem" />
                                <span>Pagar S/ {{ price_to_pay }}</span>
                            </button>
                        </div>
                    </form>

                    <div class="mt-6 text-center text-xs text-zinc-500 font-medium flex items-center justify-center space-x-2">
                        <c-lbi.rmx.shield-check w="1rem" h="1rem" class="text-emerald-600" />
                        <span>Tus datos están protegidos por encriptación 256-bit.</span>
                    </div>
                </div>
            </div>

            <!-- Columna Derecha: Resumen del Pedido -->
            <div class="space-y-6">
                <div class="bg-zinc-900 rounded-3xl p-6 sm:p-8 shadow-2xl text-white relative overflow-hidden">
                    <div class="absolute top-0 right-0 w-32 h-32 bg-emerald-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20 -mr-10 -mt-10"></div>
                    <div class="absolute bottom-0 left-0 w-32 h-32 bg-amber-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20 -ml-10 -mb-10"></div>
                    
                    <h2 class="text-lg font-black tracking-wider uppercase mb-6 text-zinc-300 border-b border-zinc-800 pb-4 relative z-10">
                        Resumen de Compra
                    </h2>
                    
                    <div class="flex items-start space-x-4 mb-6 relative z-10">
                        <div class="w-24 h-16 bg-zinc-800 rounded-xl flex-shrink-0 flex items-center justify-center border border-zinc-700 overflow-hidden">
                            {% if course.thumbnail %}
                            <img src="{{ course.thumbnail.url }}" alt="Thumbnail" class="w-full h-full object-cover">
                            {% else %}
                            <c-lbi.rmx.book-open w="1.5rem" h="1.5rem" class="text-zinc-500" />
                            {% endif %}
                        </div>
                        <div>
                            <h3 class="font-bold text-sm leading-snug">{{ course.title }}</h3>
                            <p class="text-xs text-zinc-400 mt-1">{{ course.iso_standard }}</p>
                        </div>
                    </div>

                    <div class="space-y-3 border-t border-zinc-800 pt-6 relative z-10">
                        <div class="flex justify-between text-sm font-medium text-zinc-400">
                            <span>Precio original</span>
                            <span class="line-through">S/ {{ course.price }}</span>
                        </div>
                        {% if course.discount_price %}
                        <div class="flex justify-between text-sm font-bold text-emerald-400">
                            <span>Precio especial</span>
                            <span>S/ {{ course.discount_price }}</span>
                        </div>
                        {% endif %}
                        <div class="flex justify-between text-xl font-black text-white pt-3 border-t border-zinc-800 mt-3">
                            <span>Total a pagar</span>
                            <span>S/ {{ price_to_pay }}</span>
                        </div>
                    </div>
                </div>

                <!-- Garantía -->
                <div class="bg-amber-50 rounded-2xl p-5 border border-amber-200 flex items-start space-x-4">
                    <div class="w-10 h-10 rounded-full bg-amber-100 flex items-center justify-center shrink-0">
                        <c-lbi.rmx.medal w="1.25rem" h="1.25rem" class="text-amber-600" />
                    </div>
                    <div>
                        <h4 class="text-sm font-black text-amber-900 tracking-tight">Certificación OIML/ISO</h4>
                        <p class="text-xs text-amber-800/80 mt-1 font-medium leading-relaxed">
                            Al finalizar el programa recibirás un diploma digital verificable válido para auditorías 17025.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
