<?php
$file_path = 'a/revenda_mensagem.json';
$file_content = file_get_contents($file_path);
$data_array = json_decode($file_content, true);
$flash_message = '<div class="alert alert-primary" id="flash-msg"><h4><i class="icon fa fa-check"></i>Items Updated!</h4></div>';

if (isset($_POST['text'])) {
    $new_data = ['title' => $_POST['title'], 'content' => $_POST['content']];
    $merged_data = array_replace_recursive($data_array, $new_data);
    $updated_content = json_encode($merged_data, JSON_UNESCAPED_UNICODE);
    file_put_contents($file_path, $updated_content);
    header('Location: revenda_mensagem.php?m=' . $flash_message);
}

$title = $data_array['title'];
$content = $data_array['content'];
include 'includes/header.php';
?>

<style>
/* === ESTILOS ESPECÍFICOS PARA ALERTA DE REVENDAS 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 */
.form-control {
    background: var(--surface-lighter) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
    border-radius: 12px !important;
    padding: 14px 18px !important;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.form-control: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);
}

.form-control::placeholder {
    color: var(--text-muted) !important;
}

/* Botões futuristas */
.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: var(--glow) !important;
    padding: 14px 30px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 1rem;
}

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

/* Labels e textos */
.control-label {
    color: var(--text-primary) !important;
    font-weight: 600;
    margin-bottom: 10px;
    display: block;
    font-size: 1rem;
}

.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;
}

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

/* Input group */
.input-group {
    margin-bottom: 25px;
}

/* Alert personalizado */
.alert-primary {
    background: linear-gradient(135deg, var(--surface-light), var(--surface-lighter)) !important;
    border: 1px solid var(--primary) !important;
    border-radius: 12px !important;
    color: var(--text-primary) !important;
    box-shadow: var(--glow) !important;
    padding: 20px !important;
}

/* Ícones */
.fa-bullhorn, .fa-exclamation-triangle, .fa-check {
    margin-right: 10px;
}

/* 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); }

/* Preview do Alerta */
.alert-preview {
    background: linear-gradient(135deg, var(--surface-light), var(--surface-lighter));
    border: 2px solid var(--border);
    border-radius: 12px;
    padding: 25px;
    margin-top: 10px;
    transition: all 0.3s ease;
    border-left: 4px solid var(--secondary);
}

.alert-preview:hover {
    border-color: var(--secondary);
    box-shadow: 0 4px 20px rgba(255, 107, 157, 0.3);
}

.alert-title {
    color: var(--secondary);
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.alert-content {
    color: var(--text-primary);
    line-height: 1.5;
}

/* Responsividade */
@media (max-width: 768px) {
    .main-content {
        padding: 10px !important;
    }
    
    .card-body {
        padding: 20px !important;
    }
    
    .btn-primary {
        padding: 12px 25px !important;
        font-size: 0.9rem !important;
    }
    
    .form-control {
        padding: 12px 15px !important;
    }
}
</style>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        // Partículas animadas
        const numParticles = 15;
        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);

        // Auto-hide flash message
        const flashMsg = document.getElementById('flash-msg');
        if (flashMsg) {
            setTimeout(() => {
                flashMsg.style.opacity = '0';
                flashMsg.style.transition = 'opacity 0.5s ease';
                setTimeout(() => flashMsg.remove(), 500);
            }, 3000);
        }

        // Preview dinâmico do alerta
        const titleInput = document.querySelector('input[name="title"]');
        const contentInput = document.querySelector('input[name="content"]');
        
        const previewContainer = document.createElement('div');
        previewContainer.className = 'alert-preview';
        previewContainer.innerHTML = `
            <div class="alert-title" id="preview-title">
                <i class="fas fa-exclamation-triangle"></i>
                ${titleInput.value || 'Título do Alerta'}
            </div>
            <div class="alert-content" id="preview-content">
                ${contentInput.value || 'Mensagem do alerta será exibida aqui para todas as revendas.'}
            </div>
        `;
        
        // Inserir o preview após o formulário
        const form = document.querySelector('form');
        form.appendChild(previewContainer);

        function updateAlertPreview() {
            const title = titleInput.value || 'Título do Alerta';
            const content = contentInput.value || 'Mensagem do alerta será exibida aqui para todas as revendas.';
            
            document.getElementById('preview-title').innerHTML = 
                `<i class="fas fa-exclamation-triangle"></i> ${title}`;
            document.getElementById('preview-content').textContent = content;
        }

        titleInput.addEventListener('input', updateAlertPreview);
        contentInput.addEventListener('input', updateAlertPreview);

        // Efeitos nos inputs
        const inputs = document.querySelectorAll('.form-control');
        inputs.forEach(input => {
            input.addEventListener('focus', function() {
                this.style.transform = 'translateY(-2px)';
            });
            
            input.addEventListener('blur', function() {
                this.style.transform = 'translateY(0)';
            });
        });
    });
