<?php
require '../../conexao/acesso.php';
?>

<head>

    <title><?php echo $pageTitle; ?></title>

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">

    <link href="../../../assets/css/icons.min.css" rel="stylesheet" type="text/css" />

    <link rel="stylesheet" href="../style-lateral.css">

    <link href="../../../assets/css/style.css" rel="stylesheet" type="text/css" />

    <link href="../../../assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

    <link href="../../../assets/css/icons.min.css" rel="stylesheet" type="text/css" />

    <!--Material Icon -->
    <link rel="stylesheet" href="https://cdn.materialdesignicons.com/5.4.55/css/materialdesignicons.min.css">

    <link href="../../../assets/css/style.css" rel="stylesheet" type="text/css" />

</head>


<nav class="col-md-3 col-lg-2 sidebar">
    <h4>Configurações</h4>
    <ul style="margin-top: 35px;">
        <li class="accordion-item">
            <a class="accordion-header nav-link menu-link">
                <i class="fa fa-circle"></i>
                <span>Metas</span>
                <i style="margin-left: 25px;" class="fa fa-chevron-down"></i>
            </a>
            <div class="accordion-content">
                <a class="dropdown-item" href="../metas/listagem-metas.php">Cadastro de Metas</a>
                <a class="dropdown-item" href="../metas/lista_metas_definidas.php">Define Metas</a>
                <a class="dropdown-item" href="../metas/configuracao_metas.php">Escolha de Metas</a>
            </div>
        </li>
        <li class="nav-item">
            <a href="../usuarios/usuarios.php" class="nav-link menu-link">
                <i class="fa fa-circle"></i> Usuários
            </a>
        </li>
        <li class="nav-item">
            <a href="../funcionario/funcionarios.php" class="nav-link menu-link">
                <i class="fa fa-circle"></i> Funcionários
            </a>
        </li>
        <li class="nav-item">
            <a href="../dias_trabalho/dias_uteis.php" class="nav-link menu-link">
                <i class="fa fa-circle"></i> Dias Úteis
            </a>
        </li>
        <li class="nav-item">
            <a href="../departamento/departamentos.php" class="nav-link menu-link">
                <i class="fa fa-circle"></i> Departamentos
            </a>
        </li>
        <li class="nav-item">
            <a href="../permissoes/index.php" class="nav-link menu-link">
                <i class="fa fa-circle"></i> Permissões
            </a>
        </li>
        <li class="nav-item">
            <a href="../percentual/index.php" class="nav-link menu-link">
                <i class="fa fa-circle"></i> Percentual
            </a>
        </li>
        <li class="nav-item">
            <a href="../preferencias/index.php" class="nav-link menu-link">
                <i class="fa fa-circle"></i> Preferências
            </a>
        </li>
        <li class="nav-item">
            <a href="../personalizacao/index.php" class="nav-link menu-link">
                <i class="fa fa-circle"></i> Personalização
            </a>
        </li>
        <li class="nav-item">
            <a href="../operacoes/index.php" class="nav-link menu-link">
                <i class="fa fa-circle"></i> Operações
            </a>
        </li>
    </ul>

    <!-- Botão Voltar -->
    <button type="button" onclick="window.location.href='../../index.php'" class="btn btn-secondary btn-back">Voltar</button>
</nav>

<script>
    document.querySelectorAll('.accordion-header').forEach((item) => {
        item.addEventListener('click', function() {
            const parent = this.parentElement;
            parent.classList.toggle('active'); // Adiciona ou remove a classe 'active'
        });
    });
</script>