<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Dashboard</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.3/css/bulma.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
    <link href="/assets/css/custom-dashboard.css" rel="stylesheet"> <!-- CSS Customizado -->
    <style>
        /* Esconde os submenus por padrão */
        .menu-list ul {
            display: none;
        }
        /* Exibe o submenu quando ativo */
        .menu-list li.is-active > ul {
            display: block;
        }
        /* Ajusta o espaçamento e o estilo para responsividade */
        @media (max-width: 768px) {
            .sidebar {
                display: none;
            }
            .sidebar.is-active {
                display: block;
            }
        }
    </style>
</head>
<body class="dashboard-body">

<!-- Navbar -->
<nav class="navbar is-primary">
    <div class="navbar-brand">
        <a href="/dashboard" class="navbar-item">Admin Dashboard</a>
        <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="sidebarMenu">
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
        </a>
    </div>
    <div class="navbar-menu">
        <div class="navbar-end">
            <a class="navbar-item" href="#"><span class="icon"><i class="fas fa-user-circle"></i></span> Usuário</a>
            <a class="navbar-item" href="/logout"><span class="icon"><i class="fas fa-sign-out-alt"></i></span> Logout</a>
        </div>
    </div>
</nav>

<div class="columns is-gapless">
    <!-- Sidebar -->
    <aside id="sidebarMenu" class="column is-2 has-background-light sidebar">
        <div class="menu">
            <p class="menu-label">Menu</p>
            <ul class="menu-list">
                <li><a href="/dashboard"><span class="icon"><i class="fas fa-tachometer-alt"></i></span> Dashboard</a></li>

                <!-- Submenu para Anos com efeito de abrir/fechar -->
                <li>
                    <a class="has-icon" onclick="toggleMenu(this)"><span class="icon"><i class="fas fa-calendar-alt"></i></span> Anos</a>
                    <ul>
                        <li><a href="/anos">Listar Anos</a></li>
                        <li><a href="/anos/create">Cadastrar Novo Ano</a></li>
                    </ul>
                </li>

                <!-- Submenu para Tipos com efeito de abrir/fechar -->
                <li>
                    <a class="has-icon" onclick="toggleMenu(this)"><span class="icon"><i class="fas fa-tags"></i></span> Tipos</a>
                    <ul>
                        <li><a href="/tipos">Listar Tipos</a></li>
                        <li><a href="/tipos/create">Cadastrar Novo Tipo</a></li>
                    </ul>
                </li>

                <li>
                    <a class="has-icon" onclick="toggleMenu(this)"><span class="icon"><i class="fas fa-file-alt"></i></span> Emendas</a>
                    <ul>
                        <li><a href="/emenda">Listar Emendas</a></li>
                        <li><a href="/emenda/create">Cadastrar Nova Emenda</a></li>
<!--                        <li><a href="/emenda/edit">Editar Emenda</a></li>-->
                    </ul>
                </li>
                <li><a href="#"><span class="icon"><i class="fas fa-file-alt"></i></span> Documentos</a></li>
            </ul>
        </div>
    </aside>

    <!-- Main Content -->
    <div class="column is-10">
        <section class="section">
            <div class="container">
                <h1 class="title">Bem-vindo de volta!</h1>
                <p>Este é o painel administrativo do sistema. Aqui você pode gerenciar todas as informações relevantes.</p>
            </div>
        </section>

        <section class="section">
            <div class="columns">
                <!-- Cards de Estatísticas -->
                <div class="column is-3">
                    <div class="card has-background-primary has-text-white">
                        <div class="card-content">
                            <p class="title is-4">Total em R$ Emendas</p>
                            <p class="subtitle is-5">714k</p>
                        </div>
                    </div>
                </div>
                <div class="column is-3">
                    <div class="card has-background-link has-text-white">
                        <div class="card-content">
                            <p class="title is-4">Quantidade de Emendas</p>
                            <p class="subtitle is-5">1.35m</p>
                        </div>
                    </div>
                </div>
                <div class="column is-3">
                    <div class="card has-background-warning has-text-white">
                        <div class="card-content">
                            <p class="title is-4">Quantidade de Vereadores</p>
                            <p class="subtitle is-5">1.72m</p>
                        </div>
                    </div>
                </div>
                <div class="column is-3">
                    <div class="card has-background-danger has-text-white">
                        <div class="card-content">
                            <p class="title is-4">Visitas ao Site</p>
                            <p class="subtitle is-5">234</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="section">
            <div class="columns">
                <!-- Gráficos -->
                <div class="column is-6">
                    <div class="card">
                        <div class="card-content">
                            <p class="title is-4">Visitas Atuais</p>
                            <canvas id="currentVisitsChart"></canvas>
                        </div>
                    </div>
                </div>
                <div class="column is-6">
                    <div class="card">
                        <div class="card-content">
                            <p class="title is-4">Visitas ao Site</p>
                            <canvas id="websiteVisitsChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</div>

<footer class="footer has-background-primary">
    <div class="content has-text-centered has-text-white">
        © 2024 Sistema de Gestão
    </div>
</footer>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    // Função para abrir/fechar submenus
    function toggleMenu(element) {
        element.parentNode.classList.toggle("is-active");
    }

    // Ativar e desativar a sidebar no mobile
    document.addEventListener('DOMContentLoaded', () => {
        const burger = document.querySelector('.navbar-burger');
        const sidebar = document.querySelector('.sidebar');
        burger.addEventListener('click', () => {
            sidebar.classList.toggle('is-active');
            burger.classList.toggle('is-active');
        });

        // Configurações dos gráficos Chart.js
        const ctx1 = document.getElementById('currentVisitsChart').getContext('2d');
        const ctx2 = document.getElementById('websiteVisitsChart').getContext('2d');

        new Chart(ctx1, {
            type: 'pie',
            data: {
                labels: ['Orgânico', 'Referência', 'Mídia Social'],
                datasets: [{
                    data: [55, 25, 20],
                    backgroundColor: ['#1E90FF', '#32CD32', '#FFD700']
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: { position: 'top' }
                }
            }
        });

        new Chart(ctx2, {
            type: 'bar',
            data: {
                labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                datasets: [{
                    label: 'Visitas',
                    data: [300, 450, 300, 500, 400, 600, 700, 650, 450, 700, 750, 800],
                    backgroundColor: '#1E90FF'
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: { display: false }
                },
                scales: {
                    x: { beginAtZero: true },
                    y: { beginAtZero: true }
                }
            }
        });
    });
</script>
</body>
</html>