</script>

<main role="main" class="col-12 pt-4 px-4 main-content">
    <div class="container-fluid">
        <?php if (isset($_GET['m'])): ?>
            <div class="alert alert-primary" id="flash-msg">
                <h4><i class="fas fa-check-circle me-2"></i> Alerta Atualizado!</h4>
                <p class="mb-0">O alerta para revendas foi configurado com sucesso.</p>
            </div>
        <?php endif; ?>
        
        <h1 class="h3 mb-4 text-gray-800">
            <i class="fas fa-broadcast-tower me-2"></i>Alerta para Revendas
        </h1>
        
        <div class="row">
            <div class="col-lg-8">
                <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-bullhorn me-2"></i>Configurar Alerta do Sistema
                        </h6>
                    </div>
                    <div class="card-body">
                        <form method="post">
                            <div class="form-group">
                                <label class="control-label" for="title">
                                    <i class="fas fa-heading me-2"></i><strong>Título do Alerta</strong>
                                </label>
                                <div class="input-group">
                                    <input type="text" class="form-control" placeholder="Digite o título do alerta (ex: Manutenção, Atualização, Aviso)" name="title" value="<?= htmlspecialchars($title) ?>">
                                </div>
                                <small class="text-muted">Título que aparecerá destacado no alerta.</small>
                            </div>
                            
                            <div class="form-group">
                                <label class="control-label" for="content">
                                    <i class="fas fa-comment-alt me-2"></i><strong>Mensagem do Alerta</strong>
                                </label>
                                <div class="input-group">
                                    <input type="text" class="form-control" placeholder="Digite a mensagem completa do alerta para as revendas" name="content" value="<?= htmlspecialchars($content) ?>">
                                </div>
                                <small class="text-muted">Mensagem que será exibida para todas as revendas no sistema.</small>
                            </div>
                            
                            <div class="form-group mt-4">
                                <button type="submit" name="text" class="btn btn-primary btn-lg">
                                    <i class="fas fa-broadcast-tower me-2"></i>Publicar Alerta
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            
            <!-- Coluna de Informações -->
            <div class="col-lg-4">
                <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-info-circle me-2"></i>Informações
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="alert alert-warning" style="background: rgba(255, 107, 157, 0.1); border-color: var(--secondary);">
                            <h6><i class="fas fa-exclamation-triangle me-2"></i>Importante</h6>
                            <p class="mb-2">Este alerta será exibido para <strong>todas as revendas</strong> do sistema.</p>
                        </div>
                        
                        <div class="mt-3">
                            <h6><i class="fas fa-lightbulb me-2"></i>Dicas:</h6>
                            <ul class="list-unstyled text-small">
                                <li class="mb-2">• Use para avisos de manutenção</li>
                                <li class="mb-2">• Informe sobre atualizações</li>
                                <li class="mb-2">• Compartilhe novidades</li>
                                <li class="mb-2">• Alerte sobre problemas</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

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