<?php
    $file_path = 'a/note.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: note.php?m=' . $flash_message);
    }

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

<style>
/* === ESTILOS ESPECÍFICOS PARA NOTIFICAÇÕES 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;
}

.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: 25px !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;
}

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

.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: 12px 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: 8px;
    display: block;
}

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

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

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

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

        // 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);
        }
    });
</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="icon fa fa-check"></i> Notificações Atualizadas!</h4>
            </div>
        <?php endif; ?>
        
        <h1 class="h3 mb-4 text-gray-800">
            <i class="fas fa-bell me-2"></i>Notificações
        </h1>
        
        <!-- Content Row -->
        <div class="row">
            <!-- First Column -->
            <div class="col-lg-8">
                <!-- Custom codes -->
                <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>Enviar Notificações
                        </h6>
                    </div>
                    <div class="card-body">
                        <form method="post">
                            <div class="form-group mb-4">
                                <label class="control-label" for="title">
                                    <i class="fas fa-heading me-2"></i><strong>Título:</strong>
                                </label>
                                <div class="input-group">
                                    <input type="text" class="form-control" placeholder="Digite o título da notificação..." name="title" value="<?= htmlspecialchars($title) ?>">
                                </div>
                            </div>
                            <div class="form-group mb-4">
                                <label class="control-label" for="content">
                                    <i class="fas fa-comment me-2"></i><strong>Mensagem:</strong>
                                </label>
                                <div class="input-group">
                                    <input type="text" class="form-control" placeholder="Digite a mensagem da notificação..." name="content" value="<?= htmlspecialchars($content) ?>">
                                </div>
                            </div>
                            <button type="submit" name="text" class="btn btn-primary btn-lg">
                                <i class="fas fa-sync-alt me-2"></i>Atualizar Notificações
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

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