<?php
include ('includes/header.php');

$jsonData = file_get_contents('./api/theme.json');
$dataArray = json_decode($jsonData, true);

// Function to extract and return "PanalData"
function getPanalData($dataArray) {
    if (isset($dataArray[0]["PanalData"])) {
        return $dataArray[0]["PanalData"];
    } else {
        return null;
    }
}

$panalData = getPanalData($dataArray);

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $selectedOption = $_POST['options'];
    
    $jsonData = file_get_contents('./api/theme.json');
    $data = json_decode($jsonData, true);
    $data[0]["PanalData"] = $selectedOption;
    
    $jsonData = json_encode($data, JSON_PRETTY_PRINT);
    file_put_contents('./api/theme.json', $jsonData);
    
    echo "<script>window.location.href='UI_Setting.php';</script>";
}
?>

<style>
/* === ESTILOS ESPECÍFICOS PARA SETUP UI FUTURISTA === */
.main-content {
    background: transparent !important;
    padding: 20px;
}

.card {
    background: var(--surface-light) !important;
    border: 1px solid var(--border) !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 40px rgba(0,0,0,0.4) !important;
    color: var(--text-primary) !important;
    overflow: hidden;
    position: relative;
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--accent), var(--secondary));
    animation: borderGlow 3s ease-in-out infinite;
}

@keyframes borderGlow {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

.card-header {
    background: linear-gradient(135deg, var(--surface-light), var(--surface-lighter)) !important;
    border-bottom: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
    font-weight: 700 !important;
    padding: 20px !important;
}

.card-body {
    background: transparent !important;
    color: var(--text-primary) !important;
    padding: 30px !important;
}

/* Formulários futuristas */
select, input {
    background: var(--surface-lighter) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

select:focus, input:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 0.3rem rgba(0, 212, 255, 0.25) !important;
    background: var(--surface-lighter) !important;
    color: var(--text-primary) !important;
    transform: translateY(-2px);
}

/* Botões futuristas */
.btn-success {
    background: linear-gradient(135deg, var(--accent), #00cc7a) !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: var(--glow-accent) !important;
    padding: 12px 24px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-success:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(0, 255, 136, 0.5) !important;
}

/* Botões de ação */
.btn-icon-split {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 12px 20px !important;
    color: white !important;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    box-shadow: var(--glow);
}

.btn-icon-split:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 212, 255, 0.5);
    color: white !important;
    text-decoration: none;
}

/* Títulos */
.h2 {
    color: var(--text-primary) !important;
    font-weight: 700;
    margin-bottom: 20px;
}

.text-primary2 {
    color: var(--primary) !important;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 1.3rem !important;
}

/* Layout das imagens */
.image-row {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    gap: 30px;
    flex-wrap: wrap;
}

.image-container {
    text-align: center;
    background: var(--surface-lighter);
    border-radius: 16px;
    padding: 20px;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.image-container:hover {
    transform: translateY(-5px);
    border-color: var(--primary);
    box-shadow: var(--glow);
}

.image-container p {
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: 15px;
    font-size: 1.1rem;
}

.image-container img {
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
}

.image-container:hover img {
    transform: scale(1.05);
}

/* Form styles */
form {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin: 30px 0;
    flex-wrap: wrap;
}

select {
    min-width: 200px;
}

.horizontal-space {
    margin: 0 10px;
}

/* Status atual */
.current-selection {
    background: linear-gradient(135deg, var(--surface-light), var(--surface-lighter));
    border: 2px solid var(--primary);
    border-radius: 12px;
    padding: 15px 25px;
    margin: 20px auto;
    text-align: center;
    max-width: 400px;
    box-shadow: var(--glow);
}

.current-selection h4 {
    color: var(--text-primary);
    margin-bottom: 10px;
    font-weight: 600;
}

.current-selection .selection-value {
    color: var(--accent);
    font-weight: 700;
    font-size: 1.2rem;
}

/* Efeito de partículas */
@keyframes moveParticles {
    from { transform: translateY(0); opacity: 0.7; }
    to { transform: translateY(-1000px); opacity: 0; }
}

.particle {
    position: fixed;
    bottom: 0;
    width: 2px;
    height: 2px;
    background: var(--primary);
    opacity: 0.5;
    animation: moveParticles linear infinite;
    z-index: -1;
}

.particle:nth-child(odd) { background: var(--accent); }

/* Responsividade */
@media (max-width: 768px) {
    .main-content {
        padding: 10px !important;
    }
    
    .card-body {
        padding: 20px !important;
    }
    
    .image-row {
        gap: 15px;
    }
    
    .image-container {
        padding: 15px;
    }
    
    form {
        flex-direction: column;
        gap: 15px;
    }
    
    select {
        min-width: 250px;
    }
}
</style>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        // Partículas animadas
        const numParticles = 20;
        const particlesContainer = document.createElement('div');
        particlesContainer.style.position = 'fixed';
        particlesContainer.style.top = '0';
        particlesContainer.style.left = '0';
        particlesContainer.style.width = '100%';
        particlesContainer.style.height = '100%';
        particlesContainer.style.pointerEvents = 'none';
        particlesContainer.style.zIndex = '-1';
        
        for (let i = 0; i < numParticles; i++) {
            const particle = document.createElement('div');
            particle.classList.add('particle');
            particle.style.left = Math.random() * 100 + 'vw';
            particle.style.animationDuration = (2 + Math.random() * 8) + 's';
            particle.style.animationDelay = Math.random() * 10 + 's';
            particle.style.width = particle.style.height = (1 + Math.random() * 3) + 'px';
            particlesContainer.appendChild(particle);
        }
        
        document.body.appendChild(particlesContainer);

        // Set current selection in dropdown
        const currentSelection = "<?php echo $panalData; ?>";
        if (currentSelection) {
            document.getElementById('options').value = currentSelection;
        }

        // Efeitos nos containers de imagem
        const imageContainers = document.querySelectorAll('.image-container');
        imageContainers.forEach(container => {
            container.addEventListener('mouseenter', function() {
                this.style.transform = 'translateY(-5px)';
            });
            
            container.addEventListener('mouseleave', function() {
                this.style.transform = 'translateY(0)';
            });
        });
    });
