<?php
include 'modelo.php';
require_once 'config.php';
// Asegúrate de que se llama session_start() solo una vez
if (session_status() === PHP_SESSION_NONE) {
    session_start();
}

// Definir la variable $usuarioAutenticado
$usuarioAutenticado = isset($_SESSION['usuario_correo']);

// Obtener los nombres e ids de usuarios con rol 2 (productores)
$query = "SELECT id, nombre FROM usuarios WHERE rol = 2";
$resultado = $conexion->obtenerDatos($query);

// Almacenar los nombres e ids en un array
$usuarios_productores = [];
while ($fila = $resultado->fetch_assoc()) {
    $usuarios_productores[] = [
        'id' => $fila['id'],
        'nombre' => $fila['nombre']
    ];
}

// Obtener los nombres e ids de usuarios con rol 3 (profesionales)
$query_profesionales = "SELECT id, nombre FROM usuarios WHERE rol = 3";
$resultado_profesionales = $conexion->obtenerDatos($query_profesionales);

// Almacenar los nombres e ids de profesionales en un array
$usuarios_profesionales = [];
while ($fila = $resultado_profesionales->fetch_assoc()) {
    $usuarios_profesionales[] = [
        'id' => $fila['id'],
        'nombre' => $fila['nombre']
    ];
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/estilo_HeaderFooter.css">
    <link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet">
</head>
<body>
<header>
    <div class="arriba">
        <div class="logo-header">
            <a href="./main.php"><img src="./imagenes/logoFooter.png" alt="Logo"></a>
        </div>
        <div class="logo-usuario">
            <?php if ($usuarioAutenticado): ?>
                <a id="logoutBtn" href="logout.php"><img src="./imagenes/logout.png" alt="Cerrar sesión"></a>
            <?php else: ?>
                <a id="loginBtn"><img src="./imagenes/logoIniciarSesion.png" alt="Iniciar sesión"></a>
            <?php endif; ?>
        </div>
    </div>
    <div class="iconofrase-container">
        <p>Desde la producción hasta el tratamiento</p>
    </div>
    <div class="nav-container">
        <a class="nav-item" href="./productores.php">PRODUCTORES</a>
        <a class="nav-item" href="./profesionales.php">PROFESIONALES</a>
        <a class="nav-item" href="./normativa.php">NORMATIVA</a>
        <a class="nav-item" href="./participa.php">PARTICIPA</a>
        <!-- Dropdown para ESPACIO PRODUCTORES -->
        <div class="dropdown">
            <a class="nav-item dropdown" href="#">ESPACIO PRODUCTORES</a>
            <div class="dropdown-content">
                <?php foreach ($usuarios_productores as $usuario): ?>
                    <a href="espacio_productores.php?usuario_id=<?php echo $usuario['id']; ?>">
                        <?php echo htmlspecialchars($usuario['nombre']); ?>
                    </a>
                <?php endforeach; ?>
            </div>
        </div>
        <!-- Dropdown para ESPACIO PROFESIONALES -->
        <div class="dropdown">
            <a class="nav-item dropdown" href="#">ESPACIO PROFESIONALES</a>
            <div class="dropdown-content">
                <?php foreach ($usuarios_profesionales as $usuario): ?>
                    <a href="espacio_profesionales.php?usuario_id=<?php echo $usuario['id']; ?>">
                        <?php echo htmlspecialchars($usuario['nombre']); ?>
                    </a>
                <?php endforeach; ?>
            </div>
        </div>
    </div>
    <!-- Modal de Login -->
    <div id="loginModal" class="modal">
        <div class="modal-content">
            <span class="close" id="loginClose">&times;</span>
            <img src="./imagenes/logomodal.png" alt="">
            <form method="POST" action="login-registro.php">
                <label for="correo">Correo:</label>
                <input type="email" id="correo" name="correo" required>
                <br>
                <label for="contrasena">Contraseña:</label>
                <input type="password" id="contrasena" name="contrasena" required>
                <br>
                <p>¿No tienes cuenta? <a id="registerBtn">Regístrate</a></p>
                <button type="submit" name="login">Iniciar sesión</button>
            </form>
        </div>
    </div>
    <!-- Modal de Registro -->
    <div id="registerModal" class="modal">
        <div class="modal-content">
            <span class="close" id="registerClose">&times;</span>
            <img src="./imagenes/logomodal.png" alt="">
            <form method="POST" action="login-registro.php">
                <label for="nombre">Nombre:</label>
                <input type="text" id="nombre" name="nombre" required>
                <br>
                <label for="apellido">Apellido:</label>
                <input type="text" id="apellido" name="apellido" required>
                <br>
                <label for="correo">Correo:</label>
                <input type="email" id="correo" name="correo" required>
                <br>
                <label for="contrasena">Contraseña:</label>
                <input type="password" id="contrasena" name="contrasena" required>
                <br>
                <button type="submit" name="register">Registrar</button>
            </form>
        </div>
    </div>
    <script>
        // Obtener los elementos
        var loginModal = document.getElementById("loginModal");
        var registerModal = document.getElementById("registerModal");
        var loginBtn = document.getElementById("loginBtn");
        var registerBtn = document.getElementById("registerBtn");
        var loginClose = document.getElementById("loginClose");
        var registerClose = document.getElementById("registerClose");

        // Mostrar los modales al hacer click en los botones
        loginBtn.onclick = function() {
            loginModal.style.display = "block";
        }

        // Mostrar el modal de registro y cerrar el de login
        registerBtn.onclick = function(event) {
            event.preventDefault(); // Prevenir el envío del formulario si es un botón dentro de un formulario
            loginModal.style.display = "none"; // Cerrar el modal de login
            registerModal.style.display = "block"; // Abrir el modal de registro
        }

        // Cerrar los modales cuando se presiona la "X"
        loginClose.onclick = function() {
            loginModal.style.display = "none";
        }

        registerClose.onclick = function() {
            registerModal.style.display = "none";
        }

        // Cerrar los modales si se hace click fuera del contenido del modal
        window.onclick = function(event) {
            if (event.target == loginModal) {
                loginModal.style.display = "none";
            }
            if (event.target == registerModal) {
                registerModal.style.display = "none";
            }
        }

        document.addEventListener("DOMContentLoaded", function() {
            // Obtener todos los enlaces de la barra de navegación
            let navItems = document.querySelectorAll(".nav-item");

            // Verificar la URL actual y resaltar el enlace correspondiente
            let currentPath = window.location.pathname.split("/").pop();
            
            navItems.forEach(item => {
                let itemPath = item.getAttribute("href").split("/").pop();
                if (currentPath === itemPath) {
                    item.classList.add("active");
                }

                // Agregar evento de clic para cambiar la clase activa
                item.addEventListener("click", function() {
                    navItems.forEach(nav => nav.classList.remove("active")); // Quitar clase a todos
                    this.classList.add("active"); // Agregar clase al clicado
                });
            });
        });
    </script>
</header>
</body>
</html>
