<?php
include "../includes/header2.php";
?>
<style>
  .custom-button {
    padding: 10px 20px;
  }

  .theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
  }

  .theme-card {
    position: relative;
    text-align: center;
    border: 1px solid #e3e6f0;
    border-radius: 10px;
    padding: 15px;
    background: #fff;
    transition: all 0.3s ease;
    cursor: pointer;
  }

  .theme-card:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transform: translateY(-2px);
  }

  /* 🔴 ATUALIZADO */
  .theme-card.active {
    border: 3px solid red;
    background: #f8f9fc;
  }

  .theme-card img {
    width: 100%;
    height: auto;
    border-radius: 5px;
    margin-bottom: 10px;
  }

  .theme-card p {
    font-weight: bold;
    margin: 5px 0;
  }

  .badge-current {
    background: #4e73df;
    color: white;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 12px;
    display: inline-block;
    margin-left: 10px;
  }

  @media (max-width: 768px) {
    .theme-grid {
      grid-template-columns: 1fr;
    }
  }
</style>

<div class="container-fluid">
    <h1 class="h3 mb-1 text-gray-800">Temas</h1>

    <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-primary2">
                <i class="fa fa-cogs"></i> Escolher Tema
            </h6>
        </div>

        <div class="card-body">
            <?php
            $seller_name = $_SESSION['seller_name'];
            $themeFile = "../a/rtx/Setting_$seller_name.json";

            // Lê o tema atual
            if (file_exists($themeFile)) {
                $jsonData = file_get_contents($themeFile);
                $data = json_decode($jsonData, true);
                $current_layout = $data[0]["PanalData"] ?? 'theme_d';
            } else {
                $current_layout = 'theme_d';
            }

            // Processa envio do formulário
            if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['options'])) {
                $selectedOption = $_POST['options'];

                if (file_exists($themeFile)) {
                    $jsonData = file_get_contents($themeFile);
                    $data = json_decode($jsonData, true);
                } else {
                    $data = [[]];
                }

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

                file_put_contents($themeFile, json_encode($data, JSON_PRETTY_PRINT));

                echo "<script>window.location.href='layouts.php';</script>";
                exit;
            }

            $themes = [
                'theme_d' => 'Tema Padrão',
                'theme_1' => 'Tema 1',
                'theme_2' => 'Tema 2',
                'theme_3' => 'Tema 3',
                'theme_4' => 'Tema 4',
                'theme_5' => 'Tema 5'
            ];
            ?>

            <div class="alert alert-info">
                <i class="fas fa-info-circle"></i>
                Tema atual: <strong><?php echo $current_layout; ?></strong> 
                <span class="badge-current">Aplicado</span>
            </div>

            <form method="post" id="themeForm">
                <div class="theme-grid">
                    <?php foreach ($themes as $value => $label): ?>
                        <div class="theme-card <?php echo ($current_layout == $value) ? 'active' : ''; ?>"
                             onclick="selectTheme('<?php echo $value; ?>')">

                            <img src="../rtx/layout/<?php echo str_replace('theme_', '', $value); ?>.png"
                                 alt="<?php echo $label; ?>">

                            <p><strong><?php echo $label; ?></strong></p>
                            <small class="text-muted"><?php echo $value; ?></small>
                        </div>
                    <?php endforeach; ?>
                </div>

                <input type="hidden" name="options" id="selectedTheme" value="">

                <div class="text-center mt-4">
                    <button type="submit" class="btn btn-success btn-icon-split">
                        <span class="icon text-white-50">
                            <i class="fas fa-check"></i>
                        </span>
                        <span class="text">Aplicar Tema</span>
                    </button>
                </div>
            </form>

            <script>
                function selectTheme(themeValue) {
                    document.getElementById('selectedTheme').value = themeValue;

                    const cards = document.querySelectorAll('.theme-card');

                    cards.forEach(card => {
                        card.classList.remove('active');

                        if (card.querySelector('img').src.includes(themeValue.replace('theme_', ''))) {
                            card.classList.add('active');
                        }
                    });
                }
            </script>
        </div>
    </div>
</div>

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