{% extends "base.html" %}

{% block title %}Leerlingenbeheer{% endblock %}
{% block page_title %}Leerlingenbeheer{% endblock %}
{% block main_class %}wide{% endblock %}
{% block extra_css %}
<style>
    /* Bewerken-knop altijd zichtbaar: laatste kolom blijft rechts staan bij horizontaal scrollen */
    .lln-tabel td.actions, .lln-tabel th.actions {
        position: sticky; right: 0; background: var(--surface); white-space: nowrap;
        box-shadow: -6px 0 6px -6px rgba(15, 23, 42, .15);
    }
    .lln-tabel th.actions { background: var(--surface-muted); }
    .lln-tabel td { font-size: 14px; }
    .lln-tabel td.nowrap { white-space: nowrap; }
    .lln-tabel tr.vertrokken td:not(.actions) { color: var(--text-muted, #64748b); }
</style>
{% endblock %}
{% block loader_text %}Synchroniseren met Informat &amp; Smartschool... Even geduld.{% endblock %}

{% block content %}
<div class="card">
    <div class="page-head">
        <h2>👥 Leerlingen</h2>
        <div class="actions">
            <button type="button" class="btn-success" onclick="openAddModal()">➕ Leerling toevoegen</button>
            <form action="{{ url_for('students.sync_informat') }}" method="POST" style="margin:0" onsubmit="showLoader()">
                <button type="submit" class="btn-secondary">🔄 Informat &amp; SS sync</button>
            </form>
        </div>
    </div>

    <form class="search-bar" method="POST" action="{{ url_for('students.inventaris_leerlingen') }}">
        <input type="text" name="query" placeholder="Zoek op naam of internnummer..." value="{{ query or '' }}">
        {% if toon_vertrokken %}<input type="hidden" name="vertrokken" value="1">{% endif %}
        <button type="submit" class="btn-search">🔍 Zoeken</button>
        {% if query %}
            <a href="{{ url_for('students.inventaris_leerlingen', vertrokken='1' if toon_vertrokken else None) }}" class="btn btn-light">✕ Wissen</a>
        {% endif %}
    </form>
    {% if aantal_vertrokken %}
    <p class="muted small" style="margin:-4px 0 12px">
        {% if toon_vertrokken %}Vertrokken leerlingen worden getoond ({{ aantal_vertrokken }}).
            <a href="{{ url_for('students.inventaris_leerlingen', query=query or None) }}">Verbergen</a>
        {% else %}{{ aantal_vertrokken }} leerling{{ 'en' if aantal_vertrokken != 1 }} niet meer actief in Informat (vertrokken) verborgen.
            <a href="{{ url_for('students.inventaris_leerlingen', vertrokken='1', query=query or None) }}">Toon ook vertrokken leerlingen</a>{% endif %}
    </p>
    {% endif %}

    <div class="table-wrap">
        <table class="lln-tabel">
            <thead>
                <tr>
                    <th>Internnummer</th>
                    <th>Gebruikersnaam</th>
                    <th>Voornaam</th>
                    <th>Naam</th>
                    <th>Smartschool nr.</th>
                    <th>Google e-mailadres</th>
                    <th>Schooljaar</th>
                    <th class="actions">Acties</th>
                </tr>
            </thead>
            <tbody>
                {% if results %}
                    {% for row in results %}
                    <tr{% if row['Vertrokken_op'] %} class="vertrokken"{% endif %}>
                        <td><strong>{{ row['Internnummer'] }}</strong>{% if row['Vertrokken_op'] %}
                            <span class="badge badge-warning" title="Niet meer actief in Informat sinds {{ row['Vertrokken_op'].strftime('%d-%m-%Y') }}">vertrokken</span>{% endif %}</td>
                        <td>{{ row['Gebruikersnaam'] or '' }}</td>
                        <td>{{ row['Voornaam'] or '' }}</td>
                        <td>{{ row['Naam'] or '' }}</td>
                        <td class="nowrap">{{ row['SS_nummer'] or '' }}</td>
                        <td>{{ row['Google_adres'] or '' }}</td>
                        <td class="nowrap">{{ row['Schooljaar'] or '' }}</td>
                        <td class="actions">
                            <button type="button" class="btn-bewerk btn-sm"
                                    data-intern="{{ row['Internnummer'] }}"
                                    data-gebruikersnaam="{{ row['Gebruikersnaam'] or '' }}"
                                    data-voornaam="{{ row['Voornaam'] or '' }}"
                                    data-naam="{{ row['Naam'] or '' }}"
                                    data-ss="{{ row['SS_nummer'] or '' }}"
                                    data-google="{{ row['Google_adres'] or '' }}"
                                    onclick="openEditModalFromButton(this)">✏️ Bewerken</button>
                        </td>
                    </tr>
                    {% endfor %}
                {% else %}
                    <tr class="empty-row"><td colspan="8">Geen leerlingen gevonden in de database.</td></tr>
                {% endif %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}

{% block modals %}
<div id="addStudentModal" class="modal">
    <div class="modal-content">
        <span class="close" onclick="closeAddModal()">&times;</span>
        <h3>Leerling handmatig toevoegen</h3>
        <form action="{{ url_for('students.registreer_leerling') }}" method="POST">
            <div class="field"><label>Internnummer</label><input type="text" name="inter_id" required></div>
            <div class="field"><label>Gebruikersnaam</label><input type="text" name="gebruikersnaam" required></div>
            <div class="field"><label>Voornaam</label><input type="text" name="voornaam"></div>
            <div class="field"><label>Naam</label><input type="text" name="naam"></div>
            <div class="field"><label>Smartschool nummer</label><input type="text" name="ss_nummer"></div>
            <div class="field"><label>Google adres</label><input type="email" name="google_adres"></div>
            <button type="submit" class="btn-block btn-success">💾 Opslaan</button>
        </form>
    </div>
</div>

<div id="editModal" class="modal">
    <div class="modal-content">
        <span class="close" onclick="closeModal()">&times;</span>
        <h3>Leerling bewerken</h3>
        <form action="{{ url_for('students.bewerk_gebruiker') }}" method="POST">
            <div class="field"><label>Internnummer (ID)</label><input type="text" id="edit_internnummer" name="internnummer" readonly></div>
            <div class="field"><label>Gebruikersnaam</label><input type="text" id="edit_gebruikersnaam" name="gebruikersnaam"></div>
            <div class="field"><label>Voornaam</label><input type="text" id="edit_voornaam" name="voornaam"></div>
            <div class="field"><label>Naam</label><input type="text" id="edit_naam" name="naam"></div>
            <div class="field"><label>Smartschool nummer</label><input type="text" id="edit_ss_nummer" name="ss_nummer"></div>
            <div class="field"><label>Google adres</label><input type="email" id="edit_google_adres" name="google_adres"></div>
            <button type="submit" class="btn-block">💾 Wijzigingen opslaan</button>
        </form>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    function openAddModal()  { document.getElementById('addStudentModal').style.display = 'block'; }
    function closeAddModal() { document.getElementById('addStudentModal').style.display = 'none'; }

    function openEditModalFromButton(btn) {
        document.getElementById('edit_internnummer').value = btn.getAttribute('data-intern') || '';
        document.getElementById('edit_gebruikersnaam').value = btn.getAttribute('data-gebruikersnaam') || '';
        document.getElementById('edit_voornaam').value = btn.getAttribute('data-voornaam') || '';
        document.getElementById('edit_naam').value = btn.getAttribute('data-naam') || '';
        document.getElementById('edit_ss_nummer').value = btn.getAttribute('data-ss') || '';
        document.getElementById('edit_google_adres').value = btn.getAttribute('data-google') || '';
        document.getElementById('editModal').style.display = 'block';
    }

    function closeModal() { document.getElementById('editModal').style.display = 'none'; }

    window.onclick = function (event) {
        if (event.target == document.getElementById('editModal')) closeModal();
        if (event.target == document.getElementById('addStudentModal')) closeAddModal();
    };
</script>
{% endblock %}