<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Schreiberling</title>
    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🪶</text></svg>">
    <link href="/static/css/tharanor.form.css" type="text/css" rel="stylesheet">
    <link href="/static/css/tharanor.letter.css" type="text/css" rel="stylesheet">
</head>
<body>
<h1>Schreiberling des Rates der Gilden</h1>

<form action="/generate" method="post">
    <div class="form-grid">
        <label for="senderSelect">Verfasser:</label>
        <span>
        <select name="sender" id="senderSelect">
            {% for s in senders %}
                <option value="{{ s.id }}">{{ s.name }}</option>
            {% endfor %}
        </select>
        <button type="button" class="mini add" onclick="openModalAdd('senderModal')">✚</button>
        <button type="button" class="mini edit" onclick="openModalEdit('sender')">✎</button>
        </span>

        <label for="stateSelect">Reich:</label>
        <span>
        <select id="stateSelect">
            <option value="all">-- Alle --</option>
            {% for s in states %}
                <option value="{{ s.id }}">{{ s.name }}</option>
            {% endfor %}
        </select>
        <button type="button" class="mini add" onclick="openModalAdd('stateModal')">✚</button>
        <button type="button" class="mini edit" onclick="openModalEdit('state')">✎</button>
        </span>

        <label for="recipientSelect">Empfänger:</label>
        <span>
        <select name="recipient" id="recipientSelect">
            {% for r in recipients %}
                <option value="{{ r.id }}">{{ r.name }}</option>
            {% endfor %}
        </select>
        <button type="button" class="mini add" onclick="openModalAdd('recipientModal')">✚</button>
        <button type="button" class="mini edit" onclick="openModalEdit('recipient')">✎</button>
        </span>
    </div>

    <label for="textInput">Brieftext:</label><br>
    <textarea name="text" id="textInput"></textarea><br><br>

    <button type="submit">Brief in Auftrag geben</button>
</form>

<!-- Sender Modal -->
<div id="senderModal" class="modal">
    <div class="modal-content">
        <h3 class="modal-add">Neuen Verfasser anlegen</h3>
        <h3 class="modal-edit">Verfasser editieren</h3>
        <form id="senderForm">
            <input type="hidden" name="id">
            <label>
                Name:<br>
                <input name="name" placeholder="Name" required>
            </label>
            <label>
                Kuralie:<br>
                <textarea name="kuralie" placeholder="Kuralie" rows="4"></textarea>
            </label>
            <label>
                Siegel:<br>
                <img id="siegelPreview" src="" height="100" alt="siegel"/>
                <input type="file" name="siegel" required>
            </label>
            <label>
                Signatur:<br>
                <img id="signaturPreview" src="" width="300" alt="signatur"/>
                <input type="file" name="signatur" required>
            </label>
            <button type="submit">Speichern</button>
            <button type="button" onclick="closeModal('senderModal')">Abbrechen</button>
        </form>
    </div>
</div>

<!-- State Modal -->
<div id="stateModal" class="modal">
    <div class="modal-content">
        <h3 class="modal-add">Neues Reich anlegen</h3>
        <h3 class="modal-edit">Reich editieren</h3>
        <form id="stateForm">
            <input type="hidden" name="id">
            <label>
                Name:<br>
                <input name="name" placeholder="Name" required>
            </label>
            <button type="submit">Speichern</button>
            <button type="button" onclick="closeModal('stateModal')">Abbrechen</button>
        </form>
    </div>
</div>

<!-- Recipient Modal -->
<div id="recipientModal" class="modal">
    <div class="modal-content">
        <h3 class="modal-add">Neuen Korrespondent anlegen</h3>
        <h3 class="modal-edit">Korrespondent editieren</h3>
        <form id="recipientForm">
            <input type="hidden" name="id">
            <label>
                Name:<br>
                <input name="name" placeholder="Name" required>
            </label>
            <label>
                Kuralie:<br>
                <textarea name="kuralie" placeholder="Kuralie" rows="4"></textarea>
            </label>
            <label>
                Reich:<br>
                <select name="state_id">
                    <option value="">-- Kein Reich --</option>
                    {% for state in states %}
                        <option value="{{ state.id }}">{{ state.name }}</option>
                    {% endfor %}
                </select>
            </label>
            <button type="submit">Speichern</button>
            <button type="button" onclick="closeModal('recipientModal')">Abbrechen</button>
        </form>
    </div>
</div>


<script>
    document.querySelectorAll(".modal-content form").forEach(f => f.addEventListener('submit', modalEvent));

    function openModalAdd(id) {
        document.getElementById(id).classList.add('active');
    }

    function openModalEdit(type) {
        const select = document.getElementById(`${type}Select`);
        const selected_id = select.value;

        fetch(`/api/${type}s/${selected_id}`)
            .then(res => res.json())
            .then(x => {
                const form = document.getElementById(`${type}Form`);
                Object.entries(x)
                    .filter(([k]) => !["siegel", "signatur"].includes(k))
                    .forEach(([k, v]) => form[k].value = v);
                if (type === "sender") {
                    document.getElementById('siegelPreview').src = `/static/uploads/${x.siegel}`;
                    document.getElementById('signaturPreview').src = `/static/uploads/${x.signatur}`;
                }
                document.getElementById(`${type}Modal`).classList.add('active', "edit");
            });
    }

    function closeModal(id) {
        document.getElementById(id).getElementsByTagName("form")[0].reset()
        document.getElementById(id).classList.remove('active', "edit");
    }

    function modalEvent(e) {
        e.preventDefault();
        const data = new FormData(e.target);
        const modal = e.target.parentNode.parentNode;
        const type = modal.id.replace("Modal", "");
        const is_edit = modal.classList.contains("edit");
        const id = data.get("id");
        data.delete("id");

        fetch(is_edit ? `/api/${type}s/${id}` : `/api/${type}s`, {
            method: is_edit ? 'PUT' : 'POST',
            body: data
        }).then(res => res.json()).then(() => {
            closeModal(`${type}Modal`);
            refreshDropdown(type);
        });
    }

    document.getElementById('stateSelect').addEventListener('change', function () {
        const stateId = this.value;

        fetch(`/api/recipients?state_id=${stateId}`)
            .then(response => response.json())
            .then(data => {
                const recipientSelect = document.getElementById('recipientSelect');
                recipientSelect.innerHTML = '';
                data.forEach(r => {
                    const option = document.createElement('option');
                    option.value = r.id;
                    option.textContent = r.name;
                    recipientSelect.appendChild(option);
                });
            });
    });

    function refreshDropdown(type) {
        fetch(`/api/${type}s`)
            .then(res => res.json())
            .then(data => {
                const select = document.getElementById(`${type}Select`);
                const current = select.value;
                select.innerHTML = (type === "state") ? '<option value="all">-- Alle --</option>' : '';
                let modalSelect;
                if (type === 'state') {
                    modalSelect = document.querySelector('#recipientModal select[name="state_id"]');
                    modalSelect.innerHTML = '<option value="">-- Kein Reich --</option>';
                }
                data.forEach(s => {
                    const opt = document.createElement('option');
                    opt.value = s.id;
                    opt.textContent = s.name;
                    select.appendChild(opt);
                    if (type === 'state') {
                        modalSelect.appendChild(opt.cloneNode(true));
                    }
                });
                select.value = current;
            });
    }
</script>
</body>
</html>
