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

{% block title %}Confirmation - Onboarding{% endblock %}

{% block onboarding_content %}
<div class="onboarding-step">
    <div class="step-header text-center mb-5">
        <h1 class="display-4 fw-bold mb-3">
            <i class="fas fa-check-circle text-success"></i>
            Récapitulatif
        </h1>
        <p class="lead text-muted">Vérifiez vos informations avant de créer votre site</p>
    </div>

    <div class="row g-4 mb-5">
        <!-- Plan Summary Card -->
        <div class="col-md-6">
            <div class="summary-card">
                <div class="card-header">
                    <i class="fas fa-rocket me-2"></i>
                    Votre plan
                    <a href="{{ path('admin_onboarding_step1') }}" class="edit-link">
                        <i class="fas fa-edit"></i> Modifier
                    </a>
                </div>
                <div class="card-body">
                    {% if selectedPlan == 'free' %}
                        <div class="plan-name">
                            <i class="fas fa-gift text-success me-2"></i>
                            Starter
                        </div>
                        <div class="plan-price">Gratuit</div>
                        <ul class="plan-summary-features">
                            <li><i class="fas fa-check"></i> 1 site web</li>
                            <li><i class="fas fa-check"></i> 10 pages maximum</li>
                            <li><i class="fas fa-check"></i> Sous-domaine izibrick</li>
                            <li><i class="fas fa-check"></i> Support par email</li>
                        </ul>
                    {% elseif selectedPlan == 'pro' %}
                        <div class="plan-name">
                            <i class="fas fa-star text-warning me-2"></i>
                            Professionnel
                        </div>
                        <div class="plan-price">19€ <span class="period">/mois</span></div>
                        <ul class="plan-summary-features">
                            <li><i class="fas fa-check"></i> 5 sites web</li>
                            <li><i class="fas fa-check"></i> Pages illimitées</li>
                            <li><i class="fas fa-check"></i> Domaine personnalisé</li>
                            <li><i class="fas fa-check"></i> Support prioritaire</li>
                            <li><i class="fas fa-check"></i> Analytics avancés</li>
                        </ul>
                    {% elseif selectedPlan == 'premium' %}
                        <div class="plan-name">
                            <i class="fas fa-crown text-warning me-2"></i>
                            Premium
                        </div>
                        <div class="plan-price">49€ <span class="period">/mois</span></div>
                        <ul class="plan-summary-features">
                            <li><i class="fas fa-check"></i> Sites illimités</li>
                            <li><i class="fas fa-check"></i> Pages illimitées</li>
                            <li><i class="fas fa-check"></i> Domaines personnalisés</li>
                            <li><i class="fas fa-check"></i> Support 24/7</li>
                            <li><i class="fas fa-check"></i> API complète</li>
                        </ul>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Site Summary Card -->
        <div class="col-md-6">
            <div class="summary-card">
                <div class="card-header">
                    <i class="fas fa-globe me-2"></i>
                    Votre site
                    <a href="{{ path('admin_onboarding_step2') }}" class="edit-link">
                        <i class="fas fa-edit"></i> Modifier
                    </a>
                </div>
                <div class="card-body">
                    <div class="site-info-item">
                        <div class="info-label">
                            <i class="fas fa-signature text-primary me-2"></i>
                            Nom du site
                        </div>
                        <div class="info-value">{{ siteName }}</div>
                    </div>

                    {% if siteDescription %}
                    <div class="site-info-item">
                        <div class="info-label">
                            <i class="fas fa-align-left text-primary me-2"></i>
                            Description
                        </div>
                        <div class="info-value description">{{ siteDescription }}</div>
                    </div>
                    {% endif %}

                    <div class="site-info-item">
                        <div class="info-label">
                            <i class="fas fa-palette text-primary me-2"></i>
                            Type de site
                        </div>
                        <div class="info-value">
                            {% if siteType == 'business' %}
                                <span class="badge badge-type"><i class="fas fa-building me-1"></i> Business</span>
                            {% elseif siteType == 'portfolio' %}
                                <span class="badge badge-type"><i class="fas fa-palette me-1"></i> Portfolio</span>
                            {% elseif siteType == 'blog' %}
                                <span class="badge badge-type"><i class="fas fa-pen-fancy me-1"></i> Blog</span>
                            {% else %}
                                <span class="badge badge-type"><i class="fas fa-globe me-1"></i> Autre</span>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- What's Next Section -->
    <div class="whats-next-section mb-5">
        <h3 class="section-title text-center mb-4">
            <i class="fas fa-road me-2"></i>
            Prochaines étapes
        </h3>
        <div class="row g-4">
            <div class="col-md-4">
                <div class="next-step-card">
                    <div class="step-number">1</div>
                    <div class="step-icon">
                        <i class="fas fa-palette"></i>
                    </div>
                    <h5>Personnaliser le design</h5>
                    <p>Choisissez un template et personnalisez les couleurs, polices et mise en page</p>
                </div>
            </div>

            <div class="col-md-4">
                <div class="next-step-card">
                    <div class="step-number">2</div>
                    <div class="step-icon">
                        <i class="fas fa-edit"></i>
                    </div>
                    <h5>Ajouter du contenu</h5>
                    <p>Créez vos pages, ajoutez du texte, des images et des vidéos</p>
                </div>
            </div>

            <div class="col-md-4">
                <div class="next-step-card">
                    <div class="step-number">3</div>
                    <div class="step-icon">
                        <i class="fas fa-rocket"></i>
                    </div>
                    <h5>Publier votre site</h5>
                    <p>Rendez votre site accessible au monde entier en un clic</p>
                </div>
            </div>
        </div>
    </div>

    <!-- CGU Acceptance -->
    <form id="confirmForm" method="post" action="{{ path('admin_onboarding_complete') }}">
        <input type="hidden" name="plan" value="{{ selectedPlan }}">
        <input type="hidden" name="site_name" value="{{ siteName }}">
        <input type="hidden" name="site_description" value="{{ siteDescription|default('') }}">
        <input type="hidden" name="site_type" value="{{ siteType }}">

        <div class="cgu-section mb-4">
            <div class="form-check">
                <input
                    type="checkbox"
                    class="form-check-input"
                    id="acceptCGU"
                    name="accept_cgu"
                    required
                >
                <label class="form-check-label" for="acceptCGU">
                    J'accepte les
                    <a href="#" target="_blank">Conditions Générales d'Utilisation</a>
                    et la
                    <a href="#" target="_blank">Politique de Confidentialité</a>
                    <span class="text-danger">*</span>
                </label>
            </div>
        </div>

        <div class="step-navigation">
            <a href="{{ path('admin_onboarding_step2') }}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-2"></i> Retour
            </a>
            <button type="submit" class="btn btn-success btn-lg" id="createSiteBtn">
                <i class="fas fa-check me-2"></i> Créer mon site
            </button>
        </div>
    </form>
