{% extends "base.html" %}

{% block title %}Google beheer{% endblock %}
{% block page_title %}Google accountbeheer{% endblock %}
{% block main_class %}medium{% endblock %}
{% block loader_text %}Verzoek verwerken...{% endblock %}

{% block content %}
<div class="card">
    <div class="page-head">
        <h2>🔍 Zoek Google-account</h2>
        <div class="actions">
            <button type="button" class="add-btn" onclick="openAddModal()">➕ Account toevoegen</button>
        </div>
    </div>

    <form class="search-bar" method="POST" onsubmit="showLoader()">
        <input type="text" name="query" class="search-input" placeholder="E-mail of naam..." value="{{ query or '' }}">
        <button type="submit" class="btn-search">🔍 Zoek in Google</button>
    </form>

    {% if results %}
        <div class="table-wrap">
            <table>
                <thead>
                    <tr>
                        <th>Naam</th>
                        <th>Primair e-mailadres</th>
                        <th class="actions">Actie</th>
                    </tr>
                </thead>
                <tbody>
                {% for user in results %}
                    <tr>
                        <td><strong>{{ user.name.fullName }}</strong></td>
                        <td>{{ user.primaryEmail }}</td>
                        <td class="actions">
                            <button type="button" class="btn-danger btn-sm" onclick="openResetModal('{{ user.primaryEmail }}')">🔑 Reset wachtwoord</button>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    {% elif query %}
        <p class="muted">Geen resultaten gevonden voor "{{ query }}".</p>
    {% endif %}
</div>
{% endblock %}

{% block modals %}
<div id="passwordModal" class="modal-overlay">
    <div class="modal-content">
        <span class="close" onclick="closeModal('passwordModal')">&times;</span>
        <h3>Wachtwoord herstellen</h3>
        <p class="muted" id="displayEmail" style="font-weight:600"></p>
        <div class="field">
            <label for="modalPasswordInput">Nieuw wachtwoord</label>
            <div class="input-group">
                <input type="text" id="modalPasswordInput" placeholder="Nieuw wachtwoord">
                <button type="button" class="btn-light" title="Kopiëren" onclick="copyToClipboard('modalPasswordInput')">📋</button>
                <button type="button" class="btn-light" title="Willekeurig genereren" onclick="generateRandomPass('modalPasswordInput')">🎲</button>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn-ghost" onclick="closeModal('passwordModal')">Annuleren</button>
            <button type="button" onclick="submitPasswordReset()">Bevestig reset</button>
        </div>
    </div>
</div>

<div id="addAccountModal" class="modal-overlay">
    <div class="modal-content">
        <span class="close" onclick="closeModal('addAccountModal')">&times;</span>
        <h3>Nieuw account toevoegen</h3>

        <form action="{{ url_for('google.aanmaken_google_account') }}" method="POST" target="_blank" onsubmit="closeModal('addAccountModal')">
            <div class="field">
                <label for="addOrgUnit">Type account</label>
                <select name="account_type" id="addOrgUnit">
                    <option value="Leerling">Leerling</option>
                    <option value="Leerkracht">Leerkracht</option>
                </select>
            </div>
            <div class="field">
                <label for="addFirstName">Voornaam</label>
                <input type="text" name="first_name" id="addFirstName" placeholder="bv. Jan" required>
            </div>
            <div class="field">
                <label for="addLastName">Naam</label>
                <input type="text" name="last_name" id="addLastName" placeholder="bv. Peeters" required>
            </div>
            <div class="field">
                <label for="addPassword">Wachtwoord</label>
                <div class="input-group">
                    <input type="text" name="password" id="addPassword" placeholder="Wachtwoord" required>
                    <button type="button" class="btn-light" title="Willekeurig genereren" onclick="generateRandomPass('addPassword')">🎲</button>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn-ghost" onclick="closeModal('addAccountModal')">Annuleren</button>
                <button type="submit">Aanmaken &amp; PDF openen</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block footer %}
<footer class="app-footer">{{ school_name_short }} – PIVOT – Versie {{ version }} – Google Admin Tools</footer>
{% endblock %}

{% block scripts %}
<script>
    let currentEmail = "";

    function openResetModal(email) {
        currentEmail = email;
        document.getElementById('displayEmail').innerText = email;
        document.getElementById('passwordModal').style.display = 'flex';
    }

    function openAddModal() { document.getElementById('addAccountModal').style.display = 'flex'; }
    function closeModal(modalId) { document.getElementById(modalId).style.display = 'none'; }

    function generateRandomPass(inputId) {
        const chars = "abcdefghjkmnpqrstuvwxyzABCDEFGHJKMNPQRSTUVWXYZ23456789!@#$%";
        let pass = "";
        for (let i = 0; i < 12; i++) pass += chars.charAt(Math.floor(Math.random() * chars.length));
        document.getElementById(inputId).value = pass;
    }

    function copyToClipboard(inputId) {
        const passInput = document.getElementById(inputId);
        if (!passInput.value) return;
        passInput.select();
        navigator.clipboard.writeText(passInput.value);
        alert("Gekopieerd naar klembord!");
    }

    function submitPasswordReset() {
        const newPass = document.getElementById('modalPasswordInput').value;
        if (!newPass) { alert("Voer een wachtwoord in!"); return; }

        showLoader();
        fetch("{{ url_for('google.apply_password') }}", {
            method: 'POST',
            headers: {'Content-Type': 'application/x-www-form-urlencoded'},
            body: `email=${encodeURIComponent(currentEmail)}&new_password=${encodeURIComponent(newPass)}`
        }).then(() => {
            window.location.reload();
        }).catch(() => {
            hideLoader();
            alert("Netwerkfout.");
        });
    }

    window.onclick = function (event) {
        if (event.target.classList.contains('modal-overlay')) event.target.style.display = 'none';
    };
</script>
{% endblock %}