{% extends "base.html" %}
{% block title %}Clubkampioen — ClayTracker{% endblock %}
{% block content %}
  <h2>Clubkampioen</h2>
  <p class="clubkampioen-uitleg">
    Selecteer de wedstrijden die meetellen voor de clubkampioen-uitslag. Van elke deelnemer
    telt de beste (aantal geselecteerd − 1) mee — de slechtste wedstrijd van die deelnemer
    vervalt. Wie minder wedstrijden heeft meegedaan dan dat aantal, valt buiten de uitslag.
  </p>

  <div class="card">
    <form method="get">
      <div class="veld">
        <label for="wedstrijd-zoeken">Zoek wedstrijd</label>
        <input type="text" id="wedstrijd-zoeken" placeholder="Zoek op naam of jaar (bv. 2026)...">
      </div>

      <div class="wedstrijd-jaren-wrap">
        <div class="wedstrijd-jaren">
          {% for jaar, wedstrijden_in_jaar in wedstrijden_per_jaar %}
            <div class="wedstrijd-jaar-kolom">
              <h4 class="wedstrijd-jaar-kop">{{ jaar }}</h4>
              <div class="wedstrijd-jaar-wiel">
                {% for wedstrijd in wedstrijden_in_jaar %}
                  <label class="wedstrijd-keuze" data-zoektekst="{{ (wedstrijd.naam ~ ' ' ~ wedstrijd.datum) | lower }}">
                    <input type="checkbox" name="wedstrijd_id" value="{{ wedstrijd.id }}"
                           {% if wedstrijd.id in geselecteerde_ids %}checked{% endif %}>
                    <span class="wedstrijd-keuze-tekst">
                      <span class="wedstrijd-keuze-naam">{{ wedstrijd.naam }}</span>
                      <span class="wedstrijd-keuze-meta">
                        {{ wedstrijd.datum }}
                        <span class="badge badge-{{ wedstrijd.status }}">{{ wedstrijd.status }}</span>
                      </span>
                    </span>
                  </label>
                {% endfor %}
              </div>
            </div>
          {% endfor %}
        </div>
      </div>
      <button type="submit">Berekenen</button>
    </form>
  </div>

  <script>
    document.getElementById('wedstrijd-zoeken').addEventListener('input', (event) => {
      const zoekterm = event.target.value.trim().toLowerCase();
      document.querySelectorAll('.wedstrijd-jaar-kolom').forEach((kolom) => {
        let zichtbareItems = 0;
        kolom.querySelectorAll('.wedstrijd-keuze').forEach((item) => {
          const zichtbaar = zoekterm === '' || item.dataset.zoektekst.includes(zoekterm);
          item.hidden = !zichtbaar;
          if (zichtbaar) zichtbareItems += 1;
        });
        kolom.hidden = zichtbareItems === 0;
      });
    });
  </script>

  {% if fout %}
    <p class="info-banner info-banner-fout">{{ fout }}</p>
  {% endif %}

  {% if geselecteerde_wedstrijden and not fout %}
    <p class="info-banner">
      Beste {{ vereist_aantal }} van {{ geselecteerde_wedstrijden|length }} geselecteerde wedstrijden tellen mee per deelnemer.
    </p>

    <div class="card">
      <div class="clubkampioen-export-balk">
        <a class="knop-secundair icon-btn-tekst" href="{{ url_for('clubkampioen.export_xlsx', wedstrijd_id=geselecteerde_ids) }}">Exporteren naar Excel</a>
        <a class="knop-secundair icon-btn-tekst" href="{{ url_for('clubkampioen.export_pdf', wedstrijd_id=geselecteerde_ids) }}">Exporteren naar PDF</a>
      </div>
      <div class="table-wrap">
        <table id="clubkampioen-tabel">
          <thead>
            <tr>
              <th class="ck-plek">Plek</th>
              <th class="ck-naam">Naam</th>
              {% for wedstrijd in geselecteerde_wedstrijden %}
                <th>{{ wedstrijd.naam }}</th>
              {% endfor %}
              <th class="ck-totaal">Totaal</th>
              <th class="ck-totaal-tweede">Totaal 2e schot</th>
            </tr>
          </thead>
          <tbody>
            {% for deelnemer in ranking %}
              <tr>
                <td class="ck-plek">{{ deelnemer.plek }}{% if deelnemer.gedeeld %} (gedeeld){% endif %}</td>
                <td class="ck-naam">{{ deelnemer.naam }}</td>
                {% for wedstrijd in geselecteerde_wedstrijden %}
                  {% set resultaat = deelnemer.resultaten.get(wedstrijd.id) %}
                  {% if resultaat %}
                    <td class="{% if wedstrijd.id in deelnemer.vervallen_wedstrijd_ids %}clubkampioen-vervallen{% endif %}">
                      {{ resultaat.totaal_geraakt }} <span class="clubkampioen-tweede">({{ resultaat.tweede_schot_treffers }})</span>
                      {% if wedstrijd.id in deelnemer.vervallen_wedstrijd_ids %}
                        <span class="clubkampioen-vervallen-label">vervalt</span>
                      {% endif %}
                    </td>
                  {% else %}
                    <td class="clubkampioen-niet-deelgenomen">–</td>
                  {% endif %}
                {% endfor %}
                <td class="ck-totaal totaal-output">{{ deelnemer.totaal }}</td>
                <td class="ck-totaal-tweede">{{ deelnemer.totaal_tweede_schot }}</td>
              </tr>
            {% endfor %}
            {% for deelnemer in buiten_uitslag %}
              <tr class="clubkampioen-buiten-uitslag">
                <td class="ck-plek">—</td>
                <td class="ck-naam">{{ deelnemer.naam }}</td>
                {% for wedstrijd in geselecteerde_wedstrijden %}
                  {% set resultaat = deelnemer.resultaten.get(wedstrijd.id) %}
                  {% if resultaat %}
                    <td>{{ resultaat.totaal_geraakt }} <span class="clubkampioen-tweede">({{ resultaat.tweede_schot_treffers }})</span></td>
                  {% else %}
                    <td class="clubkampioen-niet-deelgenomen">–</td>
                  {% endif %}
                {% endfor %}
                <td class="ck-buiten-totaal" colspan="2">
                  <em>Buiten uitslag — {{ deelnemer.resultaten|length }} van {{ geselecteerde_wedstrijden|length }} meegedaan.</em>
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  {% endif %}
{% endblock %}