{% extends 'base.html' %}
{% load static %}

{% block title %}Checkout - {{ plano.nome }}{% endblock %}

{% block extra_css %}
<style>
    .checkout-container {
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
    }
    
    .plano-card {
        background: #fff;
        border-radius: 15px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        padding: 30px;
        margin-bottom: 30px;
    }
    
    .voucher-section {
        background: #f8f9fa;
        border-radius: 10px;
        padding: 20px;
        margin: 20px 0;
    }
    
    .voucher-input {
        display: flex;
        gap: 10px;
        margin-bottom: 15px;
    }
    
    .voucher-input input {
        flex: 1;
        padding: 12px;
        border: 2px solid #e9ecef;
        border-radius: 8px;
        font-size: 16px;
        text-transform: uppercase;
    }
    
    .voucher-input input:focus {
        border-color: #007bff;
        outline: none;
    }
    
    .btn-aplicar {
        background: #28a745;
        color: white;
        border: none;
        padding: 12px 20px;
        border-radius: 8px;
        cursor: pointer;
        font-weight: 600;
    }
    
    .btn-aplicar:hover {
        background: #218838;
    }
    
    .voucher-info {
        background: #d4edda;
        border: 1px solid #c3e6cb;
        border-radius: 8px;
        padding: 15px;
        margin-top: 15px;
    }
    
    .voucher-info.gratuito {
        background: #d1ecf1;
        border-color: #bee5eb;
    }
    
    .preco-section {
        background: #fff;
        border: 2px solid #e9ecef;
        border-radius: 10px;
        padding: 20px;
        margin: 20px 0;
    }
    
    .preco-original {
        text-decoration: line-through;
        color: #6c757d;
        font-size: 18px;
    }
    
    .preco-final {
        font-size: 24px;
        font-weight: bold;
        color: #28a745;
    }
    
    .preco-final.gratuito {
        color: #007bff;
    }
    
    .desconto-info {
        color: #28a745;
        font-weight: 600;
    }
    
    .btn-finalizar {
        background: #007bff;
        color: white;
        border: none;
        padding: 15px 30px;
        border-radius: 10px;
        font-size: 18px;
        font-weight: 600;
        cursor: pointer;
        width: 100%;
        margin-top: 20px;
    }
    
    .btn-finalizar:hover {
        background: #0056b3;
    }
    
    .btn-finalizar.gratuito {
        background: #28a745;
    }
    
    .btn-finalizar.gratuito:hover {
        background: #218838;
    }
    
    .erro-voucher {
        background: #f8d7da;
        border: 1px solid #f5c6cb;
        color: #721c24;
        border-radius: 8px;
        padding: 15px;
        margin-top: 15px;
    }
    
    .loading {
        display: none;
        text-align: center;
        padding: 20px;
    }
    
    .spinner {
        border: 4px solid #f3f3f3;
        border-top: 4px solid #007bff;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        animation: spin 1s linear infinite;
        margin: 0 auto 10px;
    }
    
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
</style>
{% endblock %}

