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

$pageTitle = "Ankündigung";
$backLink  = './?AdminIndex';
$footerNote = "Beachte, dass Änderungen im Chat etwas verzögert ankommen bzw. ein Reload (Strg + F5) nötig ist.";

ob_start();

$msg = $msg ?? '';
$data = $this->data;
?>

<?php if (!empty($msg)): ?>
<div id="successBanner">
<?= $msg ?>
</div>
<?php endif; ?>

<form class="user-form" method="post" oninput="updatePreview()">

<input type="hidden" name="csrf_token" value="<?= htmlspecialchars($_SESSION['etchat_' . $this->_prefix . 'csrf_token'], ENT_QUOTES) ?>">

<label>Hintergrund:</label>
<select name="bgcolor_select" id="bgcolor_select" onchange="toggleBg(this.value)">
<option value="">Keine</option>
<option value="custom" <?= $data['bgmode'] === 'custom' ? 'selected' : '' ?>>Eigene Farbe</option>
</select>

<input type="color" id="bgcolor" name="bgcolor" value="<?= htmlspecialchars($data['bgcolor'], ENT_QUOTES) ?>" style="display:none;">

<br>

<label>Schriftfarbe:</label>
<select name="color_select" id="color_select" onchange="toggleColor(this.value)">
<?= $colorOptions ?>
</select>

<input type="color" id="color" name="color" value="<?= htmlspecialchars($data['color'], ENT_QUOTES) ?>" style="display:none;">

<br>

<label>Text 1:</label>
<input type="text" id="text1" name="text1" value="<?= htmlspecialchars($data['text1'], ENT_QUOTES) ?>">

<label>Text 2:</label>
<input type="text" id="text2" name="text2" value="<?= htmlspecialchars($data['text2'], ENT_QUOTES) ?>">

<label>Text 3:</label>
<input type="text" id="text3" name="text3" value="<?= htmlspecialchars($data['text3'], ENT_QUOTES) ?>">

<label>Text 4:</label>
<input type="text" id="text4" name="text4" value="<?= htmlspecialchars($data['text4'], ENT_QUOTES) ?>">

<br>

<label>Speed:</label>
<input type="range" id="speed" name="speed" min="3" max="50" value="<?= (int)$data['speed'] ?>">
<span id="speedVal"><?= (int)$data['speed'] ?></span>

<button type="submit">Speichern</button>
</form>
<br><b>Vorschau:</b>
<div id="preview"></div>

<?php
$extraScripts = <<<JS
<script>

function el(id){
    return document.getElementById(id);
}

function toggleBg(v){
    el('bgcolor').style.display = (v==='custom') ? 'block' : 'none';
}

function toggleColor(v){
    el('color').style.display = (v==='custom') ? 'block' : 'none';
}

function updatePreview(){

    const t1 = el('text1').value || '';
    const t2 = el('text2').value || '';
    const t3 = el('text3').value || '';
	const t4 = el('text4').value || '';

    let txt = [t1,t2,t3,t4].filter(Boolean).join(" ✦ ✦ ✦ ");
    txt = txt ? "✦ ✦ ✦ " + txt + " ✦ ✦ ✦" : "";

    const sp = el('speed').value;
    el('speedVal').innerText = sp;

    const bgSel = el('bgcolor_select').value;
    const bg = (bgSel === 'custom') ? el('bgcolor').value : '';

    const colSel = el('color_select').value;
    const col = (colSel === 'custom') ? el('color').value : colSel;

    let anim = 'marqueeAnim ' + sp + 's linear infinite';

    let html = '<div class="marquee-wrap" style="background:' + (bg || 'transparent') + '">';

    if(col === 'rainbow'){
        html += '<div class="marquee" style="animation:' + anim + '"><b class="rnb">' + txt + '</b></div>';
    } else {
        html += '<div class="marquee" style="color:' + col + '; animation:' + anim + '"><b>' + txt + '</b></div>';
    }

    html += '</div>';

    el('preview').innerHTML = html;
}

document.addEventListener("DOMContentLoaded", function(){

    el('speed').addEventListener('input', updatePreview);
    el('text1').addEventListener('input', updatePreview);
    el('text2').addEventListener('input', updatePreview);
    el('text3').addEventListener('input', updatePreview);
	el('text4').addEventListener('input', updatePreview);

    el('bgcolor_select').addEventListener('change', function(){
        toggleBg(this.value);
        updatePreview();
    });

    el('color_select').addEventListener('change', function(){
        toggleColor(this.value);
        updatePreview();
    });

    el('bgcolor').addEventListener('input', updatePreview);
    el('color').addEventListener('input', updatePreview);

    toggleBg(el('bgcolor_select').value);
    toggleColor(el('color_select').value);

    updatePreview();
});

</script>

<script>
window.addEventListener('DOMContentLoaded', () => {
    const banner = document.getElementById("successBanner");
    if (banner) {
        setTimeout(() => {
            banner.style.display = "none";
        }, 5000);
    }
});

function closeSuccessBanner() {
    const banner = document.getElementById("successBanner");
    if (banner) banner.style.display = "none";
}
</script>

JS;

$content = ob_get_clean();
include "admin_master_template.php";
?>