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

{% block title %}Teste de Pagamento - Allure{% endblock %}

{% block content %}
<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <h3 class="text-center">🧪 Teste de Pagamento - Mercado Pago</h3>
                </div>
                <div class="card-body">
                    
                    <div class="alert alert-info">
                        <h5>📋 Informações do Teste:</h5>
                        <ul>
                            <li><strong>URL Pública:</strong> {{ site_url }}</li>
                            <li><strong>Ambiente:</strong> {% if sandbox %}Teste{% else %}Produção{% endif %}</li>
                            <li><strong>Webhook:</strong> {{ site_url }}/payments/webhook/</li>
                        </ul>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h5>🚀 Teste Boost de Perfil</h5>
                                </div>
                                <div class="card-body">
                                    <form method="post" action="{% url 'payments:criar_pagamento_boost' %}">
                                        {% csrf_token %}
                                        <div class="mb-3">
                                            <label for="duracao_dias" class="form-label">Duração:</label>
                                            <select class="form-control" id="duracao_dias" name="duracao_dias" required>
                                                <option value="7">7 dias - R$ 10,00</option>
                                                <option value="15">15 dias - R$ 18,00</option>
                                                <option value="30">30 dias - R$ 30,00</option>
                                            </select>
                                        </div>
                                        <input type="hidden" name="valor" value="10.00" id="valor_boost">
                                        <button type="submit" class="btn btn-primary w-100">
                                            <i class="fas fa-rocket"></i> Testar Boost
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h5>⭐ Teste Premium</h5>
                                </div>
                                <div class="card-body">
                                    <form method="post" action="{% url 'payments:criar_pagamento_premium' %}">
                                        {% csrf_token %}
                                        <div class="mb-3">
                                            <label for="plano" class="form-label">Plano:</label>
                                            <select class="form-control" id="plano" name="plano" required>
                                                <option value="mensal">Mensal - R$ 29,90</option>
                                                <option value="trimestral">Trimestral - R$ 79,90</option>
                                                <option value="semestral">Semestral - R$ 149,90</option>
                                                <option value="anual">Anual - R$ 279,90</option>
                                            </select>
                                        </div>
                                        <input type="hidden" name="valor" value="29.90" id="valor_premium">
                                        <button type="submit" class="btn btn-success w-100">
                                            <i class="fas fa-crown"></i> Testar Premium
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="mt-4">
                        <div class="card">
                            <div class="card-header">
                                <h5>📊 Status do Sistema</h5>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="text-center">
                                            <i class="fas fa-database fa-2x text-primary"></i>
                                            <p class="mt-2"><strong>Banco de Dados</strong><br>
                                            <span class="badge bg-success">Conectado</span></p>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="text-center">
                                            <i class="fas fa-link fa-2x text-info"></i>
                                            <p class="mt-2"><strong>ngrok</strong><br>
                                            <span class="badge bg-success">Ativo</span></p>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="text-center">
                                            <i class="fab fa-mercado-pago fa-2x text-success"></i>
                                            <p class="mt-2"><strong>Mercado Pago</strong><br>
                                            <span class="badge bg-success">Configurado</span></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="mt-4">
                        <div class="alert alert-warning">
                            <h6>⚠️ Dados de Teste:</h6>
                            <p><strong>Cartão de Teste:</strong> 5031 4332 1540 6351</p>
                            <p><strong>CVV:</strong> 123 | <strong>Vencimento:</strong> Qualquer data futura</p>
                            <p><strong>CPF:</strong> 12345678909 | <strong>Nome:</strong> Qualquer nome</p>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Atualizar valores baseado na seleção
document.getElementById('duracao_dias').addEventListener('change', function() {
    const valores = {
        '7': 10.00,
        '15': 18.00,
        '30': 30.00
    };
    document.getElementById('valor_boost').value = valores[this.value];
});

document.getElementById('plano').addEventListener('change', function() {
    const valores = {
        'mensal': 29.90,
        'trimestral': 79.90,
        'semestral': 149.90,
        'anual': 279.90
    };
    document.getElementById('valor_premium').value = valores[this.value];
});
</script>
{% endblock %}