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

{% block title %}Choisissez votre formule | Izibrick{% endblock %}

{% block stylesheets %}
{{ parent() }}
<style>
    .plan-selection-container {
        max-width: 1200px;
        margin: 0 auto;
    }

    .plan-card {
        border: 2px solid #e2e8f0;
        border-radius: 16px;
        padding: 1.5rem;
        cursor: pointer;
        transition: all 0.3s ease;
        background: white;
        height: 100%;
    }

    .plan-card:hover {
        border-color: #667eea;
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(102, 126, 234, 0.2);
    }

    .plan-card.selected {
        border-color: #667eea;
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
        box-shadow: 0 10px 30px rgba(102, 126, 234, 0.2);
    }

    .btn-continue {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: none;
        padding: 15px 40px;
        border-radius: 50px;
        color: white;
        font-weight: 600;
        font-size: 1rem;
        transition: all 0.3s ease;
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    }

    .btn-continue:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
        color: white;
    }

    .btn-continue:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }
</style>
{% endblock %}

{% block body %}
<div class="plan-selection-container py-5">
    <div class="row mb-4">
        <div class="col-12">
            <h1 class="fw-bold mb-2">Créer un nouveau site</h1>
            <p class="text-muted">Choisissez la formule pour votre nouveau site. Un nouvel abonnement sera créé.</p>
        </div>
    </div>

    {% for message in app.flashes('error') %}
        <div class="alert alert-danger d-flex align-items-center rounded-3 mb-4">
            <i class="fas fa-exclamation-triangle me-2"></i>
            {{ message }}
        </div>
    {% endfor %}

    <form method="post" id="planForm">
        <input type="hidden" name="plan" id="selectedPlan" value="">

        <div class="row g-4 mb-5">
            {% for plan in plans %}
            {% set isPopular = plan.code == 'essential' %}
            {% set isFree = plan.priceMonthly == '0.00' %}

            <div class="col-md-4">
                <div class="plan-card" data-plan="{{ plan.code }}" onclick="selectPlan('{{ plan.code }}')">
                    {# Badge #}
                    {% if isPopular %}
                    <div class="text-center mb-3">
                        <span class="badge bg-warning text-dark px-3 py-2 rounded-pill">
                            <i class="fas fa-star me-1"></i>Populaire
                        </span>
                    </div>
                    {% elseif isFree %}
                    <div class="text-center mb-3">
                        <span class="badge bg-success px-3 py-2 rounded-pill">
                            <i class="fas fa-gift me-1"></i>Gratuit
                        </span>
                    </div>
                    {% else %}
                    <div class="text-center mb-3">
                        <span class="badge px-3 py-2 rounded-pill" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                            <i class="fas fa-rocket me-1"></i>Pro
                        </span>
                    </div>
                    {% endif %}

                    {# Plan name #}
                    <h3 class="text-center fw-bold mb-3">{{ plan.name }}</h3>

                    {# Price #}
                    <div class="text-center mb-4">
                        {% if isFree %}
                            <span class="display-5 fw-bold" style="color: #48bb78;">Gratuit</span>
                        {% else %}
                            <span class="display-5 fw-bold" style="color: #667eea;">{{ plan.priceMonthly }}€</span>
                            <span class="text-muted">/mois</span>
                        {% endif %}
                    </div>

                    {# Features #}
                    <ul class="list-unstyled mb-0">
                        <li class="mb-2 d-flex align-items-center">
                            <i class="fas fa-check-circle text-success me-2"></i>
                            <span>{{ plan.maxPages == 9999 ? 'Pages illimitées' : plan.maxPages ~ ' pages' }}</span>
                        </li>
                        <li class="mb-2 d-flex align-items-center">
                            <i class="fas fa-check-circle text-success me-2"></i>
                            <span>{{ plan.maxStorage < 1024 ? plan.maxStorage ~ ' MB' : (plan.maxStorage / 1024)|round(0) ~ ' GB' }} stockage</span>
                        </li>
                        {% if plan.customDomain %}
                        <li class="mb-2 d-flex align-items-center">
                            <i class="fas fa-check-circle text-success me-2"></i>
                            <span>Domaine personnalisé</span>
                        </li>
                        {% endif %}
                        {% if not plan.hasAds %}
                        <li class="mb-2 d-flex align-items-center">
                            <i class="fas fa-check-circle text-success me-2"></i>
                            <span>Sans publicité</span>
                        </li>
                        {% endif %}
                        {% if plan.aiGeneration %}
                        <li class="mb-2 d-flex align-items-center">
                            <i class="fas fa-star text-warning me-2"></i>
                            <span>IA & Chatbot inclus</span>
                        </li>
                        {% endif %}
                    </ul>

                    {# Selection indicator #}
                    <div class="text-center mt-4">
                        <div class="plan-select-indicator d-none">
                            <i class="fas fa-check-circle fa-2x" style="color: #667eea;"></i>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>

        {# Info box #}
        <div class="alert alert-info d-flex align-items-center rounded-3 mb-4" style="background: rgba(102, 126, 234, 0.1); border: none;">
            <i class="fas fa-info-circle me-3 fs-4" style="color: #667eea;"></i>
            <div>
                <strong>Nouvel abonnement</strong><br>
                Un nouvel abonnement sera créé pour ce site, facturé séparément de vos autres sites.
                {% set hasPaidPlans = false %}
                {% for plan in plans %}
                    {% if plan.priceMonthly != '0.00' %}
                        {% set hasPaidPlans = true %}
                    {% endif %}
                {% endfor %}
                {% if hasPaidPlans %} Essai gratuit de 30 jours disponible sur les plans payants.{% endif %}
            </div>
        </div>

        {# Buttons #}
        <div class="d-flex justify-content-between align-items-center">
            <a href="{{ path('dashboard') }}" class="btn btn-outline-secondary rounded-pill px-4">
                <i class="fas fa-arrow-left me-2"></i>Retour au dashboard
            </a>
            <button type="submit" class="btn-continue" id="continueBtn" disabled>
                Continuer<i class="fas fa-arrow-right ms-2"></i>
            </button>
        </div>
    </form>
</div>

<script>
function selectPlan(planCode) {
    // Update hidden input
    document.getElementById('selectedPlan').value = planCode;

    // Update visual selection
    document.querySelectorAll('.plan-card').forEach(card => {
        card.classList.remove('selected');
        card.querySelector('.plan-select-indicator').classList.add('d-none');
    });

    const selectedCard = document.querySelector(`.plan-card[data-plan="${planCode}"]`);
    selectedCard.classList.add('selected');
    selectedCard.querySelector('.plan-select-indicator').classList.remove('d-none');

    // Enable continue button
    document.getElementById('continueBtn').disabled = false;
}
</script>
{% endblock %}