{% extends "base.html" %}

{% block title %}Skore-synchronisatie{% endblock %}
{% block page_title %}Skore-synchronisatie{% endblock %}
{% block main_class %}medium{% endblock %}
{% block head %}{% if loopt %}<meta http-equiv="refresh" content="20">{% endif %}{% endblock %}

{% block extra_css %}
<style>
    .planning-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 16px; }
    .status-gestart, .status-bezig { background: var(--info-bg); color: var(--info-text); }
    .status-voltooid { background: var(--success-bg); color: var(--success-text); }
    .status-mislukt { background: var(--danger-bg); color: var(--danger-text); }
    .melding { max-width: 360px; white-space: pre-wrap; word-break: break-word; }
    .verborgen { display: none; }
</style>
{% endblock %}

{% block content %}
<div class="card">
    <div class="page-head">
        <h2>🔁 Skore-synchronisatie</h2>
        <div class="actions">
            <form method="POST" action="{{ url_for('skore.start') }}" style="margin:0"
                  onsubmit="return confirm('De Skore-synchronisatie nu starten in Smartschool?')">
                <button type="submit" class="btn-success">▶️ Nu synchroniseren</button>
            </form>
        </div>
    </div>
    <p class="muted">Synchroniseert de klassen en leerlingen van Smartschool naar Skore (Smartschool-webservice
        <span class="mono">startSkoreSync</span>). Smartschool voert de synchronisatie op de achtergrond uit;
        PIVOT vraagt de status daarna zelf op tot de synchronisatie klaar is.</p>
    {% if loopt %}<div class="alert alert-info" style="margin:12px 0 0">⏳ Er loopt een synchronisatie. Deze pagina ververst elke 20 seconden.</div>{% endif %}
</div>

{% if planning %}
<div class="card">
    <h3 class="card-title">🗓️ Automatisch synchroniseren</h3>
    <form method="POST" action="{{ url_for('skore.planning') }}">
        <div class="planning-grid">
            <div class="field">
                <label for="frequentie">Hoe vaak</label>
                <select id="frequentie" name="frequentie" onchange="toonVelden()">
                    {% for waarde, label in frequenties %}
                    <option value="{{ waarde }}" {% if planning.Frequentie == waarde %}selected{% endif %}>{{ label }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="field veld-weekdag">
                <label for="weekdag">Op</label>
                <select id="weekdag" name="weekdag">
                    {% for d in weekdagen %}<option value="{{ loop.index0 }}" {% if planning.Weekdag == loop.index0 %}selected{% endif %}>{{ d }}</option>{% endfor %}
                </select>
            </div>
            <div class="field veld-dag">
                <label for="dag_van_maand">Dag van de maand</label>
                <select id="dag_van_maand" name="dag_van_maand">
                    {% for d in range(1, 29) %}<option value="{{ d }}" {% if planning.Dag_van_maand == d %}selected{% endif %}>{{ d }}</option>{% endfor %}
                </select>
            </div>
            <div class="field veld-tijd">
                <label for="uur">Om</label>
                <div style="display:flex; gap:6px; align-items:center">
                    <select id="uur" name="uur" style="width:auto">
                        {% for u in range(24) %}<option value="{{ u }}" {% if planning.Uur == u %}selected{% endif %}>{{ '%02d' % u }}</option>{% endfor %}
                    </select> :
                    <select name="minuut" style="width:auto">
                        {% for m in range(0, 60, 15) %}<option value="{{ m }}" {% if planning.Minuut == m %}selected{% endif %}>{{ '%02d' % m }}</option>{% endfor %}
                    </select>
                </div>
            </div>
        </div>
        <p class="field-hint" style="margin-top:0">
            {% if volgende %}Volgende automatische synchronisatie: <strong>{{ volgende.strftime('%d-%m-%Y om %H:%M') }}</strong>.
            {% else %}Er is geen automatische synchronisatie gepland.{% endif %}
            PIVOT moet op dat moment draaien; een gemiste synchronisatie wordt nog tot 6 uur later ingehaald.
        </p>
        <button type="submit" class="btn-warning">💾 Planning opslaan</button>
    </form>
</div>
{% endif %}

<div class="card">
    <h3 class="card-title">🕑 Laatste synchronisaties</h3>
    <div class="table-wrap">
        <table>
            <thead><tr><th>Gestart</th><th>Door</th><th>Status</th><th>Melding</th><th class="actions"></th></tr></thead>
            <tbody>
            {% for r in log %}
                <tr>
                    <td class="nowrap">{{ r.Gestart.strftime('%d-%m-%Y %H:%M') }}</td>
                    <td>{{ r.Door or '' }}{% if r.Manier == 'gepland' %} <span class="badge">gepland</span>{% endif %}</td>
                    <td><span class="badge status-{{ r.Status|replace(' ', '-') }}">{{ r.Status }}</span></td>
                    <td class="melding small">{{ r.Melding or '' }}{% if r.Service_ID %}<div class="muted">taak {{ r.Service_ID }}</div>{% endif %}</td>
                    <td class="actions">
                        {% if r.Service_ID %}
                        <form method="POST" action="{{ url_for('skore.status', log_id=r.ID) }}" style="margin:0">
                            <button type="submit" class="btn-sm btn-light">🔄 Status vernieuwen</button>
                        </form>
                        {% endif %}
                    </td>
                </tr>
            {% else %}
                <tr class="empty-row"><td colspan="5">Nog geen synchronisaties.</td></tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    function toonVelden() {
        var f = document.getElementById('frequentie').value;
        document.querySelectorAll('.veld-weekdag').forEach(function (e) { e.classList.toggle('verborgen', f !== 'wekelijks'); });
        document.querySelectorAll('.veld-dag').forEach(function (e) { e.classList.toggle('verborgen', f !== 'maandelijks'); });
        document.querySelectorAll('.veld-tijd').forEach(function (e) { e.classList.toggle('verborgen', f === 'uit'); });
    }
    toonVelden();
</script>
{% endblock %}