{% extends 'base.html.twig' %}

{% trans_default_domain 'Subscribe' %}

{% block title %}
    {{ 'subscribe.title'|trans }}
{% endblock title %}

{% block superBody %}
    {% if mobile is not defined %}
        {{ parent() }}
    {% endif %}
{% endblock %}

{% block stylesheets %}
{{ parent() }}
<style>
:root {
    --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --starter-color: #4CAF50;
    --researcher-color: #2196F3;
    --professional-color: #9C27B0;
    --institution-color: #FF9800;
    --pdf-color: #6c757d;
}

.subscription-hero {
    background: var(--primary-gradient);
    padding: 60px 0;
    color: white;
    text-align: center;
    margin-bottom: 40px;
}

.subscription-hero h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 15px;
}

.subscription-hero p {
    font-size: 1.2rem;
    opacity: 0.9;
    max-width: 700px;
    margin: 0 auto;
}

.subscription-alert {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a5a 100%);
    color: white;
    padding: 15px 25px;
    border-radius: 10px;
    margin-bottom: 30px;
    text-align: center;
    font-weight: 500;
}

.current-subscription {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: white;
    padding: 20px 30px;
    border-radius: 15px;
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.current-subscription h4 {
    margin: 0;
    font-weight: 600;
}

.current-subscription .cancel-btn {
    background: rgba(255,255,255,0.2);
    border: 2px solid white;
    color: white;
    padding: 8px 20px;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s;
}

.current-subscription .cancel-btn:hover {
    background: white;
    color: #11998e;
}

.plans-section {
    padding: 40px 0 60px;
}

.plans-section h2 {
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: #333;
}

.plans-section .section-subtitle {
    text-align: center;
    color: #666;
    margin-bottom: 40px;
    font-size: 1.1rem;
}

.toggle-billing {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-bottom: 40px;
}

.toggle-billing span {
    font-weight: 500;
    color: #666;
}

.toggle-billing span.active {
    color: #667eea;
    font-weight: 600;
}

.toggle-switch {
    position: relative;
    width: 60px;
    height: 30px;
    background: #ddd;
    border-radius: 15px;
    cursor: pointer;
    transition: background 0.3s;
}

.toggle-switch.annual {
    background: #667eea;
}

.toggle-switch::after {
    content: '';
    position: absolute;
    width: 26px;
    height: 26px;
    background: white;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: transform 0.3s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.toggle-switch.annual::after {
    transform: translateX(30px);
}

.save-badge {
    background: #ff6b6b;
    color: white;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
}

.pricing-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    max-width: 1400px;
    margin: 0 auto;
}

.pricing-card {
    background: white;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    position: relative;
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
}

.pricing-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

.pricing-card.popular {
    border: 3px solid #667eea;
}

.pricing-card.popular::before {
    content: '{{ "subscribe.popular"|trans }}';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 5px 20px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.pricing-card.active {
    border: 3px solid #11998e;
}

.pricing-card.active::after {
    content: '{{ "subscribe.current"|trans }}';
    position: absolute;
    top: -12px;
    right: 20px;
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.card-icon {
    width: 60px;
    height: 60px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    font-size: 1.8rem;
}

.card-icon.starter { background: linear-gradient(135deg, #4CAF50 0%, #8BC34A 100%); }
.card-icon.researcher { background: linear-gradient(135deg, #2196F3 0%, #03A9F4 100%); }
.card-icon.professional { background: linear-gradient(135deg, #9C27B0 0%, #E91E63 100%); }
.card-icon.institution { background: linear-gradient(135deg, #FF9800 0%, #FFC107 100%); }
.card-icon.pdf-only { background: linear-gradient(135deg, #6c757d 0%, #868e96 100%); }

.pricing-card h3 {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: #333;
}

.pricing-card .description {
    color: #666;
    font-size: 0.95rem;
    margin-bottom: 20px;
    min-height: 45px;
}

.price-container {
    margin-bottom: 25px;
}

.price {
    font-size: 2.8rem;
    font-weight: 800;
    color: #333;
}

.price-currency {
    font-size: 1.2rem;
    vertical-align: super;
}

.price-period {
    color: #888;
    font-size: 0.95rem;
}

.annual-price {
    display: none;
}

.show-annual .monthly-price {
    display: none;
}

.show-annual .annual-price {
    display: block;
}

.original-price {
    text-decoration: line-through;
    color: #999;
    font-size: 1rem;
    margin-left: 10px;
}

.features-list {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
    flex-grow: 1;
}

.features-list li {
    padding: 10px 0;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.95rem;
    color: #555;
    border-bottom: 1px solid #f0f0f0;
}

.features-list li:last-child {
    border-bottom: none;
}

.features-list li i {
    color: #4CAF50;
    font-size: 1rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.features-list li.highlight {
    color: #333;
    font-weight: 600;
}

.features-list li.ai-feature i {
    color: #667eea;
}

.features-list li.limited i {
    color: #FF9800;
}

.subscribe-btn {
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.subscribe-btn.starter { background: var(--starter-color); color: white; }
.subscribe-btn.researcher { background: var(--researcher-color); color: white; }
.subscribe-btn.professional { background: var(--professional-color); color: white; }
.subscribe-btn.institution { background: var(--institution-color); color: white; }
.subscribe-btn.pdf-only { background: var(--pdf-color); color: white; }
.subscribe-btn.enterprise { 
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); 
    color: white; 
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.subscribe-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
}

.subscribe-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
}

.card-icon.enterprise { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); }

.enterprise-card {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 2px dashed #1a1a2e;
}

.custom-price {
    font-size: 1.8rem !important;
    font-weight: 700;
    color: #1a1a2e;
}

.enterprise-subtitle {
    color: #666;
    font-size: 0.9rem;
    margin-top: 10px;
}

.credits-badge {
    display: inline-block;
    background: #f0f0f0;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    color: #666;
    margin-top: 5px;
}

.pdf-notice {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 10px;
    padding: 15px 20px;
    margin-top: 40px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.pdf-notice i {
    color: #856404;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.pdf-notice p {
    margin: 0;
    color: #856404;
    font-size: 0.95rem;
}

.testimonials-section {
    background: #f8f9fa;
    padding: 60px 0;
    margin-top: 40px;
}

.testimonials-section h2 {
    text-align: center;
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 40px;
    color: #333;
}

.testimonial-card {
    background: white;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

.testimonial-card .quote {
    font-style: italic;
    color: #555;
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 20px;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 15px;
}

.testimonial-author img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.testimonial-author .info h5 {
    margin: 0;
    font-weight: 600;
    color: #333;
}

.testimonial-author .info span {
    font-size: 0.85rem;
    color: #888;
}

.faq-section {
    padding: 60px 0;
}

.faq-section h2 {
    text-align: center;
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 40px;
    color: #333;
}

.alert-messages {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
}

.alert-messages .alert {
    margin-bottom: 10px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

@media (max-width: 768px) {
    .subscription-hero h1 {
        font-size: 1.8rem;
    }
    
    .pricing-cards {
        grid-template-columns: 1fr;
        padding: 0 15px;
    }
    
    .current-subscription {
        flex-direction: column;
        text-align: center;
    }
    
    .price {
        font-size: 2.2rem;
    }
}
</style>
{% endblock %}

{% block body %}
{{ parent() }}

<div class="alert-messages">
    <div id="cancel_alert_success" class="alert alert-success hidden">
        <i class="fa fa-check-circle"></i> {{ 'subscribe.canceledsuccessed'|trans }}
    </div>
    <div id="cancel_alert_error" class="alert alert-danger hidden">
        <i class="fa fa-exclamation-circle"></i> {{ 'subscribe.cancelederror'|trans }}
    </div>
</div>

<div class="subscription-hero">
    <div class="container">
        <h1>{{ 'subscribe.hero.title'|trans }}</h1>
        <p>{{ 'subscribe.hero.subtitle'|trans }}</p>
    </div>
</div>

<div class="container">
    {% if next and not subscribed %}
    <div class="subscription-alert">
        <i class="fa fa-exclamation-triangle"></i> {{ 'subscribe.doSubscribe'|trans }}
    </div>
    {% endif %}

    {% if endSubscribeDate %}
    <div class="current-subscription">
        <div>
            <h4><i class="fa fa-check-circle"></i> {{ 'subscribe.finishedAt'|trans }} {{ endSubscribeDate | NaasArDate }}</h4>
        </div>
        {% if subscribed and not canceled %}
        <button id="cancel" class="cancel-btn">
            <i class="fa fa-times"></i> {{ 'subscribe.cancel'|trans }}
        </button>
        {% endif %}
    </div>
    {% elseif cancel is defined %}
    <div class="alert alert-warning" style="border-radius: 10px;">
        <i class="fa fa-info-circle"></i> {{ 'subscribe.canceled'|trans }}
    </div>
    {% endif %}
</div>

<div class="plans-section">
    <div class="container">
        <h2>{{ 'subscribe.plans.title'|trans }}</h2>
        <p class="section-subtitle">{{ 'subscribe.plans.subtitle'|trans }}</p>

        <div class="toggle-billing">
            <span class="monthly-label active">{{ 'subscribe.billing.monthly'|trans }}</span>
            <div class="toggle-switch" id="billing-toggle"></div>
            <span class="annual-label">{{ 'subscribe.billing.annual'|trans }}</span>
            <span class="save-badge">{{ 'subscribe.billing.save'|trans }}</span>
        </div>

        <div class="pricing-cards" id="pricing-cards">
            
            <!-- PDF Only Plan (Legacy) -->
            <div class="pricing-card {% if activeID == 'monthly' %}active{% endif %}">
                <div class="card-icon pdf-only">📄</div>
                <h3>{{ 'subscribe.pdf.title'|trans }}</h3>
                <p class="description">{{ 'subscribe.pdf.description'|trans }}</p>
                
                <div class="price-container">
                    <div class="monthly-price">
                        <span class="price"><span class="price-currency">$</span>{{ ms_subscripe }}</span>
                        <span class="price-period">/ {{ 'subscribe.per.month'|trans }}</span>
                    </div>
                    <div class="annual-price">
                        <span class="price"><span class="price-currency">$</span>{{ as_subscripe }}</span>
                        <span class="price-period">/ {{ 'subscribe.per.year'|trans }}</span>
                        <span class="original-price">${{ ms_subscripe * 12 }}</span>
                    </div>
                </div>

                <ul class="features-list">
                    <li><i class="fa fa-check"></i> {{ 'subscribe.feature.pdf_download'|trans }} *</li>
                    <li class="limited"><i class="fa fa-minus"></i> {{ 'subscribe.feature.no_translation'|trans }}</li>
                    <li class="limited"><i class="fa fa-minus"></i> {{ 'subscribe.feature.no_ai'|trans }}</li>
                </ul>

                {% if app.user %}
                    {% if activeID == 'monthly' or activeID == 'annual' or activeID == 'basic' %}
                        <button disabled class="subscribe-btn pdf-only">{{ 'subscribe.button.active'|trans }}</button>
                    {% else %}
                        <button id="subscribe-basic-monthly" class="subscribe-btn pdf-only monthly-price" data-price-id="{{ stripe_basic_monthly }}">{{ 'subscribe.button.subscribe'|trans }}</button>
                        <button id="subscribe-basic-annual" class="subscribe-btn pdf-only annual-price" data-price-id="{{ stripe_basic_annual }}">{{ 'subscribe.button.subscribe'|trans }}</button>
                    {% endif %}
                {% else %}
                    <button onclick="window.location = '/login?next={{path('shamra_academia_subscription')}}'" class="subscribe-btn pdf-only">{{ 'subscribe.button.login'|trans }}</button>
                {% endif %}
            </div>

            <!-- Starter Plan -->
            <div class="pricing-card {% if activeID == 'starter' %}active{% endif %}">
                <div class="card-icon starter">🚀</div>
                <h3>{{ 'subscribe.starter.title'|trans }}</h3>
                <p class="description">{{ 'subscribe.starter.description'|trans }}</p>
                
                <div class="price-container">
                    <div class="monthly-price">
                        <span class="price"><span class="price-currency">$</span>9</span>
                        <span class="price-period">/ {{ 'subscribe.per.month'|trans }}</span>
                    </div>
                    <div class="annual-price">
                        <span class="price"><span class="price-currency">$</span>90</span>
                        <span class="price-period">/ {{ 'subscribe.per.year'|trans }}</span>
                        <span class="original-price">$108</span>
                    </div>
                    <span class="credits-badge">500 {{ 'subscribe.credits'|trans }}</span>
                </div>

                <ul class="features-list">
                    <li><i class="fa fa-check"></i> {{ 'subscribe.feature.pdf_download'|trans }} *</li>
                    <li class="limited"><i class="fa fa-minus"></i> {{ 'subscribe.feature.no_translation'|trans }}</li>
                    <li class="ai-feature"><i class="fa fa-robot"></i> 500 {{ 'subscribe.feature.ai_credits'|trans }}</li>
                    <li class="ai-feature"><i class="fa fa-robot"></i> {{ 'subscribe.feature.ai_write'|trans }}</li>
                    <li class="ai-feature"><i class="fa fa-robot"></i> {{ 'subscribe.feature.ai_detection'|trans }}</li>
                    <li><i class="fa fa-check"></i> 50 {{ 'subscribe.feature.requests_day'|trans }}</li>
                </ul>

                {% if app.user %}
                    {% if activeID == 'starter' %}
                        <button disabled class="subscribe-btn starter">{{ 'subscribe.button.active'|trans }}</button>
                    {% else %}
                        <button id="subscribe-starter-monthly" class="subscribe-btn starter monthly-price" data-price-id="{{ stripe_starter_monthly }}">{{ 'subscribe.button.subscribe'|trans }}</button>
                        <button id="subscribe-starter-annual" class="subscribe-btn starter annual-price" data-price-id="{{ stripe_starter_annual }}">{{ 'subscribe.button.subscribe'|trans }}</button>
                    {% endif %}
                {% else %}
                    <button onclick="window.location = '/login?next={{path('shamra_academia_subscription')}}'" class="subscribe-btn starter">{{ 'subscribe.button.login'|trans }}</button>
                {% endif %}
            </div>

            <!-- Researcher Plan (Popular) -->
            <div class="pricing-card popular {% if activeID == 'researcher' %}active{% endif %}">
                <div class="card-icon researcher">🔬</div>
                <h3>{{ 'subscribe.researcher.title'|trans }}</h3>
                <p class="description">{{ 'subscribe.researcher.description'|trans }}</p>
                
                <div class="price-container">
                    <div class="monthly-price">
                        <span class="price"><span class="price-currency">$</span>19</span>
                        <span class="price-period">/ {{ 'subscribe.per.month'|trans }}</span>
                    </div>
                    <div class="annual-price">
                        <span class="price"><span class="price-currency">$</span>199</span>
                        <span class="price-period">/ {{ 'subscribe.per.year'|trans }}</span>
                        <span class="original-price">$228</span>
                    </div>
                    <span class="credits-badge">1,500 {{ 'subscribe.credits'|trans }}</span>
                </div>

                <ul class="features-list">
                    <li class="highlight"><i class="fa fa-check"></i> {{ 'subscribe.feature.pdf_download'|trans }} *</li>
                    <li><i class="fa fa-check"></i> {{ 'subscribe.feature.translation'|trans }}</li>
                    <li class="ai-feature highlight"><i class="fa fa-robot"></i> 1,500 {{ 'subscribe.feature.ai_credits'|trans }}</li>
                    <li class="ai-feature"><i class="fa fa-robot"></i> {{ 'subscribe.feature.ai_write'|trans }}</li>
                    <li class="ai-feature"><i class="fa fa-robot"></i> {{ 'subscribe.feature.ai_references'|trans }}</li>
                    <li class="ai-feature"><i class="fa fa-robot"></i> {{ 'subscribe.feature.ai_detection'|trans }}</li>
                    <li><i class="fa fa-check"></i> 150 {{ 'subscribe.feature.requests_day'|trans }}</li>
                    <li><i class="fa fa-check"></i> {{ 'subscribe.feature.priority_support'|trans }}</li>
                </ul>

                {% if app.user %}
                    {% if activeID == 'researcher' %}
                        <button disabled class="subscribe-btn researcher">{{ 'subscribe.button.active'|trans }}</button>
                    {% else %}
                        <button id="subscribe-researcher-monthly" class="subscribe-btn researcher monthly-price" data-price-id="{{ stripe_researcher_monthly }}">{{ 'subscribe.button.subscribe'|trans }}</button>
                        <button id="subscribe-researcher-annual" class="subscribe-btn researcher annual-price" data-price-id="{{ stripe_researcher_annual }}">{{ 'subscribe.button.subscribe'|trans }}</button>
                    {% endif %}
                {% else %}
                    <button onclick="window.location = '/login?next={{path('shamra_academia_subscription')}}'" class="subscribe-btn researcher">{{ 'subscribe.button.login'|trans }}</button>
                {% endif %}
            </div>

            <!-- Enterprise / University Plan -->
            <div class="pricing-card enterprise-card">
                <div class="card-icon enterprise">🏛️</div>
                <h3>{{ 'subscribe.enterprise.title'|trans }}</h3>
                <p class="description">{{ 'subscribe.enterprise.description'|trans }}</p>
                
                <div class="price-container">
                    <span class="price custom-price">{{ 'subscribe.enterprise.custom'|trans }}</span>
                    <p class="enterprise-subtitle">{{ 'subscribe.enterprise.subtitle'|trans }}</p>
                </div>

                <ul class="features-list">
                    <li class="highlight"><i class="fa fa-check"></i> {{ 'subscribe.feature.pdf_download'|trans }} *</li>
                    <li><i class="fa fa-check"></i> {{ 'subscribe.feature.translation_unlimited'|trans }}</li>
                    <li class="ai-feature highlight"><i class="fa fa-robot"></i> {{ 'subscribe.feature.unlimited_ai'|trans }}</li>
                    <li class="ai-feature"><i class="fa fa-robot"></i> {{ 'subscribe.feature.all_ai'|trans }}</li>
                    <li class="ai-feature"><i class="fa fa-robot"></i> {{ 'subscribe.feature.ai_detection'|trans }}</li>
                    <li><i class="fa fa-check"></i> {{ 'subscribe.feature.dedicated_support'|trans }}</li>
                    <li><i class="fa fa-check"></i> {{ 'subscribe.feature.team_management'|trans }}</li>
                    <li><i class="fa fa-check"></i> {{ 'subscribe.feature.sso'|trans }}</li>
                </ul>

                <a href="https://shamra-academia.com/contactus/" class="subscribe-btn enterprise">
                    <i class="fa fa-envelope"></i> {{ 'subscribe.button.contact'|trans }}
                </a>
            </div>

        </div>

        <div class="pdf-notice">
            <i class="fa fa-info-circle"></i>
            <p>* {{ 'subscribe.pdf_notice'|trans }}</p>
        </div>
    </div>
</div>

<div class="testimonials-section">
    <div class="container">
        <h2>{{ 'subscribe.testimonials.title'|trans }}</h2>
        <div class="row">
            <div class="col-md-6 col-lg-4">
                <div class="testimonial-card">
                    <p class="quote">"{{ 'subscribe.kahina.said'|trans }}"</p>
                    <div class="testimonial-author">
                        <img src="https://shamra-academia.com/uploads/media/cache/profile_pic_public/uploads/profile/img/default_profile_pic_f.png" alt="Kahina">
                        <div class="info">
                            <h5>Kahina Ait Hamouda</h5>
                            <span>{{ 'subscribe.kahina.spec'|trans }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block superJS %}
    {% if mobile is not defined %}
        {{ parent() }}
    {% endif %}
    <script src="https://polyfill.io/v3/polyfill.min.js?version=3.52.1&features=fetch"></script>
    <script src="https://js.stripe.com/v3/"></script>
    <script type="text/javascript">
        var stripe = Stripe("{{ pk_key }}");
        var isAnnual = false;

        // Billing toggle
        var billingToggle = document.getElementById('billing-toggle');
        var pricingCards = document.getElementById('pricing-cards');
        var monthlyLabel = document.querySelector('.monthly-label');
        var annualLabel = document.querySelector('.annual-label');

        billingToggle.addEventListener('click', function() {
            isAnnual = !isAnnual;
            this.classList.toggle('annual', isAnnual);
            pricingCards.classList.toggle('show-annual', isAnnual);
            monthlyLabel.classList.toggle('active', !isAnnual);
            annualLabel.classList.toggle('active', isAnnual);
        });

        // Cancel subscription
        var cancelButton = document.getElementById("cancel");
        if (cancelButton) {
            cancelButton.addEventListener('click', function() {
                if (confirm("{{ 'subscribe.confirm_cancel'|trans }}")) {
                    fetch('{{ path("academia_cancel_subscription") }}', {
                        method: "POST"
                    }).then(function(result) {
                        return result.json();
                    }).then(function(data) {
                        if (data.redirect) {
                            window.location = data.redirect;
                        }
                        if (data.success) {
                            document.getElementById("cancel_alert_success").classList.remove("hidden");
                            setTimeout(function() {
                                window.location.reload();
                            }, 2000);
                        }
                        if (data.error) {
                            document.getElementById("cancel_alert_error").classList.remove("hidden");
                        }
                    });
                }
            });
        }

        // Generic subscription handler
        function handleSubscription(priceId, planType) {
            // GA: track subscription attempt
            if (typeof gtag === 'function') {
                gtag('event', 'begin_checkout', {
                    event_category: 'Subscription',
                    event_label: planType
                });
            }
            {% if subscribed %}
            var confirmed = confirm("{{ 'subscribe.confirm'|trans }}");
            {% else %}
            var confirmed = true;
            {% endif %}

            if (confirmed) {
                fetch('{{ path("academia_checkout_product_test_session") }}', {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json"
                    },
                    body: JSON.stringify({
                        priceId: priceId,
                        planType: planType,
                        next: "{{ next }}"
                    })
                })
                .then(function(result) {
                    return result.json();
                })
                .then(function(data) {
                    if (data.redirect) {
                        window.location = data.redirect;
                    } else if (data.id) {
                        stripe.redirectToCheckout({
                            sessionId: data.id
                        });
                    }
                })
                .catch(function(error) {
                    console.error('Error:', error);
                    alert("{{ 'subscribe.error'|trans }}");
                });
            }
        }

        // Legacy PDF subscriptions (existing plans) - removed, now using new basic plan

        // All subscription buttons (Basic, Starter, Researcher)
        var subscriptionButtons = [
            { id: 'subscribe-basic-monthly', type: 'basic-monthly' },
            { id: 'subscribe-basic-annual', type: 'basic-annual' },
            { id: 'subscribe-starter-monthly', type: 'starter-monthly' },
            { id: 'subscribe-starter-annual', type: 'starter-annual' },
            { id: 'subscribe-researcher-monthly', type: 'researcher-monthly' },
            { id: 'subscribe-researcher-annual', type: 'researcher-annual' }
        ];

        subscriptionButtons.forEach(function(btn) {
            var element = document.getElementById(btn.id);
            if (element) {
                element.addEventListener('click', function() {
                    var priceId = this.getAttribute('data-price-id');
                    if (priceId && priceId !== '') {
                        handleSubscription(priceId, btn.type);
                    } else {
                        alert("{{ 'subscribe.coming_soon'|trans }}");
                    }
                });
            }
        });
    </script>
{% endblock %}