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

{% block title %}{{ SOORTEN[soort].label }}{% endblock %}
{% block page_title %}{{ SOORTEN[soort].icoon }} {{ 'Afwezigheid melden' if soort == 'afwezigheid' else SOORTEN[soort].label ~ ' aanvragen' }}{% endblock %}
{% block main_class %}medium{% endblock %}

{% block extra_css %}
<style>
    .soort-switch { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
    .soort-switch a { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); text-decoration: none; color: var(--text); font-weight: 600; font-size: 14px; }
    .soort-switch a.on { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }
    .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
    .grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 16px; }
    @media (max-width: 640px) { .grid2, .grid3 { grid-template-columns: 1fr; } }
    .dagdeel { display: flex; gap: 6px; flex-wrap: wrap; }
    .dagdeel label { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; font-weight: 500; }
    .dagdeel input:checked + span { font-weight: 700; color: var(--primary-color); }
    .klassen-box { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; background: var(--surface-muted); }
    .klassen-box input[type=search] { margin-bottom: 8px; }
    .klassen { display: flex; flex-wrap: wrap; gap: 6px; max-height: 210px; overflow-y: auto; }
    .klas { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-size: 13px; font-weight: 600; cursor: pointer; user-select: none; }
    .klas input { width: 14px; height: 14px; }
    .klas.on { background: var(--primary-light); border-color: var(--primary-color); color: var(--primary-color); }
    .gekozen { font-size: 13px; color: var(--text-muted); margin-top: 6px; }
    .info-note { font-size: 13px; color: var(--text-muted); background: var(--surface-muted); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 16px; }
</style>
{% endblock %}

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

<div class="soort-switch">
    {% for key, s in SOORTEN.items() %}
        <a class="{{ 'on' if key == soort }}" href="{{ url_for('personeel.nieuw', soort=key) }}">{{ s.icoon }} {{ s.label }}</a>
    {% endfor %}
</div>

