QrRapido/Views/Pagamento/SelecaoPlano.cshtml

@using Microsoft.Extensions.Localization
@model QRRapidoApp.Models.ViewModels.SelecaoPlanoViewModel
@inject IStringLocalizer<QRRapidoApp.Resources.SharedResource> Localizer
@{
    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">@Localizer["UnlockFullPowerQRRapido"]</h1>
        <p class="lead text-muted">@Localizer["UnlimitedAccessNoAdsExclusive"]</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">@Localizer["MonthlyPlan"]</h3>
                        <div class="text-center my-4">
                            <span class="display-4 fw-bold">R$ @monthlyPrice.ToString("0.00")</span>
                            <span class="text-muted">@Localizer["PerMonth"]</span>
                        </div>
                        <p class="text-center text-muted">@Localizer["IdealToStartExploring"]</p>
                        <button class="btn btn-outline-primary mt-auto checkout-btn" data-plan-id="@monthlyPlan.Id">@Localizer["SubscribeNow"]</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">@Localizer["AnnualPlan"]</h3>
                        <p class="mb-0">@Localizer["Recommended"]</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">@Localizer["PerYear"]</span>
                        </div>
                        @if (yearlySavings > 0)
                        {
                            <div class="text-center mb-3">
                                <span class="badge bg-success">@Localizer["SaveMoney"] @yearlySavings.ToString("0.00")!</span>
                            </div>
                        }
                        <p class="text-center text-muted">@Localizer["BestValueFrequentUsers"]</p>
                        <button class="btn btn-primary mt-auto checkout-btn" data-plan-id="@yearlyPlan.Id">@Localizer["SubscribeAnnualPlan"]</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">@Localizer["AllPlansInclude"]</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>@Localizer["UnlimitedQRCodes"]</li>
                <li class="list-group-item border-0"><i class="fas fa-check-circle text-success me-2"></i>@Localizer["NoAds"]</li>
                <li class="list-group-item border-0"><i class="fas fa-check-circle text-success me-2"></i>@Localizer["DynamicQRCodes"]</li>
                <li class="list-group-item border-0"><i class="fas fa-check-circle text-success me-2"></i>@Localizer["RealTimeAnalytics"]</li>
                <li class="list-group-item border-0"><i class="fas fa-check-circle text-success me-2"></i>@Localizer["PrioritySupport"]</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> @Localizer["Redirecting"]';

                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('@Localizer["Error"] ' + result.error);
                        this.disabled = false;
                        this.innerHTML = '@Localizer["SubscribeNow"]'; // Reset button text
                    }
                } catch (error) {
                    console.error('Checkout error:', error);
                    alert('@Localizer["PaymentInitializationError"]');
                    this.disabled = false;
                    this.innerHTML = 'Assinar Agora'; // Reset button text
                }
            });
        });
    </script>
}