{% extends "qommon/forms/widget.html" %}
{% block widget-content %}

  {% with webservice.aes_get_available_plaines as activities %}
    <h2>Activités proposées</h2>

    <div id="imio-no-plaines" class="imio-alert imio-alert-danger" style="display:none;">
      Il n'y a pas de plaines disponibles pour l'âge de votre enfant {{ form.var.enfant }},
      {% if form.var.enfant.birthdate_date|date|age_in_years > 0 %}
        {{ form.var.enfant.birthdate_date|date|age_in_years }}
        an{% if form.var.enfant.birthdate_date|date|age_in_years > 1 %}s{% endif %}
        {% if form.var.enfant.birthdate_date|date|age_in_months|modulo:12 > 0 %}
          et {{ form.var.enfant.birthdate_date|date|age_in_months|modulo:12 }} mois
        {% endif %}
      {% else %}
        {{ form.var.enfant.birthdate_date|date|age_in_months }} mois
      {% endif %}
      dans ce groupe.
      Il se peut que votre enfant n'ait pas l'âge requis lors du début du stage ou qu’il n’y ait plus d’activités disponibles.
    </div>

    <div id="imio_plaine_weeks">
      {% for week in activities %}
        <div class="imio_plaine_week">
          <p>Semaine du {{ week.monday|date:"d F Y" }}</p>

          {% for activity in week.activities %}
            <div
              id="{{ activity.id }}"
              class="activity"
              data-remaining="{{ activity.remaining_places|default:0 }}"
            >
              <p class="label">{{ activity.text }}</p>

              <p class="remaining_places">
                {% if activity.remaining_places|default:0|add:0 <= 0 %}
                  <span>Complet</span>
                {% else %}
                  <span>{{ activity.remaining_places }}</span>
                  place{% if activity.remaining_places|add:0 > 1 %}s{% endif %}
                  restante{% if activity.remaining_places|add:0 > 1 %}s{% endif %}
                {% endif %}
              </p>
            </div>
          {% endfor %}
        </div>
      {% endfor %}
    </div>
  {% endwith %}

  <script type="text/javascript">
    $(function(){

      let dom_activities = document.querySelectorAll('.activity');

      // Si aucune activité n'est rendue (semaines vides renvoyées par l'API),
      // on affiche le bandeau "danger" et on masque la grille.
      let noPlainesAlert = document.querySelector('#imio-no-plaines');
      if (dom_activities.length === 0) {
        if (noPlainesAlert) noPlainesAlert.style.display = 'block';

        let weeksContainer = document.querySelector('#imio_plaine_weeks');
        if (weeksContainer) weeksContainer.style.display = 'none';

        return;
      }

      let widgetRoot = document.querySelector('#var_activities_plaines');
      if (!widgetRoot) return;

      let checkboxes_id = widgetRoot.getAttribute('data-widget-name');
      if (!checkboxes_id) return;

      function check_uncheck(index){
        let element_name = checkboxes_id + "$element" + index;
        let linked_element = document.getElementsByName(element_name)[0];
        if (!linked_element) return;
        linked_element.checked = !linked_element.checked;
      }

      for (let i = 0; i < dom_activities.length; i++){

        let checkbox_name = checkboxes_id + "$element" + dom_activities[i].id;
        let checkbox = document.getElementsByName(checkbox_name)[0];

        // Marque les activités "complètes"
        let remaining = parseInt(dom_activities[i].getAttribute('data-remaining') || '0', 10);
        if (remaining <= 0) {
          dom_activities[i].classList.add('full');
        }

        if (checkbox && checkbox.checked){
          dom_activities[i].classList.add('selected');
        }

        dom_activities[i].addEventListener('click', function(e){

          // Bloque la sélection si complet
          let remaining = parseInt(this.getAttribute('data-remaining') || '0', 10);
          if (remaining <= 0) {
            e.preventDefault();
            return;
          }

          let selected = this.parentNode.querySelector('.selected');

          if (this.isSameNode(selected)) {
            this.classList.remove('selected');
          } else if (selected != null) {
            selected.classList.remove('selected');
            this.classList.add('selected');
            check_uncheck(selected.id);
          } else {
            this.classList.add('selected');
          }

          check_uncheck(this.id);
        });
      }
    })
  </script>

  <style>
    /* ===== Bandeau d'alerte ===== */
    #imio-no-plaines.imio-alert.imio-alert-danger {
      display: block;
      width: 100%;
      box-sizing: border-box;
      margin: 0 0 16px 0;
      padding: 14px 16px;
      background: #f8d7da;
      border: 1px solid #f5c2c7;
      color: #842029;
      border-radius: 4px;
      line-height: 1.35;
      font-size: 0.95em;
    }

    #imio-no-plaines.imio-alert.imio-alert-danger strong {
      font-weight: 700;
    }

    /* ===== Grille des semaines ===== */
    #imio_plaine_weeks {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 10px;
    }
    .imio_plaine_week {
      min-width: 12em;
      max-width: 50%;
      margin-bottom: 2ex;
    }
    .imio_plaine_week > p {
      width: 90%;
      margin: 0 auto 6px auto;
      text-transform: uppercase;
      font-weight: bold;
      font-size: 0.8em;
      opacity: 0.85;
    }

    /* ===== Cartes activités ===== */
    .activity {
      border: #d3d3d3 solid 1px;
      margin: 5px 2px;
      padding: 1ex;
      cursor: pointer;
      box-shadow: rgb(0 0 0 / 10%) 0px 4px 6px -1px, rgb(0 0 0 / 6%) 0px 2px 4px -1px;
      transition: box-shadow 0.3s ease-in-out, transform 0.06s ease-in-out, filter 0.2s ease-in-out;
      min-height: 8ex;
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      background: #fff;
    }
    .activity:hover {
      box-shadow: rgb(0 0 0 / 10%) 0px 10px 15px -3px, rgb(0 0 0 / 5%) 0px 4px 6px -2px;
      filter: brightness(1.06);
      border: #212121 solid 1px;
    }
    .activity:active {
      transform: translateY(1px);
      box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    }

    .activity.selected {
      background-color: #386ede;
      color: #FFF;
      border-color: #386ede;
    }

    /* ===== Etat "complet" ===== */
    .activity.full {
      opacity: 0.55;
      cursor: not-allowed;
      filter: grayscale(0.2);
      background: repeating-linear-gradient(55deg, #EEE 0 4px, darkgray 4px 8px);
    }
    .activity.full:hover {
      border: #d3d3d3 solid 1px;
      box-shadow: rgb(0 0 0 / 10%) 0px 4px 6px -1px, rgb(0 0 0 / 6%) 0px 2px 4px -1px;
      filter: grayscale(0.2);
      background: repeating-linear-gradient(55deg, #EEE 0 4px, darkgray 4px 8px);
    }
    .activity.full:active {
      transform: none;
    }

    .activity p.label {
      font-weight: bold;
      margin: 0 0 1ex 0;
    }
    .activity p.remaining_places {
      font-size: 0.8em;
      margin: 0;
      opacity: 0.9;
    }
    .activity p.remaining_places span {
      font-weight: bold;
    }
    .activity.selected p.label:after {
      content: " \002714";
    }

    @media all and (max-device-width: 450px) {
      .imio_plaine_week {
        max-width: none;
        width: 100%;
      }
    }
  </style>

{% endblock %}