<?php
include_once __DIR__ . "/include/CouleurMatch.php";

$themeImages = [
    0  => '/include/Themes/ImgTH/TH0.png',
    1  => '/include/Themes/ImgTH/TH1.png',
    2  => '/include/Themes/ImgTH/TH2.png',
    3  => '/include/Themes/ImgTH/TH3.png',
    4  => '/include/Themes/ImgTH/TH4.png',
    5  => '/include/Themes/ImgTH/TH5.png',
    6  => '/include/Themes/ImgTH/TH6.png',
    7  => '/include/Themes/ImgTH/TH7.png',
    8  => '/include/Themes/ImgTH/TH8.png',
    9  => '/include/Themes/ImgTH/TH9.png',
    10 => '/include/Themes/ImgTH/TH10.png',
    11 => '/include/Themes/ImgTH/TH11.png',
    12 => '/include/Themes/ImgTH/TH12.png',
    13 => '/include/Themes/ImgTH/TH13.png',
    14 => '/include/Themes/ImgTH/TH14.png' 
];

$savedColors = [];
if (file_exists($jsonFile)) {
    $savedColors = json_decode(file_get_contents($jsonFile), true);
    if (!is_array($savedColors)) {
        $savedColors = [];
    }
}

$savedTheme = [
    'dayTheme' => 0,
    'nightTheme' => 0,
];

$selectedBgColor0 = $_SESSION['bgColor0'] ?? ($savedColors['bgColor0'] ?? '#030304');
$selectedBgColor2 = $_SESSION['bgColor2'] ?? ($savedColors['bgColor2'] ?? '#333434');
$selectedDay = $_SESSION['dayTheme'] ?? ($savedColors['dayTheme'] ?? $savedTheme['dayTheme']);
$selectedNight = $_SESSION['nightTheme'] ?? ($savedColors['nightTheme'] ?? $savedTheme['nightTheme']);

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $bg0 = $_POST['bg0'] ?? '#030304';
    $bg2 = $_POST['bg2'] ?? '#333434';
    $day = $_POST['theme_day'] ?? '0';
    $night = $_POST['theme_night'] ?? '0';

    if (
        array_key_exists($bg0, $bgColor0Options) &&
        array_key_exists($bg2, $bgColor2Options) &&
        array_key_exists($day, $theme4Options) &&
        array_key_exists($night, $theme6Options)
    ) {
        $toSave = [
            'bgColor0' => $bg0,
            'bgColor2' => $bg2,
            'dayTheme' => $day,
            'nightTheme' => $night,
        ];

        file_put_contents($jsonFile, json_encode($toSave, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE));

        $_SESSION['bgColor0'] = $bg0;
        $_SESSION['bgColor2'] = $bg2;
        $_SESSION['dayTheme'] = $day;
        $_SESSION['nightTheme'] = $night;

        header("Location: /"); // --- index.php  ou /index.php ou / ---
        exit();
    } else {
        $error = "Valeurs invalides sélectionnées.";
    }

    $selectedBgColor0 = $bg0;
    $selectedBgColor2 = $bg2;
    $selectedDay = $day;
    $selectedNight = $night;
}

   ob_end_flush();
?>
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8" />
    <title>Configuration des couleurs thème</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" crossorigin="anonymous">
