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

{% block title %}Informations du site - 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-globe text-primary"></i>
            Créez votre site
        </h1>
        <p class="lead text-muted">Donnez vie à votre projet en quelques clics</p>
    </div>

    <!-- Selected Plan Recap -->
    <div class="plan-recap mb-5">
        <div class="recap-card">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <small class="text-muted">Plan sélectionné</small>
                    <h4 class="mb-0 mt-1">
                        <i class="fas fa-check-circle text-success me-2"></i>
                        <span id="planName">
                            {% if selectedPlan == 'free' %}Starter (Gratuit)
                            {% elseif selectedPlan == 'pro' %}Professionnel (19€/mois)
                            {% elseif selectedPlan == 'premium' %}Premium (49€/mois)
                            {% endif %}
                        </span>
                    </h4>
                </div>
                <a href="{{ path('admin_onboarding_step1') }}" class="btn btn-sm btn-outline-primary">
                    <i class="fas fa-edit me-1"></i> Modifier
                </a>
            </div>
        </div>
    </div>

    <form id="siteForm" method="post" action="{{ path('admin_onboarding_step3') }}">
        <input type="hidden" name="plan" value="{{ selectedPlan }}">

        <!-- Site Name -->
        <div class="form-section mb-4">
            <label for="siteName" class="form-label">
                <i class="fas fa-signature text-primary me-2"></i>
                Nom de votre site <span class="text-danger">*</span>
            </label>
            <input
                type="text"
                class="form-control form-control-lg"
                id="siteName"
                name="site_name"
                placeholder="Mon Super Site"
                required
                minlength="3"
                maxlength="100"
                value="{{ siteName|default('') }}"
            >
            <div class="form-text">
                <i class="fas fa-info-circle me-1"></i>
                Le nom de votre site (entre 3 et 100 caractères)
            </div>
        </div>

        <!-- Site Description -->
        <div class="form-section mb-5">
            <label for="siteDescription" class="form-label">
                <i class="fas fa-align-left text-primary me-2"></i>
                Description <span class="text-muted">(optionnel)</span>
            </label>
            <textarea
                class="form-control"
                id="siteDescription"
                name="site_description"
                rows="4"
                maxlength="500"
                placeholder="Décrivez brièvement votre site et son objectif..."
            >{{ siteDescription|default('') }}</textarea>
            <div class="form-text">
                <i class="fas fa-info-circle me-1"></i>
                Une courte description de votre projet (maximum 500 caractères)
                <span class="float-end">
                    <span id="charCount">0</span>/500
                </span>
            </div>
        </div>

        <!-- Site Type -->
        <div class="form-section mb-5">
            <label class="form-label mb-3">
                <i class="fas fa-palette text-primary me-2"></i>
                Type de site <span class="text-danger">*</span>
            </label>
            <div class="row g-3">
                <div class="col-md-3 col-6">
                    <div class="site-type-card" data-type="business">
                        <input type="radio" name="site_type" value="business" id="typeBusiness" required>
                        <label for="typeBusiness">
                            <div class="type-icon">
                                <i class="fas fa-building"></i>
                            </div>
                            <div class="type-name">Business</div>
                            <div class="type-desc">Entreprise</div>
                        </label>
                    </div>
                </div>

                <div class="col-md-3 col-6">
                    <div class="site-type-card" data-type="portfolio">
                        <input type="radio" name="site_type" value="portfolio" id="typePortfolio" required>
                        <label for="typePortfolio">
                            <div class="type-icon">
                                <i class="fas fa-palette"></i>
                            </div>
                            <div class="type-name">Portfolio</div>
                            <div class="type-desc">Créatif</div>
                        </label>
                    </div>
                </div>

                <div class="col-md-3 col-6">
                    <div class="site-type-card" data-type="blog">
                        <input type="radio" name="site_type" value="blog" id="typeBlog" required>
                        <label for="typeBlog">
                            <div class="type-icon">
                                <i class="fas fa-pen-fancy"></i>
                            </div>
                            <div class="type-name">Blog</div>
                            <div class="type-desc">Articles</div>
                        </label>
                    </div>
                </div>

                <div class="col-md-3 col-6">
                    <div class="site-type-card" data-type="other">
                        <input type="radio" name="site_type" value="other" id="typeOther" required>
                        <label for="typeOther">
                            <div class="type-icon">
                                <i class="fas fa-globe"></i>
                            </div>
                            <div class="type-name">Autre</div>
                            <div class="type-desc">Personnalisé</div>
                        </label>
                    </div>
                </div>
            </div>
        </div>

        <div class="step-navigation">
            <a href="{{ path('admin_onboarding_step1') }}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-2"></i> Retour
            </a>
            <button type="submit" class="btn btn-primary btn-lg">
                Continuer <i class="fas fa-arrow-right ms-2"></i>
            </button>
        </div>
    </form>