{% block content %}
<div class="checkout-container">
    <div class="text-center mb-4">
        <h1>🛒 Checkout</h1>
        <p class="text-muted">Finalize sua compra do plano de anúncio</p>
    </div>
    
    <!-- Informações do Plano -->
    <div class="plano-card">
        <h2>{{ plano.nome }}</h2>
        <p class="text-muted">{{ plano.descricao }}</p>
        
        <div class="row">
            <div class="col-md-6">
                <h5>📋 Detalhes do Plano:</h5>
                <ul class="list-unstyled">
                    <li><strong>Duração:</strong> {{ plano.duracao_dias }} dias</li>
                    <li><strong>Tipo:</strong> {{ plano.get_tipo_display }}</li>
                    <li><strong>Preço Original:</strong> R$ {{ valor_original|floatformat:2 }}</li>
                </ul>
            </div>
            <div class="col-md-6">
                <h5>✨ Benefícios:</h5>
                <ul class="list-unstyled">
                    <li>✅ Destaque no site</li>
                    <li>✅ Maior visibilidade</li>
                    <li>✅ Suporte prioritário</li>
                </ul>
            </div>
        </div>
    </div>
    
    <!-- Seção de Voucher -->
    <div class="voucher-section">
        <h4>🎫 Aplicar Voucher</h4>
        <p class="text-muted">Tem um código de desconto? Digite abaixo!</p>
        
        <form method="post" id="voucher-form">
            {% csrf_token %}
            <div class="voucher-input">
                <input type="text" 
                       name="codigo_voucher" 
                       id="codigo_voucher"
                       placeholder="Digite o código do voucher"
                       value="{% if voucher_aplicado %}{{ voucher_aplicado.codigo }}{% endif %}"
                       {% if voucher_aplicado %}readonly{% endif %}>
                {% if not voucher_aplicado %}
                <button type="submit" class="btn-aplicar" name="acao" value="aplicar_voucher">
                    Aplicar
                </button>
                {% else %}
                <button type="button" class="btn btn-secondary" onclick="removerVoucher()">
                    Remover
                </button>
                {% endif %}
            </div>
        </form>
        
        <!-- Informações do Voucher Aplicado -->
        {% if voucher_aplicado %}
        <div class="voucher-info {% if eh_gratuito %}gratuito{% endif %}">
            <h5>✅ Voucher Aplicado: {{ voucher_aplicado.codigo }}</h5>
            <p><strong>{{ voucher_aplicado.nome }}</strong></p>
            <p>Tipo: {{ voucher_aplicado.get_tipo_desconto_display }}</p>
            {% if eh_gratuito %}
            <p class="text-primary"><strong>🎉 GRATUITO! Seu plano será ativado imediatamente!</strong></p>
            {% endif %}
        </div>
        {% endif %}
        
        <!-- Erro do Voucher -->
        {% if erro_voucher %}
        <div class="erro-voucher">
            <strong>❌ Erro:</strong> {{ erro_voucher }}
        </div>
        {% endif %}
    </div>
    
    <!-- Resumo de Preços -->
    <div class="preco-section">
        <h4>💰 Resumo do Pagamento</h4>
        
        <div class="row">
            <div class="col-md-6">
                <p><strong>Plano:</strong> {{ plano.nome }}</p>
                <p><strong>Preço Original:</strong> R$ {{ valor_original|floatformat:2 }}</p>
                
                {% if voucher_aplicado %}
                <p class="desconto-info">
                    <strong>Desconto Aplicado:</strong> -R$ {{ valor_desconto|floatformat:2 }}
                </p>
                {% endif %}
            </div>
            <div class="col-md-6 text-right">
                <h3 class="preco-final {% if eh_gratuito %}gratuito{% endif %}">
                    {% if eh_gratuito %}
                    🎉 GRATUITO!
                    {% else %}
                    R$ {{ valor_final|floatformat:2 }}
                    {% endif %}
                </h3>
                
                {% if voucher_aplicado and not eh_gratuito %}
                <p class="text-muted">
                    <small>Você economizou R$ {{ valor_desconto|floatformat:2 }}!</small>
                </p>
                {% endif %}
            </div>
        </div>
    </div>
    
    <!-- Botão de Finalizar -->
    <form method="post">
        {% csrf_token %}
        <input type="hidden" name="codigo_voucher" value="{% if voucher_aplicado %}{{ voucher_aplicado.codigo }}{% endif %}">
        <button type="submit" 
                name="acao" 
                value="finalizar_pagamento"
                class="btn-finalizar {% if eh_gratuito %}gratuito{% endif %}"
                onclick="showLoading()">
            {% if eh_gratuito %}
            🎉 Ativar Plano Gratuito
            {% else %}
            💳 Finalizar Pagamento
            {% endif %}
        </button>
    </form>
    
    <!-- Loading -->
    <div class="loading" id="loading">
        <div class="spinner"></div>
        <p>Processando...</p>
    </div>
    
    <!-- Voltar -->
    <div class="text-center mt-4">
        <a href="{% url 'payments:selecionar_plano' %}" class="btn btn-outline-secondary">
            ← Voltar para Planos
        </a>
    </div>
</div>

<script>
function showLoading() {
    document.getElementById('loading').style.display = 'block';
    document.querySelector('.btn-finalizar').style.display = 'none';
}

function removerVoucher() {
    // Recarregar a página sem voucher
    window.location.href = "{% url 'payments:checkout_plano' plano.id %}";
}

// Validação em tempo real do voucher
document.getElementById('codigo_voucher').addEventListener('input', function(e) {
    const codigo = e.target.value.toUpperCase();
    e.target.value = codigo;
});

// Auto-submit do formulário de voucher quando Enter for pressionado
document.getElementById('codigo_voucher').addEventListener('keypress', function(e) {
    if (e.key === 'Enter' && !document.querySelector('.btn-aplicar').disabled) {
        e.preventDefault();
        document.getElementById('voucher-form').submit();
    }
});
</script>
{% endblock %}