</script>

<main role="main" class="col-12 pt-4 px-4 main-content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-10 mx-auto">
                <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="fas fa-palette me-2"></i>Configurações da Interface
                        </h6>
                    </div>
                    <div class="card-body text-center">
                        <h2 class="h3 mb-4 text-gray-800">
                            <i class="fas fa-wrench me-2"></i>Setup UI
                        </h2>
                        
                        <!-- Status Atual -->
                        <div class="current-selection">
                            <h4><i class="fas fa-check-circle me-2"></i>Widget Atual</h4>
                            <div class="selection-value">
                                <?php 
                                $widgetNames = [
                                    'Widget_1' => 'Widget Canais',
                                    'Widget_2' => 'Widget Anúncios', 
                                    'Widget_3' => 'Widget Esports'
                                ];
                                echo $widgetNames[$panalData] ?? $panalData; 
                                ?>
                            </div>
                        </div>

                        <!-- Formulário de Seleção -->
                        <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
                            <div class="form-group">
                                <label for="options" class="control-label">
                                    <i class="fas fa-caret-down me-2"></i><strong>Selecionar Widget:</strong>
                                </label>
                                <select name="options" id="options" class="form-control">
                                    <option value="Widget_1">Widget Canais</option>
                                    <option value="Widget_2">Widget Anúncios</option>
                                    <option value="Widget_3">Widget Esports</option>
                                </select>
                            </div>
                            
                            <button type="submit" class="btn btn-success btn-icon-split">
                                <span class="icon text-white-50">
                                    <i class="fas fa-save"></i>
                                </span>
                                <span class="text">Aplicar Configuração</span>
                            </button>
                        </form>

                        <!-- Preview dos Widgets -->
                        <div class="mt-5">
                            <h4 class="mb-4">
                                <i class="fas fa-eye me-2"></i>Preview dos Widgets
                            </h4>
                            
                            <div class="image-row">
                                <div class="image-container">
                                    <p><i class="fas fa-tv me-2"></i>Widget Canais</p>
                                    <img src="./img/1.png" width="220" height="140" alt="Widget Canais">
                                    <div class="mt-2">
                                        <small class="text-muted">Layout focado em lista de canais</small>
                                    </div>
                                </div>

                                <div class="image-container">
                                    <p><i class="fas fa-ad me-2"></i>Widget Anúncios</p>
                                    <img src="./img/2.png" width="220" height="140" alt="Widget Anúncios">
                                    <div class="mt-2">
                                        <small class="text-muted">Destaque para publicidade</small>
                                    </div>
                                </div>

                                <div class="image-container">
                                    <p><i class="fas fa-trophy me-2"></i>Widget Esports</p>
                                    <img src="./img/3.png" width="220" height="140" alt="Widget Esports">
                                    <div class="mt-2">
                                        <small class="text-muted">Otimizado para conteúdo esportivo</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

<?php include ('includes/footer.php'); ?>
</body>
</html>