</head>
<body class="p-3" style="background-color:#5085A5; font-size:1.2em;">

    <h1>Personnalisation des couleurs Json ADM</h1>

    <?php if (!empty($error)): ?>
        <p style="color:red;"><?= htmlspecialchars($error) ?></p>
    <?php endif; ?>

    <form method="post" action="" class="w-50">
        <div class="form-group" style="background-color:<?= $selectedBgColor0 ?>; font-size:1.0em; border-radius:10px; padding:5px; margin-bottom:15px;">
            <label for="bg0">Choisissez couleur BG0 Haut de Page :</label>
            <select name="bg0" id="bg0" class="form-control">
                <?php foreach ($bgColor0Options as $color => $label): ?>
                    <option value="<?= htmlspecialchars($color) ?>" <?= ($selectedBgColor0 === $color) ? 'selected' : '' ?>> (<?= htmlspecialchars($color) ?>) <?= htmlspecialchars($label) ?>
                    </option>
                <?php endforeach; ?>
            </select>
        </div>

        <div class="form-group" style="background-color:<?= $selectedBgColor2 ?>; font-size:1.0em; border-radius:10px; padding:5px; margin-bottom:15px;">
            <label for="bg2">Choisissez couleur BG2 Jour :</label>
            <select name="bg2" id="bg2" class="form-control">
                <?php foreach ($bgColor2Options as $color => $label): ?>
                    <option value="<?= htmlspecialchars($color) ?>" <?= ($selectedBgColor2 === $color) ? 'selected' : '' ?>> (<?= htmlspecialchars($color) ?>) <?= htmlspecialchars($label) ?>
                    </option>
                <?php endforeach; ?>
            </select>
        </div>

        <div style="background-color:#AAAAAA; font-size:1.2em; border-radius:10px; padding:15px; margin-bottom:15px;">
            <div class="form-group">
                <div class="mt-2">
                    <img id="preview_day" src="<?= htmlspecialchars($themeImages[$selectedDay]) ?>" alt="Aperçu jour" style="width:350px; object-fit:cover; border:20px solid #DDD;">
                </div>
                <label for="theme_day" style="color:#222222;">Choisissez le thème du jour :</label>
                <select name="theme_day" id="theme_day" class="form-control">
                    <?php foreach ($theme4Options as $color => $label): ?>
                        <option value="<?= $color ?>" <?= ($selectedDay == $color) ? 'selected' : '' ?>> (<?= $color ?>) <?= htmlspecialchars($label) ?>
                        </option>
                    <?php endforeach; ?>
                </select>
            </div>
        </div>

        <div style="background-color:#666666; font-size:1.2em; border-radius:10px; padding:15px; margin-bottom:15px;">
            <div class="form-group">
                <div class="mt-2">
                    <img id="preview_night" src="<?= htmlspecialchars($themeImages[$selectedNight]) ?>" alt="Aperçu nuit" style="width:350px; object-fit:cover; border:20px solid #222;">
                </div>
                <label for="theme_night" style="color:#DDDDDD;">Choisissez le thème de la nuit :</label>
                <select name="theme_night" id="theme_night" class="form-control">
                    <?php foreach ($theme6Options as $color => $label): ?>
                        <option value="<?= $color ?>" <?= ($selectedNight == $color) ? 'selected' : '' ?>> (<?= $color ?>) <?= htmlspecialchars($label) ?>
                        </option>
                    <?php endforeach; ?>
                </select>
            </div>
        </div>

        <button type="submit" class="btn btn-primary" style="background-color:#3F8F6D; font-size:1.4em; width:400px; border:10px solid #3D3;">
            Appliquer le thème
        </button>
    </form>

    <script>
    const themeImages = {
        0: '<?= $themeImages[0] ?>',
        1: '<?= $themeImages[1] ?>',
        2: '<?= $themeImages[2] ?>',
        3: '<?= $themeImages[3] ?>',
        4: '<?= $themeImages[4] ?>',
        5: '<?= $themeImages[5] ?>',
        6: '<?= $themeImages[6] ?>',
        7: '<?= $themeImages[7] ?>',
        8: '<?= $themeImages[8] ?>',
        9: '<?= $themeImages[9] ?>',
        10: '<?= $themeImages[10] ?>',
        11: '<?= $themeImages[11] ?>',
        12: '<?= $themeImages[12] ?>',
        13: '<?= $themeImages[13] ?>',
        14: '<?= $themeImages[14] ?>' 
    };

    const themeDay = document.getElementById('theme_day');
    const themeNight = document.getElementById('theme_night');
    const previewDay = document.getElementById('preview_day');
    const previewNight = document.getElementById('preview_night');

    themeDay.addEventListener('change', function () {
        previewDay.src = themeImages[this.value];
    });

    themeNight.addEventListener('change', function () {
        previewNight.src = themeImages[this.value];
    });
    </script>
</body>
</html>