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

// Lógica de processamento
$message = "";
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['theme_choice'])) {
    $selectedOption = $_POST['theme_choice'];
    
    $jsonData = file_get_contents('./a/rtx/Setting.json');
    $data = json_decode($jsonData, true);

    $data[0]["RTXSetting"] = "mLayout";
    $data[0]["PanalData"] = $selectedOption;

    $jsonData = json_encode($data, JSON_PRETTY_PRINT);
    if(file_put_contents('./a/rtx/Setting.json', $jsonData)) {
        $message = "<div class='alert alert-success'>Tema <b>$selectedOption</b> aplicado com sucesso!</div>";
    }
}

// Obter tema atual
$jsonData = file_get_contents('./a/rtx/Setting.json');
$data = json_decode($jsonData, true);
$current_theme = $data[0]["PanalData"];

$themes = [
    ['id' => 'theme_d', 'name' => 'Tema Default', 'img' => './rtx/layout/d.png'],
    ['id' => 'theme_1', 'name' => 'Tema 1', 'img' => './rtx/layout/1.png'],
    ['id' => 'theme_2', 'name' => 'Tema 2', 'img' => './rtx/layout/2.png'],
    ['id' => 'theme_3', 'name' => 'Tema 3', 'img' => './rtx/layout/3.png'],
    ['id' => 'theme_4', 'name' => 'Tema 4', 'img' => './rtx/layout/4.png'],
    ['id' => 'theme_5', 'name' => 'Tema 5', 'img' => './rtx/layout/5.png'],
    ['id' => 'random', 'name' => 'Aleatório', 'img' => 'https://via.placeholder.com/300x170/0ea5e9/ffffff?text=Random+Theme']
];
?>

<style>
    .theme-card {
        cursor: pointer;
        transition: all 0.3s ease;
        border: 2px solid transparent;
        border-radius: 15px;
        overflow: hidden;
        position: relative;
    }
    .theme-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    }
    .theme-card.active {
        border-color: var(--azul-celeste);
        box-shadow: 0 0 20px rgba(14, 165, 233, 0.3);
    }
    .theme-card img {
        width: 100%;
        height: 180px;
        object-fit: cover;
    }
    .theme-info {
        padding: 15px;
        background: #fff;
        text-align: center;
    }
    .theme-info h5 {
        margin: 0;
        font-size: 1rem;
        font-weight: 600;
        color: var(--azul-escuro);
    }
    .active-badge {
        position: absolute;
        top: 10px;
        right: 10px;
        background: var(--azul-celeste);
        color: #fff;
        padding: 5px 12px;
        border-radius: 20px;
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
    }
    .btn-apply {
        display: none;
    }
</style>

<div class="container-fluid">
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 mb-0 text-gray-800">Personalização de Layout</h1>
    </div>

    <?php echo $message; ?>

    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary"><i class="fas fa-palette mr-2"></i> Escolha o Tema do Aplicativo</h6>
        </div>
        <div class="card-body">
            <p class="text-muted mb-4">Selecione um dos temas abaixo para alterar a aparência do aplicativo Ultra IBO.</p>
            
            <form id="themeForm" method="post">
                <input type="hidden" name="theme_choice" id="theme_input">
                <div class="row">
                    <?php foreach($themes as $theme): ?>
                        <div class="col-xl-3 col-lg-4 col-md-6 mb-4">
                            <div class="theme-card <?php echo ($current_theme == $theme['id']) ? 'active' : ''; ?>" 
                                 onclick="selectTheme('<?php echo $theme['id']; ?>')">
                                <?php if($current_theme == $theme['id']): ?>
                                    <div class="active-badge">Ativo</div>
                                <?php endif; ?>
                                <img src="<?php echo $theme['img']; ?>" alt="<?php echo $theme['name']; ?>">
                                <div class="theme-info">
                                    <h5><?php echo $theme['name']; ?></h5>
                                </div>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
function selectTheme(themeId) {
    document.getElementById('theme_input').value = themeId;
    document.getElementById('themeForm').submit();
}
</script>

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