<?php

// Lógica PHP para definir o domínio base.
$protocolo = isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? "https" : "http";
$host = $_SERVER['HTTP_HOST'];
$site_url = $protocolo . "://" . $host;

?>

<!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="css/painel.css">
    <link rel="stylesheet" href="<?php echo htmlspecialchars($site_url); ?>/css/menu.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;
            /* Adicione padding-left: 0; ou ajuste conforme necessário para o alinhamento */
            padding-left: 0; 
        }

        .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 */
        }
        
        .submenu.show-submenu {
            display: block; /* Mostra o submenu quando a classe está ativa */
        }

        /* --- NOVO CSS ADICIONADO PARA REMOVER BULLETS --- */
        .menu-list, .submenu {
            list-style: none; /* Remove os marcadores padrão da lista */
        }
        /* --- FIM DO NOVO CSS --- */

        /* Ajustes para o alinhamento dos links do menu e submenu */
        .menu-list li {
            padding-left: 20px; /* Adicione padding para os itens da lista principal se desejar */
        }
        .submenu li {
            padding-left: 0px; /* Ajuste o padding para os itens do submenu conforme necessário */
        }

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

            <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>
                    <a href="<?php echo htmlspecialchars($site_url); ?>/painel-de-gestao-candidato.php">Painel</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>
                    <a href="<?php echo htmlspecialchars($site_url); ?>/painel-de-gestao-empresa.php">Painel</a>
                </div>
            </div>

            <div class="dropdown-button2">
                <a href="https://selflix.com.br/selflix-video-curriculo/" class="botao-vagas">Vídeo Currículo</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()">
            <div></div>
            <div></div>
            <div></div>
        </button>
    </div>

    <div id="sideMenu" class="side-menu" style="background-color: #14949f;">
        <button class="close-btn" onclick="toggleMenu()">×</button>

        <div style="text-align: center; padding: 20px 0 30px;">
            <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>

        <ul class="menu-list">
            <li><a href="<?php echo htmlspecialchars($site_url); ?>/vagas.php" class="menu-link">Home</a></li>
            <li><a href="<?php echo htmlspecialchars($site_url); ?>/login.php" class="menu-link">Login</a></li>
            <li><a href="<?php echo htmlspecialchars($site_url); ?>/vagas.php" class="menu-link">Vagas</a></li>
            
            <li><a href="https://selflix.com.br/selflix-video-curriculo/" class="menu-link">Vídeo Currículo</a></li>
            
            <li>
                <a href="javascript:void(0);" class="menu-link has-sub" onclick="toggleSubMenu('candidatoSubMenu', this)">
                    Candidato ▾
                </a>
                <ul id="candidatoSubMenu" class="submenu">
                    <li><a href="<?php echo htmlspecialchars($site_url); ?>/cadastro_candidato.php" class="submenu-link">Cadastrar</a></li>
                    <li><a href="<?php echo htmlspecialchars($site_url); ?>/painel-de-gestao-candidato.php" class="submenu-link">Painel</a></li>
                </ul>
            </li>

            <li>
                <a href="javascript:void(0);" class="menu-link has-sub" onclick="toggleSubMenu('empresaSubMenu', this)">
                    Empresa ▾
                </a>
                <ul id="empresaSubMenu" class="submenu">
                    <li><a href="<?php echo htmlspecialchars($site_url); ?>/cadastro_empresa.php" class="submenu-link">Cadastrar</a></li>
                    <li><a href="<?php echo htmlspecialchars($site_url); ?>/painel-de-gestao-empresa.php" class="submenu-link">Painel</a></li>
                </ul>
            </li>
        </ul>

        <div class="social-icons" style="margin: 20px auto 0; justify-content: center;">
            <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>
    </div>

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

    <script>
        // Função para abrir e fechar o menu lateral
        function toggleMenu() {
            const menu = document.getElementById('sideMenu');
            const overlay = document.getElementById('overlay');
            menu.classList.toggle('open');
            overlay.classList.toggle('show');
            document.body.style.overflow = menu.classList.contains('open') ? 'hidden' : '';
        }

        // Função para expandir e recolher os submenus
        function toggleSubMenu(id, element) {
            const submenu = document.getElementById(id);
            const isCurrentlyOpen = submenu.classList.contains('show-submenu');

            // Fecha todos os submenus antes de abrir o novo
            document.querySelectorAll('.submenu.show-submenu').forEach(item => {
                item.classList.remove('show-submenu');
            });
            document.querySelectorAll('.has-sub.active').forEach(link => {
                link.classList.remove('active');
                link.innerHTML = link.innerHTML.replace('▴', '▾'); // Volta para a seta para baixo
            });

            // Se o submenu não estava aberto, agora o abre
            if (!isCurrentlyOpen) {
                submenu.classList.add('show-submenu');
                element.classList.add('active');
                element.innerHTML = element.innerHTML.replace('▾', '▴'); // Muda para a seta para cima
            }
        }
    </script>
</body>
</html>