{% load static %}

<h1 class="titre-documents portail-parent">Inscriptions</h1>
{% if not json.aes_id %}
  <div class="non-inscrit">
    <p>Vous n'êtes pas encore enregistré. Merci de compléter votre inscription.</p>
    <a class="compte-lien" href="{{ eservices_url }}pp-m-enregistrer-en-tant-que-parent">M’inscrire</a>
  </div>
  {% else %}
<div class="cartes-documents portail-parent">
  {% regroup formulaires|dictsort:"keywords" by keywords.0 as forms_groups %}

  {% for forms_group in forms_groups %}
    {% with slug=forms_group.grouper|slugify %}
      {% if slug|slice:":6" == 'plaine' or slug|slice:":5" == 'repas' %}
        <!-- ===== Groupes à enfant : PLAINES / REPAS ===== -->
        <div class="groupe-extension" data-slug="{{ slug }}">
          <article class="carte-document {{ slug }}" aria-labelledby="title-{{ slug }}">
            <header class="contenu-haut">
              <div class="icone-doc" aria-hidden="true">
                {% if slug|slice:":6" == 'plaine' %}
                  <i class="fas fa-campground"></i>
                {% else %}
                  <i class="fas fa-utensils"></i>
                {% endif %}
              </div>
              <h3 id="title-{{ slug }}" class="carte-titre">{{ forms_group.grouper }}</h3>
            </header>

            <nav class="barre-actions" aria-label="Actions">
              {% if slug|slice:":6" == 'plaine' %}
                {% if homepage_data.has_plain_registrations == true %}
                  <a class="etat-sante manquante js-fiche-sante-link" href="{{eservices_url}}/portail-parent/pp-finaliser-les-inscriptions-aux-plaines/">Finaliser les inscriptions</a>
                {% endif %}
              {% endif %}
              {% for form in forms_group.list %}
                {% with k=form.keywords.1|slugify %}
                  {% if k == 'inscriptions' or k == 'desinscriptions' %}
                    <a href="{{ form.url }}"
                       class="action pill {% if k == 'inscriptions' %}action-insc{% else %}action-desinsc{% endif %}"
                       data-base-url="{{ form.url }}">
                      <i class="fas {% if k == 'inscriptions' %}fa-pen{% else %}fa-times{% endif %}" aria-hidden="true"></i>
                      <span>{{ form.keywords.1|capfirst }}</span>
                    </a>
                  {% endif %}
                {% endwith %}
              {% endfor %}
            </nav>
          </article>

          <!-- Panneau latéral (enfants) -->
          <aside class="extension-enfants" id="panel-{{ slug }}" aria-hidden="true" data-open="false">
            <div class="extension-title">{{ forms_group.grouper }}<span class="panel-remover fa-solid fa-circle-xmark"></span></div>
            <div class="extension-list" role="list">
              {% if json.aes_id and homepage_data and homepage_data.children %}
                {% for child in homepage_data.children %}

                  {# Si PLAINES et fiche santé manquante -> redirection vers fiche santé #}
                  {% if slug|slice:":6" == 'plaine' and not child.healthsheet %}
                    {% with cid=child.id|stringformat:"s" %}
                      {% with force_url=eservices_url|add:"/portail-parent/pp-fiche-sante/?enfant="|add:cid %}
                        <button type="button" class="child-row" role="listitem"
                                data-child-id="{{ child.id }}"
                                data-child-name="{{ child.name|escape }}"
                                data-force-url="{{ force_url|default_if_none:'' }}"
                                aria-label="Compléter la fiche santé pour {{ child.name }}">
                          <div class="fiche-sante">
                            <a href="{{ force_url }}" class="etat-sante manquante js-fiche-sante-link">
                              <i class="fas fa-file-medical"></i>
                              <span>Compléter la fiche santé</span>
                            </a>
                          </div>
                          {% if child.age %}
                            {% if child.age < 3 %}
                              <div class="child-avatar av-0-2" aria-hidden="true"><i class="fas fa-baby"></i></div>
                            {% elif child.age < 6 %}
                              <div class="child-avatar av-3-5" aria-hidden="true"><i class="fas fa-puzzle-piece"></i></div>
                            {% elif child.age < 11 %}
                              <div class="child-avatar av-6-10" aria-hidden="true"><i class="fas fa-school"></i></div>
                            {% elif child.age < 14 %}
                              <div class="child-avatar av-11-13" aria-hidden="true"><i class="fas fa-futbol"></i></div>
                            {% else %}
                              <div class="child-avatar av-14-17" aria-hidden="true"><i class="fas fa-book-open-reader"></i></div>
                            {% endif %}
                          {% else %}
                            <div class="child-avatar av-unknown" aria-hidden="true"><i class="fas fa-user"></i></div>
                          {% endif %}

                          <div class="child-meta">
                            <strong class="child-name">{{ child.name }}</strong>
                            {% if child.age %}<small>{{ child.age }} ans</small>{% endif %}
                          </div>
                        </button>
                      {% endwith %}
                    {% endwith %}

                  {% else %}
                    <button type="button" class="child-row" role="listitem"
                            data-child-id="{{ child.id }}"
                            data-child-name="{{ child.name|escape }}"
                            aria-label="Sélectionner {{ child.name }}">

                      {% if slug|slice:":6" == 'plaine' %}
                        <div class="fiche-sante">
                          {% if child.healthsheet %}
                            <div class="etat-sante valide">
                              <i class="fas fa-file-medical"></i>
                              <span>Fiche santé complétée</span>
                            </div>
                          {% endif %}
                        </div>
                      {% endif %}

                      {% if child.age %}
                        {% if child.age < 3 %}
                          <div class="child-avatar av-0-2" aria-hidden="true"><i class="fas fa-baby"></i></div>
                        {% elif child.age < 6 %}
                          <div class="child-avatar av-3-5" aria-hidden="true"><i class="fas fa-puzzle-piece"></i></div>
                        {% elif child.age < 11 %}
                          <div class="child-avatar av-6-10" aria-hidden="true"><i class="fas fa-school"></i></div>
                        {% elif child.age < 14 %}
                          <div class="child-avatar av-11-13" aria-hidden="true"><i class="fas fa-futbol"></i></div>
                        {% else %}
                          <div class="child-avatar av-14-17" aria-hidden="true"><i class="fas fa-book-open-reader"></i></div>
                        {% endif %}
                      {% else %}
                        <div class="child-avatar av-unknown" aria-hidden="true"><i class="fas fa-user"></i></div>
                      {% endif %}

                      <div class="child-meta">
                        <strong class="child-name">{{ child.name }}</strong>
                        {% if child.age %}<small>{{ child.age }} ans</small>{% endif %}
                      </div>
                    </button>
                  {% endif %}

                {% endfor %}
              {% elif json.children %}
                {% for child in json.children %}
                  <button type="button" class="child-row" role="listitem"
                          data-child-id="{{ child.id|default:child.pk|default:child.uuid|default:child.0 }}"
                          data-child-name="{{ child.name|default:child.label|default:child.full_name|default:child.1|default:child|escape }}">
                    <div class="child-avatar av-unknown" aria-hidden="true">
                      <i class="fas fa-user"></i>
                    </div>
                    <div class="child-meta">
                      <strong class="child-name">{{ child.name|default:child.label|default:child.full_name|default:child }}</strong>
                      {% if child.age or child.2 %}<small>{{ child.age|default:child.2 }} ans</small>{% endif %}
                    </div>
                  </button>
                {% endfor %}
              {% else %}
                <div class="muted">Aucun enfant trouvé.</div>
              {% endif %}
            </div>
          </aside>
        </div>

      {% else %}
        <!-- ===== Autres cartes (standard) ===== -->
        <article class="carte-document {{ slug }}" aria-labelledby="title-{{ slug }}">
          <header class="contenu-haut">
            <div class="icone-doc" aria-hidden="true">
              {% if "sante" in slug %}<i class="fas fa-notes-medical"></i>
              {% elif "mercredi" in slug %}<i class="fas fa-calendar-day"></i>
              {% else %}<i class="fas fa-file-alt"></i>{% endif %}
            </div>
            <h3 id="title-{{ slug }}" class="carte-titre">{{ forms_group.grouper }}</h3>
          </header>
          <nav class="barre-actions" aria-label="Actions">
            {% for form in forms_group.list %}
              {% with k=form.keywords.1|slugify %}
                {% if k == 'inscriptions' or k == 'desinscriptions' %}
                  <a href="{{ form.url }}" class="action pill">
                    <i class="fas {% if k == 'inscriptions' %}fa-pen{% else %}fa-times{% endif %}" aria-hidden="true"></i>
                    <span>{{ form.keywords.1|capfirst }}</span>
                  </a>
                {% endif %}
              {% endwith %}
            {% endfor %}
          </nav>
        </article>
      {% endif %}
    {% endwith %}
  {% endfor %}
</div>
{% endif %}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/>

<style>
/* ===== Design system (clair, sobre) ===== */
:root{
  --bg:#f6f8fb;
  --card:#ffffff;
  --text:#14161a;
  --muted:#6b7280;
  --line:#e6e9f1;
  --line-strong:#dee3ee;

  /* --accent:#EB028C; */
  /* --accent-weak:rgba(235,2,140,.16); */
  /* --accent-hover:rgba(235,2,140,.08); */

  --shadow-sm:0 1px 2px rgba(16,24,40,.06), 0 1px 1px rgba(16,24,40,.06);
  --shadow:0 10px 24px rgba(16,24,40,.10);

  --radius-xl:18px;
  --radius-lg:14px;
  --radius-md:12px;
  --radius-pill:9999px;

  --card-w:320px;
  --card-h:300px;
}

.titre-documents{ font:800 2rem/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; text-align:center; margin:8px 0 24px; }

.cartes-documents{
  display:grid;
  grid-template-columns: repeat(auto-fit, var(--card-w));
  justify-content:center;
  gap:24px;
  max-width:1200px; margin:0 auto; padding:0 16px;
}
@media (max-width: 380px){ :root{ --card-w: 100%; } }

.carte-document{
  width:var(--card-w);
  background:var(--card);
  border:1px solid var(--line-strong);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column;
  height:var(--card-h); min-height:var(--card-h);
  transition: box-shadow .2s, transform .2s;
}
.carte-document:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }

.contenu-haut {
  padding: 22px 20px 8px;
  display: flex;
  flex-direction: column;
  align-items:center;
  gap:10px;
}
.icone-doc {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 24px;
  box-shadow: inset 0 -6px 10px rgba(0,0,0,.08);
}
.carte-titre{ margin:0; text-transform:uppercase; letter-spacing:.05em; font:900 1rem/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; text-align:center; }

.barre-actions{
  margin-top:auto; padding:12px 14px 16px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
  border-top:1px solid #edf0f5; min-height:70px; align-content:center;
}
.action.pill{
  min-width:170px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 14px; 
  border-radius:var(--radius-pill);
  background:#fff;
  border:1px solid var(--line);
  color:var(--text);
  text-decoration:none;
  font:800 .95rem/1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  white-space:nowrap;
  box-shadow:0 1px 0 rgba(16,24,40,.04);
  transition:transform .12s, box-shadow .15s, border-color .15s, background .15s;
}
.action.pill:hover {
  /* background:var(--accent-hover); */
  /* border-color:#dfc2d6; c'est quoi cette couleur ? Pourquoi apparaît-elle ici et maintenant ?*/
  transform:translateY(-1px); box-shadow:0 8px 18px rgba(16,24,40,.10); }
.action.pill:focus {
  outline:0;
  box-shadow:0 0 0 3px;
}

