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

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('css/security.css') }}">
{% endblock %}

{% block body %}
<div class="auth-container">
    <div class="auth-card wide">
        <div class="auth-header">
            <h1>Compléter votre profil</h1>
            <div class="steps-progress">
                <div class="progress-bar">
                    <div class="progress" style="width: {{ (step / 3) * 100 }}%"></div>
                </div>
                <div class="steps">
                    <div class="step {% if step >= 1 %}active{% endif %}">
                        <span class="step-number">1</span>
                        <span class="step-label">Informations personnelles</span>
                    </div>
                    <div class="step {% if step >= 2 %}active{% endif %}">
                        <span class="step-number">2</span>
                        <span class="step-label">Préférences</span>
                    </div>
                    <div class="step {% if step >= 3 %}active{% endif %}">
                        <span class="step-number">3</span>
                        <span class="step-label">Sécurité</span>
                    </div>
                </div>
            </div>
        </div>

        {% for message in app.flashes('error') %}
            <div class="alert alert-danger">
                {{ message }}
            </div>
        {% endfor %}

        <form method="post" class="profile-form">
            {% if step == 1 %}
                <div class="form-group">
                    <label for="firstName">Prénom</label>
                    <input type="text" id="firstName" name="firstName" required>
                </div>
                <div class="form-group">
                    <label for="lastName">Nom</label>
                    <input type="text" id="lastName" name="lastName" required>
                </div>
                <div class="form-group">
                    <label for="birthDate">Date de naissance</label>
                    <input type="date" id="birthDate" name="birthDate" required>
                </div>
                <div class="form-group">
                    <label for="phone">Téléphone</label>
                    <input type="tel" id="phone" name="phone" required>
                </div>
            {% elseif step == 2 %}
                <div class="form-group">
                    <label for="language">Langue préférée</label>
                    <select id="language" name="language" required>
                        <option value="fr">Français</option>
                        <option value="en">English</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="theme">Thème</label>
                    <select id="theme" name="theme" required>
                        <option value="light">Clair</option>
                        <option value="dark">Sombre</option>
                        <option value="system">Système</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>Notifications</label>
                    <div class="checkbox-group">
                        <label>
                            <input type="checkbox" name="notifications[]" value="email" checked>
                            Email
                        </label>
                        <label>
                            <input type="checkbox" name="notifications[]" value="sms">
                            SMS
                        </label>
                    </div>
                </div>
            {% else %}
                <div class="form-group">
                    <label for="password">Nouveau mot de passe</label>
                    <div class="input-group">
                        <i class="fas fa-lock"></i>
                        <input type="password" id="password" name="password" required>
                        <button type="button" class="toggle-password">
                            <i class="fas fa-eye"></i>
                        </button>
                    </div>
                </div>
                <div class="form-group">
                    <label for="confirmPassword">Confirmer le mot de passe</label>
                    <div class="input-group">
                        <i class="fas fa-lock"></i>
                        <input type="password" id="confirmPassword" name="confirmPassword" required>
                        <button type="button" class="toggle-password">
                            <i class="fas fa-eye"></i>
                        </button>
                    </div>
                </div>
                <div class="password-requirements">
                    <p>Le mot de passe doit contenir :</p>
                    <ul>
                        <li data-requirement="length">Au moins 8 caractères</li>
                        <li data-requirement="uppercase">Une majuscule</li>
                        <li data-requirement="lowercase">Une minuscule</li>
                        <li data-requirement="number">Un chiffre</li>
                        <li data-requirement="special">Un caractère spécial</li>
                    </ul>
                </div>
            {% endif %}

            <div class="form-actions">
                {% if step > 1 %}
                    <a href="{{ path('app_complete_profile', {step: step - 1}) }}" class="btn btn-outline">
                        <i class="fas fa-arrow-left"></i> Précédent
                    </a>
                {% endif %}
                
                <button type="submit" class="btn btn-primary">
                    {% if step < 3 %}
                        Suivant <i class="fas fa-arrow-right"></i>
                    {% else %}
                        Terminer <i class="fas fa-check"></i>
                    {% endif %}
                </button>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('js/security.js') }}"></script>
{% endblock %}