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

{% block title %}{{ isEdit ? 'Modifier' : 'Créer' }} un plan tarifaire{% endblock %}
{% block breadcrumb %}Super Administration <i class="fas fa-chevron-right"></i> Plans tarifaires <i class="fas fa-chevron-right"></i> {{ isEdit ? 'Modifier' : 'Créer' }}{% endblock %}

{% block body %}
<div class="container-fluid px-4">
    <div class="row">
        <div class="col-lg-8 mx-auto">
            {# Header #}
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h1 class="h3 mb-2">
                        <i class="fas fa-{% if isEdit %}edit{% else %}plus-circle{% endif %} text-primary me-2"></i>
                        {{ isEdit ? 'Modifier' : 'Créer' }} un plan tarifaire
                    </h1>
                    <p class="text-muted">{{ isEdit ? 'Modifiez les informations du plan "' ~ plan.name ~ '"' : 'Créez un nouveau plan d\'abonnement' }}</p>
                </div>
                <a href="{{ path('admin_subscription_plans') }}" class="btn btn-outline-secondary">
                    <i class="fas fa-arrow-left me-2"></i>Retour
                </a>
            </div>

            {# Formulaire #}
            <div class="card border-0 shadow-sm">
                <div class="card-body p-4">
                    {{ form_start(form) }}

                    {# Informations générales #}
                    <div class="mb-4">
                        <h5 class="border-bottom pb-2 mb-3">
                            <i class="fas fa-info-circle text-primary me-2"></i>
                            Informations générales
                        </h5>
                        <div class="row g-3">
                            <div class="col-md-6">
                                {{ form_row(form.name) }}
                            </div>
                            <div class="col-md-6">
                                {{ form_row(form.code) }}
                            </div>
                            <div class="col-12">
                                {{ form_row(form.description) }}
                            </div>
                        </div>
                    </div>

                    {# Tarification #}
                    <div class="mb-4">
                        <h5 class="border-bottom pb-2 mb-3">
                            <i class="fas fa-euro-sign text-success me-2"></i>
                            Tarification
                        </h5>
                        <div class="row g-3">
                            <div class="col-md-6">
                                {{ form_row(form.priceMonthly) }}
                            </div>
                            <div class="col-md-6">
                                {{ form_row(form.priceYearly) }}
                            </div>
                        </div>
                        <div class="alert alert-info mt-3 mb-0">
                            <i class="fas fa-calculator me-2"></i>
                            <strong>Astuce :</strong> Pour un plan avec 2 mois offerts, multipliez le prix mensuel par 10.
                            Exemple : 9,90€/mois × 10 = 99€/an
                        </div>
                    </div>

                    {# Limites #}
                    <div class="mb-4">
                        <h5 class="border-bottom pb-2 mb-3">
                            <i class="fas fa-chart-bar text-warning me-2"></i>
                            Limites et quotas
                        </h5>
                        <div class="row g-3">
                            <div class="col-md-4">
                                {{ form_row(form.maxSites) }}
                            </div>
                            <div class="col-md-4">
                                {{ form_row(form.maxPages) }}
                            </div>
                            <div class="col-md-4">
                                {{ form_row(form.maxStorage) }}
                            </div>
                        </div>
                    </div>

                    {# Fonctionnalités #}
                    <div class="mb-4">
                        <h5 class="border-bottom pb-2 mb-3">
                            <i class="fas fa-cogs text-info me-2"></i>
                            Fonctionnalités disponibles
                        </h5>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <div class="form-check form-switch">
                                    {{ form_widget(form.customDomain, {'attr': {'class': 'form-check-input', 'role': 'switch'}}) }}
                                    {{ form_label(form.customDomain, null, {'label_attr': {'class': 'form-check-label'}}) }}
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-check form-switch">
                                    {{ form_widget(form.removeWatermark, {'attr': {'class': 'form-check-input', 'role': 'switch'}}) }}
                                    {{ form_label(form.removeWatermark, null, {'label_attr': {'class': 'form-check-label'}}) }}
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-check form-switch">
                                    {{ form_widget(form.prioritySupport, {'attr': {'class': 'form-check-input', 'role': 'switch'}}) }}
                                    {{ form_label(form.prioritySupport, null, {'label_attr': {'class': 'form-check-label'}}) }}
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-check form-switch">
                                    {{ form_widget(form.aiGeneration, {'attr': {'class': 'form-check-input', 'role': 'switch'}}) }}
                                    {{ form_label(form.aiGeneration, null, {'label_attr': {'class': 'form-check-label'}}) }}
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-check form-switch">
                                    {{ form_widget(form.hasAds, {'attr': {'class': 'form-check-input', 'role': 'switch'}}) }}
                                    {{ form_label(form.hasAds, null, {'label_attr': {'class': 'form-check-label'}}) }}
                                    <div class="form-text">{{ form_help(form.hasAds) }}</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {# Configuration #}
                    <div class="mb-4">
                        <h5 class="border-bottom pb-2 mb-3">
                            <i class="fas fa-sliders-h text-secondary me-2"></i>
                            Configuration
                        </h5>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <div class="form-check form-switch">
                                    {{ form_widget(form.isActive, {'attr': {'class': 'form-check-input', 'role': 'switch'}}) }}
                                    {{ form_label(form.isActive, null, {'label_attr': {'class': 'form-check-label'}}) }}
                                    <div class="form-text">{{ form_help(form.isActive) }}</div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                {{ form_row(form.displayOrder) }}
                            </div>
                        </div>
                    </div>

                    {# Actions #}
                    <div class="d-flex gap-3 justify-content-end border-top pt-4 mt-4">
                        <a href="{{ path('admin_subscription_plans') }}" class="btn btn-outline-secondary">
                            <i class="fas fa-times me-2"></i>Annuler
                        </a>
                        <button type="submit" class="btn btn-gradient">
                            <i class="fas fa-save me-2"></i>{{ isEdit ? 'Enregistrer les modifications' : 'Créer le plan' }}
                        </button>
                    </div>

                    {{ form_end(form) }}
                </div>
            </div>

            {# Aide #}
            {% if not isEdit %}
            <div class="card border-0 shadow-sm bg-light mt-4">
                <div class="card-body">
                    <h6 class="card-title">
                        <i class="fas fa-question-circle text-info me-2"></i>
                        Exemple de configuration
                    </h6>
                    <div class="row g-3 small">
                        <div class="col-md-4">
                            <strong>Plan Starter (Gratuit)</strong>
                            <ul class="mb-0 mt-2">
                                <li>Prix : 0€ / 0€</li>
                                <li>1 site, 5 pages</li>
                                <li>100 MB stockage</li>
                                <li>Avec publicité ✓</li>
                            </ul>
                        </div>
                        <div class="col-md-4">
                            <strong>Plan Basic (9,90€)</strong>
                            <ul class="mb-0 mt-2">
                                <li>Prix : 9,90€ / 99€</li>
                                <li>1 site, pages illimitées (9999)</li>
                                <li>5120 MB (5 GB)</li>
                                <li>Domaine perso ✓</li>
                            </ul>
                        </div>
                        <div class="col-md-4">
                            <strong>Plan Pro (24,90€)</strong>
                            <ul class="mb-0 mt-2">
                                <li>Prix : 24,90€ / 249€</li>
                                <li>3 sites, pages illimitées</li>
                                <li>25600 MB (25 GB)</li>
                                <li>Toutes les fonctionnalités ✓</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}