{% 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>
{% elif formulaires|length != 0 %}
  <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|add:"&origine=inscriptions" %}
                          <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 {% if k == 'inscriptions' %}cell-up{% elif k == 'desinscriptions' %}cell-down{% endif %}">
                      <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>
{% else %}
  <div class="aucun-form">
    <p>
      Aucune période d’inscription ou de désinscription n’est ouverte pour le moment.
      <br>Nous vous invitons à reconsulter cette page prochainement ou à contacter votre commune pour toute question.
    </p>
    <a class="pk-button" href="{{ portal_url }}portail-parent">
      Retour vers la page d'accueil du Portail Parent
    </a>
  </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;
  }

  html.pp-modal-open,
  body.pp-modal-open{
    overflow:hidden;
  }

  .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;
  }

  .cell-up {
    order: 0;
  }

  .cell-down {
    order: 1;
  }

  .groupe-extension{
    position:relative;
  }

  /* ====== PANEL ANIMÉ ====== */
  .extension-enfants{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;

    z-index:30;
    width: min(420px, calc(100vw - 32px));
    background:var(--card);
    border:1px solid var(--line-strong);
    border-radius:var(--radius-xl);
    box-shadow:var(--shadow);
    overflow:hidden;
    max-height: min(80vh, calc(100vh - 32px));
    display:flex;
    flex-direction:column;
    /* au lieu de display:none pour permettre l'animation */

    visibility:hidden;
    opacity:0;
    pointer-events:none;
    transition:opacity .22s ease, visibility 0s linear .22s;
  }
  .extension-enfants[data-open="true"]{
    visibility:visible;
    opacity:1;
    pointer-events:auto;
    transition:opacity .22s ease;
    display: flex;
    flex-direction: column;
    z-index: 9999;
    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;
    position: fixed;
    inset: 0;
    z-index: -1;
  }

  .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{
    flex:1 1 auto;
    overflow-y:auto;
    overscroll-behavior:contain;
    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: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: none;
    }
    .extension-enfants[data-open="true"] {display: flex; flex-direction: column;}
    .extension-enfants::before{ display:none; }
    .extension-list{ overflow-y:auto; }
  }

  @media (max-width:360px) {
    .extension-enfants {
      width:100%;
      left:0;
      transform: translateY(-50%);
    }
    .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;
  }
  .aucun-form {
    text-align: center;
  }
  .aucun-form p {
    margin-bottom: 4ex;
  }
  .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');
      });
      document.documentElement.classList.remove('pp-modal-open');
      document.body.classList.remove('pp-modal-open');
    }

    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');
      document.documentElement.classList.add('pp-modal-open');
      document.body.classList.add('pp-modal-open');

      // 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>