</div>

<style>
.plan-recap {
    animation: slideDown 0.5s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.recap-card {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border: 2px solid #667eea;
    border-radius: 15px;
    padding: 1.5rem;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.1);
}

.form-section {
    animation: fadeIn 0.6s ease;
}

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

.form-label {
    font-weight: 600;
    font-size: 1.1rem;
    color: #2d3748;
    margin-bottom: 0.75rem;
}

.form-control {
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 0.75rem 1rem;
    transition: all 0.3s ease;
    font-size: 1rem;
}

.form-control:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}

.form-control-lg {
    padding: 1rem 1.25rem;
    font-size: 1.1rem;
}

.form-text {
    color: #718096;
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

.site-type-card {
    position: relative;
    cursor: pointer;
}

.site-type-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.site-type-card label {
    display: block;
    background: white;
    border: 3px solid #e2e8f0;
    border-radius: 15px;
    padding: 2rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    height: 100%;
}

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

.site-type-card input[type="radio"]:checked + label {
    border-color: #667eea;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    transform: translateY(-5px);
}

.type-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.type-name {
    font-weight: 700;
    font-size: 1.2rem;
    color: #2d3748;
    margin-bottom: 0.25rem;
}

.type-desc {
    font-size: 0.9rem;
    color: #718096;
}

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

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

@media (max-width: 768px) {
    .site-type-card {
        margin-bottom: 1rem;
    }

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

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

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Character counter for description
    const descTextarea = document.getElementById('siteDescription');
    const charCount = document.getElementById('charCount');

    function updateCharCount() {
        const count = descTextarea.value.length;
        charCount.textContent = count;

        if (count > 450) {
            charCount.style.color = '#f5576c';
        } else {
            charCount.style.color = '#718096';
        }
    }

    descTextarea.addEventListener('input', updateCharCount);
    updateCharCount();

    // Site type selection
    const typeCards = document.querySelectorAll('.site-type-card');
    const typeRadios = document.querySelectorAll('input[name="site_type"]');

    typeCards.forEach(card => {
        card.addEventListener('click', function() {
            const radio = this.querySelector('input[type="radio"]');
            radio.checked = true;

            // Trigger change event for visual update
            radio.dispatchEvent(new Event('change'));
        });
    });

    // Form validation
    const siteForm = document.getElementById('siteForm');
    const siteName = document.getElementById('siteName');

    siteForm.addEventListener('submit', function(e) {
        if (siteName.value.trim().length < 3) {
            e.preventDefault();
            alert('Le nom du site doit contenir au moins 3 caractères.');
            siteName.focus();
            return;
        }

        const selectedType = document.querySelector('input[name="site_type"]:checked');
        if (!selectedType) {
            e.preventDefault();
            alert('Veuillez sélectionner un type de site.');
            return;
        }
    });

    // Restore selected type if any
    const selectedType = '{{ siteType|default('') }}';
    if (selectedType) {
        const radio = document.getElementById('type' + selectedType.charAt(0).toUpperCase() + selectedType.slice(1));
        if (radio) {
            radio.checked = true;
        }
    }

    // Add entrance animations
    setTimeout(() => {
        const sections = document.querySelectorAll('.form-section');
        sections.forEach((section, index) => {
            section.style.animationDelay = `${index * 0.1}s`;
        });
    }, 100);
});
</script>
{% endblock %}