QrRapido/Views/Pagamento/SelecaoPlano.cshtml

@model QRRapidoApp.Models.ViewModels.SelecaoPlanoViewModel
@{
    ViewData["Title"] = "Escolha seu Plano Premium";
    Layout = "~/Views/Shared/_Layout.cshtml";
    var monthlyPlan = Model.Plans.FirstOrDefault(p => p.Interval == "month");
    var yearlyPlan = Model.Plans.FirstOrDefault(p => p.Interval == "year");
    var monthlyPrice = monthlyPlan?.PricesByCountry.GetValueOrDefault(Model.CountryCode)?.Amount ?? 0;
    var yearlyPrice = yearlyPlan?.PricesByCountry.GetValueOrDefault(Model.CountryCode)?.Amount ?? 0;
    var yearlySavings = (monthlyPrice * 12) - yearlyPrice;
}

<div class="container mt-5">
    <div class="text-center mb-5">
        <h1 class="display-4">Desbloqueie o Poder Total do QRRápido</h1>
        <p class="lead text-muted">Acesso sem limites, sem anúncios e com recursos exclusivos para máxima produtividade.</p>
    </div>

    <div class="row justify-content-center g-4">
        <!-- Plano Mensal -->
        @if (monthlyPlan != null)
        {
            <div class="col-lg-4 col-md-6">
                <div class="card h-100 shadow-sm">
                    <div class="card-body d-flex flex-column">
                        <h3 class="card-title text-center">Plano Mensal</h3>
                        <div class="text-center my-4">
                            <span class="display-4 fw-bold">R$ @monthlyPrice.ToString("0.00")</span>
                            <span class="text-muted">/mês</span>
                        </div>
                        <p class="text-center text-muted">Ideal para começar a explorar os recursos premium.</p>
                        <button class="btn btn-outline-primary mt-auto checkout-btn" data-plan-id="@monthlyPlan.Id">Assinar Agora</button>
                    </div>
                </div>
            </div>
        }

        <!-- Plano Anual -->
        @if (yearlyPlan != null)
        {
            <div class="col-lg-4 col-md-6">
                <div class="card h-100 shadow border-primary">
                    <div class="card-header bg-primary text-white text-center">
                        <h3 class="card-title mb-0">Plano Anual</h3>
                        <p class="mb-0">Recomendado</p>
                    </div>
                    <div class="card-body d-flex flex-column">
                        <div class="text-center my-4">
                            <span class="display-4 fw-bold">R$ @yearlyPrice.ToString("0.00")</span>
                            <span class="text-muted">/ano</span>
                        </div>
                        @if (yearlySavings > 0)
                        {
                            <div class="text-center mb-3">
                                <span class="badge bg-success">Economize R$ @yearlySavings.ToString("0.00")!</span>
                            </div>
                        }
                        <p class="text-center text-muted">O melhor custo-benefício para usuários frequentes.</p>
                        <button class="btn btn-primary mt-auto checkout-btn" data-plan-id="@yearlyPlan.Id">Assinar Plano Anual</button>
                    </div>
                </div>
            </div>
        }
    </div>

    <!-- Lista de Recursos -->
    <div class="row justify-content-center mt-5">
        <div class="col-lg-8">
            <h3 class="text-center mb-4">Todos os planos incluem:</h3>
            <ul class="list-group list-group-flush">
                <li class="list-group-item border-0"><i class="fas fa-check-circle text-success me-2"></i>QR codes ilimitados</li>
                <li class="list-group-item border-0"><i class="fas fa-check-circle text-success me-2"></i>Sem anúncios</li>
                <li class="list-group-item border-0"><i class="fas fa-check-circle text-success me-2"></i>QR codes dinâmicos</li>
                <li class="list-group-item border-0"><i class="fas fa-check-circle text-success me-2"></i>Analytics em tempo real</li>
                <li class="list-group-item border-0"><i class="fas fa-check-circle text-success me-2"></i>Suporte prioritário</li>
            </ul>
        </div>
    </div>
</div>

@section Scripts {
    <script>
        document.querySelectorAll('.checkout-btn').forEach(button => {
            button.addEventListener('click', async function() {
                const planId = this.dataset.planId;
                this.disabled = true;
                this.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Redirecionando...';

                try {
                    const response = await fetch('/Pagamento/CreateCheckout', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded',
                        },
                        body: `planId=${planId}`
                    });

                    const result = await response.json();

                    if (result.success) {
                        window.location.href = result.url;
                    } else {
                        alert('Erro: ' + result.error);
                        this.disabled = false;
                        this.innerHTML = 'Assinar Agora'; // Reset button text
                    }
                } catch (error) {
                    console.error('Checkout error:', error);
                    alert('Ocorreu um erro ao iniciar o pagamento. Tente novamente.');
                    this.disabled = false;
                    this.innerHTML = 'Assinar Agora'; // Reset button text
                }
            });
        });
    </script>
}