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

        // Toast notification function
        function showToast(message, type) {
            // Create toast container if doesn't exist
            let toastContainer = document.getElementById('toast-container');
            if (!toastContainer) {
                toastContainer = document.createElement('div');
                toastContainer.id = 'toast-container';
                toastContainer.className = 'toast-container position-fixed top-0 start-0 p-3';
                toastContainer.style.zIndex = '1060';
                toastContainer.style.marginTop = '80px';
                document.body.appendChild(toastContainer);
            }

            // Create toast element
            const toastId = 'toast-' + Date.now();
            const toastElement = document.createElement('div');
            toastElement.innerHTML = `
                <div class="toast align-items-center text-white bg-${type} border-0" role="alert" aria-live="assertive" aria-atomic="true">
                    <div class="d-flex">
                        <div class="toast-body">${message}</div>
                        <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
                    </div>
                </div>
            `;

            toastContainer.appendChild(toastElement);
            const toast = new bootstrap.Toast(toastElement.querySelector('.toast'), { delay: 5000 });
            toast.show();

            // Remove toast element after it's hidden
            toastElement.querySelector('.toast').addEventListener('hidden.bs.toast', function() {
                toastElement.remove();
            });
        }
    </script>
}