<?php
declare(strict_types=1);

/**
ET-Chat Copyright by SEDesign | ET-Chat v3.x.x Lizenz: CCPL | Autor: Evgeni Tcherkasski (info@s-e-d.de)
ET-Chat_T-FISH-MOD Weiterentwicklungen, Optimierungen und Ergänzungen am Code sind das geistige Eigentum von Tommy (Thomas Kuhn) und Harlekin (Bernd Witte).

Die darauf folgende Optimierungen und Ergänzungen am Code sind das Geistige Eigentum von Powermen (Christian K.)
und wird unter der Namenserweiterung M.C.v.x.x.x. geführt. 
PHP 8/9 Ready, XML Parser, PDO Prepared Statements Get Set sicherheit usw.
 */

$csrf = (string)($_SESSION['etchat_' . $this->_prefix . 'csrf_token'] ?? '');

function e(string $v): string {
    return htmlspecialchars($v, ENT_QUOTES, 'UTF-8');
}

ob_start();
?>

<p>
    <small>Reihenfolge per Drag & Drop ändern und speichern.</small>
</p>

<div style="display:flex; align-items:center; gap:15px; flex-wrap:wrap;">
    <a href="./?AdminCreateNewSmiliesCat" class="admin-button">
        <?= e($lang->cat[3]->tagData ?? 'Neue Kategorie') ?>
    </a>

    <button id="saveCatBtn" type="button" disabled>
        Reihenfolge speichern
    </button>
</div>

<br>
<?= $savedMsg ?>
<form id="catOrderForm">

    <table id="catTable">
        <tr>
            <th width="100"></th>
            <th width="50"></th>
            <th><?= e($lang->cat[2]->tagData ?? 'Name') ?></th>
            <th width="100"></th>
            <th width="100"></th>
            <th width="100">Status</th>
            <th width="100">Gewichtung</th>
        </tr>

        <?= $print_cat_list ?>

    </table>

</form>

<script>
const CSRF_TOKEN = "<?= e($csrf) ?>";

// =========================
// STATE
// =========================
let unsavedChanges = false;
let dragSrcRow = null;

// =========================
// INIT
// =========================
document.addEventListener("DOMContentLoaded", () => {

    initDragAndDrop();
    initSave();
    initNavigationGuard();
    initSuccessBanner();
});

// =========================
// DRAG & DROP
// =========================
function initDragAndDrop() {

    const saveBtn = document.getElementById("saveCatBtn");
    if (saveBtn) saveBtn.disabled = true;

    const placeholder = document.createElement("tr");
    placeholder.classList.add("dragging");
    placeholder.innerHTML = "<td colspan='7'>&nbsp;</td>";

    document.querySelectorAll("#catTable tr[data-id]").forEach(row => {

        row.setAttribute("draggable", "true");

        row.addEventListener("dragstart", e => {
            dragSrcRow = row;

            e.dataTransfer.setData("text/plain", row.dataset.id);

            row.parentNode.insertBefore(placeholder, row.nextSibling);
            setTimeout(() => row.style.display = "none", 0);
        });

        row.addEventListener("dragend", () => {
            placeholder.parentNode.insertBefore(dragSrcRow, placeholder);
            dragSrcRow.style.display = "";
            placeholder.remove();

            unsavedChanges = true;
            if (saveBtn) saveBtn.disabled = false;
        });

        row.addEventListener("dragover", e => {
            e.preventDefault();

            const target = e.target.closest("tr[data-id]");
            if (!target || target === placeholder) return;

            target.parentNode.insertBefore(placeholder, target.nextSibling);
        });

    });
}

// =========================
// SAVE
// =========================
function initSave() {

    window.saveCatOrder = function () {

        const rows = Array.from(document.querySelectorAll("#catTable tr[data-id]"));

        if (!rows.length) {
            alert("Keine Kategorien vorhanden.");
            return;
        }

        const ids = rows.map(r => r.dataset.id);

        fetch("./?AdminUpdateSmiliesCatOrder", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "X-CSRF-Token": CSRF_TOKEN
            },
            body: JSON.stringify({ ids })
        })
        .then(r => r.json())
        .then(res => {

            if (res.success === true) {

                unsavedChanges = false;

                const btn = document.getElementById("saveCatBtn");
                if (btn) btn.disabled = true;

                const url = new URL(window.location.href);
                url.searchParams.set("saved", "1");

                setTimeout(() => {
                    window.location.href = url.toString();
                }, 50);

            } else {
                alert(res.error || "Fehler beim Speichern");
            }

        })
        .catch(err => alert("Fehler: " + err));
    };

    document.getElementById("saveCatBtn")
        ?.addEventListener("click", saveCatOrder);
}

// =========================
// NAVIGATION GUARD
// =========================
function initNavigationGuard() {

    window.addEventListener("beforeunload", e => {
        if (!unsavedChanges) return;

        const btn = document.getElementById("saveCatBtn");
        if (btn && btn.disabled) return;

        e.preventDefault();
        e.returnValue = "";
    });

    document.addEventListener("click", e => {
        if (!unsavedChanges) return;

        const target = e.target.closest("a");
        if (!target) return;

        if (!confirm("Ungespeicherte Änderungen verwerfen?")) {
            e.preventDefault();
        }
    });
}

// =========================
// SUCCESS BANNER
// =========================
function closeSuccessBanner() {
    const el = document.getElementById("successBanner");
    if (el) el.remove();
}

function initSuccessBanner() {

    const el = document.getElementById("successBanner");
    if (!el) return;

    setTimeout(() => {
        el.style.transition = "opacity 0.5s ease";
        el.style.opacity = "0";

        setTimeout(() => el.remove(), 500);
    }, 5000);
}
</script>
<?php
$content = ob_get_clean();

$pageTitle = 'Kategorien verwalten ('.$totalCategories.' Kategorien)';
$backLink  = './?AdminIndex';
$footerNote = $lang->note[0]->tagData ?? 'Beachte, dass administratorische Änderungen bei den Smilies sofort sichtbar werden.';

include __DIR__ . '/admin_master_template.php';
?>