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

{% block title %}Télédéclaration ma-cantine — GestRestoSco{% endblock %}

{% block body %}
<div class="container-fluid mt-4">

    {# ── En-tête ── #}
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="mb-0"><i class="bi bi-file-earmark-text"></i> Télédéclaration ma-cantine</h4>
            <small class="text-muted">Envoi des données EGAlim vers la plateforme nationale</small>
        </div>
        <a href="{{ path('tenant_egalim_index') }}" class="btn btn-outline-secondary btn-sm">
            <i class="bi bi-arrow-left"></i> Retour EGAlim
        </a>
    </div>

    {# ── Sélecteur d'année ── #}
    <div class="card mb-4">
        <div class="card-body">
            <form method="GET" class="d-flex align-items-center gap-3">
                <label class="form-label mb-0 fw-semibold">Année de déclaration :</label>
                <select name="annee" class="form-select form-select-sm w-auto" onchange="this.form.submit()">
                    {% for a in (annee_courante - 3)..(annee_courante) %}
                        <option value="{{ a }}" {% if a == annee %}selected{% endif %}>{{ a }}</option>
                    {% endfor %}
                </select>
                <small class="text-muted">Période : {{ dateDebut }} → {{ dateFin }}</small>
            </form>
        </div>
    </div>

    {# ── Bandeau total HT ── #}
    <div class="alert alert-primary d-flex align-items-center gap-3 mb-4">
        <i class="bi bi-cash-stack fs-3"></i>
        <div>
            <div class="fw-bold fs-5">Total achats alimentaires : {{ totaux.total_general|number_format(2, ',', ' ') }} € <span class="badge bg-primary ms-1">HT</span></div>
            <small class="text-muted">Période : {{ dateDebut }} → {{ dateFin }} — Montants en Hors Taxes conformément à la réglementation ma-cantine EGAlim</small>
        </div>
    </div>

    {# ── Résumé conformité (étapes 1 & 3) ── #}
    {% set total_durable_hors_bio = totaux.total_durable - totaux.total_bio %}
    {% set pct_durable_hors_bio = totaux.total_general > 0 ? (total_durable_hors_bio / totaux.total_general * 100)|round(1) : 0 %}
    <div class="row g-3 mb-4">
        <div class="col-md-6 col-lg-3">
            <div class="card border-primary h-100">
                <div class="card-body text-center">
                    <div class="text-muted small mb-1"><i class="bi bi-1-circle"></i> Étape 1 — Total achats alimentaires</div>
                    <h2 class="text-primary mb-0">{{ totaux.total_general|number_format(2, ',', ' ') }} € <small class="fs-6 text-muted">HT</small></h2>
                    <small class="text-muted">dont Bio : {{ totaux.total_bio|number_format(2, ',', ' ') }} € HT</small>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-lg-3">
            <div class="card border-{{ conforme_bio ? 'success' : 'danger' }} h-100">
                <div class="card-body text-center">
                    <div class="text-muted small mb-1"><i class="bi bi-3-circle"></i> Bio (objectif ≥ 20%)</div>
                    <h2 class="text-{{ conforme_bio ? 'success' : 'danger' }} mb-0">{{ pct_bio|number_format(1, ',') }}%</h2>
                    <small class="text-muted d-block mb-1">{{ totaux.total_bio|number_format(2, ',', ' ') }} € HT</small>
                    <span class="badge bg-{{ conforme_bio ? 'success' : 'danger' }}">{{ conforme_bio ? '✓ Conforme' : '✗ Non conforme' }}</span>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-lg-3">
            <div class="card border-info h-100">
                <div class="card-body text-center">
                    <div class="text-muted small mb-1"><i class="bi bi-award"></i> Durables & Qualité (hors bio)</div>
                    <h2 class="text-info mb-0">{{ pct_durable_hors_bio|number_format(1, ',') }}%</h2>
                    <small class="text-muted d-block mb-1">{{ total_durable_hors_bio|number_format(2, ',', ' ') }} € HT</small>
                    <span class="badge bg-secondary">Label Rouge, AOP/IGP, HVE, Pêche, RUP…</span>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-lg-3">
            <div class="card border-{{ conforme_durable ? 'success' : 'danger' }} h-100">
                <div class="card-body text-center">
                    <div class="text-muted small mb-1"><i class="bi bi-3-circle-fill"></i> Durables & Qualité total (objectif ≥ 50%)</div>
                    <h2 class="text-{{ conforme_durable ? 'success' : 'danger' }} mb-0">{{ pct_durable|number_format(1, ',') }}%</h2>
                    <small class="text-muted d-block mb-1">{{ totaux.total_durable|number_format(2, ',', ' ') }} € HT</small>
                    <span class="badge bg-{{ conforme_durable ? 'success' : 'danger' }}">{{ conforme_durable ? '✓ Conforme' : '✗ Non conforme' }}</span>
                </div>
            </div>
        </div>
    </div>

    {# ── Badge conformité globale ── #}
    <div class="alert alert-{{ conforme_global ? 'success' : 'warning' }} d-flex align-items-center gap-2 mb-4">
        <i class="bi bi-{{ conforme_global ? 'check-circle-fill' : 'exclamation-triangle-fill' }} fs-5"></i>
        <strong>
            {% if conforme_global %}
                Vos achats sont conformes EGAlim pour {{ annee }}.
            {% else %}
                Vos achats ne sont pas encore conformes EGAlim pour {{ annee }}.
                {% if not conforme_bio %} Le seuil Bio de 20% n'est pas atteint.{% endif %}
                {% if not conforme_durable %} Le seuil Durables de 50% n'est pas atteint.{% endif %}
            {% endif %}
        </strong>
    </div>

    {# ── Matrice familles × labels ── #}
    <div class="card mb-4">
        <div class="card-header bg-light d-flex justify-content-between align-items-center">
            <span><i class="bi bi-table"></i> Matrice EGAlim — {{ annee }}</span>
            <div class="d-flex gap-2">
                <a href="{{ path('tenant_macantine_export_csv', {annee: annee}) }}" class="btn btn-outline-success btn-sm">
                    <i class="bi bi-file-earmark-csv"></i> Exporter CSV
                </a>
                <button onclick="window.print()" class="btn btn-outline-secondary btn-sm">
                    <i class="bi bi-printer"></i> Imprimer
                </button>
            </div>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-bordered table-sm mb-0 small">
                    <thead class="table-dark">
                        <tr>
                            <th style="min-width:160px;">Famille de produits</th>
                            {# Labels EGAlim exclusifs #}
                            <th class="text-center bg-success bg-opacity-50" title="Bio ou en conversion Bio">Bio</th>
                            <th class="text-center" title="Label Rouge">Label Rouge</th>
                            <th class="text-center" title="AOP / AOC / IGP / STG">AOP/IGP</th>
                            <th class="text-center" title="Haute Valeur Environnementale">HVE</th>
                            <th class="text-center" title="Pêche durable (Écolabel EU, MSC)">Pêche durable</th>
                            <th class="text-center" title="Région ultrapériphérique (RUP)">RUP</th>
                            <th class="text-center" title="Commerce équitable">Éq. équitable</th>
                            <th class="text-center" title="Fermier">Fermier</th>
                            {# Caractéristiques cumulables #}
                            <th class="text-center table-info" title="Provenance France">France</th>
                            <th class="text-center table-info" title="Circuit court">Circuit court</th>
                            <th class="text-center table-info" title="Produit local">Local</th>
                            {# Hors EGAlim + Total #}
                            <th class="text-center table-warning" title="Hors EGAlim">Hors EGAlim</th>
                            <th class="text-end table-secondary">Total</th>
                        </tr>
                    </thead>
                    <tbody>
                    {% set colKeys = ['bio','label_rouge','aoc_aop_igp_stg','hve','ecolabel_peche','rup','commerce_equitable','fermier','provenance_france','circuit_court','local','hors_egalim'] %}
                    {% for familleCode, familleLabel in familles %}
                        {% set ligneMatrice = attribute(matrice, familleCode) is defined ? attribute(matrice, familleCode) : {} %}
                        <tr>
                            <td class="fw-semibold" title="{{ familleCode }}">{{ familleLabel }}</td>
                            {% for col in colKeys %}
                                {% set val = attribute(ligneMatrice, col) is defined ? attribute(ligneMatrice, col) : 0 %}
                                <td class="text-end {% if col == 'bio' %}bg-success bg-opacity-10{% elseif col in ['provenance_france','circuit_court','local'] %}bg-info bg-opacity-10{% elseif col == 'hors_egalim' %}bg-warning bg-opacity-10{% endif %}">
                                    {% if val > 0 %}{{ val|number_format(2, ',', ' ') }}{% else %}<span class="text-muted">—</span>{% endif %}
                                </td>
                            {% endfor %}
                            {# Total ligne #}
                            {% set totalLigne = attribute(ligneMatrice, 'total') is defined ? attribute(ligneMatrice, 'total') : 0 %}
                            <td class="text-end fw-semibold bg-secondary bg-opacity-10">
                                {{ totalLigne > 0 ? totalLigne|number_format(2, ',', ' ') : '—' }}
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                    <tfoot class="table-secondary fw-bold">
                        <tr>
                            <td>TOTAL GÉNÉRAL</td>
                            {% for col in colKeys %}
                                {% set colSum = 0 %}
                                {% for familleCode in familles|keys %}
                                    {% set ligneMatrice = attribute(matrice, familleCode) is defined ? attribute(matrice, familleCode) : {} %}
                                    {% set v = attribute(ligneMatrice, col) is defined ? attribute(ligneMatrice, col) : 0 %}
                                    {% set colSum = colSum + v %}
                                {% endfor %}
                                <td class="text-end">{{ colSum > 0 ? colSum|number_format(2, ',', ' ') : '—' }}</td>
                            {% endfor %}
                            <td class="text-end">{{ totaux.total_general|number_format(2, ',', ' ') }}</td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
        <div class="card-footer text-muted small">
            <strong>Labels exclusifs :</strong> Bio, Label Rouge, AOP/IGP, HVE, Pêche durable, RUP, Commerce équitable, Fermier.
            <strong>Caractéristiques cumulables</strong> (comptées en plus dans la catégorie Durable) : Provenance France, Circuit court, Local.
            — <i class="bi bi-info-circle"></i> Tous les montants sont en <strong>€ HT</strong> conformément à la réglementation EGAlim.
        </div>
    </div>

    {# ═══════════════════════════════════════════════════════════════
       SECTION MA-CANTINE API
    ════════════════════════════════════════════════════════════════ #}
    <div class="card mb-4">
        <div class="card-header bg-light">
            <i class="bi bi-cloud-upload"></i> Envoi vers la plateforme ma-cantine
            {% if isDemo %}
                <span class="badge bg-warning ms-2">Mode DEMO</span>
            {% endif %}
        </div>
        <div class="card-body">

            {% if not isConfigured %}
            {# ─── État 1 : Non configuré ─── #}
            <div class="alert alert-info">
                <i class="bi bi-info-circle"></i>
                Pour envoyer vos données sur <a href="https://ma-cantine.agriculture.gouv.fr" target="_blank">ma-cantine.agriculture.gouv.fr</a>,
                configurez d'abord votre application OAuth2.
            </div>
            <form id="formConfig">
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label">Client ID OAuth2 <span class="text-danger">*</span></label>
                        <input type="text" id="cfgClientId" name="client_id" class="form-control" placeholder="Votre Client ID ma-cantine" required>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Client Secret OAuth2 <span class="text-danger">*</span></label>
                        <input type="password" id="cfgClientSecret" name="client_secret" class="form-control" placeholder="Votre Client Secret" required autocomplete="new-password">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">ID Cantine (canteen PK) <span class="text-danger">*</span></label>
                        <input type="number" id="cfgCanteenPk" name="canteen_pk" class="form-control" placeholder="Ex: 12345" required>
                        <div class="form-text">Visible dans l'URL de votre cantine sur ma-cantine.agriculture.gouv.fr</div>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Environnement</label>
                        <select id="cfgEnv" name="env" class="form-select">
                            <option value="production">Production (ma-cantine.agriculture.gouv.fr)</option>
                            <option value="demo">Démonstration</option>
                        </select>
                    </div>
                    <div class="col-12">
                        <button type="button" onclick="saveConfig()" class="btn btn-primary">
                            <i class="bi bi-save"></i> Enregistrer la configuration
                        </button>
                    </div>
                </div>
            </form>

            {% elseif not isAuthenticated %}
            {# ─── État 2 : Configuré mais non authentifié ─── #}
            <div class="alert alert-warning">
                <i class="bi bi-key"></i>
                Application configurée. Vous devez vous connecter à ma-cantine pour autoriser l'accès.
            </div>
            <div class="d-flex gap-2 align-items-center flex-wrap">
                <button type="button" onclick="lancerOAuth()" class="btn btn-success">
                    <i class="bi bi-box-arrow-up-right"></i> Se connecter à ma-cantine
                </button>
                <button type="button" onclick="showConfigEdit()" class="btn btn-outline-secondary btn-sm">
                    <i class="bi bi-pencil"></i> Modifier la configuration
                </button>
            </div>
            <div class="mt-3 text-muted small">
                Cantine configurée : <strong>#{{ config.canteen_pk }}</strong> —
                Environnement : <strong>{{ config.env ?? 'production' }}</strong>
            </div>
            {# Formulaire de modification (masqué par défaut) #}
            <div id="configEditPanel" class="mt-3 d-none">
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label small">Client ID</label>
                        <input type="text" id="editClientId" class="form-control form-control-sm" value="{{ config.client_id ?? '' }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label small">Client Secret</label>
                        <input type="password" id="editClientSecret" class="form-control form-control-sm" placeholder="Laisser vide pour conserver">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label small">ID Cantine</label>
                        <input type="number" id="editCanteenPk" class="form-control form-control-sm" value="{{ config.canteen_pk ?? '' }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label small">Environnement</label>
                        <select id="editEnv" class="form-select form-select-sm">
                            <option value="production" {{ (config.env ?? 'production') == 'production' ? 'selected' : '' }}>Production</option>
                            <option value="demo" {{ (config.env ?? '') == 'demo' ? 'selected' : '' }}>Démonstration</option>
                        </select>
                    </div>
                    <div class="col-12">
                        <button type="button" onclick="saveConfigEdit()" class="btn btn-primary btn-sm">
                            <i class="bi bi-save"></i> Mettre à jour
                        </button>
                        <button type="button" onclick="hideConfigEdit()" class="btn btn-outline-secondary btn-sm ms-1">Annuler</button>
                    </div>
                </div>
            </div>

            {% else %}
            {# ─── État 3 : Authentifié ─── #}
            <div class="alert alert-success d-flex align-items-center gap-2">
                <i class="bi bi-check-circle-fill"></i>
                <div>
                    <strong>Connecté à ma-cantine</strong> — Cantine #{{ config.canteen_pk }}
                    {% if isDemo %}<span class="badge bg-warning ms-1">DEMO</span>{% endif %}
                </div>
            </div>

            {# Diagnostic existant #}
            {% if storedDiagPk > 0 %}
            <div class="alert alert-info">
                <i class="bi bi-info-circle"></i>
                Diagnostic <strong>{{ annee }}</strong> déjà synchronisé
                (ID : <a href="{{ baseUrl }}/diagnostics/{{ storedDiagPk }}" target="_blank">#{{ storedDiagPk }}</a>).
                Cliquez sur <strong>Envoyer à ma-cantine</strong> pour mettre à jour les données.
            </div>
            {% endif %}

            <div class="d-flex gap-2 flex-wrap">
                <button type="button" onclick="envoyerMaCantine({{ annee }})" class="btn btn-primary">
                    <i class="bi bi-cloud-upload"></i> Envoyer à ma-cantine
                </button>
                {#<a href="{{ baseUrl }}/diagnostics" target="_blank" class="btn btn-outline-secondary">
                    <i class="bi bi-box-arrow-up-right"></i> Voir sur ma-cantine
                </a>#}
                <button type="button" onclick="seDeconnecter()" class="btn btn-outline-danger btn-sm">
                    <i class="bi bi-box-arrow-right"></i> Déconnecter
                </button>
            </div>

            {% endif %}{# end isAuthenticated #}

        </div>
    </div>

    {# ── Guide d'utilisation ── #}
    <div class="card">
        <div class="card-header bg-light">
            <i class="bi bi-question-circle"></i> Guide de télédéclaration
        </div>
        <div class="card-body">
            <ol>
                <li class="mb-2"><strong>Créez votre application OAuth2</strong> sur <a href="{{ baseUrl }}/v2/tableau-de-bord" target="_blank">votre compte ma-cantine</a> → "Développement et APIs" → "Gérer mes applications" → "Créer une application". Notez le Client ID et Client Secret.</li>
                <li class="mb-2"><strong>Renseignez l'URL de redirection</strong> suivante dans votre application ma-cantine : <code>{{ baseUrl }}/app/egalim/macantine/callback</code></li>
                <li class="mb-2"><strong>Saisissez la configuration</strong> ci-dessus (Client ID, Secret, ID cantine).</li>
                <li class="mb-2"><strong>Connectez-vous</strong> via OAuth2 (votre navigateur s'ouvrira sur ma-cantine).</li>
                <li class="mb-2"><strong>Cliquez "Envoyer à ma-cantine"</strong> pour synchroniser vos données EGAlim (création du diagnostic).</li>
                <li class="mb-2"><strong>Finalisez la télédéclaration</strong> directement sur <a href="{{ baseUrl }}/v2/tableau-de-bord" target="_blank">ma-cantine</a> en cliquant sur le bouton "Télédéclarer" (action réservée à l'utilisateur connecté sur la plateforme).</li>
            </ol>
           
            <div class="alert alert-warning mb-0">
                <i class="bi bi-exclamation-triangle"></i>
                La télédéclaration est <strong>obligatoire avant le 31 mars</strong> pour l'année N-1. Les données envoyées sont publiques sur <a href="https://ma-cantine.agriculture.gouv.fr" target="_blank">ma-cantine.agriculture.gouv.fr</a>.
            </div>
        </div>
    </div>

</div>

{# ── Tokens CSRF en data attributes ── #}
<span id="csrfTokens"
    data-config="{{ csrf_token('macantine_config') }}"
    data-auth="{{ csrf_token('macantine_auth') }}"
    data-disconnect="{{ csrf_token('macantine_disconnect') }}"
    data-send="{{ csrf_token('macantine_send') }}"
></span>

<script>
const csrf = document.getElementById('csrfTokens').dataset;
const anneeDecl = {{ annee }};

async function postJson(url, data) {
    const resp = await fetch(url, {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: new URLSearchParams(data)
    });
    return resp.json();
}

async function saveConfig() {
    const data = {
        _token:        csrf.config,
        client_id:     document.getElementById('cfgClientId').value.trim(),
        client_secret: document.getElementById('cfgClientSecret').value.trim(),
        canteen_pk:    document.getElementById('cfgCanteenPk').value.trim(),
        env:           document.getElementById('cfgEnv').value,
    };
    if (!data.client_id || !data.client_secret || !data.canteen_pk) {
        alert('Veuillez remplir tous les champs obligatoires.');
        return;
    }
    const json = await postJson('{{ path('tenant_macantine_save_config') }}', data);
    if (json.success) { location.reload(); } else { alert(json.error ?? 'Erreur lors de la sauvegarde.'); }
}

async function saveConfigEdit() {
    const secret = document.getElementById('editClientSecret').value.trim();
    const data = {
        _token:     csrf.config,
        client_id:  document.getElementById('editClientId').value.trim(),
        canteen_pk: document.getElementById('editCanteenPk').value.trim(),
        env:        document.getElementById('editEnv').value,
    };
    if (secret) data.client_secret = secret;
    const json = await postJson('{{ path('tenant_macantine_save_config') }}', data);
    if (json.success) { location.reload(); } else { alert(json.error ?? 'Erreur lors de la mise à jour.'); }
}

function showConfigEdit() {
    document.getElementById('configEditPanel').classList.remove('d-none');
}
function hideConfigEdit() {
    document.getElementById('configEditPanel').classList.add('d-none');
}

async function lancerOAuth() {
    const json = await postJson('{{ path('tenant_macantine_auth_url') }}', { _token: csrf.auth });
    if (json.success && json.auth_url) {
        // Effacer toute valeur résiduelle avant d'ouvrir le popup
        try { localStorage.removeItem('macantine_auth_success'); } catch(e) {}

        window.open(json.auth_url, '_blank', 'width=800,height=600');

        // storage event : fiable entre onglets du même origin, immunisé COOP
        function onMacantineAuth(ev) {
            if (ev.key === 'macantine_auth_success') {
                window.removeEventListener('storage', onMacantineAuth);
                clearTimeout(authTimeout);
                try { localStorage.removeItem('macantine_auth_success'); } catch(e) {}
                location.reload();
            }
        }
        window.addEventListener('storage', onMacantineAuth);
        // Nettoyer après 5 min si l'utilisateur abandonne
        const authTimeout = setTimeout(() => window.removeEventListener('storage', onMacantineAuth), 300000);
    } else {
        alert(json.error ?? 'Impossible de générer l\'URL d\'autorisation.');
    }
}

async function seDeconnecter() {
    if (!confirm('Déconnecter de ma-cantine ?')) return;
    const json = await postJson('{{ path('tenant_macantine_disconnect') }}', { _token: csrf.disconnect });
    if (json.success) { location.reload(); } else { alert(json.error ?? 'Erreur.'); }
}

async function envoyerMaCantine(annee) {
    if (!confirm('Synchroniser les données EGAlim ' + annee + ' vers ma-cantine ?')) return;
    const btn = event.target;
    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm"></span> Synchro en cours…';
    const json = await postJson('{{ path('tenant_macantine_send') }}', { _token: csrf.send, annee: annee });
    btn.disabled = false;
    btn.innerHTML = '<i class="bi bi-cloud-upload"></i> Envoyer à ma-cantine';
    if (json.success) {
        const labels = { created: 'créé', updated: 'mis à jour', recreated: 'recréé (ancien supprimé)' };
        const action = labels[json.action] ?? 'synchronisé';
        alert('✅ Données EGAlim ' + annee + ' synchronisées !\nDiagnostic #' + (json.diagnostic_pk ?? '?') + ' ' + action + '.\n\nUtilisez le bouton "Voir sur ma-cantine" pour finaliser la télédéclaration.');
        location.reload();
    } else if (json.locked) {
        afficherModalDiagnosticVerrouille(json.diagnostic_pk, annee, json.macantine_url);
        // location.reload() déclenché à la fermeture du modal (voir l'écouteur dans afficherModalDiagnosticVerrouille)
    } else {
        alert('❌ Erreur : ' + (json.error ?? 'Erreur inconnue.'));
    }
}

function afficherModalDiagnosticVerrouille(diagnosticPk, annee, macantineUrl) {
    const old = document.getElementById('modal-diag-verrouille');
    if (old) old.remove();

    const html = `
    <div class="modal fade" id="modal-diag-verrouille" tabindex="-1">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header bg-warning">
            <h5 class="modal-title"><i class="bi bi-exclamation-triangle"></i> Mise à jour manuelle requise</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
          </div>
          <div class="modal-body">
            <p>Le diagnostic <strong>${annee}</strong> (ID <strong>#${diagnosticPk}</strong>) est <strong>verrouillé</strong> sur ma-cantine — il a probablement déjà été télédéclaré ou a été créé par un autre utilisateur.</p>
            <h6 class="mt-3">Étapes à suivre :</h6>
            <ol>
              <li>Cliquez sur <strong>"Ouvrir ma-cantine"</strong> ci-dessous.</li>
              <li>Allez dans <strong>"Mes bilans"</strong> → bilan <strong>${annee}</strong>.</li>
              <li>Si le diagnostic est télédéclaré, cherchez un bouton <strong>"Annuler la télédéclaration"</strong> ou <strong>"Modifier"</strong> et annulez-la d'abord.</li>
              <li>Supprimez ensuite le diagnostic (icône 🗑️).</li>
              <li>Revenez ici et cliquez à nouveau sur <strong>"Envoyer à ma-cantine"</strong> — l'ID local a été réinitialisé automatiquement.</li>
            </ol>
            <div class="alert alert-info mb-0">
              <i class="bi bi-info-circle"></i>
              Si aucun bouton d'annulation n'est visible, la campagne ${annee} est peut-être fermée — contactez le support ma-cantine.
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
            <a href="${macantineUrl}" target="_blank" class="btn btn-warning">
              <i class="bi bi-box-arrow-up-right"></i> Ouvrir ma-cantine
            </a>
          </div>
        </div>
      </div>
    </div>`;

    document.body.insertAdjacentHTML('beforeend', html);
    const modalEl = document.getElementById('modal-diag-verrouille');
    modalEl.addEventListener('hidden.bs.modal', () => location.reload());
    new bootstrap.Modal(modalEl).show();
}


</script>
{% endblock %}