{# templates/security/reset_password_reset.html.twig #}
{% extends 'base.html.twig' %}

{% block title %}Nouveau mot de passe — CARTON LFM{% endblock %}

{% block body %}
<div style="min-height: calc(100vh - 120px); display: flex; align-items: center; justify-content: center; padding: 40px 16px;">

    <div style="width: 100%; max-width: 480px;">

        {# ── Icône / titre ──────────────────────────────────────── #}
        <div style="text-align: center; margin-bottom: 28px;">
            <div style="
                display: inline-flex; align-items: center; justify-content: center;
                width: 64px; height: 64px; border-radius: 50%;
                background-color: #e30613; margin-bottom: 14px;
            ">
                <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="white" viewBox="0 0 16 16">
                    <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                    <path d="M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z"/>
                </svg>
            </div>
            <h2 style="border: none; padding: 0; font-size: 22px; font-weight: bold; color: #ffffff; letter-spacing: 1px;">
                Nouveau mot de passe
            </h2>
            <p style="color: rgba(255,255,255,0.6); font-size: 13px; margin-top: 6px;">
                Choisissez un mot de passe sécurisé pour votre compte club
            </p>
        </div>

        {# ── Carte formulaire ───────────────────────────────────── #}
        <div class="card">

            {# Flash messages #}
            {% for label, messages in app.flashes %}
                {% for message in messages %}
                    <div style="
                        padding: 12px 16px; border-radius: 8px; margin-bottom: 18px;
                        font-size: 14px; font-weight: bold;
                        {% if label == 'success' %}
                            background-color: #d4edda; color: #155724; border-left: 4px solid #28a745;
                        {% else %}
                            background-color: #f8d7da; color: #721c24; border-left: 4px solid #e30613;
                        {% endif %}
                    ">
                        {{ message }}
                    </div>
                {% endfor %}
            {% endfor %}

            <form method="post" novalidate>
                <input type="hidden" name="_token" value="{{ csrf_token('reset_password') }}">

                {# ── Champ mot de passe ──────────────────────────── #}
                <label for="password" style="color: #0a1f44;">Nouveau mot de passe</label>
                <div style="position: relative; margin: 8px 0 6px;">
                    <input
                        type="password"
                        id="password"
                        name="password"
                        placeholder="8 caractères minimum"
                        minlength="8"
                        required
                        autofocus
                        oninput="checkStrength(this.value); checkMatch()"
                        onfocus="this.style.borderColor='#e30613'; this.style.boxShadow='0 0 8px rgba(227,6,19,0.3)'"
                        onblur="this.style.borderColor='#ccd3de'; this.style.boxShadow='none'"
                        style="
                            width: 100%; padding: 12px 46px 12px 15px;
                            border: 2px solid #ccd3de; border-radius: 8px;
                            background-color: #f4f6f9; color: #0a1f44;
                            font-size: 14px; outline: none; transition: 0.3s;
                        "
                    >
                    <button type="button" onclick="togglePwd('password', 'eye1')"
                        style="position:absolute; right:12px; top:50%; transform:translateY(-50%);
                               background:none; border:none; cursor:pointer; color:#0a1f44; padding:0;">
                        <svg id="eye1" xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 16 16">
                            <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
                            <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
                        </svg>
                    </button>
                </div>

                {# ── Barre de force ──────────────────────────────── #}
                <div style="margin-bottom: 18px;">
                    <div style="height: 5px; border-radius: 4px; background: #e0e0e0; overflow: hidden;">
                        <div id="strength-bar" style="height: 100%; width: 0; border-radius: 4px; transition: 0.4s;"></div>
                    </div>
                    <p id="strength-label" style="font-size: 11px; color: #999; margin-top: 4px; text-align: right;"></p>
                </div>

                {# ── Confirmation ────────────────────────────────── #}
                <label for="password_confirm" style="color: #0a1f44;">Confirmer le mot de passe</label>
                <div style="position: relative; margin: 8px 0 6px;">
                    <input
                        type="password"
                        id="password_confirm"
                        name="password_confirm"
                        placeholder="Répétez le mot de passe"
                        minlength="8"
                        required
                        oninput="checkMatch()"
                        onfocus="this.style.borderColor='#e30613'; this.style.boxShadow='0 0 8px rgba(227,6,19,0.3)'"
                        onblur="this.style.borderColor='#ccd3de'; this.style.boxShadow='none'"
                        style="
                            width: 100%; padding: 12px 46px 12px 15px;
                            border: 2px solid #ccd3de; border-radius: 8px;
                            background-color: #f4f6f9; color: #0a1f44;
                            font-size: 14px; outline: none; transition: 0.3s;
                        "
                    >
                    <button type="button" onclick="togglePwd('password_confirm', 'eye2')"
                        style="position:absolute; right:12px; top:50%; transform:translateY(-50%);
                               background:none; border:none; cursor:pointer; color:#0a1f44; padding:0;">
                        <svg id="eye2" xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 16 16">
                            <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
                            <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
                        </svg>
                    </button>
                </div>

                {# ── Feedback correspondance ──────────────────────── #}
                <p id="match-msg" style="font-size: 12px; min-height: 18px; margin-bottom: 20px; font-weight: bold;"></p>

                <button type="submit" id="submit-btn" class="btn" disabled
                    style="width: 100%; font-size: 15px; padding: 13px; opacity: 0.5; cursor: not-allowed;">
                    Enregistrer le nouveau mot de passe
                </button>
            </form>

        </div>

        {# ── Retour connexion ───────────────────────────────────── #}
        <div style="text-align: center; margin-top: 20px;">
            <a href="{{ path('app_login') }}" style="color: rgba(255,255,255,0.7); font-size: 13px; text-decoration: none;">
                ← Retour à la connexion
            </a>
        </div>

        <p style="text-align: center; color: rgba(255,255,255,0.3); font-size: 11px; margin-top: 30px;">
            Paiements sécurisés par Stripe · TLS 1.3
        </p>

    </div>
</div>

<script>
// ── Afficher / masquer mot de passe ──────────────────────────────
function togglePwd(inputId, eyeId) {
    const input = document.getElementById(inputId);
    const eye   = document.getElementById(eyeId);
    const isHidden = input.type === 'password';
    input.type = isHidden ? 'text' : 'password';
    // Swap icône œil / œil barré
    eye.innerHTML = isHidden
        ? `<path d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z"/>
           <path d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z"/>
           <path d="M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709z"/>
           <path fill-rule="evenodd" d="M13.646 14.354l-12-12 .708-.708 12 12-.708.708z"/>`
        : `<path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
           <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>`;
}

// ── Force du mot de passe ─────────────────────────────────────────
function checkStrength(val) {
    const bar   = document.getElementById('strength-bar');
    const label = document.getElementById('strength-label');
    let score = 0;
    if (val.length >= 8)  score++;
    if (val.length >= 12) score++;
    if (/[A-Z]/.test(val)) score++;
    if (/[0-9]/.test(val)) score++;
    if (/[^A-Za-z0-9]/.test(val)) score++;

    const levels = [
        { pct: '20%', color: '#e30613', text: 'Très faible' },
        { pct: '40%', color: '#e30613', text: 'Faible'      },
        { pct: '60%', color: '#f0a500', text: 'Moyen'       },
        { pct: '80%', color: '#2ecc71', text: 'Fort'        },
        { pct: '100%',color: '#27ae60', text: 'Très fort'   },
    ];
    const lvl = levels[Math.max(0, score - 1)] || levels[0];
    bar.style.width       = val.length ? lvl.pct   : '0';
    bar.style.background  = val.length ? lvl.color : 'transparent';
    label.textContent     = val.length ? lvl.text  : '';
    label.style.color     = val.length ? lvl.color : '#999';
}

// ── Correspondance des mots de passe ─────────────────────────────
function checkMatch() {
    const pwd     = document.getElementById('password').value;
    const confirm = document.getElementById('password_confirm').value;
    const msg     = document.getElementById('match-msg');
    const btn     = document.getElementById('submit-btn');

    if (!confirm) {
        msg.textContent = '';
        btn.disabled = true;
        btn.style.opacity = '0.5';
        btn.style.cursor  = 'not-allowed';
        return;
    }

    if (pwd === confirm && pwd.length >= 8) {
        msg.textContent = '✓ Les mots de passe correspondent';
        msg.style.color = '#27ae60';
        btn.disabled = false;
        btn.style.opacity = '1';
        btn.style.cursor  = 'pointer';
    } else {
        msg.textContent = '✗ Les mots de passe ne correspondent pas';
        msg.style.color = '#e30613';
        btn.disabled = true;
        btn.style.opacity = '0.5';
        btn.style.cursor  = 'not-allowed';
    }
}
</script>
{% endblock %}