<?php
// menu-paineis.php

// Iniciar a sessão se ainda não foi iniciada (importante para menus dinâmicos)
if (session_status() == PHP_SESSION_NONE) {
    session_start();
}

// Pega o domínio do servidor automaticamente
$protocolo = isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? "https" : "http";
$host = $_SERVER['HTTP_HOST'];
$site_url = $protocolo . "://" . $host;

$usuario_logado = isset($_SESSION['usuario_logado']) && $_SESSION['usuario_logado'] === true;
$role_usuario = $_SESSION['role'] ?? null;
$nome_usuario_sessao = $_SESSION['usuario_nome'] ?? 'Visitante';

// Helper para obter o primeiro nome
function getPrimeiroNome($nomeCompleto) {
    $partes = explode(' ', trim($nomeCompleto));
    return $partes[0];
}

?>
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Selflix Vagas</title>
    <link rel="stylesheet" href="<?php echo htmlspecialchars($site_url); ?>/css/menu-paineis.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* CSS para garantir que os elementos comecem fechados */
        .side-menu {
            left: -280px; /* Esconde o menu fora da tela */
            transition: left 0.3s ease;
            padding-left: 0; 
            display: flex;
            flex-direction: column;
            align-items: flex-start; /* Alinha os itens à esquerda */
            text-align: left; /* Alinha o texto à esquerda */
            justify-content: flex-start;
        }

        .side-menu.open {
            left: 0; /* Move o menu para a tela */
        }
        
        .submenu {
            display: none; /* Esconde todos os submenus por padrão */
            padding-left: 0; /* Remove o padding padrão do submenu */
            width: 100%;
        }
        
        .submenu.show-submenu {
            display: block; /* Mostra o submenu quando a classe está ativa */
        }

        /* Remove os marcadores padrão da lista */
        .menu-list, .submenu {
            list-style: none;
            padding: 0;
            width: 100%;
        }
        
        /* Ajustes para o alinhamento dos links do menu e submenu */
        .menu-list li {
            padding-left: 0;
        }
        .submenu li {
            padding-left: 0px;
        }

        /* --- CSS para o layout no DESKTOP (LOGO ESQUERDA, BOTÕES CENTRO, ÍCONES DIREITA) --- */
        .topo {
            display: flex;
            justify-content: space-between; /* Espaça o logo, botões e ícones */
            align-items: center;
            padding: 10px 20px;
            width: 100%;
            box-sizing: border-box;
        }
        
        .logo-container {
            flex-shrink: 0; /* Evita que o logo encolha */
        }

        .dropdown-container {
            display: flex;
            gap: 10px;
            /* Centraliza este bloco entre o logo e os ícones */
            margin: 0 auto; 
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            z-index: 1;
        }

        .social-icons {
            flex-shrink: 0;
            margin-left: auto;
            z-index: 2;
        }
        
        .menu-icon {
            display: none; /* Esconde o ícone de hambúrguer no desktop */
            z-index: 3;
            width: 40px;
            height: 40px;
            padding: 8px;
            box-sizing: border-box;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            background: transparent;
            border: none;
            cursor: pointer;
            position: relative;
        }

        .menu-icon div {
            width: 100%;
            height: 3px;
            background-color: white;
            margin: 6px 0;
            transition: 0.4s;
        }

        /* Ajusta o tamanho dos botões Home e Ver Vagas */
        .dropdown-button2 a {
            padding: 10px 20px !important;
        }

        /* CSS para aproximar os ícones no menu mobile e centralizá-los */
        #sideMenu .social-icons {
            justify-content: center; /* Centraliza os ícones horizontalmente */
            gap: 5px; /* Define um espaçamento de 5px entre os ícones */
            margin: 20px auto 0; /* Centraliza o bloco de ícones e mantém a margem superior */
        }

        /* Remove margens laterais dos itens individuais se estiver usando 'gap' no pai */
        #sideMenu .social-icons .icon-space {
            margin: 0; 
        }

        /* Adiciona padding horizontal aos links do menu para centralizá-los */
        .side-menu .menu-link {
            padding: 10px 20px; /* Adiciona 20px de padding lateral */
            width: 100%;
        }

        /* --- Estilos específicos para o MOBILE --- */
        @media (max-width: 768px) {
            .dropdown-container {
                display: none; /* Esconde este elemento no mobile */
            }
            .social-icons {
                /* Exibe e centraliza os ícones sociais no menu mobile */
                display: flex; 
                margin: 30px auto 0;
                justify-content: center;
                gap: 5px;
            }
            .topo {
                justify-content: center; /* Centraliza o logo no espaço restante */
                position: relative; /* Necessário para posicionar o menu-icon absolutamente */
            }
            .menu-icon {
                display: block; /* Mostra o ícone de hambúrguer no mobile */
                position: absolute; /* Posição absoluta para o botão de hambúrguer */
                right: 20px; /* Alinha à direita */
                top: 50%; /* Centraliza verticalmente */
                transform: translateY(-50%); /* Ajusta para o centro exato vertical */
            }
            .logo-container {
                margin: 0 auto; /* Centraliza o logotipo */
                flex-grow: 0;
            }
            
            /* Ajuste para alinhar todos os links do menu lateral */
            #sideMenu a.menu-link,
            #sideMenu .submenu a.submenu-link {
                padding-left: 20px; /* Uniformiza o padding para todos os links */
            }
            #candidatoSubMenuSide,
            #empresaSubMenuSide {
                padding-left: 20px;
            }

            /* Efeito de hover transparente para todos os links do menu lateral */
            #sideMenu a.menu-link:hover,
            #sideMenu .submenu a.submenu-link:hover {
                background-color: transparent;
            }
        }
    </style>
