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

{% block title %}{{ 'subscription_plans.meta.title'|trans }}{% endblock %}

{% set body_class = 'page-with-hero' %}

{% block hero %}
<!-- Hero Section -->
<section class="hero-section subscription-hero">
    <div class="container">
        <div class="hero-content" data-aos="fade-up" data-aos-duration="1000">
            <h1 class="display-4">{{ 'subscription_plans.header.title'|trans }}</h1>
            <p class="lead">
                    {{ 'subscription_plans.header.subtitle'|trans }}
                </p>
                
                {% if member and member.hasActiveTrial %}
                    {% set trial = member.activeTrial %}
                <div class="alert alert-success mx-auto trial-alert">
                        <i class="fas fa-clock me-2"></i>
                        <strong>{{ 'subscription_plans.trial.active'|trans({'%plan%': trial.plan.label}) }}</strong><br>
                        <small>{{ 'subscription_plans.trial.remaining'|trans({'%days%': trial.remainingDays, '%end_date%': trial.endDate|date('d/m/Y')}) }}</small>
                    </div>
                {% endif %}
                
                <!-- Toggle mensuel/annuel pour PREMIUM -->
                {% if plans.PREMIUM is defined and plans.PREMIUM.supports_annual %}
                <div class="billing-toggle-section">
                    <div class="billing-toggle">
                        <span class="me-3">{{ 'subscription_plans.billing.monthly'|trans }}</span>
                        <div class="form-check form-switch form-check-reverse">
                            <input class="form-check-input" type="checkbox" id="billingToggle">
                            <label class="form-check-label ms-3" for="billingToggle">
                                {{ 'subscription_plans.billing.yearly'|trans }} 
                                <span class="badge bg-success ms-1">{{ 'subscription_plans.billing.discount'|trans({'%discount%': plans.PREMIUM.annual_discount}) }}</span>
                            </label>
                        </div>
                        </div>
                    </div>
                {% endif %}
        </div>
    </div>
</section>
{% endblock %}

