<?php
include "includes/header.php";

// Função para carregar dados do JSON
function carregarDados($caminho) {
    $jsonData = file_get_contents($caminho);
    return json_decode($jsonData, true);
}

// Função para salvar dados no JSON
function salvarDados($caminho, $dados) {
    $jsonData = json_encode($dados, JSON_PRETTY_PRINT);
    file_put_contents($caminho, $jsonData);
}

// Carregar dados do JSON
$data = carregarDados('./api/theme_change/Setting.json');

// Determinar o tema atual
$tema_atual = "";
foreach ($data as $item) {
    if ($item["RTXSetting"] === "mLayout") {
        $tema_atual = $item["PanalData"];
        break;
    }
}

// Temas disponíveis
$temas = [
    "theme_d" => "TEMA 1",
    "theme_2" => "TEMA 2",
    "theme_3" => "TEMA 3",
    "theme_4" => "TEMA 4",
    "theme_5" => "TEMA 5",
    "theme_6" => "TEMA 6",
    "theme_7" => "TEMA 7",
    "theme_8" => "TEMA 8",
    "theme_9" => "TEMA 9",
];

// Tema escolhido
$tema_atual_escolhido = isset($temas[$tema_atual]) ? $temas[$tema_atual] : "Tema Desconhecido";

// Mensagem de feedback
$mensagem = "";

// Processar a seleção do tema
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $selectedOption = $_POST['options'];

    if (array_key_exists($selectedOption, $temas)) {
        $tema = $temas[$selectedOption];
        $mensagem = "O tema escolhido é: $tema";

        // Atualizar JSON com a nova escolha
        $data[0]["RTXSetting"] = "mLayout";
        $data[0]["PanalData"] = $selectedOption;
        salvarDados('./api/theme_change/Setting.json', $data);
        
        // Atualizar o tema atual para refletir a escolha do usuário
        $tema_atual = $selectedOption;
    } else {
        $mensagem = "Tema não reconhecido. Por favor, escolha um tema válido.";
    }
}
?>

<style>
    .custom-button {
        padding: 10px 20px;
    }
    .image-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin-bottom: 20px;
    }
    .image-container {
        flex: 1 1 300px;
        max-width: 300px;
        margin: 10px;
        text-align: center;
        background-color: #FFF;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        padding: 10px;
    }
    .image-container img {
        width: 100%;
        height: auto;
        border-radius: 10px;
    }
    label, select, input {
        background: #F8F9FC;
        padding: 10px 20px;
        margin-left: 10px;
        border: none;
        border-radius: 10px;
        box-shadow: 5px 5px 5px 0 rgba(0,0,0,0.35);
    }
    form {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .alert {
        padding: 15px;
        margin-top: 20px;
        border-radius: 5px;
        color: #fff;
        display: none; /* Escondido por padrão */
        transition: all 0.5s ease-out; /* Adiciona transição */
    }
    .alert-success {
        background-color: #28a745; /* Verde */
    }
    .alert-danger {
        background-color: #dc3545; /* Vermelho */
    }
    .fade-out {
        opacity: 0;
        transform: translateY(-20px); /* Move para cima */
    }
</style>

<div class="container-fluid">
    <center><h1 class="h3 mb-1 text-gray-800">ESCOLHA O TEMA</h1></center>
    <div class="card border-left-primary shadow h-100 card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary"><i class="fa fa-cogs"></i> TEMA ATUAL ( <?= htmlspecialchars($tema_atual_escolhido); ?> )</h6>
        </div>
        <div class="card-body">
            <?php if ($mensagem): ?>
                <div class="alert <?= strpos($mensagem, 'não reconhecido') ? 'alert-danger' : 'alert-success'; ?>" id="feedback-message">
                    <?= htmlspecialchars($mensagem); ?>
                </div>
            <?php endif; ?>
            
            <form class="form-theme" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
                <select name="options" id="options">
                    <?php foreach ($temas as $key => $valor): ?>
                        <option value="<?= htmlspecialchars($key); ?>" <?= ($key === $tema_atual) ? 'selected' : ''; ?>>
                            <?= htmlspecialchars($valor); ?>
                        </option>
                    <?php endforeach; ?>
                </select>
                <br><br>
                <input type="submit" class="btn btn-primary btn-icon-split custom-button" value="ATUALIZAR">
            </form>
            <br><br>
            <div class="image-row">
                <?php foreach ($temas as $key => $valor): ?>
                    <div class="image-container">
                        <p><?= htmlspecialchars($valor); ?></p>
                        <img src="./img_custom/layout/<?= htmlspecialchars(substr($key, -1)) ?>.jpg" alt="<?= htmlspecialchars($key); ?>">
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
    </div>
</div>

<script>
    // Mostrar a mensagem de feedback se existir
    const feedbackMessage = document.getElementById('feedback-message');
    if (feedbackMessage) {
        feedbackMessage.style.display = 'block'; // Exibir a mensagem
        setTimeout(() => {
            feedbackMessage.classList.add('fade-out'); // Adicionar classe de animação
            setTimeout(() => {
                feedbackMessage.style.display = 'none'; // Ocultar após animação
            }, 300); // Tempo para a animação
        }, 2000); // Tempo antes de iniciar a animação
    }
</script>

<?php
include "includes/footer.php";
?>
</body>
</html>