</head>
<body>
    <div class="topo">
        <div class="logo-container">
            <a href="<?php echo htmlspecialchars($site_url); ?>/vagas.php">
                <img src="<?php echo htmlspecialchars($site_url); ?>/img/id/logotipo-selflix-branco.png" alt="Logotipo Selflix" class="logo">
            </a>
        </div>
        
        <div class="dropdown-container">
            <div class="dropdown-button2">
                <a href="<?php echo htmlspecialchars($site_url); ?>/vagas.php" class="botao-vagas">Home</a>
            </div>

            <?php if (!$usuario_logado): ?>
                <div class="dropdown">
                    <button class="dropdown-button">Candidato</button>
                    <div class="dropdown-content">
                        <a href="<?php echo htmlspecialchars($site_url); ?>/login.php">Login</a>
                        <a href="<?php echo htmlspecialchars($site_url); ?>/cadastro_candidato.php">Cadastrar</a>
                    </div>
                </div>
                <div class="dropdown">
                    <button class="dropdown-button">Empresa</button>
                    <div class="dropdown-content">
                        <a href="<?php echo htmlspecialchars($site_url); ?>/login.php">Login</a>
                        <a href="<?php echo htmlspecialchars($site_url); ?>/cadastro_empresa.php">Cadastrar</a>
                    </div>
                </div>
            <?php else: ?>
                <?php
                $primeiro_nome = getPrimeiroNome($nome_usuario_sessao);
                if ($role_usuario === 'Candidatos'): ?>
                    <div class="dropdown">
                        <button class="dropdown-button"><?php echo htmlspecialchars($primeiro_nome); ?> (Candidato)</button>
                        <div class="dropdown-content">
                            <a href="<?php echo htmlspecialchars($site_url); ?>/painel-de-gestao-candidato.php">Meu Painel</a>
                            <a href="<?php echo htmlspecialchars($site_url); ?>/editar_cadastro.php">Editar Cadastro</a>
                            <a href="<?php echo htmlspecialchars($site_url); ?>/listar_candidaturas.php">Minhas Candidaturas</a>
                        </div>
                    </div>
                <?php elseif ($role_usuario === 'Empresas'): ?>
                     <div class="dropdown">
                         <button class="dropdown-button"><?php echo htmlspecialchars($primeiro_nome); ?> (Empresa)</button>
                         <div class="dropdown-content">
                             <a href="<?php echo htmlspecialchars($site_url); ?>/painel-de-gestao-empresa.php">Meu Painel</a>
                             <a href="<?php echo htmlspecialchars($site_url); ?>/editar_empresa.php" class="menu-link">Editar Empresa</a>
                             <a href="<?php echo htmlspecialchars($site_url); ?>/criar-anuncio-pago.php" class="menu-link">Criar Anúncio Pago</a>
                             <a href="<?php echo htmlspecialchars($site_url); ?>/criar-anuncio-gratuito.php" class="menu-link">Criar Anúncio Gratuito</a>
                             <a href="<?php echo htmlspecialchars($site_url); ?>/listar-candidatos.php" class="menu-link">Ver Candidatos</a>
                         </div>
                     </div>
                <?php elseif ($role_usuario === 'Administradores' || $role_usuario === 'Administrador'): ?>
                    <div class="dropdown">
                        <button class="dropdown-button"><?php echo htmlspecialchars($primeiro_nome); ?> (Admin)</button>
                        <div class="dropdown-content">
                            <a href="<?php echo htmlspecialchars($site_url); ?>/painel-adm.php">Painel ADM</a>
                            <a href="<?php echo htmlspecialchars($site_url); ?>/listar_empresas.php">Gerenciar Empresas</a>
                            <a href="<?php echo htmlspecialchars($site_url); ?>/listar-candidato.php">Gerenciar Candidatos</a>
                        </div>
                    </div>
                <?php endif; ?>
            <?php endif; ?>

            <div class="dropdown2">
                <a href="<?php echo htmlspecialchars($site_url); ?>/vagas.php" class="botao-vagas">Ver Vagas</a>
            </div>
        </div>
        
        <div class="social-icons">
            <div class="icon-space">
                <a href="https://selflix.com.br" target="_blank">
                    <i class="fa-solid fa-globe"></i>
                </a>
            </div>
            <div class="icon-space">
                <a href="https://www.linkedin.com/company/selflix/" target="_blank">
                    <i class="fa-brands fa-linkedin"></i>
                </a>
            </div>
            <div class="icon-space">
                <a href="https://www.youtube.com/channel/UC2pkk3m-xwW3pGWDI9BYVjQ" target="_blank">
                    <i class="fa-brands fa-youtube"></i>
                </a>
            </div>
            <div class="icon-space">
                <a href="https://www.instagram.com/meuselflix/" target="_blank">
                    <i class="fa-brands fa-instagram"></i>
                </a>
            </div>
            <div class="icon-space">
                <a href="https://www.facebook.com/selflix?mibextid=ZbWKwL" target="_blank">
                    <i class="fa-brands fa-facebook"></i>
                </a>
            </div>
        </div>
        
        <button class="menu-icon" onclick="toggleMenu()" aria-label="Abrir menu" aria-expanded="false">
            <div></div><div></div><div></div>
        </button>
    </div>

    <div id="sideMenu" class="side-menu">
        <button class="close-btn" onclick="toggleMenu()" aria-label="Fechar menu">×</button>
        <div style="text-align: center; padding: 20px 0 30px; width: 100%;">
            <a href="<?php echo htmlspecialchars($site_url); ?>/vagas.php">
                <img src="<?php echo htmlspecialchars($site_url); ?>/img/id/logotipo-selflix-branco.png" alt="Logotipo Selflix" style="max-width: 150px; height: auto;">
            </a>
        </div>

        <?php if (!$usuario_logado): ?>
            <a href="<?php echo htmlspecialchars($site_url); ?>/vagas.php" class="menu-link"><i class="fas fa-home"></i> Home</a>
            <a href="<?php echo htmlspecialchars($site_url); ?>/login.php" class="menu-link"><i class="fas fa-sign-in-alt"></i> Login</a>
            <a href="<?php echo htmlspecialchars($site_url); ?>/vagas.php" class="menu-link"><i class="fas fa-search"></i> Vagas</a>
            <a href="<?php echo htmlspecialchars($site_url); ?>/videocurriculo.php" class="menu-link"><i class="fas fa-video"></i> Vídeo Currículo</a>
            <a href="javascript:void(0);" class="menu-link has-sub" onclick="toggleSubMenu('candidatoSubMenuSide', this)"><i class="fas fa-user-tie"></i> Candidato <span class="arrow">▾</span></a>
            <div id="candidatoSubMenuSide" class="submenu">
                <a href="<?php echo htmlspecialchars($site_url); ?>/cadastro_candidato.php" class="submenu-link">Cadastrar</a>
            </div>
            <a href="javascript:void(0);" class="menu-link has-sub" onclick="toggleSubMenu('empresaSubMenuSide', this)"><i class="fas fa-building"></i> Empresa <span class="arrow">▾</span></a>
            <div id="empresaSubMenuSide" class="submenu">
                <a href="<?php echo htmlspecialchars($site_url); ?>/cadastro_empresa.php" class="submenu-link">Cadastrar</a>
            </div>
        <?php else: ?>
            <a href="#" class="menu-link" style="pointer-events: none; color: #a0d8de;"><i class="fas fa-user-circle"></i> Olá, <?php echo htmlspecialchars($primeiro_nome); ?>!</a>
            <a href="<?php echo htmlspecialchars($site_url); ?>/painel-de-gestao-candidato.php" class="menu-link"><i class="fas fa-tachometer-alt"></i> Meu Painel</a>
            <a href="<?php echo htmlspecialchars($site_url); ?>/editar_cadastro.php" class="menu-link"><i class="fas fa-user-edit"></i> Editar Cadastro</a>
            <a href="<?php echo htmlspecialchars($site_url); ?>/listar_candidaturas.php" class="menu-link"><i class="fas fa-briefcase"></i> Minhas Candidaturas</a>
            <a href="<?php echo htmlspecialchars($site_url); ?>/logout.php" class="menu-link"><i class="fas fa-sign-out-alt"></i> Sair</a>
        <?php endif; ?>
        
        <a href="<?php echo htmlspecialchars($site_url); ?>/vagas.php" class="menu-link"><i class="fas fa-search"></i> Ver Todas as Vagas</a>

        <div class="social-icons" style="margin: 30px auto 0; justify-content: center;">
            <div class="icon-space">
                <a href="https://selflix.com.br" target="_blank" aria-label="Site Oficial">
                    <i class="fa-solid fa-globe"></i>
                </a>
            </div>
            <div class="icon-space"><a href="https://www.linkedin.com/company/selflix/" target="_blank" aria-label="LinkedIn"><i class="fa-brands fa-linkedin"></i></a></div>
            <div class="icon-space"><a href="https://www.youtube.com/channel/UC2pkk3m-xwW3pGWDI9BYVjQ" target="_blank" aria-label="Youtube"><i class="fa-brands fa-youtube"></i></a></div>
            <div class="icon-space"><a href="https://www.instagram.com/meuselflix/" target="_blank" aria-label="Instagram"><i class="fa-brands fa-instagram"></i></a></div>
            <div class="icon-space"><a href="https://www.facebook.com/selflix?mibextid=ZbWKwL" target="_blank" aria-label="Facebook"><i class="fa-brands fa-facebook"></i></a></div>
        </div>
    </div>

    <div id="overlay" class="overlay" onclick="toggleMenu()"></div>

    <script>
    function toggleMenu() {
        const menu = document.getElementById('sideMenu');
        const overlay = document.getElementById('overlay');
        const menuIcon = document.querySelector('.menu-icon');
        const isOpen = menu.classList.toggle('open');
        
        overlay.classList.toggle('show', isOpen);
        menuIcon.classList.toggle('open', isOpen);
        menuIcon.setAttribute('aria-expanded', isOpen.toString());
        document.body.style.overflow = isOpen ? 'hidden' : '';
    }

    function toggleSubMenu(submenuId, element) {
        const submenu = document.getElementById(submenuId);
        const allSubmenus = document.querySelectorAll('.side-menu .submenu');
        const allMenuLinksWithSub = document.querySelectorAll('.side-menu .has-sub');
        const arrowSpan = element.querySelector('.arrow');

        const isCurrentlyOpen = submenu.classList.contains('show-submenu');

        allSubmenus.forEach(item => {
            if (item.id !== submenuId && item.classList.contains('show-submenu')) {
                item.classList.remove('show-submenu');
                const correspondingLink = Array.from(allMenuLinksWithSub).find(link => link.getAttribute('onclick').includes(item.id));
                if (correspondingLink) {
                    correspondingLink.classList.remove('active');
                    const otherArrow = correspondingLink.querySelector('.arrow');
                    if (otherArrow) otherArrow.innerHTML = '▾';
                }
            }
        });
        
        if (isCurrentlyOpen) {
            submenu.classList.remove('show-submenu');
            element.classList.remove('active');
            if (arrowSpan) arrowSpan.innerHTML = '▾';
        } else {
            submenu.classList.add('show-submenu');
            element.classList.add('active');
            if (arrowSpan) arrowSpan.innerHTML = '▴';
        }
    }
    
    document.addEventListener('DOMContentLoaded', function() {
        const sideMenuLinks = document.querySelectorAll('#sideMenu a.menu-link:not(.has-sub), #sideMenu a.submenu-link');
        sideMenuLinks.forEach(link => {
            const iconClass = link.querySelector('i') ? link.querySelector('i').className : null;
            if (iconClass) {
                link.innerHTML = `<i class="${iconClass}"></i> ${link.textContent.trim()}`;
            }
        });
    });
    </script>
</body>
</html>