{% extends "base.html" %}
{% block title %}Tabulkový manažer — {{ me.name }} — MedCover{% endblock %}

{% block extra_head %}
<style>
  /* Fixed cols (~900px) + 160px per spot column, clamped between Bootstrap default and 95vw */
  main.container { max-width: clamp(1140px, {{ 900 + max_spot_cols * 180 }}px, 95vw); }
  .tm-color-swatch:hover { border-color: var(--color-tm-swatch-border) !important; transform: scale(1.15); }
  .tm-color-swatch.active { border-color: var(--color-primary) !important; }
</style>
{% endblock %}

{% from 'macros/badges.html' import badge_status %}
{% set status_colors = {
  'Koncept': 'secondary',
  'Zveřejněná': 'primary',
  'Přihlášky otevřeny': 'success',
  'Přihlášky uzavřeny': 'warning',
  'Dokončena': 'dark',
  'Zrušena': 'danger'
} %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
  <div>
    <h2 class="mb-0">Tabulkový manažer</h2>
    <p class="text-muted mb-0 small">{{ me.name }}</p>
  </div>
  <div class="d-flex gap-2 flex-wrap">
    {% if current_user.has_permission('event.create') %}
    <a href="{{ url_for('events.create', master_event_id=me.id) }}" class="btn btn-danger btn-sm">+ Nová akce</a>
    {% endif %}
    <a href="{{ url_for('master_events.detail', me_id=me.id) }}" class="btn btn-outline-secondary btn-sm">← Zpět</a>
  </div>
</div>

{% if not rows %}
  <p class="text-muted">Tato nadřazená akce neobsahuje žádné akce.</p>
{% else %}

{# ── Status filter bar ──────────────────────────────────────────────────── #}
<div class="mb-2 d-flex gap-1 flex-wrap align-items-center" id="tm-status-filter">
  <small class="text-muted me-1">Stav:</small>
  <button type="button" class="btn btn-sm btn-outline-secondary filter-btn active" data-filter-status="DRAFT">Koncept</button>
  <button type="button" class="btn btn-sm btn-outline-primary filter-btn active" data-filter-status="PUBLISHED">Zveřejněná</button>
  <button type="button" class="btn btn-sm btn-outline-success filter-btn active" data-filter-status="ASSIGNMENTS_OPEN">Přihlášky otevřeny</button>
  <button type="button" class="btn btn-sm btn-outline-warning filter-btn active" data-filter-status="ASSIGNMENTS_CLOSED">Přihlášky uzavřeny</button>
  <button type="button" class="btn btn-sm filter-btn-neutral filter-btn" data-filter-status="COMPLETED">Dokončena</button>
  <button type="button" class="btn btn-sm btn-outline-secondary filter-btn" data-filter-status="CANCELLED">Zrušena</button>
  <button type="button" class="btn btn-sm btn-link text-muted p-0 ms-2" id="tm-filter-reset">Výchozí</button>
</div>

{# ── Event type filter bar ────────────────────────────────────────────────── #}
<div class="mb-3 d-flex gap-1 flex-wrap align-items-center" id="tm-type-filter">
  <small class="text-muted me-1">Typ:</small>
  <button type="button" class="btn btn-sm btn-outline-secondary filter-btn active" data-filter-type="MEDICAL_COVER">Zdravotní dozor</button>
  <button type="button" class="btn btn-sm btn-outline-info filter-btn active" data-filter-type="TRAINING">Školení</button>
  <button type="button" class="btn btn-sm btn-outline-secondary filter-btn active" data-filter-type="PRESENTATION">Prezentační akce</button>
</div>

<div class="table-responsive">
  <table class="table table-sm table-bordered align-middle tm-table" id="tm-table">
    <thead class="table-dark">
      <tr>
        <th class="border-0 tm-action-col"></th>
        <th class="text-nowrap">Datum</th>
        <th class="tm-event-col">Akce</th>
        <th class="text-nowrap">Kvalifikace</th>
        <th class="text-nowrap">Od</th>
        <th class="text-nowrap">Do</th>
        <th class="text-nowrap" title="Počet hodin">Hod.</th>
        <th class="text-nowrap" title="Počet pozic">Pozic</th>
        {% for i in range(max_spot_cols) %}
        <th class="text-nowrap text-center tm-spot-header-col">{{ i + 1 }}</th>
        {% endfor %}
      </tr>
    </thead>
    <tbody>
      {% set ns = namespace(prev_event_id=None, prev_date=None) %}
      {% for row in rows %}
      {% set event = row.event %}
      {% set row_date = event.start_datetime | localdt('%Y-%m-%d') %}
      {% if ns.prev_date is not none and row_date != ns.prev_date %}
        {% set row_class = "tm-sep-day" %}
      {% elif ns.prev_event_id is not none and event.id != ns.prev_event_id %}
        {% set row_class = "tm-sep-event" %}
      {% else %}
        {% set row_class = "" %}
      {% endif %}
      {% set ns.prev_event_id = event.id %}
      {% set ns.prev_date = row_date %}
      <tr data-event-id="{{ event.id }}" data-status="{{ event.status.name }}" data-event-type="{{ event.event_type.name }}" data-spot-count="{{ row.spots | length }}" class="{{ row_class }}">
        {% if loop.first or rows[loop.index0 - 1].event.id != event.id %}
        <td class="border-0 align-middle text-center tm-action-cell" rowspan="{{ event_row_spans[event.id] }}">
          {% if can_create_event %}
          <button class="btn btn-link btn-sm p-0 tm-clone-btn text-secondary"
                  data-event-id="{{ event.id }}"
                  title="Klonovat akci" class="tm-icon-btn">👥</button>
          {% endif %}
          {% if can_archive_draft and event.status.name == 'DRAFT' %}
          <button class="btn btn-link btn-sm p-0 ms-1 tm-delete-btn text-danger"
                  data-event-id="{{ event.id }}"
                  data-event-name="{{ event.name | e }}"
                  title="Archivovat" class="tm-icon-btn">🗑</button>
          {% endif %}
          {% if can_edit_event %}
          <button class="btn btn-link btn-sm p-0 ms-1 tm-color-btn"
                  data-event-id="{{ event.id }}"
                  title="Barva akce" class="tm-icon-btn">🌈</button>
          {% endif %}
          <span class="ms-1">{{ badge_status(event.status.value, status_colors) }}</span>
          {% if (event.status.name == 'DRAFT' and can_publish) or (event.status.name == 'PUBLISHED' and can_open_assignments) %}
          <button class="btn btn-link btn-sm p-0 ms-1 tm-advance-btn text-success"
                  data-event-id="{{ event.id }}"
                  data-event-name="{{ event.name | e }}"
                  data-next-status="{% if event.status.name == 'DRAFT' %}Zveřejněná{% else %}Přihlášky otevřeny{% endif %}"
                  title="Posunout do dalšího stavu" class="tm-icon-btn">⏩</button>
          {% endif %}
        </td>
        {% endif %}
        {% set ec = row.event_color or '' %}
        <td class="text-nowrap small tm-date-cell tm-time-cell tm-row-cell"
            data-event-id="{{ event.id }}"
            data-field="start_datetime"
            data-value="{{ event.start_datetime | localdt('%Y-%m-%dT%H:%M') }}"
            {% if ec %}style="background-color:{{ ec }}"{% endif %}>
          {% if can_edit_event %}
          <div class="d-flex align-items-center justify-content-center gap-1">
            <button class="btn btn-outline-secondary btn-sm py-1 px-1 lh-1 tm-day-shift-btn tm-sm-btn" data-event-id="{{ event.id }}" data-delta="-1" title="−1 den">−</button>
            <span class="tm-time-display tm-clickable" title="Kliknutím upravit datum a čas">{{ event.start_datetime | localdt('%d.%m.') }} {{ event.start_datetime | czechday }}</span>
            <button class="btn btn-outline-secondary btn-sm py-1 px-1 lh-1 tm-day-shift-btn tm-sm-btn" data-event-id="{{ event.id }}" data-delta="1" title="+1 den">+</button>
          </div>
          {% else %}
          {{ event.start_datetime | localdt('%d.%m.') }} {{ event.start_datetime | czechday }}
          {% endif %}
        </td>
        <td class="small tm-row-cell"{% if ec %} style="background-color:{{ ec }}"{% endif %}>
          <a href="{{ url_for('events.detail', event_id=event.id) }}" class="tm-event-name-display" data-event-id="{{ event.id }}">
            {{ event.name }}
          </a>
          {% if can_edit_event %}
          <button class="btn btn-link btn-sm p-0 ms-1 text-muted tm-name-edit-btn"
                  data-event-id="{{ event.id }}"
                  data-value="{{ event.name }}"
                  title="Upravit název" class="tm-edit-name">✎</button>
          {% endif %}
        </td>
        <td class="small tm-row-cell"{% if ec %} style="background-color:{{ ec }}"{% endif %}>
          {% for q in row.qual_objs %}
            <span class="badge text-dark" style="background-color: {{ row.color }}">{{ q.name }}</span>
          {% else %}
            <span class="badge text-dark" style="background-color: {{ row.color }}">—</span>
          {% endfor %}
        </td>

        {# ── Od ── #}
        <td class="text-nowrap small tm-time-cell tm-row-cell"
            data-event-id="{{ event.id }}"
            data-field="start_datetime"
            data-value="{{ event.start_datetime | localdt('%Y-%m-%dT%H:%M') }}"
            {% if ec %}style="background-color:{{ ec }}" {% endif %}>
          {% if can_edit_event %}
          <div class="d-flex align-items-center justify-content-center gap-1">
            <button class="btn btn-outline-secondary btn-sm py-1 px-1 lh-1 tm-hour-shift-btn" data-event-id="{{ event.id }}" data-which="start" data-delta="-1" title="−1 hod" class="tm-sm-btn">−</button>
            <span class="tm-time-display tm-clickable" title="Kliknutím upravit datum a čas">{{ event.start_datetime | localdt('%H:%M') }}</span>
            <button class="btn btn-outline-secondary btn-sm py-1 px-1 lh-1 tm-hour-shift-btn" data-event-id="{{ event.id }}" data-which="start" data-delta="1" title="+1 hod" class="tm-sm-btn">+</button>
          </div>
          {% else %}
          <span class="tm-time-display">{{ event.start_datetime | localdt('%H:%M') }}</span>
          {% endif %}
        </td>

        {# ── Do ── #}
        <td class="text-nowrap small tm-time-cell tm-row-cell"
            data-event-id="{{ event.id }}"
            data-field="end_datetime"
            data-value="{{ event.end_datetime | localdt('%Y-%m-%dT%H:%M') }}"
            {% if ec %}style="background-color:{{ ec }}" {% endif %}>
          {% if can_edit_event %}
          <div class="d-flex align-items-center justify-content-center gap-1">
            <button class="btn btn-outline-secondary btn-sm py-1 px-1 lh-1 tm-hour-shift-btn" data-event-id="{{ event.id }}" data-which="end" data-delta="-1" title="−1 hod" class="tm-sm-btn">−</button>
            <span class="tm-time-display tm-clickable" title="Kliknutím upravit datum a čas">{{ event.end_datetime | localdt('%H:%M') }}</span>
            <button class="btn btn-outline-secondary btn-sm py-1 px-1 lh-1 tm-hour-shift-btn" data-event-id="{{ event.id }}" data-which="end" data-delta="1" title="+1 hod" class="tm-sm-btn">+</button>
          </div>
          {% else %}
          <span class="tm-time-display">{{ event.end_datetime | localdt('%H:%M') }}</span>
          {% endif %}
        </td>

        {# ── Hod. ── #}
        <td class="text-nowrap small tm-hours-cell tm-row-cell" data-event-id="{{ event.id }}"{% if ec %} style="background-color:{{ ec }}"{% endif %}>
          {{ event.scheduled_hours | cznum }}
        </td>

        {# ── Pozic ── #}
        <td class="text-nowrap small text-center tm-row-cell"
            data-event-id="{{ event.id }}"
            data-qual-ids-json="{{ row.qual_ids | list | tojson }}"
            data-count="{{ row.spots | length }}"
            {% if ec %}style="background-color:{{ ec }}"{% endif %}>
          {% if can_edit_event %}
          <div class="d-flex align-items-center justify-content-center gap-1">
            <button class="btn btn-outline-secondary btn-sm tm-spots-minus py-1 px-1 lh-1"
                    data-event-id="{{ event.id }}"
                    data-qual-ids-json="{{ row.qual_ids | list | tojson }}"
                    data-count="{{ row.spots | length }}"
                    class="tm-sm-btn">−</button>
            <span class="tm-spots-display">{{ row.spots | length }}</span>
            <button class="btn btn-outline-secondary btn-sm tm-spots-plus py-1 px-1 lh-1"
                    data-event-id="{{ event.id }}"
                    data-qual-ids-json="{{ row.qual_ids | list | tojson }}"
                    data-count="{{ row.spots | length }}"
                    class="tm-sm-btn">+</button>
          </div>
          {% else %}
          {{ row.spots | length }}
          {% endif %}
        </td>

        {# ── Spot cells ── #}
        {% for spot in row.spots %}
        <td class="tm-spot-cell tm-spot-data-col text-nowrap small" data-spot-id="{{ spot.id }}" style="background-color: {{ row.color }}">
          {% if spot.assignment %}
            <span class="tm-assigned-name">{{ spot.assignment.user.name }}</span>
            {% if row.can_manage %}
            <button class="btn btn-sm p-0 ms-1 text-danger tm-unassign-btn"
                    data-assignment-id="{{ spot.assignment.id }}"
                    data-user-name="{{ spot.assignment.user.name }}"
                    title="Odhlásit">✕</button>
            {% endif %}
          {% elif row.can_manage %}
            <select class="form-select form-select-sm tm-assign-select"
                    data-spot-id="{{ spot.id }}"
                    id="assign_spot_{{ spot.id }}">
              <option value="">— přiřadit —</option>
              {% for user in row.eligible_users if user.id not in row.assigned_user_ids %}
              <option value="{{ user.id }}">{{ user.name }}</option>
              {% endfor %}
            </select>
          {% endif %}
        </td>
        {% endfor %}

        {# ── Empty padding cells ── #}
        {% for _ in range(max_spot_cols - (row.spots | length)) %}
        <td class="tm-spot-data-col" style="background-color: {{ row.color }}"></td>
        {% endfor %}
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
<p class="text-muted small d-none" id="tm-filter-empty-msg">Žádné akce neodpovídají aktivním filtrům.</p>

{# ── Inline time-edit popover (shared, moved into DOM as needed) ── #}
<div id="tm-time-edit-popup" class="card shadow-sm p-2 tm-popup tm-popup-time" style="display:none">
  <div class="d-flex align-items-center gap-2 flex-wrap">
    <input type="date" id="tm-time-date-input" class="form-control form-control-sm tm-date-input">
    <input type="text" id="tm-time-time-input" class="form-control form-control-sm font-monospace"
           placeholder="HH:MM" maxlength="5" pattern="\d{2}:\d{2}" class="tm-time-input">
    <button id="tm-time-save" class="btn btn-success btn-sm">Uložit</button>
    <button id="tm-time-cancel" class="btn btn-outline-secondary btn-sm">Zrušit</button>
  </div>
  <div id="tm-time-error" class="text-danger small mt-1 tm-error-msg" style="display:none"></div>
</div>

{# ── Color picker popover ── #}
<div id="tm-color-popup" class="tm-popup tm-popup-color" style="display:none">
  <div class="tm-color-grid">
    {% set _palette = ['#FFCCCC','#FFE0B2','#FFF9C4','#C8F5C8','#B2EBF2','#BBDEFB','#E1BEE7','#F8BBD0','#F5F5F5'] %}
    {% for c in _palette %}
    <div class="tm-color-swatch" data-color="{{ c }}"
         style="background:{{ c }}"
         title="{{ c }}"></div>
    {% endfor %}
  </div>
  <button id="tm-color-reset" class="btn btn-link btn-sm p-0 mt-2 text-danger d-block w-100 text-center tm-sm-btn">✕ Reset barvy</button>
</div>

{# ── Advance-status confirmation popup ── #}
<div id="tm-advance-popup" class="card shadow-sm p-2 tm-popup tm-popup-advance" style="display:none">
  <div class="small mb-2">Posunout <strong id="tm-advance-event-name"></strong> do stavu <strong id="tm-advance-next-status" class="text-success"></strong>?</div>
  <div class="d-flex gap-2">
    <button id="tm-advance-confirm" class="btn btn-success btn-sm"></button>
    <button id="tm-advance-cancel" class="btn btn-outline-secondary btn-sm">Zrušit</button>
  </div>
</div>

{# ── Inline name-edit popover ── #}
<div id="tm-name-edit-popup" class="card shadow-sm p-2 tm-popup tm-popup-name" style="display:none">
  <div class="d-flex align-items-center gap-2">
    <input type="text" id="tm-name-input" class="form-control form-control-sm tm-name-input" maxlength="200">
    <button id="tm-name-save" class="btn btn-success btn-sm">Uložit</button>
    <button id="tm-name-cancel" class="btn btn-outline-secondary btn-sm">Zrušit</button>
  </div>
  <div id="tm-name-error" class="text-danger small mt-1 tm-error-msg" style="display:none"></div>
</div>

{# ── Inline spots-count error toast ── #}
<div id="tm-spots-error-toast" class="alert alert-danger alert-dismissible position-fixed bottom-0 end-0 m-3 tm-error-toast" style="display:none">
  <span id="tm-spots-error-msg"></span>
  <button type="button" class="btn-close" id="tm-spots-error-close"></button>
</div>

{% endif %}

<style>
.tm-table th, .tm-table td { vertical-align: middle; }
.tm-time-cell .tm-time-display:hover { color: var(--color-primary) !important; }
.tm-time-cell { cursor: default; }
.tm-sep-event td { border-top: 2px solid var(--color-tm-event-separator) !important; }
.tm-sep-day td { border-top: 3px solid var(--color-tm-day-separator) !important; }

/* Theme-aware "dark/completed" filter button — matches events/index */
.filter-btn-neutral {
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-border-color: var(--bs-secondary-color);
  --bs-btn-hover-color: var(--bs-body-bg);
  --bs-btn-hover-bg: var(--bs-body-color);
  --bs-btn-hover-border-color: var(--bs-body-color);
  --bs-btn-active-color: var(--bs-body-bg);
  --bs-btn-active-bg: var(--bs-body-color);
  --bs-btn-active-border-color: var(--bs-body-color);
}

@keyframes tm-flash-kf {
  0%   { outline: 3px solid var(--color-column-flash); outline-offset: -2px; }
  60%  { outline: 3px solid var(--color-column-flash); outline-offset: -2px; }
  100% { outline: 3px solid transparent; outline-offset: -2px; }
}
.tm-row-flash { animation: tm-flash-kf 1.4s ease-out forwards; }
</style>

<div id="tm-config" style="display:none"
     data-me-id="{{ me.id }}"
     data-can-assign="{{ '1' if can_assign else '0' }}"
     data-can-edit-event="{{ '1' if can_edit_event else '0' }}"
     data-can-create-event="{{ '1' if can_create_event else '0' }}"
     data-can-archive-draft="{{ '1' if can_archive_draft else '0' }}"
     data-can-publish="{{ '1' if can_publish else '0' }}"
     data-can-open-assignments="{{ '1' if can_open_assignments else '0' }}">
</div>
<script src="{{ url_for('static', filename='js/table-manager.js') }}?v={{ static_ver }}" nonce="{{ g.csp_nonce }}"></script>
{% endblock %}