<?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.
 */

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

$style = $_SESSION['etchat_' . $this->_prefix . 'style'] ?? 'default';
$csrf_token = $_SESSION['etchat_' . $this->_prefix . 'csrf_token'] ?? '';
?>

<?php
$pageTitle = "Smilies-Gruppe anlegen";
$backLink  = './?AdminSmiliesIndex';
$footerNote = $lang->note[0]->tagData ?? '';

ob_start();
?>

<small>
    1. Dateien oder Ordner hinzufügen<br>
    2. Gewicht angeben<br>
    3. Kategorie auswählen<br>
    4. Upload starten<br>
    5. Kürzel werden automatisch erzeugt aus Dateiname
</small>

<br><br>

<form 
    name="smilieGroupForm"
    method="post"
    action="./?AdminInsertSmiliesgrupp"
    enctype="multipart/form-data"
    onsubmit="return validateForm()"
    class="user-form"
>

<table>

<tr>
<td>Dateien:</td>
<td>

    <label class="custom-file-btn" for="fileInput">Dateien auswählen...</label>
    <input id="fileInput" type="file" multiple hidden>
    <span id="fileStatus" class="status">Keine Dateien ausgewählt</span>

    <br><br>

    <label class="custom-file-btn" for="folderInput">Ordner auswählen...</label>
    <input id="folderInput" type="file" webkitdirectory directory multiple hidden>
    <span id="folderStatusBtn" class="status">Kein Ordner ausgewählt</span>

    <br><br>

    <div id="dropzone">Dateien oder Ordner hier ablegen</div>
    <div>Status: <span id="dropStatus">0 Dateien</span></div>

    <input id="mergedInput" type="file" name="smiliefiles[]" multiple hidden>

</td>
</tr>

<tr>
<td>Gewicht:</td>
<td>
    <input type="number" name="gw" min="1" max="99999" required>
    <small>bestimmt die Anzeigereihenfolge</small>
</td>
</tr>

<tr>
<td>Kategorie:</td>
<td>
    <select name="cat" required>
        <?php foreach ($cats as $cat):
            $name = $cat['name'] ?? '';
        ?>
            <option value="<?= e($name) ?>"><?= e($name) ?></option>
        <?php endforeach; ?>
    </select>
</td>
</tr>

<tr>
<td colspan="2">
    <input type="hidden" name="csrf_token" value="<?= e($csrf_token) ?>">
    <button type="submit">Smilies hochladen</button>
</td>
</tr>

</table>

</form>

<script>
document.addEventListener("DOMContentLoaded", () => {
    const fileBtn = document.getElementById("fileInput");
    const folderBtn = document.getElementById("folderInput");
    const dropzone = document.getElementById("dropzone");
    const hiddenInput = document.getElementById("mergedInput");

    const fileStatus = document.getElementById("fileStatus");
    const folderStatusBtn = document.getElementById("folderStatusBtn");
    const dropStatus = document.getElementById("dropStatus");

    const allFiles = new DataTransfer();

    function updateStatus() {
        let folderCount = 0, directCount = 0;

        for (const f of allFiles.files) {
            if (f.webkitRelativePath && f.webkitRelativePath !== f.name) folderCount++;
            else directCount++;
        }

        dropStatus.textContent = `Gesamt: ${directCount} Dateien direkt, ${folderCount} aus Ordnern`;
    }

    function addFiles(fileList) {
        for (const f of fileList) allFiles.items.add(f);
        hiddenInput.files = allFiles.files;
        updateStatus();
    }

    dropzone.addEventListener("dragover", e => {
        e.preventDefault();
        dropzone.classList.add("dragover");
    });

    dropzone.addEventListener("dragleave", () => {
        dropzone.classList.remove("dragover");
    });

    dropzone.addEventListener("drop", e => {
		e.preventDefault();
		dropzone.classList.remove("dragover");

		const items = e.dataTransfer.items;

		if (items) {
			for (const item of items) {
				const entry = item.webkitGetAsEntry?.();
				if (entry) {
					traverseFileTree(entry, "", addFiles);
				} else {
					addFiles(e.dataTransfer.files);
					break;
				}
			}
		} else {
			addFiles(e.dataTransfer.files);
		}
	});

    fileBtn.addEventListener("change", () => {
        addFiles(fileBtn.files);
        fileStatus.textContent = `${fileBtn.files.length} Datei(en) ausgewählt`;
        fileBtn.value = "";
    });

    folderBtn.addEventListener("change", () => {
        addFiles(folderBtn.files);
        folderStatusBtn.textContent = `${folderBtn.files.length} Datei(en) aus Ordner`;
        folderBtn.value = "";
    });

    function traverseFileTree(item, path, callback) {
        path = path || "";

        if (item.isFile) {
            item.file(file => {
                Object.defineProperty(file, "webkitRelativePath", {
                    value: path + file.name
                });
                callback([file]);
            });
        } else if (item.isDirectory) {
            const dirReader = item.createReader();
            dirReader.readEntries(entries => {
                for (const entry of entries) {
                    traverseFileTree(entry, path + item.name + "/", callback);
                }
            });
        }
    }
});

function validateForm() {
    const hiddenInput = document.getElementById("mergedInput");
    const form = document.forms['smilieGroupForm'];

    if (!hiddenInput.files || hiddenInput.files.length === 0) {
        alert("Keine Dateien oder Ordner ausgewählt!");
        return false;
    }

    if (!form.gw.value) {
        alert("Keine Gewichtung angegeben!");
        return false;
    }

    return true;
}
</script>

<?php
$content = ob_get_clean();

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