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

{% block title %}Simulação 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 bg-warning text-dark">
                    <h4 class="mb-0">🧪 Modo de Teste - Simulação de Pagamento</h4>
                </div>
                <div class="card-body">
                    <div class="alert alert-info">
                        <strong>⚠️ Modo de Teste Ativo</strong><br>
                        Este é um pagamento simulado para testes. Nenhum dinheiro real será cobrado.
                    </div>
                    
                    <h5>Detalhes do Pagamento:</h5>
                    <table class="table table-bordered">
                        <tr>
                            <td><strong>ID da Transação:</strong></td>
                            <td>{{ pagamento.id }}</td>
                        </tr>
                        <tr>
                            <td><strong>Descrição:</strong></td>
                            <td>{{ pagamento.descricao }}</td>
                        </tr>
                        <tr>
                            <td><strong>Valor:</strong></td>
                            <td>R$ {{ pagamento.valor }}</td>
                        </tr>
                        <tr>
                            <td><strong>Status:</strong></td>
                            <td>
                                <span class="badge bg-warning">{{ pagamento.get_status_display }}</span>
                            </td>
                        </tr>
                        <tr>
                            <td><strong>Data de Criação:</strong></td>
                            <td>{{ pagamento.data_criacao|date:"d/m/Y H:i" }}</td>
                        </tr>
                    </table>
                    
                    <div class="mt-4">
                        <h5>Simular Resultado do Pagamento:</h5>
                        <p>Escolha o resultado que deseja simular:</p>
                        
                        <form method="post" class="d-inline">
                            {% csrf_token %}
                            <input type="hidden" name="acao" value="aprovar">
                            <button type="submit" class="btn btn-success btn-lg me-3">
                                ✅ Aprovar Pagamento
                            </button>
                        </form>
                        
                        <form method="post" class="d-inline">
                            {% csrf_token %}
                            <input type="hidden" name="acao" value="rejeitar">
                            <button type="submit" class="btn btn-danger btn-lg">
                                ❌ Rejeitar Pagamento
                            </button>
                        </form>
                    </div>
                    
                    <div class="mt-4">
                        <h6>O que acontece quando você clica:</h6>
                        <ul>
                            <li><strong>✅ Aprovar:</strong> O pagamento será marcado como aprovado, o plano será ativado e você será redirecionado para a página de sucesso.</li>
                            <li><strong>❌ Rejeitar:</strong> O pagamento será marcado como rejeitado e você será redirecionado para a página de falha.</li>
                        </ul>
                    </div>
                    
                    <div class="mt-4">
                        <a href="{% url 'payments:selecionar_plano' %}" class="btn btn-secondary">
                            ← Voltar para Seleção de Planos
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.card {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.card-header {
    border-bottom: 1px solid rgba(0,0,0,.125);
}

.btn-lg {
    padding: 12px 24px;
    font-size: 16px;
}

.alert-info {
    border-left: 4px solid #17a2b8;
}
</style>
{% endblock %}