{% extends "base.html" %}

{% block title %}IP-blokkades{% endblock %}
{% block page_title %}IP-blokkades{% endblock %}

{% block extra_css %}
<style>
    .ip-form { display: grid; grid-template-columns: 1.2fr 1fr 2fr auto; gap: 10px; align-items: end; }
    .ip-form.met-school { grid-template-columns: 1.2fr 1fr 1.4fr 2fr auto; }
    .ip-form .field { margin: 0; }
    .ip-form .school-veld[hidden] { display: none; }
    /* Keuzelijst met vinkjes voor één of meer scholen */
    .schoolkiezer { position: relative; }
    .schoolkiezer summary { list-style: none; cursor: pointer; padding: 9px 30px 9px 12px; border: 1px solid var(--border);
        border-radius: var(--radius); background: var(--surface, #fff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        position: relative; min-height: 20px; }
    .schoolkiezer summary::-webkit-details-marker { display: none; }
    .schoolkiezer summary::after { content: "▾"; position: absolute; right: 11px; top: 50%; transform: translateY(-50%); opacity: .6; }
    .schoolkiezer[open] summary { border-color: var(--primary-color); }
    .schoolkiezer .sk-lijst { position: absolute; z-index: 30; left: 0; top: calc(100% + 4px); min-width: 100%; width: max-content;
        max-width: 380px; max-height: 300px; overflow: auto; background: var(--surface, #fff); border: 1px solid var(--border);
        border-radius: var(--radius); box-shadow: 0 8px 24px rgba(15,23,42,.14); padding: 6px; }
    .schoolkiezer .sk-zoek { width: 100%; margin-bottom: 6px; }
    .schoolkiezer label { display: flex; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 6px; cursor: pointer;
        font-weight: 400; margin: 0; white-space: nowrap; }
    .schoolkiezer label:hover { background: var(--surface-muted); }
    .schoolkiezer label input { width: auto; margin: 0; }
    .schoolkiezer .sk-acties { display: flex; justify-content: space-between; gap: 8px; padding: 6px 4px 2px; border-top: 1px solid var(--border); margin-top: 4px; }
    .schoolkiezer .sk-acties button { all: unset; cursor: pointer; color: var(--primary-color); font-size: .88em; }
    .chip { display: inline-block; padding: 2px 9px; margin: 2px 4px 2px 0; border-radius: 999px; background: var(--surface-muted);
        border: 1px solid var(--border); font-size: .88em; white-space: nowrap; }
    /* Bewerken in de tabel "Altijd toestaan" */
    tr .bew { display: none; }
    tr.bewerken .bew { display: block; }
    tr.bewerken .toon { display: none; }
    tr.bewerken td { background: var(--surface-muted); vertical-align: top; }
    tr.bewerken td.actions .bew { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
    tr.bewerken td.actions .bew button { width: 100%; white-space: nowrap; }
    tr .bew input[type=text] { width: 100%; min-width: 120px; }
    tr.bewerken .schoolkiezer { min-width: 200px; max-width: 280px; }
    tr.bewerken .schoolkiezer label { white-space: normal; }
    tr.bewerken .schoolkiezer .sk-lijst { position: static; box-shadow: none; max-width: none; width: auto; margin-top: 4px; }
    .ip-tabel[data-sleutel="toe"] tbody tr:not(.bewerken):not(.empty-row) td:not(.actions) { cursor: text; }
    .acties-rij { display: inline-flex; gap: 6px; }
    @media (max-width: 760px) { .ip-form { grid-template-columns: 1fr; } }
    .mijn-ip { display: inline-flex; gap: 8px; align-items: center; padding: 6px 12px; border-radius: 999px;
               background: var(--surface-muted); border: 1px solid var(--border); font-size: .92em; }
    td.mono, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
    .test-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
    .test-form input { flex: 1 1 220px; max-width: 320px; }
    .modus { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between;
             padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); margin-top: 16px; }
    .modus.aan { border-color: var(--danger-text); background: var(--danger-bg); }
    .modus strong { display: block; }
    .schakelaar { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; }
    .schakelaar .spoor { width: 44px; height: 24px; border-radius: 999px; background: #cbd5e1; position: relative; transition: background .15s; flex-shrink: 0; }
    .schakelaar .spoor::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
                                 background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
    .schakelaar.aan .spoor { background: var(--danger-text); }
    .schakelaar.aan .spoor::after { transform: translateX(20px); }
    .schakelaar button { all: unset; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
    .schakelaar button:focus-visible .spoor { outline: 2px solid var(--primary-color); outline-offset: 2px; }
    .tabel-zoek { margin-bottom: 10px; max-width: 360px; }
    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; }
    .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; }
</style>
{% endblock %}

{% macro schoolkiezer(gekozen=[], formid='') %}
<details class="schoolkiezer">
    <summary class="sk-tekst" data-leeg="— geen school —">— geen school —</summary>
    <div class="sk-lijst">
        {% if scholen|length > 8 %}<input type="search" class="sk-zoek" placeholder="Zoek een school..." aria-label="Zoek een school">{% endif %}
        {% for s in scholen %}
        <label><input type="checkbox" name="scholen" value="{{ s.code }}" data-naam="{{ s.naam }}"{% if formid %} form="{{ formid }}"{% endif %}{{ ' checked' if s.code in gekozen }}>
            {{ s.naam }}{% if not s.actief %} <span class="muted small">(inactief)</span>{% endif %}</label>
        {% else %}
        <div class="muted small" style="padding:6px 8px">Er zijn nog geen scholen.</div>
        {% endfor %}
        {% if scholen %}<div class="sk-acties"><button type="button" class="sk-alles">Alles aanvinken</button><button type="button" class="sk-geen">Niets</button></div>{% endif %}
    </div>
</details>
{% endmacro %}

{% block content %}
<div class="card">
    <div class="page-head">
        <h2>🚫 IP-blokkades</h2>
        <span class="mijn-ip">Jouw IP-adres: <strong class="mono">{{ mijn_ip }}</strong></span>
    </div>
    <p class="field-hint" style="margin-top:-6px">Geldt voor alle scholen. Een geblokkeerd adres krijgt bij elke aanvraag
        "Toegang geweigerd", ook op de loginpagina. Een adres bij <em>Altijd toestaan</em> mag altijd, ook als het in een
        geblokkeerde reeks valt.</p>

    <form method="POST" action="{{ url_for('ipblokkade.toevoegen') }}" class="ip-form">
        <div class="field">
            <label for="reeks">IP-adres of reeks</label>
            <input type="text" id="reeks" name="reeks" required class="mono" placeholder="bv. 85.  of  85.12.3.4  of  85.0.0.0/8">
        </div>
        <div class="field">
            <label for="soort">Soort</label>
            <select id="soort" name="soort">
                <option value="blokkeren">🚫 Blokkeren</option>
                <option value="toestaan">✅ Altijd toestaan</option>
            </select>
        </div>
        <div class="field school-veld" hidden>
            <label>School(s)</label>
            {{ schoolkiezer() }}
        </div>
        <div class="field">
            <label for="opmerking">Opmerking</label>
            <input type="text" id="opmerking" name="opmerking" maxlength="255" placeholder="Waarom? (optioneel)">
        </div>
        <button type="submit">➕ Toevoegen</button>
    </form>

    {% if lokaal %}
    <div class="alert alert-warning" style="margin:16px 0 0">PIVOT ziet jouw adres als <strong class="mono">{{ mijn_ip }}</strong>.
        Waarschijnlijk draait PIVOT achter een reverse proxy, en dan lijkt elke bezoeker van dat adres te komen. Zet in
        <code>config.ini › [algemeen] proxy_aantal = 1</code> en herstart PIVOT, anders werken de IP-regels niet zoals bedoeld.</div>
    {% endif %}

    <div class="modus {{ 'aan' if enkel_toegestaan }}">
        <div>
            <strong>Enkel "Altijd toestaan" binnenlaten</strong>
            <span class="muted small">
                {% if enkel_toegestaan %}Staat <b>aan</b>: elk adres dat niet bij Altijd toestaan staat, wordt geweigerd
                    ({{ modus_geweigerd }} keer sinds de teller begon){% if modus and modus.Door %} · aangezet door {{ modus.Door }}{% endif %}.
                {% else %}Staat uit: iedereen mag binnen, behalve de geblokkeerde adressen.{% endif %}
            </span>
        </div>
        <form method="POST" action="{{ url_for('ipblokkade.modus') }}" style="margin:0"
              onsubmit="return confirm({{ ("Iedereen weer binnenlaten (behalve de geblokkeerde adressen)?" if enkel_toegestaan else "Enkel nog adressen uit 'Altijd toestaan' binnenlaten? Iedereen anders krijgt 'Toegang geweigerd', ook op de loginpagina.")|tojson|forceescape }})">
            <input type="hidden" name="aan" value="{{ '0' if enkel_toegestaan else '1' }}">
            <span class="schakelaar {{ 'aan' if enkel_toegestaan }}">
                <button type="submit" role="switch" aria-checked="{{ 'true' if enkel_toegestaan else 'false' }}">
                    <span class="spoor"></span> {{ 'Aan' if enkel_toegestaan else 'Uit' }}
                </button>
            </span>
        </form>
    </div>
</div>

{% for titel, lijst, leeg, sleutel in (('🚫 Geblokkeerd', blokkeren, 'Er is nog niets geblokkeerd.', 'blok'),
                                        ('✅ Altijd toestaan', toestaan, 'Geen uitzonderingen.', 'toe')) %}
<div class="card ip-tabel" data-sleutel="{{ sleutel }}">
    <div style="display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;">
        <h2 class="card-title">{{ titel }} <span class="muted small">({{ lijst|length }})</span></h2>
        {% if sleutel == 'blok' and lijst %}
        <form method="post" action="{{ url_for('ipblokkade.leegmaken') }}" style="margin:0;"
              onsubmit="return confirm({{ ('Alle ' ~ (lijst|length) ~ ' geblokkeerde regel' ~ ('s' if lijst|length != 1 else '') ~ ' verwijderen? De lijst \'Altijd toestaan\' blijft ongewijzigd.')|tojson|forceescape }})">
            <button type="submit" class="btn-sm btn-danger">🗑️ Bloklijst leegmaken</button>
        </form>
        {% endif %}
    </div>
    {% if lijst|length > 10 %}<input type="search" class="tabel-zoek" placeholder="Zoek een reeks{{ ', school' if sleutel == 'toe' }} of opmerking..." aria-label="Zoeken in {{ titel }}">{% endif %}
    <div class="table-wrap">
        <table>
            <thead>
                <tr>
                    <th class="sorteer" data-tekst>Reeks <span class="pijl"></span></th>
                    {% if sleutel == 'toe' %}<th class="sorteer" data-tekst>School <span class="pijl"></span></th>{% endif %}
                    <th class="sorteer" data-tekst>Opmerking <span class="pijl"></span></th>
                    <th class="sorteer">Toegevoegd <span class="pijl"></span></th>
                    {% if lijst is sameas blokkeren %}<th class="sorteer text-right">Geweigerd <span class="pijl"></span></th>
                    <th class="sorteer">Laatst geweigerd <span class="pijl"></span></th>{% endif %}
                    <th class="actions"></th>
                </tr>
            </thead>
            <tbody>
            {% for r in lijst %}
                {% set bf = 'bew-' ~ r.ID %}
                <tr data-id="{{ r.ID }}">
                    {% if sleutel == 'toe' %}
                    <td class="mono" data-sort="{{ r.Sorteer }}"><span class="toon"><strong>{{ r.Reeks }}</strong></span>
                        <span class="bew"><input type="text" name="reeks" form="{{ bf }}" value="{{ r.Reeks }}" required class="mono" aria-label="Reeks"></span></td>
                    <td data-sort="{{ r.Scholen_namen|join(', ') }}"><span class="toon">{% for n in r.Scholen_namen %}<span class="chip">{{ n }}</span>{% else %}<span class="muted">–</span>{% endfor %}</span>
                        <span class="bew">{{ schoolkiezer(r.Scholen_codes, bf) }}</span></td>
                    <td data-sort="{{ r.Opmerking or '' }}"><span class="toon">{{ r.Opmerking or '' }}</span>
                        <span class="bew"><input type="text" name="opmerking" form="{{ bf }}" value="{{ r.Opmerking or '' }}" maxlength="255" placeholder="Opmerking" aria-label="Opmerking"></span></td>
                    {% else %}
                    <td class="mono" data-sort="{{ r.Sorteer }}"><strong>{{ r.Reeks }}</strong></td>
                    <td data-sort="{{ r.Opmerking or '' }}">{{ r.Opmerking or '' }}</td>
                    {% endif %}
                    <td class="muted small" data-sort="{{ r.Aangemaakt.isoformat() }}">{{ r.Aangemaakt.strftime('%d-%m-%Y %H:%M') }}{% if r.Door %} · {{ r.Door }}{% endif %}</td>
                    {% if lijst is sameas blokkeren %}
                    <td class="text-right" data-sort="{{ '%010d'|format(r.Aantal_geweigerd) }}">{{ r.Aantal_geweigerd }}</td>
                    <td class="muted small" data-sort="{{ r.Laatst_geweigerd.isoformat() if r.Laatst_geweigerd else '' }}">{{ r.Laatst_geweigerd.strftime('%d-%m-%Y %H:%M') if r.Laatst_geweigerd else '–' }}</td>
                    {% endif %}
                    <td class="actions">
                        <span class="toon acties-rij">
                        {% if sleutel == 'toe' %}<button type="button" class="btn-sm btn-ghost start-bew">✏️ Bewerken</button>{% endif %}
                        <form method="POST" action="{{ url_for('ipblokkade.verwijderen', regel_id=r.ID) }}" style="margin:0"
                              onsubmit="return confirm({{ (r.Reeks ~ ' uit de lijst verwijderen?')|tojson|forceescape }})">
                            <button type="submit" class="btn-sm btn-ghost">🗑️ Verwijderen</button>
                        </form>
                        </span>
                        {% if sleutel == 'toe' %}
                        <span class="bew">
                            <form id="{{ bf }}" method="POST" action="{{ url_for('ipblokkade.bewerken', regel_id=r.ID) }}" style="margin:0">
                                <button type="submit" class="btn-sm">💾 Opslaan</button>
                            </form>
                            <button type="button" class="btn-sm btn-light stop-bew">Annuleren</button>
                        </span>
                        {% endif %}
                    </td>
                </tr>
            {% else %}
                <tr class="empty-row"><td colspan="6">{{ leeg }}</td></tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
    {% if lijst %}
    <div class="tabel-voet">
        <div style="display:flex;align-items:center;gap:14px;flex-wrap:wrap">
            <div class="muted small teller"></div>
            <span class="per-pagina-plek"></span>
        </div>
        <nav class="paginering" aria-label="Pagina's"></nav>
    </div>
    {% endif %}
</div>
{% endfor %}

<div class="card">
    <h2 class="card-title">🔎 Een adres testen</h2>
    <form method="GET" action="{{ url_for('ipblokkade.overzicht') }}" class="test-form">
        <input type="text" name="test" class="mono" placeholder="bv. 85.12.3.4" value="{{ test.ip if test else '' }}">
        <button type="submit" class="btn-secondary">Testen</button>
        {% if test %}
            {% if test.geweigerd %}
            <span class="badge badge-danger">🚫 Geweigerd door {{ test.regel.Reeks if test.regel else 'een regel' }}</span>
            {% else %}
            <span class="badge badge-success">✅ Toegelaten</span>
            {% endif %}
        {% endif %}
    </form>
</div>
{% endblock %}

{% block scripts %}
<script>
    // Keuzelijst met vinkjes: tekst bovenaan = gekozen scholen
    function skTekst(sk) {
        const namen = Array.from(sk.querySelectorAll('input[type=checkbox]:checked')).map(c => c.dataset.naam);
        const t = sk.querySelector('.sk-tekst');
        t.textContent = !namen.length ? t.dataset.leeg : namen.length <= 2 ? namen.join(', ') : `${namen.length} scholen`;
        t.title = namen.join('\n');
    }
    document.querySelectorAll('.schoolkiezer').forEach(sk => {
        skTekst(sk);
        sk.addEventListener('change', () => skTekst(sk));
        const zoek = sk.querySelector('.sk-zoek');
        if (zoek) zoek.addEventListener('keydown', e => { if (e.key === 'Enter') e.preventDefault(); });
        if (zoek) zoek.addEventListener('input', () => {
            const q = zoek.value.trim().toLowerCase();
            sk.querySelectorAll('label').forEach(l => l.style.display = l.textContent.toLowerCase().includes(q) ? '' : 'none');
        });
        sk.querySelector('.sk-alles')?.addEventListener('click', () => {
            sk.querySelectorAll('label').forEach(l => { if (l.style.display !== 'none') l.querySelector('input').checked = true; });
            skTekst(sk);
        });
        sk.querySelector('.sk-geen')?.addEventListener('click', () => {
            sk.querySelectorAll('input[type=checkbox]').forEach(c => c.checked = false); skTekst(sk);
        });
        sk.addEventListener('toggle', () => { if (sk.open && zoek) zoek.focus(); });
    });
    // Klik buiten een open keuzelijst = dichtklappen
    document.addEventListener('click', e => {
        document.querySelectorAll('.schoolkiezer[open]').forEach(sk => { if (!sk.contains(e.target)) sk.open = false; });
    });
    // Tabel "Altijd toestaan" bewerken: ✏️ of dubbelklik op een rij; Esc = annuleren, Enter = opslaan
    function stopBewerken(tr) {
        const f = document.getElementById('bew-' + tr.dataset.id);
        if (f) f.reset();
        tr.classList.remove('bewerken');
        tr.querySelectorAll('.schoolkiezer').forEach(sk => { sk.open = false; skTekst(sk); });
    }
    function startBewerken(tr) {
        document.querySelectorAll('tr.bewerken').forEach(stopBewerken);
        tr.classList.add('bewerken');
        const veld = tr.querySelector('.bew input[name=reeks]');
        if (veld) { veld.focus(); veld.select(); }
    }
    document.querySelectorAll('.ip-tabel[data-sleutel="toe"] tbody tr[data-id]').forEach(tr => {
        tr.querySelector('.start-bew')?.addEventListener('click', () => startBewerken(tr));
        tr.querySelector('.stop-bew')?.addEventListener('click', () => stopBewerken(tr));
        tr.addEventListener('dblclick', e => {
            if (!tr.classList.contains('bewerken') && !e.target.closest('td.actions')) startBewerken(tr);
        });
        tr.addEventListener('keydown', e => { if (e.key === 'Escape') stopBewerken(tr); });
    });

    // Schoolkeuze enkel tonen bij "Altijd toestaan"
    (function () {
        const soort = document.getElementById('soort'), veld = document.querySelector('.school-veld');
        if (!soort || !veld) return;
        const pas = () => {
            const toe = soort.value === 'toestaan';
            veld.hidden = !toe;
            veld.closest('form').classList.toggle('met-school', toe);
            if (!toe) veld.querySelectorAll('input[type=checkbox]').forEach(c => c.checked = false);
            veld.querySelectorAll('.schoolkiezer').forEach(skTekst);
        };
        soort.addEventListener('change', pas); pas();
    })();
    // Zoeken en pagineren per tabel (Geblokkeerd / Altijd toestaan)
    document.querySelectorAll('.ip-tabel').forEach(kaart => {
        const body = kaart.querySelector('tbody');
        if (!body || body.querySelector('.empty-row')) return;
        const sleutel = 'ip-' + kaart.dataset.sleutel;
        let PER_PAGINA = perPagina(sleutel), pagina = 1, zoek = '';
        const zoekveld = kaart.querySelector('.tabel-zoek');
        function toon() {
            const tekst = tr => Array.from(tr.cells).map(td => (td.querySelector('.toon') || td).textContent).join(' ').toLowerCase();
            const rijen = Array.from(body.rows).filter(tr => !zoek || tekst(tr).includes(zoek));
            const grootte = PER_PAGINA || Infinity, 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');
            kaart.querySelector('.teller').textContent = rijen.length
                ? `${van + 1}–${Math.min(tot, rijen.length)} van ${rijen.length}` : 'Niets gevonden';
            const nav = kaart.querySelector('.paginering');
            nav.innerHTML = '';
            if (paginas <= 1) return;
            const knop = (label, p, actief) => {
                const b = document.createElement('button');
                b.type = 'button'; b.textContent = label; b.className = 'btn-sm ' + (actief ? 'btn-secondary' : 'btn-light');
                b.onclick = () => { pagina = p; toon(); };
                nav.appendChild(b);
            };
            if (pagina > 1) { knop('«', 1); 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); }
        }
        if (zoekveld) zoekveld.addEventListener('input', () => { zoek = zoekveld.value.trim().toLowerCase(); pagina = 1; toon(); });
        // Sorteren: klik op een kolomkop (nog eens klikken = omgekeerd). Aantallen en datums: eerst hoog/nieuw.
        let kol = null, op = true;
        kaart.querySelectorAll('th.sorteer').forEach(th => th.addEventListener('click', () => {
            const k = th.cellIndex;
            op = kol === k ? !op : 'tekst' in th.dataset;
            kol = k;
            kaart.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 || '';
                if (!x !== !y) return x ? -1 : 1;                  // lege waarden altijd onderaan
                const c = x.localeCompare(y, 'nl', { numeric: true, sensitivity: 'base' });
                return op ? c : -c;
            }).forEach(tr => body.appendChild(tr));
            pagina = 1; toon();
        }));
        perPaginaKiezer(kaart.querySelector('.per-pagina-plek'), sleutel, n => { PER_PAGINA = n; pagina = 1; toon(); });
        toon();
    });
</script>
{% endblock %}