{% extends "layout.html" %}
{% block title %}Explorer - BEx{% endblock %}
{% block page_css %}<link rel="stylesheet" href="{{ url_for('static', filename='css/explorer.css') }}" />{% endblock %}
{% block content %}
  <div class="container py-5">
    <h1 class="mb-4 title display-5">Explorer les métadonnées</h1>
    <div class="d-flex justify-content-end mb-3">
      <button id="toggleAllBtn" class="btn btn-sm shadow-sm">Tout dérouler</button>
    </div>
    <!-- Accordéon métadonnées -->
    <div class="accordion" id="metadataAccordion">
      {% for field, values in metadata_counts.items() %}
        {% set clean_name = field
                  .replace('metadata.bi_process.', '')
                  .replace('metadata.wet_process.', '')
                  .replace('metadata.', '')
                  .replace('_', ' ')
                  .replace('.', ' ')
                .title() %}
        {% set collapse_id = 'collapse' + clean_name.replace(' ', '') %}
        {% set is_empty = values|length == 0 %}
        <div class="accordion-item mb-3 shadow-sm rounded {% if is_empty %}opacity-50{% endif %}">
          <h2 class="accordion-header" id="heading{{ collapse_id }}">
            <button class="accordion-button collapsed fs-6"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#{{ collapse_id }}"
                    aria-expanded="false"
                    aria-controls="{{ collapse_id }}">{{ clean_name }}</button>
          </h2>
          <div id="{{ collapse_id }}"
               class="accordion-collapse collapse"
               aria-labelledby="heading{{ collapse_id }}"
               data-bs-parent="#metadataAccordion">
            <div class="accordion-body p-3">
              {% if not is_empty %}
                <form class="metadata-values-form" data-field="{{ field }}">
                  <div class="list-group">
                    {% for value, count_val in values.items() %}
                      {% set input_id = collapse_id + '_' + loop.index|string %}
                      <label class="list-group-item d-flex justify-content-between align-items-center rounded"
                             for="{{ input_id }}">
                        <div>
                          <input type="checkbox"
                                 class="form-check-input me-3 metadata-checkbox"
                                 id="{{ input_id }}"
                                 data-value="{{ value }}"
                                 data-field="{{ field }}">
                          {% if 'wet_process' in field %}
                            <a href="{{ url_for('routes.wet_process_detail', wet_process_id=value) }}"
                               class="text-decoration-none fw-semibold">{{ value or "—" }}</a>
                          {% elif 'bi_process' in field %}
                            <a href="{{ url_for('routes.bi_process_detail', bi_process_id=value) }}"
                               class="text-decoration-none fw-semibold">{{ value or "—" }}</a>
                          {% else %}
                            <span class="fw-normal">{{ value or "—" }}</span>
                          {% endif %}
                        </div>
                        <span class="badge bg-primary rounded-pill px-3 py-2 fw-semibold">{{ count_val }}</span>
                      </label>
                    {% endfor %}
                  </div>
                </form>
              {% else %}
                <p class="fst-italic text-center" style="color:var(--soft)">Aucune donnée disponible</p>
              {% endif %}
            </div>
          </div>
        </div>
      {% endfor %}
    </div>
    <!-- Panier flottant -->
    <div id="floatingCart"
         class="position-fixed bottom-0 end-0 m-4 border rounded shadow p-4 d-flex flex-column d-none"
         style="width:340px;
                height:380px;
                z-index:1050;
                background-color:var(--card);
                overflow:hidden;
                box-shadow: 0 8px 20px rgba(0,123,255,.20)">
      <h5 class="fw-bold d-flex align-items-center gap-2 mb-3"
          style="font-size:1.35rem;
                 color:var(--tx)">
        🛒 Panier
        <span class="badge bg-primary rounded-pill fs-6" id="cartCount">0</span>
      </h5>
      <div id="selectedMetadata"
           class="flex-grow-1 d-flex flex-column gap-3"
           style="overflow-y:auto;
                  padding-right:4px;
                  margin-bottom:1rem"></div>
      <div class="pt-2 border-top"
           style="border-color:var(--bd) !important;
                  background-color:var(--card)">
        <div class="d-flex flex-column gap-2 mt-3">
          <button id="validateCart1Btn"
                  class="btn fw-semibold shadow-sm"
                  style="font-size:1rem">Valider panier 1</button>
          <button id="validateCart2Btn"
                  class="btn fw-semibold shadow-sm"
                  style="font-size:1rem;
                         opacity:.6"
                  disabled>Valider panier 2</button>
          <button id="compareBtn"
                  class="btn fw-semibold shadow-sm"
                  style="font-size:1rem;
                         opacity:.6"
                  disabled>Comparer mes deux paniers</button>
        </div>
        <div class="d-flex gap-2 mt-3">
          <button id="validateBtn"
                  class="btn flex-grow-1 shadow-sm fw-semibold"
                  style="font-size:1rem">Valider la sélection</button>
          <button id="clearCartBtn"
                  class="reset-error-btn btn flex-grow-1 shadow-sm fw-semibold"
                  style="font-size:1rem">Vider le panier</button>
        </div>
      </div>
    </div>
    <button id="toggleCartBtn"
            class="btn rounded-circle shadow position-fixed bottom-0 end-0 m-4 d-flex align-items-center justify-content-center"
            style="width:58px;
                   height:58px;
                   z-index:1060;
                   font-size:1.4rem">🛒</button>
    <!-- Modale de comparaison -->
    <div class="modal fade"
         id="compareModal"
         tabindex="-1"
         aria-labelledby="compareModalLabel"
         aria-hidden="true">
      <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title fw-bold" id="compareModalLabel">Comparaison des deux paniers</h5>
            <button type="button"
                    class="btn-close"
                    data-bs-dismiss="modal"
                    aria-label="Fermer"></button>
          </div>
          <div class="modal-body">
            <div class="row">
              <div class="col-md-6">
                <h6 style="color:var(--teal)">🛒 Panier 1</h6>
                <ul id="cart1List" class="list-group list-group-flush small">
                </ul>
              </div>
              <div class="col-md-6">
                <h6 style="color:var(--yellow)">🛒 Panier 2</h6>
                <ul id="cart2List" class="list-group list-group-flush small">
                </ul>
              </div>
            </div>
            <hr>
            <div>
              <h6 style="color:var(--soft)">🎯 Métadonnées communes</h6>
              <ul id="commonList" class="list-group list-group-flush small">
              </ul>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn fw-semibold" data-bs-dismiss="modal">Fermer</button>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}
{% block page_js %}<script src="{{ url_for('static', filename='js/explorer.js') }}"></script>{% endblock %}