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

{% block title %}Exercer mes droits RGPD — NUM-ECARD{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        /* ── Layout wrapper ── */
        .rgpd-form-page {
            background: #f0f4f8;
            min-height: calc(100vh - 60px);
            padding: 40px 20px 80px;
        }
        .rgpd-wrapper {
            max-width: 700px;
            margin: 0 auto;
        }

        /* ── Header ── */
        .rgpd-header {
            background: #1A3C5E;
            color: white;
            padding: 32px 36px 28px;
            border-radius: 12px 12px 0 0;
        }
        .rgpd-header h1 {
            font-size: 22px; font-weight: 700; margin-bottom: 6px;
        }
        .rgpd-header p {
            font-size: 13px; opacity: 0.75; margin: 0;
        }
        .rgpd-version-badge {
            display: inline-block; margin-top: 12px;
            background: rgba(255,255,255,0.12);
            border: 1px solid rgba(255,255,255,0.2);
            padding: 3px 10px; border-radius: 20px;
            font-size: 11px; font-family: monospace;
        }

        /* ── Carte principale ── */
        .rgpd-card {
            background: white;
            border-radius: 0 0 12px 12px;
            padding: 28px 32px;
            box-shadow: 0 4px 24px rgba(0,0,0,0.08);
        }

        /* ── Bandeau N1 (espace client) ── */
        .rgpd-n1-banner {
            background: #d1f2eb;
            border: 1.5px solid #a2d9ce;
            border-radius: 10px;
            padding: 16px 20px;
            margin-bottom: 28px;
            display: flex; gap: 14px; align-items: flex-start;
        }
        .rgpd-n1-banner .banner-icon { font-size: 20px; flex-shrink: 0; margin-top: 2px; }
        .rgpd-n1-banner-title { font-size: 14px; font-weight: 700; color: #148f77; margin-bottom: 6px; }
        .rgpd-n1-banner-body { font-size: 13px; color: #475569; line-height: 1.6; }
        .rgpd-n1-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
        .rgpd-n1-tag {
            background: white; border: 1px solid #a2d9ce;
            border-radius: 20px; padding: 3px 12px; font-size: 12px;
            color: #148f77; font-weight: 600; text-decoration: none;
        }
        .rgpd-n1-tag:hover { background: #f0faf7; }

        /* ── Info box ── */
        .rgpd-info-box {
            background: #ebf5fb;
            border-left: 4px solid #2471a3;
            border-radius: 0 8px 8px 0;
            padding: 14px 18px;
            font-size: 13px;
            margin-bottom: 28px;
            color: #475569;
            line-height: 1.6;
        }

        /* ── Section title ── */
        .rgpd-section-title {
            font-size: 13px; font-weight: 700;
            text-transform: uppercase; letter-spacing: 0.8px;
            color: #2471a3;
            border-bottom: 2px solid #d6eaf8;
            padding-bottom: 8px; margin: 24px 0 16px;
        }

        /* ── Grille droits ── */
        .rgpd-rights-grid {
            display: grid; grid-template-columns: 1fr 1fr;
            gap: 10px; margin-bottom: 4px;
        }
        @media (max-width: 500px) { .rgpd-rights-grid { grid-template-columns: 1fr; } }

        .rgpd-right-item { cursor: pointer; }
        .rgpd-right-item input[type="radio"] { display: none; }
        .rgpd-right-item .right-label {
            display: flex; flex-direction: column; gap: 3px;
            padding: 12px 14px; border-radius: 8px;
            border: 1.5px solid #cbd5e1;
            background: #f2f3f4;
            transition: all 0.15s;
        }
        .rgpd-right-item input:checked + .right-label,
        .rgpd-right-item .right-label:hover {
            border-color: #2471a3; background: #ebf5fb;
        }
        .right-label strong { font-size: 13px; color: #0f1923; }
        .right-label span   { font-size: 11px; color: #475569; }

        /* ── Champs formulaire ── */
        .rgpd-form-row { margin-bottom: 16px; }
        .rgpd-form-row label {
            display: block; font-size: 13px;
            font-weight: 600; margin-bottom: 6px; color: #0f1923;
        }
        .rgpd-form-row input:not([type="checkbox"]),
        .rgpd-form-row textarea,
        .rgpd-form-row select {
            width: 100%; padding: 10px 12px;
            border: 1.5px solid #cbd5e1;
            border-radius: 8px; font-size: 13px;
            font-family: inherit;
            background: white; color: #0f1923;
            transition: border-color 0.15s;
        }
        .rgpd-form-row input:not([type="checkbox"]):focus,
        .rgpd-form-row textarea:focus,
        .rgpd-form-row select:focus {
            outline: none; border-color: #2471a3;
        }
        .rgpd-form-row textarea { min-height: 100px; resize: vertical; }
        .rgpd-form-row .hint { font-size: 11px; color: #64748b; margin-top: 4px; }
        .rgpd-req { color: #c0392b; }
        .rgpd-email-prefilled {
            background: #f5f5f7 !important;
            color: #86868b !important;
            cursor: not-allowed;
        }

        /* ── Avertissement identité ── */
        .rgpd-identity-warning {
            background: #fef3c7; border-left: 4px solid #b45309;
            border-radius: 0 8px 8px 0;
            padding: 12px 16px; font-size: 12px;
            color: #b45309; margin-bottom: 16px; line-height: 1.6;
        }

        /* ── Bouton submit ── */
        .rgpd-submit-btn {
            width: 100%; padding: 14px;
            background: #1A3C5E; color: white;
            border: none; border-radius: 8px;
            font-size: 15px; font-weight: 700;
            cursor: pointer; margin-top: 8px;
            transition: background 0.15s;
        }
        .rgpd-submit-btn:hover   { background: #2471a3; }
        .rgpd-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }

        /* ── Success box ── */
        .rgpd-success-box {
            display: none; text-align: center;
            padding: 28px 20px;
            background: #d5f5e3;
            border-radius: 10px; margin-top: 8px;
        }
        .rgpd-success-box .checkmark { font-size: 40px; margin-bottom: 12px; }
        .rgpd-success-box h2 { color: #1a7a4a; font-size: 18px; margin-bottom: 8px; }
        .rgpd-success-box p  { font-size: 13px; color: #475569; }
        .rgpd-ref-badge {
            display: inline-block; margin: 12px auto 0;
            background: white; border: 1.5px solid #a9dfbf;
            color: #1a7a4a; font-family: monospace;
            font-size: 14px; font-weight: 700;
            padding: 6px 16px; border-radius: 6px;
        }

        /* ── Footer note ── */
        .rgpd-footer-note {
            font-size: 12px; color: #6e6e73;
            margin-top: 24px; line-height: 1.7;
            text-align: center;
        }
        .rgpd-footer-note a { color: #0071e3; text-decoration: none; }
        .rgpd-footer-note a:hover { text-decoration: underline; }
    </style>
{% endblock %}

{% block body %}
<div class="rgpd-form-page">
<div class="rgpd-wrapper">

    <div class="rgpd-header">
        <h1>🔒 Exercez vos droits sur vos données personnelles</h1>
        <p>NUM-ECARD — SAS SANAGENCY — SIREN 932 944 242 — Toulouse</p>
        <span class="rgpd-version-badge">FORM-DROITS-V2 · {{ "now"|date("Y") }}</span>
    </div>

    <div class="rgpd-card">

        {# ── Bandeau N1 : espace client si droits directs disponibles ── #}
        <div class="rgpd-n1-banner">
            <div class="banner-icon">⚡</div>
            <div>
                <div class="rgpd-n1-banner-title">Droits accessibles instantanément dans votre espace client</div>
                <div class="rgpd-n1-banner-body">
                    Pour l'<strong>accès à vos données</strong>, la <strong>rectification</strong>,
                    la <strong>portabilité</strong> ou le <strong>retrait de consentement</strong>,
                    rendez-vous directement dans votre espace client — traitement immédiat, sans délai.
                    <div class="rgpd-n1-tags">
                        <a href="{{ path('app_account_mes_donnees') }}" class="rgpd-n1-tag">📦 Mes données (export)</a>
                        <a href="{{ path('app_account_profil') }}" class="rgpd-n1-tag">✏️ Rectification</a>
                        <a href="{{ path('app_account_preferences_page') }}" class="rgpd-n1-tag">🔔 Mes consentements</a>
                    </div>
                </div>
            </div>
        </div>

        <div class="rgpd-info-box">
            <strong>Ce formulaire est réservé aux demandes nécessitant une vérification manuelle.</strong><br>
            Nous répondrons dans un délai maximum de <strong>30 jours</strong> à compter de la réception.
            En cas de demande complexe, ce délai peut être prolongé de 2 mois (vous en serez informé).<br><br>
            Contact : <strong>rgpd@num-ecard.com</strong> — Référent RGPD : Patrice (Décision n° 2026-RGPD-001)
        </div>

        <form id="rgpdForm" novalidate>
            {# ── Sélection du droit ── #}
            <div class="rgpd-section-title">1. Votre droit</div>
            <div class="rgpd-rights-grid">
                <label class="rgpd-right-item">
                    <input type="radio" name="droit" value="effacement"
                        {% if app.request.query.get('droit') == 'effacement' %}checked{% endif %} required>
                    <div class="right-label">
                        <strong>🗑️ Droit à l'effacement</strong>
                        <span>Art. 17 RGPD — Supprimer vos données</span>
                    </div>
                </label>
                <label class="rgpd-right-item">
                    <input type="radio" name="droit" value="opposition"
                        {% if app.request.query.get('droit') == 'opposition' %}checked{% endif %}>
                    <div class="right-label">
                        <strong>🚫 Droit d'opposition</strong>
                        <span>Art. 21 RGPD — Refuser un traitement</span>
                    </div>
                </label>
                <label class="rgpd-right-item">
                    <input type="radio" name="droit" value="limitation"
                        {% if app.request.query.get('droit') == 'limitation' %}checked{% endif %}>
                    <div class="right-label">
                        <strong>⏸️ Droit à la limitation</strong>
                        <span>Art. 18 RGPD — Geler temporairement vos données</span>
                    </div>
                </label>
                <label class="rgpd-right-item">
                    <input type="radio" name="droit" value="reclamation"
                        {% if app.request.query.get('droit') == 'reclamation' %}checked{% endif %}>
                    <div class="right-label">
                        <strong>📋 Information / Réclamation</strong>
                        <span>Art. 77 RGPD — Question ou réclamation CNIL</span>
                    </div>
                </label>
            </div>

            {# ── Coordonnées ── #}
            <div class="rgpd-section-title">2. Vos coordonnées</div>
            <div class="rgpd-form-row">
                <label>Nom et prénom <span class="rgpd-req">*</span></label>
                <input type="text" name="nom" id="nom"
                    placeholder="Ex : Jean Dupont"
                    {% if app.user %}value="{{ app.user.prenom }} {{ app.user.nom }}"{% endif %}
                    required>
            </div>
            <div class="rgpd-form-row">
                <label>Adresse email <span class="rgpd-req">*</span></label>
                <input type="email" name="email" id="email"
                    {% if app.user %}
                        value="{{ app.user.email }}"
                        class="rgpd-email-prefilled"
                        readonly
                        title="Email pré-rempli depuis votre session"
                    {% else %}
                        placeholder="votre@email.com"
                    {% endif %}
                    required>
                {% if app.user %}
                    <p class="hint">🔒 Email pré-rempli depuis votre session — vérification d'identité facilitée.</p>
                {% else %}
                    <p class="hint">L'email utilisé lors de votre inscription NUM-ECARD</p>
                {% endif %}
            </div>

            {# ── Description ── #}
            <div class="rgpd-section-title">3. Précisez votre demande</div>
            <div class="rgpd-form-row">
                <label>Description de votre demande <span class="rgpd-req">*</span></label>
                <textarea name="description" id="description" required maxlength="2000"
                    placeholder="Décrivez précisément ce que vous souhaitez…&#10;Ex : Je souhaite que toutes mes données personnelles soient supprimées."></textarea>
            </div>
            <div class="rgpd-form-row">
                <label>Données concernées (si applicable)</label>
                <select name="categorie_donnees">
                    <option value="">— Sélectionnez si applicable —</option>
                    <option value="compte">Mon compte et profil</option>
                    <option value="commande">Mes commandes et factures</option>
                    <option value="carte">Ma carte NUM-ECARD</option>
                    <option value="emails">Emails reçus (marketing / transactionnel)</option>
                    <option value="analytics">Données de consultation de ma carte</option>
                    <option value="tout">Toutes mes données</option>
                    <option value="autre">Autre</option>
                </select>
            </div>

            {# ── Vérification d'identité ── #}
            <div class="rgpd-section-title">4. Vérification d'identité</div>
            <div class="rgpd-identity-warning">
                ⚠️ Pour protéger vos données, nous pouvons vous demander une preuve d'identité (copie CNI ou passeport).
                Ne joignez <strong>aucun document sensible</strong> à ce formulaire — nous vous contacterons si nécessaire.
            </div>
            <div class="rgpd-form-row">
                <label>Comment confirmez-vous votre identité ? <span class="rgpd-req">*</span></label>
                <select name="verification_identite" id="verification" required>
                    <option value="">— Sélectionnez —</option>
                    <option value="email_compte"{% if app.user %} selected{% endif %}>
                        Je confirme depuis l'adresse email de mon compte NUM-ECARD
                    </option>
                    <option value="envoi_sur_demande">Je fournirai une pièce d'identité si demandée par email</option>
                </select>
            </div>

            {# ── Consentement traitement ── #}
            <div class="rgpd-form-row">
                <label style="display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-weight:400;width:100%;">
                    <input type="checkbox" id="consentement" style="margin-top:3px;flex-shrink:0;accent-color:#1A3C5E;" required>
                    <span style="font-size:12px;color:#475569;flex:1;min-width:0;line-height:1.6;">
                        J'accepte que mes données (nom, email, description) soient traitées par SANAGENCY
                        pour traiter ma demande RGPD, conformément à l'Art. 6.1.c RGPD.
                        Ces données seront conservées 3 ans après clôture du dossier.
                        <span class="rgpd-req">*</span>
                    </span>
                </label>
            </div>

            <button type="submit" class="rgpd-submit-btn" id="submitBtn">📤 Envoyer ma demande</button>
        </form>

        {# ── Succès ── #}
        <div class="rgpd-success-box" id="successBox">
            <div class="checkmark">✅</div>
            <h2>Demande reçue !</h2>
            <p>Nous avons bien enregistré votre demande. Un accusé de réception va vous être envoyé par email dans quelques minutes.</p>
            <div class="rgpd-ref-badge" id="refBadge">Référence : —</div>
            <p style="margin-top:16px;font-size:12px;">
                Délai de traitement : <strong>30 jours maximum</strong>. Contact :
                <a href="mailto:rgpd@num-ecard.com" style="color:#1a7a4a;">rgpd@num-ecard.com</a>
            </p>
        </div>

        <p class="rgpd-footer-note">
            Responsable du traitement : <strong>SAS SANAGENCY</strong> — 8 place Roger Salengro, 31000 Toulouse — SIREN 932 944 242<br>
            Référent RGPD : Patrice (Décision n° 2026-RGPD-001) —
            <a href="mailto:rgpd@num-ecard.com">rgpd@num-ecard.com</a><br>
            Vous disposez du droit de déposer une réclamation auprès de la
            <a href="https://www.cnil.fr" target="_blank" rel="noopener">CNIL (cnil.fr)</a>.
        </p>

    </div>{# /rgpd-card #}
</div>{# /rgpd-wrapper #}
</div>{# /rgpd-form-page #}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
    (function() {
        document.getElementById('rgpdForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            const droit    = document.querySelector('input[name="droit"]:checked');
            const nom      = document.getElementById('nom').value.trim();
            const email    = document.getElementById('email').value.trim();
            const desc     = document.getElementById('description').value.trim();
            const verif    = document.getElementById('verification').value;
            const consent  = document.getElementById('consentement').checked;
            const categorie = document.querySelector('select[name="categorie_donnees"]').value;
            const btn      = document.getElementById('submitBtn');

            if (!droit || !nom || !email || !desc || !verif || !consent) {
                alert('Merci de remplir tous les champs obligatoires (*).');
                return;
            }
            const emailReg = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!emailReg.test(email)) { alert('Adresse email invalide.'); return; }

            btn.disabled = true;
            btn.textContent = '⏳ Envoi en cours…';

            try {
                const res = await fetch('{{ path("api_rgpd_droits") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    body: JSON.stringify({
                        droit:                 droit.value,
                        nom:                   nom,
                        email:                 email,
                        description:           desc,
                        categorie_donnees:     categorie || null,
                        verification_identite: verif
                    })
                });
                const data = await res.json();
                if (!res.ok) throw new Error(data.message || 'Erreur serveur');

                document.getElementById('refBadge').textContent = 'Référence : ' + data.ref;
                this.style.display = 'none';
                document.getElementById('successBox').style.display = 'block';
                window.scrollTo({ top: 0, behavior: 'smooth' });

            } catch(err) {
                btn.disabled = false;
                btn.textContent = '📤 Envoyer ma demande';
                alert('Une erreur est survenue. Veuillez écrire directement à rgpd@num-ecard.com');
            }
        });
    })();
    </script>
{% endblock %}