{% extends "base.html" %}
{% from 'macros/help.html' import help_icon %}
{% block title %}Přehledy — MedCover{% endblock %}

{% block content %}
<h2 class="mb-4">Přehledy a statistiky {{ help_icon("Přehledy slouží k reportování odpracovaných akcí, hodin a kvalifikací. Lze generovat za konkrétního uživatele, časové období nebo nadřazenou akci. Výstupy je možné exportovat.") }}</h2>

<div class="row g-4">
  <div class="col-md-4">
    <div class="card h-100 shadow-sm">
      <div class="card-body d-flex flex-column">
        <h5 class="card-title">Přehled uživatele</h5>
        <p class="card-text text-muted flex-grow-1">
          Odeslané akce, naplánované a odpracované hodiny, použité kvalifikace pro konkrétního uživatele.
        </p>
        <a href="{{ url_for('reports.user_report', user_id=current_user.id) }}" class="btn btn-outline-danger mt-2">
          Můj přehled
        </a>
        {% if all_users %}
        <form method="GET" action="#" id="user-select-form" class="mt-2">
          <select class="form-select form-select-sm mb-2" id="user-select" name="user_id">
            <option value="" disabled selected>— Jiný uživatel —</option>
            {% for u in all_users %}
            <option value="{{ u.id }}" data-url="{{ url_for('reports.user_report', user_id=u.id) }}">{{ u.name }}</option>
            {% endfor %}
          </select>
          <button type="submit" class="btn btn-outline-secondary btn-sm w-100" id="user-go-btn" disabled>
            Zobrazit přehled
          </button>
        </form>
        <script nonce="{{ g.csp_nonce }}">
        (function () {
          var sel = document.getElementById('user-select');
          var btn = document.getElementById('user-go-btn');
          var form = document.getElementById('user-select-form');
          sel.addEventListener('change', function () { btn.disabled = false; });
          form.addEventListener('submit', function (e) {
            e.preventDefault();
            var opt = sel.options[sel.selectedIndex];
            if (opt && opt.dataset.url) window.location.href = opt.dataset.url;
          });
        })();
        </script>
        {% endif %}
      </div>
    </div>
  </div>

  <div class="col-md-4">
    <div class="card h-100 shadow-sm">
      <div class="card-body d-flex flex-column">
        <h5 class="card-title">Přehled nadřazené akce</h5>
        <p class="card-text text-muted flex-grow-1">
          Všechny akce v rámci nadřazené akce: obsazenost, odpracované hodiny, ošetřené pacienty.
        </p>
        {% if master_events %}
        <form method="GET" action="#" id="me-select-form" class="mt-2">
          <select class="form-select form-select-sm mb-2" id="me-select" name="me_id">
            <option value="" disabled selected>— Vyberte nadřazenou akci —</option>
            {% for me in master_events %}
            <option value="{{ me.id }}" data-url="{{ url_for('reports.me_report', me_id=me.id) }}">{{ me.name }}</option>
            {% endfor %}
          </select>
          <button type="submit" class="btn btn-outline-danger btn-sm w-100" id="me-go-btn" disabled>
            Zobrazit přehled
          </button>
        </form>
        <script src="{{ url_for('static', filename='js/reports-index.js') }}"></script>
        {% else %}
        <p class="text-muted small mt-2">Žádné aktivní nadřazené akce.</p>
        {% endif %}
      </div>
    </div>
  </div>

  <div class="col-md-4">
    <div class="card h-100 shadow-sm">
      <div class="card-body d-flex flex-column">
        <h5 class="card-title">Přehled za období</h5>
        <p class="card-text text-muted flex-grow-1">
          Agregovaný přehled všech akcí v zadaném časovém rozsahu — počty akcí, obsazenost, hodiny, pacienti.
        </p>
        <a href="{{ url_for('reports.date_range_report') }}" class="btn btn-outline-danger mt-2">
          Zobrazit přehled
        </a>
      </div>
    </div>
  </div>
</div>

<div class="row g-4 mt-1">
  <div class="col-md-4">
    <div class="card h-100 shadow-sm">
      <div class="card-body d-flex flex-column">
        <h5 class="card-title">Sestava pro tisk</h5>
        <p class="card-text text-muted flex-grow-1">
          Excel soubor s podpisovým archem a přehledovým archem pro fyzické použití na místě akce.
        </p>
        <a href="{{ url_for('reports.printout') }}" class="btn btn-outline-danger mt-2">
          Generovat sestavu
        </a>
      </div>
    </div>
  </div>
</div>
{% endblock %}