{% extends "base.html" %}
{% from "_personeel.html" import subnav, status_badge, soort_label with context %}

{% block title %}Dagoverzicht{% endblock %}
{% block page_title %}Dagoverzicht secretariaat{% endblock %}

{% block extra_css %}
<style>
    .nav-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 18px; }
    .nav-bar .date-title { font-size: 1.25rem; font-weight: 700; margin: 0 8px; }
    .nav-bar form { display: flex; gap: 6px; margin: 0; }
    .nav-bar input[type=date] { width: auto; }
    .seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; }
    .seg a { padding: 8px 14px; text-decoration: none; color: var(--text); font-weight: 600; font-size: 14px; background: var(--surface); }
    .seg a.on { background: var(--primary-color); color: #fff; }
    .day { margin-bottom: 20px; }
    .day-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
    .day-head h3 { margin: 0; text-transform: capitalize; }
    .day-head.today h3::after { content: "vandaag"; margin-left: 8px; font-size: 12px; font-weight: 700; color: #fff; background: var(--primary-color); padding: 2px 8px; border-radius: 999px; vertical-align: middle; }
    .cols { display: grid; grid-template-columns: 3fr 2fr; gap: 16px; }
    @media (max-width: 860px) { .cols { grid-template-columns: 1fr; } }
    .cols .card + .card { margin-top: 0; }
    .card h4 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
    .person { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
    .person:last-child { border-bottom: 0; }
    .person .nm { font-weight: 700; }
    .person .what { font-size: 13px; color: var(--text-muted); }
    .person .right { text-align: right; }
    .chips { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
    .chips span { padding: 1px 8px; border-radius: 999px; background: var(--primary-light); color: var(--primary-color); font-size: 12px; font-weight: 600; }
    .klas-row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
    .klas-row:last-child { border-bottom: 0; }
    .klas-row .k { font-weight: 800; font-size: 1.05rem; min-width: 60px; }
    .empty { color: var(--text-muted); padding: 6px 0; }
    .pending { margin-top: 10px; font-size: 13px; color: var(--text-muted); }
    .vv-form { display: inline; }
    @media print {
        .tabs, .nav-bar form, .seg, .vv-form button, .pending { display: none !important; }
        .card { break-inside: avoid; }
    }
</style>
{% endblock %}

{% block content %}
{{ subnav('dagoverzicht') }}

<div class="nav-bar">
    <a class="btn btn-light" href="{{ url_for('personeel.dagoverzicht', datum=vorige.isoformat(), weergave=weergave) }}">‹</a>
    <a class="btn btn-light" href="{{ url_for('personeel.dagoverzicht', weergave=weergave) }}">Vandaag</a>
    <a class="btn btn-light" href="{{ url_for('personeel.dagoverzicht', datum=volgende.isoformat(), weergave=weergave) }}">›</a>
    <span class="date-title">
        {% if weergave == 'week' %}Week van {{ van.strftime('%d/%m') }} tot {{ tot.strftime('%d/%m/%Y') }}{% else %}{{ dag.strftime('%d/%m/%Y') }}{% endif %}
    </span>
    <span class="seg">
        <a class="{{ 'on' if weergave == 'dag' }}" href="{{ url_for('personeel.dagoverzicht', datum=dag.isoformat(), weergave='dag') }}">Dag</a>
        <a class="{{ 'on' if weergave == 'week' }}" href="{{ url_for('personeel.dagoverzicht', datum=dag.isoformat(), weergave='week') }}">Week</a>
    </span>
    <form method="GET" action="{{ url_for('personeel.dagoverzicht') }}">
        <input type="hidden" name="weergave" value="{{ weergave }}">
        <input type="date" name="datum" value="{{ dag.isoformat() }}" onchange="this.form.submit()">
    </form>
    <span style="flex:1"></span>
    <a class="btn btn-light" href="{{ url_for('personeel.nieuw', soort='afwezigheid') }}">➕ Afwezigheid melden</a>
    <button type="button" class="btn-light" onclick="window.print()">🖨️ Afdrukken</button>
</div>

{% set weekdagen = ['maandag','dinsdag','woensdag','donderdag','vrijdag','zaterdag','zondag'] %}
{% for d in dagen %}
<div class="day">
    <div class="day-head {{ 'today' if d.datum == vandaag }}">
        <h3>{{ weekdagen[d.datum.weekday()] }} {{ d.datum.strftime('%d/%m') }}</h3>
        <span class="muted small">{{ d.personen|length }} afwezig · {{ d.klassen|length }} klas(sen) weg
            {% if d.open_vervanging %} · <strong style="color:var(--warning-text)">{{ d.open_vervanging }} vervanging(en) te regelen</strong>{% endif %}</span>
    </div>
    <div class="cols">
        <div class="card">
            <h4>👤 Afwezige personeelsleden</h4>
            {% for p in d.personen %}
                {% set i = p.item %}
                <div class="person">
                    <div>
                        <div class="nm">{{ p.naam }}</div>
                        <div class="what">
                            {% if p.rol == 'begeleider' %}🚌 begeleider uitstap "{{ i.Titel }}" ({{ i.Naam }})
                            {% else %}{{ soort_label(i.Soort) }}{% if i.Soort != 'afwezigheid' %}: {{ i.Titel }}{% endif %}{% endif %}
                            · {{ DAGDELEN.get(i.Dagdeel) }}{% if i.Dagdeel == 'uren' and i.Lesuren %} ({{ i.Lesuren }}){% endif %}
                        </div>
                        {% if p.rol != 'begeleider' and i.Soort != 'uitstap' and i.Klassen %}
                            <div class="chips">{% for k in i.Klassen.split(',') %}<span>{{ k.strip() }}</span>{% endfor %}</div>
                        {% endif %}
                        {% if p.rol != 'begeleider' and i.Soort == 'afwezigheid' and i.Omschrijving %}<div class="what" style="margin-top:4px">💬 {{ i.Omschrijving }}</div>{% endif %}
                    </div>
                    <div class="right">
                        {% if p.rol != 'begeleider' and i.Soort != 'uitstap' and i.Klassen %}
                            <form class="vv-form" method="POST" action="{{ url_for('personeel.vervanging', aid=i.ID) }}">
                                <input type="hidden" name="terug" value="{{ request.full_path }}">
                                <input type="hidden" name="info" value="{{ i.Vervanging_info or '' }}">
                                {% if i.Vervanging_ok %}
                                    <span class="badge badge-success">✓ Vervanging</span>
                                    <button type="submit" name="ok" value="0" class="btn-ghost btn-sm" title="Terug op 'te regelen' zetten">↺</button>
                                {% else %}
                                    <span class="badge badge-warning">Vervanging te regelen</span>
                                    <button type="submit" name="ok" value="1" class="btn-light btn-sm" title="Markeer als geregeld">✓ Geregeld</button>
                                {% endif %}
                            </form>
                        {% endif %}
                        <div><a class="small" href="{{ url_for('personeel.detail', aid=i.ID) }}">details</a></div>
                    </div>
                </div>
            {% else %}
                <div class="empty">Niemand afwezig. 🎉</div>
            {% endfor %}
        </div>
        <div class="card">
            <h4>🚌 Klassen weg</h4>
            {% for k in d.klassen %}
                <div class="klas-row">
                    <span class="k">{{ k.klas }}</span>
                    <span class="muted small" style="flex:1">{{ k.item.Titel }}{% if k.item.Locatie %} · {{ k.item.Locatie }}{% endif %}<br>
                        {{ DAGDELEN.get(k.item.Dagdeel) }}{% if k.item.Dagdeel == 'uren' and k.item.Lesuren %} ({{ k.item.Lesuren }}){% endif %} · {{ k.item.Naam }}</span>
                </div>
            {% else %}
                <div class="empty">Geen klassen weg.</div>
            {% endfor %}
            {% if d.wachtend %}
            <div class="pending">⏳ Nog niet goedgekeurd:
                {% for w in d.wachtend %}<a href="{{ url_for('personeel.detail', aid=w.ID) }}">{{ SOORTEN[w.Soort].icoon }} {{ w.Naam }} – {{ w.Titel }}</a>{{ ', ' if not loop.last }}{% endfor %}
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endfor %}
{% endblock %}