{% block body %}
<div class="container py-5">
    <div class="row g-4 justify-content-center">
        {% for planKey, plan in plans %}
            {% if plan.is_available %}
                <div class="col-lg-4 col-md-6">
                    <div class="pricing-card h-100 {% if plan.is_popular %}featured{% endif %}">
                        {% if plan.is_popular %}
                            <div class="popular-badge">
                                <i class="fas fa-star me-1"></i>{{ 'subscription_plans.plan.most_popular'|trans }}
                        </div>
                    {% endif %}
                    
                        {% if plan.can_have_trial and plan.trial_days > 0 %}
                            <div class="trial-badge">
                                    <i class="fas fa-gift me-1"></i>{{ 'subscription_plans.plan.free_days'|trans({'%days%': plan.trial_days}) }}
                            </div>
                        {% endif %}
                        
                        <div class="pricing-header">
                            <h3 class="plan-name">{{ plan.name }}</h3>
                            <div class="pricing-display">
                                    {% if plan.price_monthly == 0 %}
                                    <span class="price-amount text-success">{{ 'subscription_plans.plan.free'|trans }}</span>
                                {% else %}
                                            <!-- Prix mensuel -->
                                            <div class="monthly-pricing">
                                        <span class="price-amount">{{ plan.price_monthly }}€</span>
                                        <span class="price-period">{{ 'subscription_plans.plan.per_month'|trans }}</span>
                                            </div>
                                            
                                            <!-- Prix annuel (si supporté) -->
                                            {% if plan.supports_annual and plan.price_yearly %}
                                                <div class="yearly-pricing d-none">
                                            <span class="price-amount">{{ plan.price_yearly }}€</span>
                                            <span class="price-period">{{ 'subscription_plans.plan.per_year'|trans }}</span>
                                                    <br>
                                                    <small class="text-success">
                                                        <del class="text-muted">{{ (plan.price_monthly * 12) }}€</del>
                                                        {{ 'subscription_plans.plan.savings'|trans({'%amount%': (plan.price_monthly * 12) - plan.price_yearly}) }}
                                                    </small>
                                                </div>
                                            {% endif %}
                                {% endif %}
                        </div>
                    </div>
                    
                        <div class="plan-features">
                            <ul>
                                {% if plan.max_items == -1 %}
                                    <li>
                                        <i class="fas fa-infinity text-success"></i>
                                        <strong>{{ 'subscription_plans.features.unlimited_objects'|trans }}</strong>
                                    </li>
                                {% elseif plan.max_items == 0 %}
                                    <li>
                                        <i class="fas fa-eye text-info"></i>
                                        <strong>{{ 'subscription_plans.features.view_only'|trans }}</strong>
                                    </li>
                                {% else %}
                                    <li>
                                        <i class="fas fa-box text-primary"></i>
                                        <strong>{{ 'subscription_plans.features.max_objects'|trans({'%count%': plan.max_items}) }}</strong>
                                    </li>
                                {% endif %}
                                
                            {% for feature in plan.features %}
                                    <li>
                                        <i class="fas fa-check text-success"></i>
                                    {{ feature }}
                                </li>
                            {% endfor %}
                                
                                {% if plan.can_have_trial and plan.trial_days > 0 %}
                                    <li>
                                        <i class="fas fa-gift text-warning"></i>
                                        <strong>{{ 'subscription_plans.features.free_trial'|trans({'%days%': plan.trial_days}) }}</strong>
                                    </li>
                                {% endif %}
                        </ul>
                    </div>
                    
                        <div class="plan-cta">
                        {% if currentPlan and currentPlan.value == planKey %}
                                {% if member and member.hasActiveTrial %}
                                    <button class="btn btn-warning mb-2">
                                        <i class="fas fa-clock me-2"></i>{{ plan.button_text }}
                                    </button>
                                    <button class="btn btn-outline-danger cancel-trial-btn">
                                        <i class="fas fa-times me-2"></i>{{ 'subscription_plans.buttons.cancel_trial'|trans }}
                                    </button>
                                {% else %}
                                    <button class="btn btn-outline-secondary disabled">
                                        <i class="fas fa-check me-2"></i>{{ plan.button_text }}
                            </button>
                                {% endif %}
                        {% elseif planKey == 'FREE' %}
                                {% if member %}
                                    <button class="btn btn-outline-primary disabled">
                                        {{ 'subscription_plans.buttons.free_plan_available'|trans }}
                            </button>
                                {% else %}
                                    <a href="{{ path('app_register_choice') }}" class="btn btn-primary">
                                        <i class="fas fa-user-plus me-2"></i>{{ 'subscription_plans.buttons.free_registration'|trans }}
                                    </a>
                                {% endif %}
                        {% else %}
                            {% if member %}
                                    {% if plan.can_have_trial and plan.trial_days > 0 %}
                                        <button class="btn btn-success mb-2 start-trial-btn" 
                                        data-plan="{{ planKey|lower }}"
                                        data-plan-name="{{ plan.name }}">
                                            <i class="fas fa-gift me-2"></i>{{ 'subscription_plans.buttons.start_free_trial'|trans }}
                                        </button>
                                        <button class="btn {% if plan.is_popular %}btn-primary{% else %}btn-outline-primary{% endif %} subscribe-btn" 
                                                data-plan="{{ planKey|lower }}"
                                                data-plan-name="{{ plan.name }}"
                                                data-supports-annual="{{ plan.supports_annual ? 'true' : 'false' }}">
                                            <i class="fas fa-credit-card me-2"></i>{{ 'subscription_plans.buttons.subscribe_directly'|trans }}
                                        </button>
                                    {% else %}
                                        <button class="btn {% if plan.is_popular %}btn-primary{% else %}btn-outline-primary{% endif %} subscribe-btn" 
                                                data-plan="{{ planKey|lower }}"
                                                data-plan-name="{{ plan.name }}"
                                                data-supports-annual="{{ plan.supports_annual ? 'true' : 'false' }}">
                                    {{ plan.button_text }}
                                </button>
                                    {% endif %}
                            {% else %}
                                    <a href="{{ path('app_login') }}" class="btn {% if plan.is_popular %}btn-primary{% else %}btn-outline-primary{% endif %}">
                                    {{ 'subscription_plans.buttons.login_to_subscribe'|trans }}
                                </a>
                            {% endif %}
                        {% endif %}
                    </div>
                </div>
            </div>
            {% endif %}
        {% endfor %}
    </div>
    
    <!-- Section accompagnement -->
    <div class="subscription-support">
        <div class="support-card">
            <h3 class="mb-4">
                <i class="fas fa-question-circle me-2"></i>
                        {{ 'subscription_plans.help.title'|trans }}
                    </h3>
            <p class="lead mb-4">
                        {% if canHaveTrial %}
                            {{ 'subscription_plans.help.trial_description'|trans|nl2br }}
                        {% else %}
                    {{ 'subscription_plans.help.description'|trans|nl2br }}
                        {% endif %}
                    </p>
            
            <div class="support-grid">
                <div class="support-item">
                    <i class="fas fa-phone fa-2x mb-3"></i>
                    <h5>{{ 'subscription_plans.contact.phone_title'|trans }}</h5>
                    <p>
                        {{ 'subscription_plans.contact.phone_description'|trans }}
                        <strong>{{ 'subscription_plans.contact.phone_number'|trans }}</strong>
                    </p>
                </div>
                
                <div class="support-item">
                    <i class="fas fa-envelope fa-2x mb-3"></i>
                    <h5>{{ 'subscription_plans.contact.email_title'|trans }}</h5>
                    <p>
                        {{ 'subscription_plans.contact.email_description'|trans }}
                        <a href="mailto:{{ 'subscription_plans.contact.email_address'|trans }}">{{ 'subscription_plans.contact.email_address'|trans }}</a>
                    </p>
                </div>
                
                <div class="support-item">
                    <i class="fas fa-clock fa-2x mb-3"></i>
                    <h5>{{ 'subscription_plans.contact.hours_title'|trans }}</h5>
                    <p>
                        {{ 'subscription_plans.contact.hours_description'|trans }}
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Loading Modal -->
<div class="modal fade" id="loadingModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0">
            <div class="modal-body text-center py-5">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">{{ 'subscription_plans.loading.loading'|trans }}</span>
                </div>
                <h5 class="mt-3">{{ 'subscription_plans.loading.redirect_stripe'|trans }}</h5>
                <p class="text-muted">{{ 'subscription_plans.loading.please_wait'|trans }}</p>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const subscribeButtons = document.querySelectorAll('.subscribe-btn');
    const startTrialButtons = document.querySelectorAll('.start-trial-btn');
    const cancelTrialButtons = document.querySelectorAll('.cancel-trial-btn');
    const billingToggle = document.getElementById('billingToggle');
    const loadingModal = new bootstrap.Modal(document.getElementById('loadingModal'));
    
    // Gestion du toggle mensuel/annuel
    if (billingToggle) {
        billingToggle.addEventListener('change', function() {
            const monthlyPricing = document.querySelectorAll('.monthly-pricing');
            const yearlyPricing = document.querySelectorAll('.yearly-pricing');
            
            if (this.checked) {
                // Afficher les prix annuels
                monthlyPricing.forEach(el => el.classList.add('d-none'));
                yearlyPricing.forEach(el => el.classList.remove('d-none'));
            } else {
                // Afficher les prix mensuels
                monthlyPricing.forEach(el => el.classList.remove('d-none'));
                yearlyPricing.forEach(el => el.classList.add('d-none'));
            }
        });
    }
    
    // Gestion des abonnements
    subscribeButtons.forEach(button => {
        button.addEventListener('click', async function() {
            const plan = this.dataset.plan;
            const planName = this.dataset.planName;
            const supportsAnnual = this.dataset.supportsAnnual === 'true';
            
            // Déterminer l'intervalle (mensuel ou annuel)
            const interval = (supportsAnnual && billingToggle && billingToggle.checked) ? 'year' : 'month';
            const intervalText = interval === 'year' ? '{{ 'subscription_plans.js.yearly'|trans }}' : '{{ 'subscription_plans.js.monthly'|trans }}';
            
            // Confirmer l'action
            if (!confirm(`{{ 'subscription_plans.js.confirm_subscribe'|trans }}`.replace('%plan%', planName).replace('%interval%', intervalText))) {
                return;
            }
            
            // Afficher le modal de chargement
            loadingModal.show();
            
            try {
                const response = await fetch(`/subscription/checkout/${plan}`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: `interval=${interval}&with_trial=false`
                });
                
                const data = await response.json();
                
                if (data.error) {
                    loadingModal.hide();
                    alert('{{ 'subscription_plans.loading.error'|trans }}: ' + data.error);
                    return;
                }
                
                // Rediriger vers Stripe Checkout
                window.location.href = data.checkout_url;
                
            } catch (error) {
                loadingModal.hide();
                alert('{{ 'subscription_plans.js.error_occurred'|trans }}');
                console.error('Erreur:', error);
            }
        });
    });
    
    // Gestion des périodes d'essai
    startTrialButtons.forEach(button => {
        button.addEventListener('click', async function() {
            const plan = this.dataset.plan;
            const planName = this.dataset.planName;
            
            if (!confirm(`{{ 'subscription_plans.js.confirm_start_trial'|trans }}`.replace('%plan%', planName))) {
                return;
            }
            
            try {
                const response = await fetch(`/subscription/start-trial/${plan}`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    }
                });
                
                const data = await response.json();
                
                if (data.error) {
                    alert('{{ 'subscription_plans.loading.error'|trans }}: ' + data.error);
                    return;
                }
                
                alert('{{ 'subscription_plans.js.trial_started_success'|trans }}');
                window.location.reload();
                
            } catch (error) {
                alert('{{ 'subscription_plans.js.error_occurred'|trans }}');
                console.error('Erreur:', error);
            }
        });
    });
    
    // Gestion de l'annulation des périodes d'essai
    cancelTrialButtons.forEach(button => {
        button.addEventListener('click', async function() {
            if (!confirm('{{ 'subscription_plans.js.confirm_cancel_trial'|trans }}')) {
                return;
            }
            
            try {
                const response = await fetch('/subscription/cancel-trial', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    }
                });
                
                const data = await response.json();
                
                if (data.error) {
                    alert('{{ 'subscription_plans.loading.error'|trans }}: ' + data.error);
                    return;
                }
                
                alert('{{ 'subscription_plans.js.trial_canceled_success'|trans }}');
                window.location.reload();
                
            } catch (error) {
                alert('{{ 'subscription_plans.js.error_occurred'|trans }}');
                console.error('Erreur:', error);
            }
        });
    });
});
</script>

<style>
.card {
    transition: all 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
}

.border-primary {
    border-width: 2px !important;
}

.scale-105 {
    transform: scale(1.02);
}

.accordion-button:not(.collapsed) {
    background-color: #f8f9fa;
    color: #0d6efd;
}

.pricing-display {
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.form-check-input:checked {
    background-color: #198754;
    border-color: #198754;
}

.badge.bg-success {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Améliorer l'apparence des cartes de plans */
.card-header h3 {
    color: #2c3e50;
}

.display-4 {
    color: #2c3e50;
}

.card-footer .btn {
    font-weight: 600;
    padding: 12px 20px;
}

.list-unstyled li {
    padding: 8px 0;
    border-bottom: 1px solid #f8f9fa;
}

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

/* Style pour les badges de périodes d'essai */
.position-absolute .badge.bg-success {
    font-size: 0.75rem;
    padding: 6px 10px;
}

.position-absolute .badge.bg-primary {
    font-size: 0.8rem;
    padding: 8px 12px;
}
</style>
{% endblock %}