{% extends "base.html" %}
{% from 'macros/help.html' import help_icon %}
{% block title %}{% if template %}Upravit šablonu — MedCover{% else %}Nová šablona akce — MedCover{% endif %}{% endblock %}

{% block content %}
<div class="row justify-content-center">
  <div class="col-12 col-lg-8">
    <h2 class="mb-4">{% if template %}Upravit šablonu „{{ template.name }}“{% else %}Nová šablona akce{% endif %}</h2>
    <form method="POST" novalidate>
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      {% if template %}
      <input type="hidden" name="version" value="{{ template.version }}">
      {% endif %}

      <div class="mb-3">
        <label for="name" class="form-label">Název šablony <span class="text-danger">*</span>
          {{ help_icon("Jednoznačný název šablony, např. 'Závod — 2 zdravotníci'. Zobrazuje se při výběru šablony pro novou akci.") }}
        </label>
        <input type="text" class="form-control" id="name" name="name"
               value="{{ template.name if template else request.form.get('name', '') }}"
               required autofocus>
      </div>

      <div class="mb-3">
        <label for="description" class="form-label">Popis
          {{ help_icon("Volitelný popis šablony — pro koordinátory, popis typické akce, na kterou se šablona hodí.") }}
        </label>
        <textarea class="form-control" id="description" name="description" rows="2">{{ template.description if template else request.form.get('description', '') }}</textarea>
      </div>

      <div class="row g-3 mb-3">
        <div class="col-12 col-md-6">
          <label for="event_type" class="form-label">Typ akce <span class="text-danger">*</span>
            {{ help_icon("Typ akce šablony. Při vytvoření akce z šablony se typ automaticky přenese.") }}
          </label>
          <select class="form-select" id="event_type" name="event_type" required>
            {% for et in EventType %}
              <option value="{{ et.name }}"
                {{ 'selected' if request.form.get('event_type', (template.event_type.name if template else 'MEDICAL_COVER')) == et.name }}>
                {{ et.value }}
              </option>
            {% endfor %}
          </select>
        </div>
        <div class="col-12 col-md-6">
          <label for="reminder_schedule" class="form-label">Plán připomenutí
            {{ help_icon("Časy (v hodinách před začátkem akce), kdy se odešle upomínka. Zapište hodiny oddělené čárkou, např. '24,48'.") }}
          </label>
          <input type="text" class="form-control" id="reminder_schedule" name="reminder_schedule"
                 value="{{ template.reminder_schedule if template else request.form.get('reminder_schedule', '24') }}"
                 placeholder="24">
          <div class="form-text">Hodiny oddělené čárkou, např. 24 nebo 24,48</div>
        </div>
        <div class="col-12 col-md-6 d-flex align-items-end">
          <div class="form-check form-switch mb-2">
            <input class="form-check-input paid-toggle" type="checkbox" role="switch" id="paid" name="paid" value="1"
                   {% if template %}{{ 'checked' if template.paid }}{% else %}{{ 'checked' if request.form.get('paid') == '1' }}{% endif %}>
            <label class="form-check-label fw-semibold paid-label" for="paid">Placená akce
              {{ help_icon("Označte, pokud jsou akce tohoto typu honorovány. Hodnota se přenese na novou akci při použití šablony.") }}
            </label>
          </div>
        </div>
      </div>

      <hr>
      <div class="d-flex justify-content-between align-items-center mb-2">
        <h5 class="mb-0">Pozice
          <small class="text-muted fw-normal fs-6">— zdravotnická obsazení</small>
        </h5>
        <button type="button" class="btn btn-outline-danger btn-sm" id="addSpotBtn">Přidat pozici</button>
      </div>

      <div id="spotRows"
           data-rp-qual-ids="{{ qualifications | selectattr('can_be_rp') | map(attribute='id') | list | tojson }}"
           data-msg-no-spots="Šablona musí mít alespoň jednu pozici."
           data-msg-no-mandatory="Šablona musí mít alespoň jednu povinnou pozici."
           data-msg-no-rp-qual="Alespoň jedna povinná pozice musí vyžadovat kvalifikaci umožňující roli zodpovědné osoby.">
        {% if template and template.spot_templates %}
          {% for st in template.spot_templates %}
          {% set spot_idx = loop.index0 %}
          <div class="card card-body mb-2 p-2 spot-row-item">
            <div class="d-flex gap-2 align-items-start">
              <input type="text" class="form-control form-control-sm" name="spot_desc_{{ spot_idx }}"
                     placeholder="Popis pozice (volitelné)" value="{{ st.description or '' }}">
              <div class="form-check form-check-inline mb-0 flex-shrink-0 align-self-center">
                <input class="form-check-input" type="checkbox" name="spot_optional_{{ spot_idx }}" value="1"
                       id="tpl_spot_opt_{{ spot_idx }}" {{ 'checked' if st.is_optional }}>
                <label class="form-check-label small text-muted" for="tpl_spot_opt_{{ spot_idx }}">Volitelná</label>
              </div>
              <button type="button" class="btn btn-outline-secondary btn-sm flex-shrink-0 remove-spot-btn">✕</button>
            </div>
            <div class="d-flex flex-wrap gap-2 mt-2 spot-creds">
              {% for cred in qualifications %}
              <div class="form-check form-check-inline mb-0">
                <input class="form-check-input" type="checkbox" name="spot_cred_{{ spot_idx }}"
                       value="{{ cred.id }}" id="tpl_spot_{{ spot_idx }}_cred_{{ cred.id }}"
                       {{ 'checked' if cred in st.required_qualifications }}>
                <label class="form-check-label small" for="tpl_spot_{{ spot_idx }}_cred_{{ cred.id }}">{{ cred.name }}</label>
              </div>
              {% endfor %}
            </div>
          </div>
          {% endfor %}
        {% endif %}
      </div>
      <input type="hidden" name="spot_total" id="spotTotal"
             value="{{ (template.spot_templates | length) if template else 0 }}">

      {# Template element for JS-added spots #}
      <template id="spotRowTpl">
        <div class="card card-body mb-2 p-2 spot-row-item">
          <div class="d-flex gap-2 align-items-start">
            <input type="text" class="form-control form-control-sm" name="__SPOT_DESC__"
                   placeholder="Popis pozice (volitelné)">
            <div class="form-check form-check-inline mb-0 flex-shrink-0 align-self-center">
              <input class="form-check-input" type="checkbox" name="__SPOT_OPTIONAL__" value="1" id="__SPOT_OPTIONAL_ID__">
              <label class="form-check-label small text-muted" for="__SPOT_OPTIONAL_ID__">Volitelná</label>
            </div>
            <button type="button" class="btn btn-outline-secondary btn-sm flex-shrink-0 remove-spot-btn">✕</button>
          </div>
          <div class="d-flex flex-wrap gap-2 mt-2 spot-creds">
            {% for cred in qualifications %}
            <div class="form-check form-check-inline mb-0">
              <input class="form-check-input" type="checkbox" name="__SPOT_CRED__"
                     value="{{ cred.id }}" id="__SPOT_CRED_ID_{{ cred.id }}__">
              <label class="form-check-label small" for="__SPOT_CRED_ID_{{ cred.id }}__">{{ cred.name }}</label>
            </div>
            {% endfor %}
          </div>
        </div>
      </template>

      {% if equipment_types %}
      <hr>
      <div class="d-flex justify-content-between align-items-center mb-2">
        <h5 class="mb-0">Vybavení
          {{ help_icon("Plán vybavení, který se přenese na akci vytvořenou z této šablony.") }}
        </h5>
      </div>
      <div class="row g-2">
        {% set equip_plan_map = {} %}
        {% if template %}
          {% for ep in template.equipment_plans %}
            {% if equip_plan_map.update({ep.equipment_type_id: ep.quantity_required}) %}{% endif %}
          {% endfor %}
        {% endif %}
        {% for et in equipment_types %}
        <div class="col-12 col-sm-6 col-md-4">
          <div class="input-group input-group-sm">
            <span class="input-group-text" class="minw-8r text-wrap">{{ et.name }}</span>
            <input type="number" class="form-control" name="equip_qty_{{ et.id }}"
                   value="{{ equip_plan_map.get(et.id, 0) }}" min="0" max="99">
          </div>
        </div>
        {% endfor %}
      </div>
      {% endif %}

      <div class="d-flex gap-2 mt-4">
        <button type="submit" class="btn btn-danger">
          {% if template %}Uložit šablonu{% else %}Vytvořit šablonu{% endif %}
        </button>
        <a href="{{ url_for('templates.index') }}" class="btn btn-outline-secondary">Zrušit</a>
      </div>
    </form>
  </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script src="{{ url_for('static', filename='js/template-form.js') }}"></script>
{% endblock %}