</div>

<style>
.summary-card {
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    overflow: hidden;
    height: 100%;
    animation: slideUp 0.5s ease;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.summary-card .card-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 1.5rem;
    font-weight: 700;
    font-size: 1.2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.edit-link {
    color: white;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

.edit-link:hover {
    opacity: 1;
    color: white;
}

.summary-card .card-body {
    padding: 2rem;
}

.plan-name {
    font-size: 1.8rem;
    font-weight: 700;
    color: #2d3748;
    margin-bottom: 0.5rem;
}

.plan-price {
    font-size: 2.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1.5rem;
}

.plan-price .period {
    font-size: 1.2rem;
    color: #718096;
}

.plan-summary-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.plan-summary-features li {
    padding: 0.5rem 0;
    color: #4a5568;
    display: flex;
    align-items: center;
    gap: 10px;
}

.plan-summary-features li i {
    color: #48bb78;
    font-size: 1rem;
}

.site-info-item {
    margin-bottom: 1.5rem;
}

.site-info-item:last-child {
    margin-bottom: 0;
}

.info-label {
    font-size: 0.9rem;
    color: #718096;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.info-value {
    font-size: 1.1rem;
    color: #2d3748;
    font-weight: 600;
}

.info-value.description {
    font-weight: 400;
    line-height: 1.6;
    color: #4a5568;
}

.badge-type {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    color: #667eea;
    border: 2px solid #667eea;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
}

.whats-next-section {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-radius: 20px;
    padding: 3rem 2rem;
    animation: fadeIn 0.6s ease 0.3s both;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.section-title {
    font-size: 2rem;
    font-weight: 700;
    color: #2d3748;
}

.next-step-card {
    background: white;
    border-radius: 15px;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    position: relative;
    transition: all 0.3s ease;
}

.next-step-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.15);
}

.step-number {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2rem;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.step-icon {
    font-size: 3rem;
    color: #667eea;
    margin: 1rem 0;
}

.next-step-card h5 {
    font-weight: 700;
    color: #2d3748;
    margin-bottom: 0.75rem;
}

.next-step-card p {
    color: #718096;
    font-size: 0.95rem;
    margin-bottom: 0;
}

.cgu-section {
    background: white;
    border-radius: 15px;
    padding: 1.5rem;
    border: 2px solid #e2e8f0;
}

.form-check-input {
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid #cbd5e0;
    margin-top: 0.15rem;
}

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

.form-check-label {
    font-size: 1rem;
    color: #4a5568;
    margin-left: 0.5rem;
}

.form-check-label a {
    color: #667eea;
    text-decoration: none;
    font-weight: 600;
}

.form-check-label a:hover {
    text-decoration: underline;
}

.step-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 2px solid #e2e8f0;
}

.btn-lg {
    padding: 0.75rem 2.5rem;
    border-radius: 50px;
    font-weight: 600;
}

.btn-success {
    background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
    border: none;
}

.btn-success:hover {
    background: linear-gradient(135deg, #38a169 0%, #2f855a 100%);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(72, 187, 120, 0.3);
}

@media (max-width: 768px) {
    .summary-card {
        margin-bottom: 1.5rem;
    }

    .next-step-card {
        margin-bottom: 2rem;
    }

    .step-navigation {
        flex-direction: column;
        gap: 1rem;
    }

    .step-navigation .btn {
        width: 100%;
    }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const confirmForm = document.getElementById('confirmForm');
    const acceptCGU = document.getElementById('acceptCGU');
    const createSiteBtn = document.getElementById('createSiteBtn');

    confirmForm.addEventListener('submit', function(e) {
        if (!acceptCGU.checked) {
            e.preventDefault();
            alert('Vous devez accepter les Conditions Générales d\'Utilisation pour continuer.');
            acceptCGU.focus();
            return;
        }

        // Show loading state
        createSiteBtn.disabled = true;
        createSiteBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i> Création en cours...';
    });

    // Add staggered animation to cards
    setTimeout(() => {
        const cards = document.querySelectorAll('.summary-card');
        cards.forEach((card, index) => {
            card.style.animationDelay = `${index * 0.1}s`;
        });

        const stepCards = document.querySelectorAll('.next-step-card');
        stepCards.forEach((card, index) => {
            setTimeout(() => {
                card.style.opacity = '0';
                card.style.transform = 'translateY(30px)';
                card.offsetHeight; // Force reflow
                card.style.transition = 'all 0.5s ease';
                card.style.opacity = '1';
                card.style.transform = 'translateY(0)';
            }, (index + 2) * 150);
        });
    }, 100);
});
</script>
{% endblock %}