{% extends "base.html" %}

{% block title %}Laatkomers{% endblock %}
{% block page_title %}Laatkomers{% endblock %}

{% block extra_css %}
<style>
    .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: 20px; }
    .stat { padding: 18px 20px; }
    .stat + .stat { margin-top: 0; }
    .stat .val { font-size: 28px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
    .stat .lbl { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; margin-top: 4px; }
    .stat .sub { font-size: 13px; color: var(--text-muted); }
    .sync-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
    .progress { flex: 1 1 200px; height: 8px; background: var(--surface-muted); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
    .progress > span { display: block; height: 100%; width: 0; background: var(--primary-color); transition: width .4s; }
    .periode { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
    .periode .field { margin: 0; }
    .zoekbalk { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
    .zoekbalk input[type=search] { flex: 1 1 260px; }
    th.sorteer { cursor: pointer; user-select: none; white-space: nowrap; }
    th.sorteer:hover { color: var(--primary-color); }
    th.sorteer .pijl::after { content: "↕"; opacity: .35; margin-left: 2px; }
    th.sorteer.op .pijl::after { content: "▲"; opacity: 1; }
    th.sorteer.af .pijl::after { content: "▼"; opacity: 1; }
    .count-badge { display: inline-block; min-width: 34px; text-align: center; padding: 3px 10px; border-radius: 999px; font-weight: 700;
                   background: var(--warning-bg); color: var(--warning-text); font-variant-numeric: tabular-nums; }
    .count-badge.veel { background: var(--danger-bg); color: var(--danger-text); }
    details.data summary { cursor: pointer; color: var(--primary-color); font-size: .9em; }
    .day-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; max-width: 520px; }
    .day-chip { display: inline-flex; gap: 6px; align-items: center; padding: 3px 9px; border-radius: 999px; background: var(--surface);
                border: 1px solid var(--border); font-size: 12.5px; white-space: nowrap; }
    .day-chip .dd { font-weight: 700; color: var(--warning-text); }
    .tabel-voet { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; }
    .paginering { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
    td.nowrap { white-space: nowrap; }
</style>
{% endblock %}

{% block content %}
{# ---------- Kerncijfers ---------- #}
<div class="stats">
    <div class="card stat">
        <div class="val">{{ rows|length }}</div>
        <div class="lbl">Leerlingen te laat</div>
    </div>
    <div class="card stat">
        <div class="val">{{ totaal }}</div>
        <div class="lbl">Keer te laat</div>
        {% if rows %}<div class="sub">gem. {{ '%.1f'|format(totaal / rows|length) }} per leerling</div>{% endif %}
    </div>
    <div class="card stat">
        <div class="val" style="font-size:18px; padding-top:6px">
            {% if laatste.m %}{{ laatste.m.strftime('%d-%m-%Y %H:%M') }}{% else %}Nog nooit{% endif %}
        </div>
        <div class="lbl">Laatst gesynchroniseerd</div>
        <div class="sub">Automatisch elke ochtend</div>
    </div>
</div>

{% if fout %}<div class="flash-message error"><span>{{ fout }}</span></div>{% endif %}
{% if not codes %}
<div class="alert alert-warning">Er zijn geen codes voor "te laat" ingesteld. Vul ze in bij 🔌 Koppelingen › Smartschool › <em>Codes voor te laat</em>.</div>
{% endif %}

{# ---------- Synchronisatie en periode ---------- #}
<div class="card">
    <div class="sync-bar">
        <form method="POST" action="{{ url_for('afwezigheden.sync', van=f.van.isoformat(), tot=f.tot.isoformat()) }}" style="margin:0">
            <input type="hidden" name="terug" value="laatkomers">
            <button type="submit" class="btn-secondary" id="syncBtn" {% if status.bezig %}disabled{% endif %}>🔄 Nu synchroniseren</button>
        </form>
        <form method="POST" action="{{ url_for('afwezigheden.sync', van=f.van.isoformat(), tot=f.tot.isoformat()) }}" style="margin:0"
              onsubmit="return confirm('Alle schooldagen van dit schooljaar opnieuw ophalen uit Smartschool? Dit duurt enkele minuten.')">
            <input type="hidden" name="terug" value="laatkomers">
            <input type="hidden" name="volledig" value="1">
            <button type="submit" class="btn-light" {% if status.bezig %}disabled{% endif %}
                    title="Nodig de eerste keer: vroeger opgehaalde dagen bevatten de codes voor te laat nog niet">⏮ Heel schooljaar opnieuw ophalen</button>
        </form>
        <div class="progress {% if not status.bezig %}hidden{% endif %}" id="syncProgress"><span id="syncProgressBar"></span></div>
        <span class="muted small" id="syncText">
            {% if status.bezig %}Bezig…{% elif status.laatste_resultaat %}{{ status.laatste_resultaat }}{% endif %}
        </span>
    </div>
    <form method="GET" action="{{ url_for('afwezigheden.laatkomers') }}" class="periode" style="margin-top:14px">
        <div class="field">
            <label for="van">Van</label>
            <input type="date" id="van" name="van" value="{{ f.van.isoformat() }}">
        </div>
        <div class="field">
            <label for="tot">Tot en met</label>
            <input type="date" id="tot" name="tot" value="{{ f.tot.isoformat() }}">
        </div>
        <button type="submit">Toon periode</button>
    </form>
</div>

{# ---------- Tabel ---------- #}
<div class="card">
    <div class="zoekbalk">
        <input type="search" id="zoek" placeholder="Zoek een leerling op naam, gebruikersnaam of internnummer..." aria-label="Zoek een leerling">
    </div>
    <div class="table-wrap">
        <table>
            <thead>
                <tr>
                    <th class="sorteer" data-kol="0">Leerling <span class="pijl"></span></th>
                    <th class="sorteer" data-kol="1">Internnummer <span class="pijl"></span></th>
                    <th class="sorteer" data-kol="2">Aantal keer te laat <span class="pijl"></span></th>
                    <th class="sorteer" data-kol="3">Laatst te laat <span class="pijl"></span></th>
                    <th class="sorteer" data-kol="4">Eerst te laat <span class="pijl"></span></th>
                    <th>Data</th>
                </tr>
            </thead>
            <tbody id="laatBody">
            {% for r in rows %}
                <tr data-zoek="{{ [r.Voornaam, r.Naam, r.Gebruikersnaam, r.Internnummer]|select|join(' ')|lower }}">
                    <td data-sort="{{ (r.Naam or '') ~ ' ' ~ (r.Voornaam or '') }}">
                        {% if r.Naam or r.Voornaam %}<strong>{{ r.Naam }}</strong> {{ r.Voornaam }}{% else %}<span class="muted">Onbekende leerling</span>{% endif %}
                    </td>
                    <td class="mono" data-sort="{{ r.Internnummer }}">{{ r.Internnummer }}</td>
                    <td data-sort="{{ '%05d'|format(r.Aantal) }}"><span class="count-badge {{ 'veel' if r.Aantal >= 5 }}">{{ r.Aantal }}</span></td>
                    <td class="nowrap" data-sort="{{ r.Laatste.isoformat() }}">{{ r.Laatste.strftime('%d-%m-%Y') }}</td>
                    <td class="nowrap" data-sort="{{ r.Eerste.isoformat() }}">{{ r.Eerste.strftime('%d-%m-%Y') }}</td>
                    <td>
                        <details class="data"><summary>Toon {{ r.Data|length }}</summary>
                            <div class="day-chips">
                                {% for d, dd in r.Data %}<span class="day-chip">{{ ['ma','di','wo','do','vr','za','zo'][d.weekday()] }} {{ d.strftime('%d-%m') }} <span class="dd">{{ dd }}</span></span>{% endfor %}
                            </div>
                        </details>
                    </td>
                </tr>
            {% else %}
                <tr class="empty-row"><td colspan="6">Geen laatkomers in deze periode{% if not laatste.m %} (er is nog niets opgehaald uit Smartschool){% endif %}.</td></tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
    <div class="tabel-voet">
        <div style="display:flex;align-items:center;gap:14px;flex-wrap:wrap">
            <div class="muted small" id="teller"></div>
            <span id="perPagina"></span>
        </div>
        <nav class="paginering" id="paginering" aria-label="Pagina's"></nav>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    // Zoeken, sorteren (klik op een kolomkop) en pagineren in de browser
    (function () {
        const body = document.getElementById('laatBody');
        if (!body || body.querySelector('.empty-row')) return;
        let PER_PAGINA = perPagina('laatkomers');
        let pagina = 1, kol = 2, op = false, zoek = '';
        document.querySelector('th.sorteer[data-kol="2"]').classList.add('af');   // standaard: meest te laat bovenaan

        const zichtbaar = () => Array.from(body.rows).filter(tr => !zoek || tr.dataset.zoek.includes(zoek));
        function toon() {
            const rijen = zichtbaar();
            const grootte = PER_PAGINA || Infinity;
            const paginas = Math.max(1, Math.ceil(rijen.length / grootte));
            pagina = Math.min(Math.max(1, pagina), paginas);
            const van = PER_PAGINA ? (pagina - 1) * PER_PAGINA : 0, tot = van + grootte;
            Array.from(body.rows).forEach(tr => tr.style.display = 'none');
            rijen.forEach((tr, i) => tr.style.display = (i >= van && i < tot) ? '' : 'none');
            document.getElementById('teller').textContent = rijen.length
                ? `${van + 1}–${Math.min(tot, rijen.length)} van ${rijen.length} leerling(en)` : 'Geen leerling gevonden';
            const nav = document.getElementById('paginering');
            nav.innerHTML = '';
            if (paginas <= 1) return;
            const knop = (label, p, actief, titel) => {
                const b = document.createElement('button');
                b.type = 'button'; b.textContent = label; b.className = 'btn-sm ' + (actief ? 'btn-secondary' : 'btn-light');
                if (titel) b.title = titel;
                b.onclick = () => { pagina = p; toon(); body.closest('.table-wrap').scrollIntoView({ block: 'start' }); };
                nav.appendChild(b);
            };
            if (pagina > 1) { knop('«', 1, false, 'Eerste pagina'); knop('‹ Vorige', pagina - 1); }
            for (let p = Math.max(1, pagina - 2); p <= Math.min(paginas, pagina + 2); p++) knop(String(p), p, p === pagina);
            if (pagina < paginas) { knop('Volgende ›', pagina + 1); knop('»', paginas, false, 'Laatste pagina'); }
            const info = document.createElement('span');
            info.className = 'muted small'; info.textContent = `pagina ${pagina} van ${paginas}`;
            nav.appendChild(info);
        }

        document.getElementById('zoek').addEventListener('input', e => { zoek = e.target.value.trim().toLowerCase(); pagina = 1; toon(); });
        document.querySelectorAll('th.sorteer').forEach(th => th.addEventListener('click', () => {
            const k = +th.dataset.kol;
            // aantal en datums: eerst hoog/nieuw → laag/oud; namen: eerst A → Z
            op = kol === k ? !op : (k < 2);
            kol = k;
            document.querySelectorAll('th.sorteer').forEach(x => x.classList.remove('op', 'af'));
            th.classList.add(op ? 'op' : 'af');
            Array.from(body.rows).sort((a, b) => {
                const x = a.cells[k].dataset.sort || '', y = b.cells[k].dataset.sort || '';
                const c = x.localeCompare(y, 'nl', { numeric: true, sensitivity: 'base' });
                return op ? c : -c;
            }).forEach(tr => body.appendChild(tr));
            pagina = 1; toon();
        }));
        perPaginaKiezer(document.getElementById('perPagina'), 'laatkomers', n => { PER_PAGINA = n; pagina = 1; toon(); });
        toon();
    })();

    // Voortgang van een lopende synchronisatie volgen
    (function pollSync() {
        const bar = document.getElementById('syncProgressBar');
        const box = document.getElementById('syncProgress');
        const txt = document.getElementById('syncText');
        const btn = document.getElementById('syncBtn');
        let wasBusy = {{ 'true' if status.bezig else 'false' }};
        function tick() {
            fetch("{{ url_for('afwezigheden.status') }}").then(r => r.json()).then(s => {
                if (s.bezig) {
                    wasBusy = true;
                    box.classList.remove('hidden'); btn.disabled = true;
                    const pct = s.totaal ? Math.round(s.voortgang / s.totaal * 100) : 0;
                    bar.style.width = pct + '%';
                    txt.textContent = `Bezig: dag ${s.voortgang} van ${s.totaal}…`;
                    setTimeout(tick, 2000);
                } else if (wasBusy) {
                    window.location.reload();
                }
            }).catch(() => {});
        }
        if (wasBusy) tick();
    })();
</script>
{% endblock %}