{% extends "layout.html" %}
{% block title %}
  Bi Processes - BEx
{% endblock title %}
{% block content %}
  <div class="container mt-5">
    <div class="text-center mb-4">
      <h1 class="display-5 title">Liste des conditions bio-informatiques</h1>
      <p class="lead">Sélectionner les conditions pour afficher les analyses associées.</p>
    </div>
    <div class="card shadow-sm">
      <div class="card-body">
        <h3 class="mb-4">Conditions disponibles</h3>
        <form id="biForm" method="get" action="{{ request.path }}">
          <input type="text"
                 id="biSearch"
                 class="form-control mb-3"
                 placeholder="Rechercher un bi process..." />
          <div class="row">
            <div class="col-md-6">
              <div class="list-group" id="biProcessList">
                {% for bi_process in bi_processes %}
                  <div class="list-group-item bi-process-item">
                    <div class="form-check">
                      <input class="form-check-input"
                             type="checkbox"
                             id="bi_{{ loop.index }}"
                             name="bi_processes"
                             value="{{ bi_process }}"
                             {% if bi_process in selected_bi_processes %}checked{% endif %} />
                      <label class="form-check-label" for="bi_{{ loop.index }}">{{ bi_process }}</label>
                    </div>
                  </div>
                {% endfor %}
              </div>
              <div class="d-flex gap-2 mt-3">
                <button type="button"
                        class="reset-error-btn btn"
                        id="resetBiSelection"
                        disabled>Réinitialiser la sélection</button>
                <button type="button" class="btn btn-success" id="selectAllBi">Tout sélectionner</button>
              </div>
            </div>
            {% if selected_bi_processes %}
              <div class="col-md-6">
                {% if analyses %}
                  <h4 class="mt-4">Analyses associées :</h4>
                  <ul class="list-group mt-3">
                    {% for analysis in analyses %}
                      <li class="list-group-item">
                        <a href="{{ url_for('routes.show_analysis_detail', analysis_id=analysis, source='bi') }}"
                           class="text-decoration-none">
                          <div class="d-flex justify-content-between align-items-center">
                            <span>{{ analysis }}</span>
                            <i class="bi bi-chevron-right"></i>
                          </div>
                        </a>
                      </li>
                    {% endfor %}
                  </ul>
                {% else %}
                  <div class="alert alert-danger mt-4" role="alert">
                    <strong>Aucune analyse correspondante à ce Bi Process !</strong>
                  </div>
                {% endif %}
              </div>
            {% endif %}
          </div>
        </form>
      </div>
    </div>
  </div>
  <script>
      document.getElementById('biSearch').addEventListener('input', function() {
          const filter = this.value.toLowerCase();
          const items = document.querySelectorAll('.bi-process-item');
          items.forEach((item) => {
              const label = item.querySelector('label').innerText.toLowerCase();
              if (label.startsWith(filter)) {
                  item.style.display = '';
              } else {
                  item.style.display = 'none';
              }
          });
      });

      document
          .getElementById('resetBiSelection')
          .addEventListener('click', function() {
              const checkboxes = document.querySelectorAll(
                  '#biForm input[type="checkbox"]',
              );
              checkboxes.forEach((cb) => (cb.checked = false));
              document.getElementById('biSearch').value = '';
              document.getElementById('biForm').submit();
          });

      document.getElementById('selectAllBi').addEventListener('click', function() {
          document
              .querySelectorAll('#biProcessList .form-check-input')
              .forEach((cb) => (cb.checked = true));
          document.getElementById('biForm').submit();
      });

      const biCheckboxes = document.querySelectorAll('#biForm input[type="checkbox"]');
      const resetBiBtn = document.getElementById('resetBiSelection');

      function updateBiResetButton() {
          const anyChecked = Array.from(biCheckboxes).some(cb => cb.checked);
          resetBiBtn.disabled = !anyChecked;
      }

      biCheckboxes.forEach(cb => cb.addEventListener('change', updateBiResetButton));
      updateBiResetButton();
  </script>
{% endblock content %}