.groupe-extension{
  position:relative;
}

/* ====== PANEL ANIMÉ ====== */
.extension-enfants{
  position:absolute;
  top:0;
  left: calc(50% - 180px);
  z-index:30;
  width:360px;
  background:var(--card);
  border:1px solid var(--line-strong);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow);
  overflow:hidden;
  /* au lieu de display:none pour permettre l'animation */

  visibility:hidden;
  opacity:0;
  transform:translateY(6px) scale(.98);
  pointer-events:none;
  transition:opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}
.extension-enfants[data-open="true"]{
  visibility:visible;
  opacity:1;
  transform:none;
  pointer-events:auto;
  transition:opacity .22s ease, transform .22s ease;
  display: block;
  z-index: 30;
  background-color: white;
}
/* .extension-enfants::before{
  content:""; position:absolute; left:-10px; top:24px; width:12px; height:12px; background:var(--card);
  border-left:1px solid var(--line-strong); border-top:1px solid var(--line-strong); transform:rotate(45deg);
} */
.extension-enfants::after {
  content:"";
  background-color: black;
  opacity: 0.5;
  width: 100vw;
  height: 100vh;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
}

.extension-title{
  position:sticky;
  top:0;
  z-index:30;
  padding:12px 16px;
  background:#fff;
  border-bottom:1px solid var(--line);
  font:800 1rem/1.15 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
.extension-list{
  max-height:70vh;
  padding:12px;
  z-index: 30;
  position: relative;
  background-color: white;
}
.panel-remover {
  float: right;
  color: #111;
  font-size: 150%;
}
.panel-remover:hover {
  transform: scale(1.1);
  rotate: -2deg;
  transition: all .18s ease;
  cursor: pointer;
}

/* ====== APPARITION EN CASCADE ====== */
.extension-enfants .child-row{
  width:100%; display:flex; align-items:center; gap:12px; padding:12px 14px;
  border:1px solid var(--line); border-radius:var(--radius-lg); background:#fff !important; color:var(--text) !important;
  text-align:left; cursor:pointer;
  opacity:0; transform:translateY(6px);
  transition:opacity .25s ease, transform .25s ease, box-shadow .15s, border-color .15s, background .12s;
}
.extension-enfants[data-open="true"] .child-row{
  opacity:1;
  transform:none; /* le délai est défini côté JS (style.transitionDelay) */ /* Pourquoi ? C'est plus simple en CSS non ? */
}
.extension-enfants .child-row + .child-row{ margin-top:10px; }

/* Hover/active plus vivant */
.extension-enfants .child-row:hover{
  background:#fafbfc; transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(16,24,40,.12);
}

.child-avatar{
  width:38px;
  height:38px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  font-weight:900;
  box-shadow:inset 0 -6px 10px rgba(0,0,0,.08);
  flex:0 0 38px;
}
.child-avatar i{ font-size:18px; transition:transform .18s ease; }
.extension-enfants .child-row:hover .child-avatar i{ transform:scale(1.1) rotate(-2deg); }

/* Teintes par tranche d’âge */
.av-0-2  { background:#F59E0B; }   /* jaune-orangé bébé   */
.av-3-5  { background:#10B981; }   /* vert éveil         */
.av-6-10 { background:#3B82F6; }   /* bleu primaire      */
.av-11-13{ background:#8B5CF6; }   /* violet pré-ado     */
.av-14-17{ background:#111827; }   /* anthracite ado     */
.av-unknown { background:#6B7280; }/* gris neutre quand âge inconnu */

/* Fiche santé chips */
.fiche-sante{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.etat-sante{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:10px; font:600 .9rem/1.4 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; transition:all .2s ease; text-decoration:none; }
.etat-sante i{ font-size:1rem; }
.etat-sante.valide{ color:black; background:rgba(16,185,129,.1); border:1px solid rgba(16,185,129,.2); }
.etat-sante.valide i {
  color:#10B981;
}
.etat-sante.manquante{ color:black; background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.2); }
.etat-sante.manquante:hover{ background:rgba(239,68,68,.15); transform:translateY(-1px); text-decoration:none; }
.etat-sante.manquante i {
  color:#EF4444;
}

@media (max-width:980px){
  .groupe-extension{ flex-direction:column; }
  .extension-enfants{
    position:absolute;
    /* width:100%; */
    display: none;
    top:0;
    left: -20px;
  }
  .extension-enfants[data-open="true"] {display: block;}
  .extension-enfants::before{ display:none; }
  .extension-list{ max-height:none; }
}

@media (max-width:360px) {
  .extension-enfants {
    width:100%;
    left:0
  }
  .portail-parent .fiche-sante {
    margin-bottom: 0;
  }
  .extension-enfants .child-row {
    gap: 6px;
    padding: 6px 7px;
    font-size: 80%;
  }
  .extension-enfants .etat-sante {
    font-size: 80%;
  }
}

@media (prefers-reduced-motion:reduce){
  .carte-document, .action.pill, .child-row,
  .extension-enfants { transition:none !important; }
}
    .non-inscrit {
  text-align: center;
  margin-top: 40px;
}
.portail-parent.compte-lien {
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.2s;
  display: inline-block;
  margin: 10px;
}
.portail-parent.compte-lien:hover {
  background-color: white;
  text-decoration: none;
}

</style>

<script>
(function(){
  var STORAGE_KEY = 'pp:lastChild';

  // Si clic sur "Compléter la fiche santé" -> ne pas trigger le parent .child-row
  document.addEventListener('click', function(e){
    var fsLink = e.target.closest('.js-fiche-sante-link');
    if (fsLink) { e.stopPropagation(); }
  }, true); // capture

  function closeAll(){
    document.querySelectorAll('.extension-enfants').forEach(function(p){
      // reset les délais des rows pour la prochaine ouverture
      p.querySelectorAll('.child-row').forEach(function(r){
        r.style.transitionDelay = '0ms';
      });
      p.dataset.open = 'false';
      p.setAttribute('aria-hidden','true');
    });
  }

  function openPanel(panel){
    if(!panel) return;
    var wasOpen = panel.dataset.open === 'true';
    closeAll();
    if (wasOpen) return;

    panel.dataset.open = 'true';
    panel.setAttribute('aria-hidden','false');

    // apparition en cascade (40ms entre chaque item, max ~320ms)
    var rows = panel.querySelectorAll('.child-row');
    rows.forEach(function(r, i){
      var d = Math.min(i * 40, 320);
      r.style.transitionDelay = d + 'ms';
    });

    // Surbrillance enfant mémorisé
    try{
      var saved = JSON.parse(localStorage.getItem(STORAGE_KEY) || 'null');
      if(saved && saved.id){
        panel.querySelectorAll('.child-row').forEach(function(r){
          r.classList.toggle('active', r.getAttribute('data-child-id')===String(saved.id));
        });
      }
    }catch(_){}
  }

  function buildUrl(base, childId){
    if(!base) return null;
    return base + (base.indexOf('?')>-1 ? '&' : '?') + 'enfant=' + encodeURIComponent(childId);
  }

  // Délégation globale
  document.addEventListener('click', function(e){
    // 1) Clic sur Inscriptions/Désinscriptions -> ouvrir panneau + mémoriser le type d'action
    var action = e.target.closest('.groupe-extension .barre-actions .action');
    if(action){
      var group = action.closest('.groupe-extension');
      if(group){
        e.preventDefault();
        var slug  = group.dataset.slug;
        var panel = document.getElementById('panel-' + slug);
        if(!panel) return;

        panel.dataset.actionType = action.classList.contains('action-desinsc') ? 'desinscriptions' : 'inscriptions';
        openPanel(panel);
      }
      return;
    }

    // 2) Clic sur un enfant
    var row = e.target.closest('.extension-enfants .child-row');
    if (row) {
      var forceUrl = row.getAttribute('data-force-url');
      // a) URL forcée (fiche santé manquante)
      if (forceUrl && forceUrl.trim() !== '' && forceUrl !== 'null' && forceUrl !== 'None') {
        window.location.assign(forceUrl);
        return;
      }

      // b) Logique normale
      var panel = row.closest('.extension-enfants');
      if (!panel) return;
      var groupSlug = panel.id.replace('panel-','');
      var group = document.querySelector('.groupe-extension[data-slug="'+ groupSlug +'"]');

      var chosenType = (panel.dataset.actionType === 'desinscriptions') ? 'desinscriptions' : 'inscriptions';
      var selector = (chosenType === 'desinscriptions') ? '.action-desinsc' : '.action-insc';

      var actionLink = group ? group.querySelector(selector) : null;
      if (!actionLink) { actionLink = group ? group.querySelector('.action-insc, .action-desinsc') : null; }

      var base = actionLink ? (actionLink.getAttribute('data-base-url') || actionLink.getAttribute('href')) : '';
      var cid = row.getAttribute('data-child-id');
      var cname = row.getAttribute('data-child-name') || (row.querySelector('.child-name')?.textContent || '');

      try { localStorage.setItem(STORAGE_KEY, JSON.stringify({ id: cid, name: cname })); } catch(_) {}

      var url = buildUrl(base, cid);
      if (url) { window.location.assign(url); }
      return;
    }
    // 3) Clic à l'extérieur -> fermer
    if(e.target.closest('.extension-enfants') && !e.target.classList.contains("extension-title") && !e.target.classList.contains("extension-list")){
      closeAll();
    }
  });
})();
</script>