<form class="card" method="POST" action="{{ url_for('personeel.nieuw') }}" onsubmit="showLoader('Versturen...')">
    <input type="hidden" name="soort" value="{{ soort }}">

    <div class="info-note">
        {% if soort == 'afwezigheid' %}Het secretariaat ziet je afwezigheid meteen en krijgt een mail. Geen goedkeuring nodig.
        {% elif soort == 'nascholing' %}De directie krijgt je aanvraag en kan goedkeuren, weigeren of een vraag stellen. Je krijgt een mail bij elke beslissing.
        {% else %}De directie keurt de uitstap goed. Daarna ziet het secretariaat welke klassen en begeleiders weg zijn.{% endif %}
    </div>

    {% if is_secr %}
    <div class="field">
        <label for="namens">Namens leerkracht <span class="muted">(leeg = jezelf)</span></label>
        <input type="email" id="namens" name="namens" value="{{ form.get('namens', '') }}" placeholder="voornaam.naam@school.be">
    </div>
    {% endif %}

    {% if soort != 'afwezigheid' %}
    <div class="field">
        <label for="titel">{{ 'Naam van de nascholing' if soort == 'nascholing' else 'Bestemming / activiteit' }}</label>
        <input type="text" id="titel" name="titel" required maxlength="255" value="{{ form.get('titel', '') }}"
               placeholder="{{ 'bv. Differentiëren in de klas' if soort == 'nascholing' else 'bv. Bezoek Technopolis' }}">
    </div>
    {% else %}
    <div class="field">
        <label for="titel">Reden <span class="muted">(optioneel, enkel zichtbaar voor secretariaat en directie)</span></label>
        <select id="titel" name="titel">
            {% for r in ['Ziek', 'Familiale omstandigheden', 'Dokter / ziekenhuis', 'Overmacht', 'Andere'] %}
                <option {{ 'selected' if form.get('titel') == r }}>{{ r }}</option>
            {% endfor %}
        </select>
    </div>
    {% endif %}

    <div class="grid2">
        <div class="field">
            <label for="van">{{ 'Datum' if soort != 'afwezigheid' else 'Van' }}</label>
            <input type="date" id="van" name="van" required value="{{ form.get('van', vandaag.isoformat()) }}" onchange="syncTot()">
        </div>
        <div class="field">
            <label for="tot">Tot en met</label>
            <input type="date" id="tot" name="tot" value="{{ form.get('tot', '') }}">
        </div>
    </div>

    <div class="field">
        <label>Wanneer</label>
        <div class="dagdeel">
            {% for key, label in DAGDELEN.items() %}
            <label><input type="radio" name="dagdeel" value="{{ key }}" {{ 'checked' if form.get('dagdeel', 'dag') == key }} onchange="toggleUren()"><span>{{ label }}</span></label>
            {% endfor %}
        </div>
    </div>
    <div class="field" id="urenField" style="display:none">
        <label for="lesuren">Lesuren</label>
        <input type="text" id="lesuren" name="lesuren" maxlength="50" value="{{ form.get('lesuren', '') }}" placeholder="bv. 3-5 of 1, 2, 7">
    </div>

    {% if soort != 'afwezigheid' %}
    <div class="grid2">
        <div class="field">
            <label for="locatie">Locatie</label>
            <input type="text" id="locatie" name="locatie" maxlength="255" value="{{ form.get('locatie', '') }}">
        </div>
        <div class="field">
            <label for="kost">Kost <span class="muted">(€, optioneel)</span></label>
            <input type="text" id="kost" name="kost" inputmode="decimal" value="{{ form.get('kost', '') }}" placeholder="0,00">
        </div>
    </div>
    {% endif %}

    <div class="field">
        <label>{{ 'Klassen die mee op uitstap gaan' if soort == 'uitstap' else 'Klassen waar je les hebt (voor vervanging)' }}</label>
        <div class="klassen-box">
            {% if klassen %}
                <input type="search" placeholder="Zoek klas..." oninput="filterKlassen(this.value)">
                <div class="klassen" id="klassen">
                    {% set gekozen = form.getlist('klassen') if form else [] %}
                    {% for k in klassen %}
                    <label class="klas {{ 'on' if k in gekozen }}" data-k="{{ k|lower }}">
                        <input type="checkbox" name="klassen" value="{{ k }}" {{ 'checked' if k in gekozen }} onchange="this.parentElement.classList.toggle('on', this.checked); telKlassen()">{{ k }}</label>
                    {% endfor %}
                </div>
                <div class="gekozen" id="gekozen"></div>
                <input type="text" name="klassen_extra" value="{{ form.get('klassen_extra', '') }}" placeholder="Andere groepen (optioneel, komma-gescheiden)" style="margin-top:8px">
            {% else %}
                <input type="text" name="klassen_extra" value="{{ form.get('klassen_extra', '') }}" placeholder="bv. 3A, 3B, 4ECWI">
                <div class="gekozen">De klassenlijst uit Smartschool kon niet geladen worden; typ de klassen in.</div>
            {% endif %}
        </div>
    </div>

    {% if soort == 'uitstap' %}
    <div class="field">
        <label for="begeleiders">Andere begeleiders</label>
        <input type="text" id="begeleiders" name="begeleiders" value="{{ form.get('begeleiders', '') }}" placeholder="bv. Els Janssens, Tom Vermeulen">
        <div class="field-hint">Begeleiders verschijnen ook als afwezig in het dagoverzicht van het secretariaat.</div>
    </div>
    {% endif %}

    <div class="field">
        <label for="omschrijving">{{ 'Opmerking voor het secretariaat' if soort == 'afwezigheid' else 'Toelichting' }}</label>
        <textarea id="omschrijving" name="omschrijving" placeholder="{{ 'bv. taken voor de klassen staan op Smartschool' if soort == 'afwezigheid' else 'Doel, programma, vervoer, ...' }}">{{ form.get('omschrijving', '') }}</textarea>
    </div>

    <div class="modal-footer" style="justify-content: space-between">
        <a class="btn btn-ghost" href="{{ url_for('personeel.mijn') }}">Annuleren</a>
        <button type="submit" class="btn-lg">{{ 'Melden' if soort == 'afwezigheid' else 'Aanvraag indienen' }}</button>
    </div>
</form>
{% endblock %}

{% block scripts %}
<script>
    function toggleUren() {
        const v = document.querySelector('input[name=dagdeel]:checked').value;
        document.getElementById('urenField').style.display = v === 'uren' ? '' : 'none';
    }
    function syncTot() {
        const van = document.getElementById('van'), tot = document.getElementById('tot');
        if (!tot.value || tot.value < van.value) tot.value = van.value;
        tot.min = van.value;
    }
    function filterKlassen(q) {
        q = q.toLowerCase();
        document.querySelectorAll('#klassen .klas').forEach(k => { k.style.display = k.dataset.k.includes(q) ? '' : 'none'; });
    }
    function telKlassen() {
        const el = document.getElementById('gekozen'); if (!el) return;
        const g = [...document.querySelectorAll('#klassen input:checked')].map(i => i.value);
        el.textContent = g.length ? `Gekozen: ${g.join(', ')}` : '';
    }
    toggleUren(); syncTot(); telKlassen();
</script>
{% endblock %}