{% if environnement == 'recette' or environnement == 'preproduction' or environnement == 'production' and user.is_administrateur or environnement == 'production' and user.is_staff %}
<div id="macaron_retour" title="Ajouter un retour">
    <img src="https://revolucy.fr/wp-content/uploads/2024/12/icone-retour.png" alt="Besoin d'aide ?">
    {% if nb_notif > 0 %}
    <span class="macaron-puce" aria-label="{{ nb_notif }} retour(s) à traiter">{{ nb_notif }}</span>
    {% endif %}
</div>
<div id="popup_retour" style="display: none;">
    <div class="popup-retour-carte">
        <div class="popup-retour-poignee" aria-hidden="true"></div>
        <div class="popup-retour-entete">
            <h4>Ajouter un retour</h4>
            <span id="close_popup" style="cursor: pointer;" title="Fermer" role="button" aria-label="Fermer">&times;</span>
        </div>
        <form id="retour_client_form" method="post" enctype="multipart/form-data" action="{% url 'retour_client:retour_client_form' %}">
            {% csrf_token %}
            <div id="retour_doublons" style="display: none;">
                <div class="doublons-entete">
                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" x2="12" y1="9" y2="13"/><line x1="12" x2="12.01" y1="17" y2="17"/></svg>
                    <span class="doublons-titre"></span>
                </div>
                <ul class="doublons-liste"></ul>
            </div>
            {% if environnement == 'production' and jrs_restant_garantie < 0 %}
            <div class="solde-carte">
                <div class="solde-ligne">
                    <span>Solde de ticket horaire</span>
                    <strong class="solde_ticket {% if solde_ticket < 1 %}solde_faible{% endif %}">{{ solde_ticket }} H</strong>
                </div>
                {% if solde_ticket < 1 %}
                <a href="https://app.lucy-crm.fr/sav/souscription-client-ticket/{{ siren_client }}" target="_blank" class="btn-souscription">Souscrire à un pack de ticket de 10H</a>
                {% endif %}
            </div>
            {% endif %}
            <div>
                <label class="rvl-label" for="{{ form_bug.priorite.id_for_label }}">Priorité</label>
                {{ form_bug.priorite }}
                {% if form_bug.priorite.errors %}
                {% for error in form_bug.priorite.errors %}
                <p class="erreur">{{ error|escape }}</p>
                {% endfor %}
                {% endif %}
            </div>
            <div>
                <label class="rvl-label" for="{{ form_bug.titre.id_for_label }}">Titre</label>
                {{ form_bug.titre }}
                {% if form_bug.titre.errors %}
                {% for error in form_bug.titre.errors %}
                <p class="erreur">{{ error|escape }}</p>
                {% endfor %}
                {% endif %}
            </div>
            <div>
                <div class="rvl-label-ligne">
                    <label class="rvl-label" for="{{ form_bug.description.id_for_label }}">Description</label>
                    <button type="button" id="btn_copier_titre" title="Reprendre le titre dans la description">
                        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
                    </button>
                </div>
                {{ form_bug.description }}
                {% if form_bug.description.errors %}
                {% for error in form_bug.description.errors %}
                <p class="erreur">{{ error|escape }}</p>
                {% endfor %}
                {% endif %}
            </div>
            {% if lignes_cahier_recette %}
            <div>
                <label class="rvl-label" for="id_ligne_cahier_recette">Ligne de test</label>
                <select name="ligne_cahier_recette" id="id_ligne_cahier_recette">
                    <option value="">-- Aucune --</option>
                    {% for ligne in lignes_cahier_recette %}
                    <option value="{{ ligne.pk }}">[{{ ligne.code }}] {{ ligne.libelle|truncatechars:60 }}</option>
                    {% endfor %}
                </select>
            </div>
            {% endif %}
            <div>
                <label class="rvl-label">Image (capture d'écran ou pièce jointe)</label>
                <div id="capture_zone">
                    <img id="capture_preview" src="" alt="Aperçu de l'image" style="display: none;">
                    <span id="capture_vide">Aucune image</span>
                    <div class="capture-actions">
                        <button type="button" id="btn_capture_ecran" title="Capture réelle de l'écran : choisissez l'onglet, une fenêtre ou l'écran entier">
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
                            Capturer l'écran
                        </button>
                        <button type="button" id="btn_piece_jointe" title="Joindre une image depuis votre appareil (png, jpg, gif, webp)">
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
                            Joindre une image
                        </button>
                        <input type="file" id="input_piece_jointe" accept=".png,.jpg,.jpeg,.gif,.webp,image/png,image/jpeg,image/gif,image/webp" style="display: none;">
                    </div>
                </div>
            </div>
            <input type="hidden" id="lien_url" name="lien_url">
            <input type="hidden" id="navigateur" name="navigateur">
            <input type="hidden" id="image" name="image">
            <div id="retour_message" style="display: none; color: green;"></div>
            <button type="submit" class="mt-3 submit-retour">Envoyer</button>
            <a href="{% url 'retour_client:pipeline_retours' %}" target="_blank" class="mt-3 btn-plus-bug">Voir toute la liste</a>
        </form>
        <div id="retour_confirmation" style="display: none;">
            <div class="confirmation-pictohex">
                <svg width="72" height="80" viewBox="0 0 72 80" fill="none" aria-hidden="true">
                    <defs>
                        <linearGradient id="pictohex_grad" x1="6" y1="4" x2="66" y2="76" gradientUnits="userSpaceOnUse">
                            <stop stop-color="#0818af"/>
                            <stop offset="1" stop-color="#fb0065"/>
                        </linearGradient>
                    </defs>
                    <path d="M32 2.31a8 8 0 0 1 8 0l26 15.02a8 8 0 0 1 4 6.93v30.04a8 8 0 0 1-4 6.93L40 77.69a8 8 0 0 1-8 0L6 62.67a8 8 0 0 1-4-6.93V25.7a8 8 0 0 1 4-6.93z" fill="url(#pictohex_grad)"/>
                    <path d="M25 40.5 33 48l14-15" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </div>
            <p class="confirmation-titre">Retour n°<span id="num_retour_envoye"></span> envoyé à Revolucy</p>
            <p class="confirmation-texte">Nous revenons vers vous rapidement. Vous pouvez suivre son avancement dans la liste.</p>
            <div class="confirmation-actions">
                <a href="{% url 'retour_client:pipeline_retours' %}" target="_blank" class="btn-voir-liste">Voir toute la liste</a>
                <button type="button" id="btn_autre_retour">Envoyer un autre retour</button>
            </div>
        </div>
    </div>
</div>
<style>
    /* ===== Widget retour client — charte Revolucy (auto-suffisant) =====
       Injecté dans les pages du site hôte : tout est scopé sous
       #macaron_retour / #popup_retour, les variables des tokens produit
       (revolucy-tokens.css) sont dupliquées localement pour ne pas
       dépendre de la page hôte ni polluer ses styles */
    @import url('https://fonts.googleapis.com/css2?family=Onest:wght@300..900&family=Tektur:wght@400..900&display=swap');

    #macaron_retour, #popup_retour {
        /* Tokens produit locaux (copie de revolucy-tokens.css) */
        --p-primary: #0818af;
        --p-primary-hover: #1527d0;
        --p-accent: #fb0065;
        --p-surface: #ffffff;
        --p-surface-2: #f7f9ff;
        --p-surface-3: #eef1fb;
        --p-border: #e3e7f3;
        --p-border-strong: #c9d1e8;
        --p-text: #04082d;
        --p-text-soft: #39426b;
        --p-text-mute: #67738f;
        --p-ring: #9f80ff;
        --env-horsg: #c20052;
        --env-horsg-bg: #fff0f5;
        --st-valid-bg: #e0f4e9;
        --st-valid-ink: #147a41;
        --st-wait-ink: #a83232;
        --p-grad-cover: linear-gradient(75deg, #0818af 0%, #fb0065 100%);
        --p-sh-float: 0 18px 40px rgba(8, 24, 175, 0.22);
        --font-display: "Tektur", "Exo 2", system-ui, sans-serif;
        --font-body: "Onest", ui-sans-serif, system-ui, sans-serif;
        font-family: var(--font-body);
    }

    #popup_retour, #popup_retour * { box-sizing: border-box; }

    @keyframes rvlPop {
        from { transform: scale(.97) translateY(10px); opacity: 0; }
        to   { transform: scale(1) translateY(0); opacity: 1; }
    }

    /* ---------- Bouton flottant ---------- */

    #macaron_retour {
        position: fixed;
        bottom: 100px;
        right: 0;
        z-index: 999;
        cursor: pointer;
        transform-origin: right center;
        transition: transform 0.16s cubic-bezier(0.2, 0.7, 0.2, 1);
    }

    #macaron_retour > img {
        max-width: 60px;
        display: block;
    }

    /* Zoom sur le conteneur : l'image ET la puce de notification suivent */
    #macaron_retour:hover {
        transform: translateX(-4px) scale(1.05);
    }

    /* Puce de notification (retours à valider / non traités) */
    #macaron_retour .macaron-puce {
        position: absolute;
        top: -4px;
        left: -4px;
        min-width: 20px;
        height: 20px;
        padding: 0 5px;
        box-sizing: border-box;
        border-radius: 999px;
        background: var(--p-accent);
        color: #fff;
        border: 2px solid #fff;
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 11px;
        line-height: 16px;
        text-align: center;
        box-shadow: 0 3px 8px rgba(251, 0, 101, 0.4);
    }

    /* ---------- Overlay + popup ---------- */

    #popup_retour {
        position: fixed;
        inset: 0;
        z-index: 9999;
        background: rgba(4, 8, 45, 0.28);
    }

    #popup_retour .popup-retour-carte {
        position: absolute;
        bottom: 24px;
        right: 0;
        width: 400px;
        max-width: calc(100vw - 16px);
        max-height: calc(100vh - 48px);
        overflow-y: auto;
        background: var(--p-surface);
        border: 1px solid var(--p-border);
        border-right: none;
        border-radius: 18px 0 0 18px;
        box-shadow: var(--p-sh-float);
        animation: rvlPop 0.28s ease;
    }

    #popup_retour .popup-retour-poignee { display: none; }

    /* ---------- En-tête ---------- */

    #popup_retour .popup-retour-entete {
        position: relative;
        padding: 18px 22px 14px;
        background: var(--p-grad-cover);
        border-radius: 18px 0 0 0;
    }

    #popup_retour .popup-retour-entete h4 {
        margin: 0;
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 16px;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: #fff;
    }

    #close_popup {
        position: absolute;
        top: 14px;
        right: 16px;
        width: 28px;
        height: 28px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.18);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        line-height: 1;
        transition: background 0.16s ease, color 0.16s ease;
    }
    #close_popup:hover { background: rgba(255, 255, 255, 0.32); color: #fff; }

    /* ---------- Corps du formulaire ---------- */

    #retour_client_form {
        padding: 16px 22px 20px;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }
    #retour_client_form > div { margin: 0; }

    #popup_retour .rvl-label,
    #retour_client_form label {
        display: block;
        font-size: 12px;
        font-weight: 600;
        color: var(--p-text-soft);
        margin-bottom: 6px;
        font-family: var(--font-body);
    }

    /* Ligne label + action (icône de reprise du titre) */
    #retour_client_form .rvl-label-ligne {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 6px;
    }
    #retour_client_form .rvl-label-ligne label { margin-bottom: 0; }

    #btn_copier_titre {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        padding: 0;
        border: 1px solid var(--p-border-strong);
        border-radius: 6px;
        background: var(--p-surface);
        color: var(--p-text-soft);
        cursor: pointer;
        transition: background 0.16s ease, color 0.16s ease;
    }
    #btn_copier_titre:hover { background: var(--p-surface-2); color: var(--p-primary); }

    #retour_client_form select, #retour_client_form textarea, #retour_client_form input {
        width: 100%;
        box-sizing: border-box;
        margin: 0;
        border-radius: 10px;
        padding: 10px 12px;
        border: 1px solid var(--p-border-strong);
        font-family: var(--font-body);
        font-size: 13px;
        background: var(--p-surface) !important;
        background-color: var(--p-surface) !important;
        color: var(--p-text) !important;
        -webkit-text-fill-color: var(--p-text);
        transition: border-color 0.16s ease, box-shadow 0.16s ease;
    }
    #retour_client_form select { cursor: pointer; }
    #retour_client_form textarea { min-height: 88px; resize: vertical; }

    #retour_client_form select option {
        background: var(--p-surface);
        color: var(--p-text);
    }

    #retour_client_form select:focus, #retour_client_form textarea:focus, #retour_client_form input:focus {
        border-color: var(--p-ring);
        box-shadow: 0 0 0 3px rgba(159, 128, 255, 0.35);
        outline: none;
    }

    #retour_client_form p.erreur {
        margin: 6px 0 0;
        font-size: 12px;
        color: var(--st-wait-ink);
    }

    /* ---------- Indice anti-doublon (retours similaires sur la page) ---------- */

    #popup_retour #retour_doublons {
        border: 1px solid #e0a80f;
        border-radius: 12px;
        padding: 10px 12px;
        background: #fdf3d6;
        color: #8a6200;
    }
    #popup_retour .doublons-entete {
        display: flex;
        align-items: center;
        gap: 7px;
        font-family: var(--font-display);
        font-weight: 600;
        font-size: 12.5px;
    }
    #popup_retour .doublons-entete svg { flex-shrink: 0; }
    #popup_retour .doublons-liste {
        margin: 8px 0 0;
        padding-left: 22px;
        font-size: 12px;
        line-height: 1.5;
    }
    #popup_retour .doublons-liste li { margin: 0; }

    /* ---------- Bloc solde horaire (hors garantie) ---------- */

    #popup_retour .solde-carte {
        border: 1px solid var(--env-horsg);
        border-radius: 12px;
        padding: 12px 14px;
        background: var(--env-horsg-bg);
    }

    #popup_retour .solde-ligne {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    #popup_retour .solde-ligne > span {
        font-size: 12px;
        color: var(--p-text-soft);
    }

    #popup_retour .solde-ligne strong.solde_ticket {
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 14px;
        color: var(--env-horsg);
    }
    #popup_retour .solde-ligne strong.solde_ticket.solde_faible { color: var(--p-accent); }

    #popup_retour a.btn-souscription {
        display: block;
        width: 100%;
        margin-top: 10px;
        padding: 9px;
        border: none;
        border-radius: 9px;
        background: var(--env-horsg);
        color: #fff;
        font-family: var(--font-display);
        font-weight: 600;
        font-size: 12px;
        letter-spacing: .01em;
        text-align: center;
        text-decoration: none;
        cursor: pointer;
        transition: transform 0.16s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.16s ease;
    }
    #popup_retour a.btn-souscription:hover { transform: translateY(-2px); filter: brightness(1.08); color: #fff; }

    /* ---------- Zone de capture ---------- */

    #capture_zone {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        border: 1px dashed var(--p-border-strong);
        border-radius: 10px;
        padding: 12px;
    }

    #capture_preview {
        max-height: 70px;
        max-width: 120px;
        border-radius: 6px;
        border: 1px solid var(--st-valid-ink);
        cursor: zoom-in;
    }

    #capture_vide {
        font-size: 12px;
        color: var(--p-text-mute);
        text-align: center;
    }

    #capture_zone .capture-actions {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        flex-wrap: wrap;
    }

    #btn_capture_ecran, #btn_piece_jointe {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 12px;
        border: 1px solid var(--p-border-strong);
        border-radius: 8px;
        background: var(--p-surface);
        color: var(--p-text);
        font-family: var(--font-display);
        font-weight: 600;
        font-size: 12px;
        white-space: nowrap;
        cursor: pointer;
        transition: background 0.16s ease;
    }
    #btn_capture_ecran:hover, #btn_piece_jointe:hover { background: var(--p-surface-2); }

    /* ---------- Message + boutons d'action ---------- */

    #retour_message {
        text-align: center;
        font-size: 13px;
        background: var(--p-surface-2);
        border: 1px solid var(--p-border);
        padding: 8px;
        border-radius: 10px;
        width: 100%;
    }

    #retour_client_form button.submit-retour {
        display: block;
        width: 100%;
        box-sizing: border-box;
        margin: 0;
        background: var(--p-primary);
        color: #fff;
        border: none;
        padding: 13px;
        border-radius: 10px;
        text-align: center;
        font-family: var(--font-display);
        font-size: 14px;
        line-height: 1;
        font-weight: 600;
        letter-spacing: .01em;
        cursor: pointer;
        box-shadow: 0 6px 16px rgba(8, 24, 175, 0.24);
        transition: transform 0.16s cubic-bezier(0.2, 0.7, 0.2, 1), background 0.16s ease, box-shadow 0.16s ease;
    }

    #retour_client_form button.submit-retour:hover {
        background: var(--p-primary-hover);
        transform: translateY(-2px);
        box-shadow: 0 10px 24px rgba(8, 24, 175, 0.32);
    }
    #retour_client_form button.submit-retour:disabled {
        opacity: .4;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

    #popup_retour a.btn-plus-bug {
        display: block;
        width: 100%;
        box-sizing: border-box;
        margin: 0;
        background: var(--p-surface);
        color: var(--p-text);
        border: 1px solid var(--p-border-strong);
        padding: 12px;
        border-radius: 10px;
        text-align: center;
        font-family: var(--font-display);
        font-size: 13px;
        line-height: 1;
        font-weight: 600;
        letter-spacing: .01em;
        text-decoration: none;
        transition: transform 0.16s cubic-bezier(0.2, 0.7, 0.2, 1), background 0.16s ease;
    }

    #popup_retour a.btn-plus-bug:hover {
        background: var(--p-surface-2);
        color: var(--p-text);
        transform: translateY(-2px);
    }

    /* ---------- Écran de confirmation ---------- */

    #retour_confirmation {
        padding: 34px 24px;
        text-align: center;
    }

    #retour_confirmation .confirmation-pictohex {
        display: inline-flex;
        margin-bottom: 16px;
        filter: drop-shadow(0 10px 20px rgba(8, 24, 175, 0.28));
    }
    #retour_confirmation .confirmation-pictohex svg { display: block; }

    #retour_confirmation .confirmation-titre {
        margin: 0;
        font-size: 15px;
        font-weight: 600;
        color: var(--p-text);
    }

    #retour_confirmation .confirmation-texte {
        margin: 8px 0 0;
        font-size: 13px;
        color: var(--p-text-soft);
        line-height: 1.5;
    }

    #retour_confirmation .confirmation-actions {
        display: flex;
        flex-direction: column;
        gap: 9px;
        margin-top: 22px;
    }

    /* Action attendue : « Voir toute la liste » en primaire navy plein */
    #retour_confirmation .confirmation-actions a.btn-voir-liste {
        width: 100%;
        padding: 12px;
        border: 1px solid transparent;
        border-radius: 10px;
        background: var(--p-primary);
        color: #fff;
        font-family: var(--font-display);
        font-weight: 600;
        font-size: 13px;
        letter-spacing: .01em;
        text-align: center;
        text-decoration: none;
        cursor: pointer;
        box-shadow: 0 6px 16px rgba(8, 24, 175, 0.24);
        transition: transform 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
    }
    #retour_confirmation .confirmation-actions a.btn-voir-liste:hover {
        background: var(--p-primary-hover);
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 10px 24px rgba(8, 24, 175, 0.32);
    }

    /* Action secondaire : « Envoyer un autre retour » en contour discret */
    #retour_confirmation .confirmation-actions button {
        width: 100%;
        padding: 11px;
        border: 1px solid var(--p-border-strong);
        border-radius: 10px;
        background: var(--p-surface);
        color: var(--p-text);
        font-family: var(--font-display);
        font-weight: 600;
        font-size: 13px;
        letter-spacing: .01em;
        text-align: center;
        text-decoration: none;
        cursor: pointer;
        transition: background 0.16s ease;
    }
    #retour_confirmation .confirmation-actions button:hover {
        background: var(--p-surface-2);
        color: var(--p-text);
    }

    /* ---------- Styles historiques utilisés sur d'autres écrans du module ---------- */

    table.retour_bug_table td {
        border: 1px solid #e6ecff;
        padding: 6px 8px;
    }

    table.retour_bug_table tr > td:first-child {
        background: #e6ecff;
    }

    #accordionBug .accordion-header button.collapsed {
        background: #fff;
        border-bottom: 1px solid #e6ecff;
    }

    #accordionBug .accordion-header button {
        background: #e6ecff;
        padding: 7px 10px;
        color: #04082d;
    }

    #accordionBug .accordion-collapse {
        padding-bottom: 5px;
    }

    span.repondant {
        position: absolute;
        right: 10px;
        font-size: 15px;
    }

    #liste_retours .accordion-body {
        padding: 10px;
        font-size: 16px;
    }

    span.num_ticket {
        background: #6e6e87;
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        border-radius: 4px;
        margin-right: 13px;
        font-size: 12px;
        font-weight: 700;
        color: #fff;
    }

    /* ---------- Mobile : bottom-sheet ---------- */

    @media (max-width: 576px) {
        /* Macaron plus discret sur mobile */
        #macaron_retour > img { max-width: 44px; }

        #popup_retour .popup-retour-carte {
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            max-width: 100%;
            border-radius: 22px 22px 0 0;
            max-height: 88%;
            border-left: none;
            border-right: none;
            border-bottom: none;
        }

        /* Poignée posée PAR-DESSUS le dégradé (évite la double bande blanche au-dessus de l'en-tête) */
        #popup_retour .popup-retour-poignee {
            display: block;
            position: absolute;
            top: 8px;
            left: 50%;
            transform: translateX(-50%);
            width: 40px;
            height: 4px;
            border-radius: 999px;
            background: rgba(255, 255, 255, .6);
            z-index: 2;
        }

        /* L'en-tête dégradé démarre tout en haut de la carte, une seule bande */
        #popup_retour .popup-retour-entete { padding-top: 20px; border-radius: 22px 22px 0 0; }
        #close_popup { top: 12px; }
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        var macaron = document.getElementById('macaron_retour');
        var popup = document.getElementById('popup_retour');
        var closePopup = document.getElementById('close_popup');
        var form = document.getElementById('retour_client_form');
        var messageDiv = document.getElementById('retour_message');
        var confirmation = document.getElementById('retour_confirmation');
        var btnAutreRetour = document.getElementById('btn_autre_retour');
        var doublonsBox = document.getElementById('retour_doublons');

        function remplirChampsContexte() {
            // Renseigne les champs cachés (vidés par form.reset() après chaque envoi)
            document.getElementById('lien_url').value = window.location.href;
            document.getElementById('navigateur').value = navigator.userAgent;
        }

        function chargerDoublons() {
            // Signale les retours similaires sur la même page selon le titre saisi (aide anti-doublon, optionnelle)
            if (!doublonsBox) return;
            var champTitre = form.querySelector('[name=titre]');
            var saisie = champTitre ? champTitre.value.trim() : '';
            if (saisie.length < 3) {
                doublonsBox.style.display = 'none';
                return;
            }
            fetch("{% url 'retour_client:retours_similaires' %}?url=" + encodeURIComponent(window.location.href)
                    + "&titre=" + encodeURIComponent(saisie), {
                headers: { 'X-Requested-With': 'XMLHttpRequest' }
            })
                .then(function (r) { return r.ok ? r.json() : null; })
                .then(function (data) {
                    if (!data || !data.count) {
                        doublonsBox.style.display = 'none';
                        return;
                    }
                    var titre = doublonsBox.querySelector('.doublons-titre');
                    var liste = doublonsBox.querySelector('.doublons-liste');
                    titre.textContent = data.count + (data.count > 1
                        ? ' retours similaires sur cette page'
                        : ' retour similaire sur cette page');
                    liste.innerHTML = '';
                    (data.retours || []).forEach(function (retour) {
                        var li = document.createElement('li');
                        li.textContent = 'N°' + retour.id + ' — ' + retour.titre;
                        liste.appendChild(li);
                    });
                    doublonsBox.style.display = 'block';
                })
                .catch(function () { /* silencieux : l'indice reste optionnel */ });
        }

        macaron.addEventListener('click', function () {
            // Réaffiche le formulaire si la confirmation était restée affichée
            if (confirmation && confirmation.style.display === 'block') {
                confirmation.style.display = 'none';
                form.style.display = 'flex';
            }
            popup.style.display = 'block';
            remplirChampsContexte();
            if (doublonsBox) doublonsBox.style.display = 'none';
        });

        // Recherche de retours similaires pendant la saisie du titre (déclenchée sur le contenu tapé)
        var champTitreDoublons = form.querySelector('[name=titre]');
        if (champTitreDoublons) {
            var timerDoublons;
            champTitreDoublons.addEventListener('input', function () {
                clearTimeout(timerDoublons);
                timerDoublons = setTimeout(chargerDoublons, 350);
            });
        }

        closePopup.addEventListener('click', function () {
            popup.style.display = 'none';
        });

        // Fermeture au clic sur le voile (en dehors de la carte)
        popup.addEventListener('click', function (e) {
            if (e.target === popup) popup.style.display = 'none';
        });

        function afficherConfirmation(idRetour) {
            // Bascule sur l'écran de confirmation après envoi du ticket
            document.getElementById('num_retour_envoye').textContent = idRetour;
            form.style.display = 'none';
            confirmation.style.display = 'block';
        }

        if (btnAutreRetour) {
            btnAutreRetour.addEventListener('click', function () {
                // Retour au formulaire pour saisir un nouveau retour
                confirmation.style.display = 'none';
                messageDiv.style.display = 'none';
                form.style.display = 'flex';
            });
        }

        // ===== Relance de tous les tickets à traiter vers OpenHands (admins) =====
        var btnOpenhands = document.getElementById('openhands_relancer');
        if (btnOpenhands) {
            btnOpenhands.addEventListener('click', function () {
                var label = btnOpenhands.querySelector('.openhands-label');
                var texteInitial = label ? label.textContent : '';
                btnOpenhands.disabled = true;
                if (label) label.textContent = 'Envoi…';

                var csrf = form.querySelector('[name=csrfmiddlewaretoken]');
                fetch(btnOpenhands.getAttribute('data-url'), {
                    method: 'POST',
                    headers: { 'X-CSRFToken': csrf ? csrf.value : '' },
                })
                    .then(function (r) { return r.ok ? r.json() : null; })
                    .then(function (data) {
                        if (data && data.ok) {
                            if (label) label.textContent = data.envoyes + ' envoyé(s)';
                        } else {
                            if (label) label.textContent = 'Échec';
                        }
                    })
                    .catch(function () { if (label) label.textContent = 'Échec'; })
                    .finally(function () {
                        setTimeout(function () {
                            btnOpenhands.disabled = false;
                            if (label) label.textContent = texteInitial;
                        }, 2500);
                    });
            });
        }

        var submitInProgress = false;

        form.addEventListener('submit', function (e) {
            e.preventDefault();
            if (submitInProgress) return;
            submitInProgress = true;

            var submitBtn = form.querySelector('.submit-retour');
            if (submitBtn) submitBtn.disabled = true;

            var formData = new FormData(form);

            fetch(form.action, {
                method: 'POST',
                body: formData,
                headers: {
                    'X-CSRFToken': form.querySelector('[name=csrfmiddlewaretoken]').value,
                },
            })
                .then(function(response) {
                    if (!response.ok) throw new Error('Erreur serveur (' + response.status + ')');
                    return response.json();
                })
                .then(data => {
                    if (data.success) {
                        messageDiv.style.display = 'none';
                        form.reset();
                        remplirChampsContexte();
                        reinitialiserCapture();
                        afficherConfirmation(data.id);
                    } else {
                        messageDiv.style.display = 'block';
                        messageDiv.style.color = 'red';
                        messageDiv.textContent = 'Erreur lors de la soumission';
                    }
                })
                .catch(error => {
                    messageDiv.style.display = 'block';
                    messageDiv.style.color = 'red';
                    messageDiv.textContent = 'Erreur lors de la soumission du formulaire';
                    console.error('Erreur:', error);
                })
                .finally(function() {
                    submitInProgress = false;
                    if (submitBtn) submitBtn.disabled = false;
                });
        });

        // ===== Capture d'écran native (Screen Capture API) =====
        // Capture le rendu réel du navigateur : l'utilisateur choisit l'onglet,
        // une fenêtre ou l'écran entier dans la boîte de dialogue du navigateur.
        // Nécessite HTTPS (ou localhost). Aucune capture automatique : la capture
        // est volontaire via le bouton, le ticket peut partir sans image

        function reinitialiserCapture() {
            // Vide l'image et remet l'aperçu à zéro (après envoi du ticket)
            document.getElementById('image').value = '';
            var inputPieceJointe = document.getElementById('input_piece_jointe');
            if (inputPieceJointe) inputPieceJointe.value = '';
            var preview = document.getElementById('capture_preview');
            var captureVide = document.getElementById('capture_vide');
            if (preview) {
                preview.src = '';
                preview.style.display = 'none';
            }
            if (captureVide) {
                captureVide.textContent = 'Aucune image';
                captureVide.style.color = '';
                captureVide.style.display = 'block';
            }
        }

        function enregistrerImage(dataUrl, libelle) {
            // Stocke l'image dans le champ caché et met à jour l'aperçu
            document.getElementById('image').value = dataUrl;

            var preview = document.getElementById('capture_preview');
            var captureVide = document.getElementById('capture_vide');
            if (preview) {
                preview.src = dataUrl;
                preview.style.display = 'block';
            }
            if (captureVide) {
                // Aucun label de confirmation : l'aperçu de l'image suffit
                captureVide.style.display = 'none';
            }
        }

        function enregistrerCapture(canvas) {
            // Redimensionne si besoin, convertit en JPEG et enregistre la capture
            var MAX_LARGEUR = 1920;
            if (canvas.width > MAX_LARGEUR) {
                var scale = MAX_LARGEUR / canvas.width;
                var resizedCanvas = document.createElement('canvas');
                resizedCanvas.width = MAX_LARGEUR;
                resizedCanvas.height = Math.round(canvas.height * scale);
                resizedCanvas.getContext('2d').drawImage(canvas, 0, 0, resizedCanvas.width, resizedCanvas.height);
                canvas = resizedCanvas;
            }
            enregistrerImage(canvas.toDataURL('image/jpeg', 0.92), 'Capture ajoutée');
        }

        async function captureEcranNative() {
            // Demande au navigateur une vraie capture (une seule frame, le flux est coupé aussitôt)
            var stream = await navigator.mediaDevices.getDisplayMedia({
                video: { displaySurface: 'monitor' },
                audio: false
            });
            try {
                var video = document.createElement('video');
                video.srcObject = stream;
                await video.play();
                // Laisser le temps au navigateur de fournir une frame complète
                await new Promise(function (resolve) { setTimeout(resolve, 400); });

                var canvas = document.createElement('canvas');
                canvas.width = video.videoWidth;
                canvas.height = video.videoHeight;
                canvas.getContext('2d').drawImage(video, 0, 0);
                return canvas;
            } finally {
                stream.getTracks().forEach(function (track) { track.stop(); });
            }
        }

        function chargerHtml2canvas() {
            // Charge html2canvas à la demande (fallback universel : tablettes, mobiles, HTTP)
            return new Promise(function (resolve, reject) {
                if (window.html2canvas) return resolve(window.html2canvas);
                var script = document.createElement('script');
                script.src = 'https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js';
                script.onload = function () { resolve(window.html2canvas); };
                script.onerror = function () { reject(new Error('Chargement html2canvas impossible')); };
                document.head.appendChild(script);
            });
        }

        async function captureEcranDom() {
            // Redessine la page courante dans un canvas (pas de permission, fonctionne partout)
            var html2canvas = await chargerHtml2canvas();
            return html2canvas(document.body, {
                useCORS: true,
                logging: false,
                windowWidth: document.documentElement.clientWidth,
                windowHeight: document.documentElement.clientHeight,
                scrollX: -window.scrollX,
                scrollY: -window.scrollY,
            });
        }

        var btnCaptureEcran = document.getElementById('btn_capture_ecran');
        var captureNativeSupportee = !!(navigator.mediaDevices && navigator.mediaDevices.getDisplayMedia);

        if (btnCaptureEcran) {
            btnCaptureEcran.addEventListener('click', async function () {
                var captureVide = document.getElementById('capture_vide');

                // Masquer la popup pour ne pas l'avoir dans la capture
                popup.style.display = 'none';
                try {
                    // Capture native fidèle si disponible, sinon rendu DOM de la page
                    // (iPad, Galaxy Tab, mobiles, HTTP non sécurisé)
                    var canvas;
                    if (captureNativeSupportee) {
                        try {
                            canvas = await captureEcranNative();
                        } catch (erreurNative) {
                            // Annulation volontaire : on ne force pas de capture
                            if (erreurNative && erreurNative.name === 'NotAllowedError') throw erreurNative;
                            // Échec technique (Wayland, pilote, etc.) : repli sur le rendu DOM
                            console.warn('Capture native en échec, repli sur le rendu DOM:', erreurNative);
                            canvas = await captureEcranDom();
                        }
                    } else {
                        canvas = await captureEcranDom();
                    }
                    enregistrerCapture(canvas);
                } catch (error) {
                    // Permission refusée, sélection annulée ou rendu impossible : pas d'image
                    console.warn('Capture annulée:', error);
                    if (captureVide) { captureVide.textContent = 'Capture annulée'; captureVide.style.display = 'block'; }
                } finally {
                    popup.style.display = 'block';
                }
            });
        }

        // ===== Reprise du titre dans la description =====

        var btnCopierTitre = document.getElementById('btn_copier_titre');
        if (btnCopierTitre) {
            btnCopierTitre.addEventListener('click', function () {
                var champTitre = form.querySelector('[name="titre"]');
                var champDescription = form.querySelector('[name="description"]');
                if (!champTitre || !champDescription) return;

                var titre = champTitre.value.trim();
                if (!titre) {
                    // Rien à copier : on guide l'utilisateur vers le titre
                    champTitre.focus();
                    return;
                }

                // Copie le titre dans la description (à la suite si elle contient déjà du texte)
                champDescription.value = champDescription.value.trim()
                    ? champDescription.value.replace(/\s+$/, '') + '\n' + titre
                    : titre;
                champDescription.focus();
            });
        }

        // ===== Pièce jointe image (alternative à la capture, remplit le même champ) =====

        var btnPieceJointe = document.getElementById('btn_piece_jointe');
        var inputPieceJointe = document.getElementById('input_piece_jointe');
        if (btnPieceJointe && inputPieceJointe) {
            btnPieceJointe.addEventListener('click', function () {
                inputPieceJointe.click();
            });

            inputPieceJointe.addEventListener('change', function () {
                var fichier = inputPieceJointe.files && inputPieceJointe.files[0];
                if (!fichier) return;

                var captureVide = document.getElementById('capture_vide');
                var extensionsAutorisees = ['png', 'jpg', 'jpeg', 'gif', 'webp'];
                var extension = fichier.name.split('.').pop().toLowerCase();
                if (extensionsAutorisees.indexOf(extension) === -1) {
                    if (captureVide) {
                        captureVide.textContent = 'Format non supporté (png, jpg, gif, webp)';
                        captureVide.style.color = 'var(--st-wait-ink)';
                        captureVide.style.display = 'block';
                    }
                    inputPieceJointe.value = '';
                    return;
                }

                // Charge l'image puis passe par le canvas pour la redimensionner et la normaliser en JPEG
                var lecteur = new FileReader();
                lecteur.onload = function () {
                    var img = new Image();
                    img.onload = function () {
                        var canvas = document.createElement('canvas');
                        canvas.width = img.naturalWidth;
                        canvas.height = img.naturalHeight;
                        var contexte = canvas.getContext('2d');
                        // Fond blanc : la conversion JPEG rendrait noires les zones transparentes (png, webp)
                        contexte.fillStyle = '#ffffff';
                        contexte.fillRect(0, 0, canvas.width, canvas.height);
                        contexte.drawImage(img, 0, 0);
                        enregistrerCapture(canvas);
                    };
                    img.onerror = function () {
                        if (captureVide) {
                            captureVide.textContent = 'Image illisible';
                            captureVide.style.color = 'var(--st-wait-ink)';
                            captureVide.style.display = 'block';
                        }
                    };
                    img.src = lecteur.result;
                };
                lecteur.readAsDataURL(fichier);
            });
        }

        // Agrandir l'aperçu dans un nouvel onglet
        var capturePreview = document.getElementById('capture_preview');
        if (capturePreview) {
            capturePreview.addEventListener('click', function () {
                var w = window.open('about:blank');
                if (w) w.document.write('<img src="' + capturePreview.src + '" style="max-width:100%;">');
            });
        }

    });
</script>
{% endif %}