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

{% block title %}Plans d'abonnement{% endblock %}

{% block body %}
<div class="container-fluid px-4">
    <div class="row mb-4">
        <div class="col-12">
            <h1 class="h3 mb-0">Plans d'abonnement</h1>
            <p class="text-muted">Choisissez le plan qui correspond le mieux à vos besoins</p>
        </div>
    </div>

    <div class="row g-4">
        {% for plan in plans %}
        <div class="col-lg-3 col-md-6">
            <div class="card shadow-sm h-100">
                <div class="card-body d-flex flex-column">
                    <h4 class="card-title text-center mb-3">{{ plan.name }}</h4>

                    <div class="text-center mb-4">
                        <div class="display-5 fw-bold">
                            {{ plan.priceMonthly }}
                            <small class="text-muted fs-6">{{ plan.currency }}</small>
                        </div>
                        <small class="text-muted">/mois</small>

                        {% if plan.priceYearly %}
                        <div class="mt-2">
                            <span class="badge bg-success">
                                {{ plan.priceYearly }} {{ plan.currency }}/an
                                {% set savings = (plan.priceMonthly * 12 - plan.priceYearly) %}
                                {% if savings > 0 %}
                                    <br><small>Économisez {{ savings|round }} {{ plan.currency }}</small>
                                {% endif %}
                            </span>
                        </div>
                        {% endif %}
                    </div>

                    <ul class="list-unstyled mb-4 flex-grow-1">
                        <li class="mb-2">
                            <i class="fas fa-check-circle text-success"></i>
                            {{ plan.maxSites == 9999 ? 'Sites illimités' : plan.maxSites ~ ' site(s)' }}
                        </li>
                        <li class="mb-2">
                            <i class="fas fa-check-circle text-success"></i>
                            {{ plan.maxPages == 9999 ? 'Pages illimitées' : plan.maxPages ~ ' pages' }}
                        </li>
                        <li class="mb-2">
                            <i class="fas fa-check-circle text-success"></i>
                            {{ (plan.maxStorage / 1024)|round }} GB de stockage
                        </li>

                        {% if plan.customDomain %}
                        <li class="mb-2">
                            <i class="fas fa-check-circle text-success"></i>
                            Domaine personnalisé
                        </li>
                        {% else %}
                        <li class="mb-2">
                            <i class="fas fa-times-circle text-muted"></i>
                            <span class="text-muted">Domaine personnalisé</span>
                        </li>
                        {% endif %}

                        {% if plan.removeWatermark %}
                        <li class="mb-2">
                            <i class="fas fa-check-circle text-success"></i>
                            Sans watermark
                        </li>
                        {% else %}
                        <li class="mb-2">
                            <i class="fas fa-times-circle text-muted"></i>
                            <span class="text-muted">Sans watermark</span>
                        </li>
                        {% endif %}

                        {% if plan.aiGeneration %}
                        <li class="mb-2">
                            <i class="fas fa-check-circle text-success"></i>
                            Génération IA
                        </li>
                        {% else %}
                        <li class="mb-2">
                            <i class="fas fa-times-circle text-muted"></i>
                            <span class="text-muted">Génération IA</span>
                        </li>
                        {% endif %}

                        {% if plan.prioritySupport %}
                        <li class="mb-2">
                            <i class="fas fa-check-circle text-success"></i>
                            Support prioritaire
                        </li>
                        {% else %}
                        <li class="mb-2">
                            <i class="fas fa-times-circle text-muted"></i>
                            <span class="text-muted">Support prioritaire</span>
                        </li>
                        {% endif %}
                    </ul>

                    <button class="btn btn-outline-primary w-100" onclick="selectPlan({{ plan.id }}, 'monthly')">
                        Choisir ce plan
                    </button>

                    {% if plan.priceYearly %}
                    <button class="btn btn-outline-secondary w-100 mt-2" onclick="selectPlan({{ plan.id }}, 'yearly')">
                        Choisir (annuel)
                    </button>
                    {% endif %}
                </div>
            </div>
        </div>
        {% endfor %}
    </div>

    <div class="row mt-5">
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="card-body">
                    <h5><i class="fas fa-question-circle"></i> Questions fréquentes</h5>
                    <div class="row mt-3">
                        <div class="col-md-6">
                            <h6>Puis-je changer de plan ?</h6>
                            <p class="text-muted">Oui, vous pouvez changer de plan à tout moment. Les modifications sont appliquées immédiatement.</p>
                        </div>
                        <div class="col-md-6">
                            <h6>Puis-je annuler mon abonnement ?</h6>
                            <p class="text-muted">Oui, vous pouvez annuler votre abonnement à tout moment. Votre accès restera actif jusqu'à la fin de la période payée.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function selectPlan(planId, interval) {
    // TODO: Implement plan selection with Stripe
    alert('Sélection du plan ' + planId + ' (' + interval + ')\nIntégration Stripe à implémenter');
}
</script>
{% endblock %}