<?php
include 'config/db.php';

// Verificar la conexión
if (!$conexion) {
    die("Error al conectar a la base de datos: " . $conexion->connect_error);
}

// Consultar los factores de riesgo desde la base de datos
$sqlFactores = "SELECT nombre_enfermedad, descripcion FROM enfermedades";
$resultadoFactores = $conexion->query($sqlFactores);

if (!$resultadoFactores) {
    die("Error al consultar los factores de riesgo: " . $conexion->error);
}

// Procesar el formulario cuando se envíe
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $nombre = $_POST['nombre'];
    $documento = $_POST['documento'];
    $fecha_nacimiento = $_POST['fecha_nacimiento'];
    $edad = $_POST['edad'];
    $sexo = $_POST['sexo'] === 'Otros' ? $_POST['sexo_otro'] : $_POST['sexo'];
    $cargo = $_POST['cargo'] === 'Otros' ? $_POST['cargo_otro'] : $_POST['cargo'];
    $area = $_POST['area'] === 'Otros' ? $_POST['area_otro'] : $_POST['area'];
    $experiencia = $_POST['experiencia'];
    $fecha_ingreso = $_POST['fecha_ingreso'];
    $valoraciones_medicas = $_POST['valoraciones_medicas'];
    $factores_riesgo = isset($_POST['factores']) ? $_POST['factores'] : [];
    $observaciones = $_POST['observaciones'];

    $conexion->begin_transaction();

    try {
        // Insertar empleado
        $sqlEmpleado = "INSERT INTO empleados (nombre, documento, fecha_nacimiento, edad, sexo, cargo, experiencia, fecha_ingreso, valoraciones_medicas, area, observaciones) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)";
        $stmtEmpleado = $conexion->prepare($sqlEmpleado);

        if (!$stmtEmpleado) {
            throw new Exception("Error al preparar la consulta de empleado: " . $conexion->error);
        }

        $stmtEmpleado->bind_param(
            'sssssssssss',
            $nombre,
            $documento,
            $fecha_nacimiento,
            $edad,
            $sexo,
            $cargo,
            $experiencia,
            $fecha_ingreso,
            $valoraciones_medicas,
            $area,
            $observaciones
        );

        if (!$stmtEmpleado->execute()) {
            throw new Exception("Error al ejecutar la consulta de empleado: " . $stmtEmpleado->error);
        }

        $empleado_id = $stmtEmpleado->insert_id;

        // Insertar factores de riesgo
        foreach ($factores_riesgo as $criterio => $respuesta) {
            $sqlFactor = "INSERT INTO empleados_factores_riesgo (empleado_id, criterio, respuesta) VALUES (?, ?, ?)";
            $stmtFactor = $conexion->prepare($sqlFactor);

            if (!$stmtFactor) {
                throw new Exception("Error al preparar la consulta de factores: " . $conexion->error);
            }

            $stmtFactor->bind_param('iss', $empleado_id, $criterio, $respuesta);

            if (!$stmtFactor->execute()) {
                throw new Exception("Error al ejecutar la consulta de factores: " . $stmtFactor->error);
            }
        }

        $conexion->commit();
        echo "<script>alert('Empleado registrado correctamente.'); window.location.href = 'listar_empleados.php';</script>";
    } catch (Exception $e) {
        $conexion->rollback();
        echo "<script>alert('Error: " . $e->getMessage() . "');</script>";
    } finally {
        $stmtEmpleado->close();
        $conexion->close();
    }
}
?>

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Registrar Empleado</title>
    <link rel="stylesheet" href="css/style.css">
    <style>
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f7f7f7;
}

.sidebar {
    width: 250px;
    background-color: #2c3e50;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    color: white;
    padding: 20px 10px;
    transition: all 0.3s ease;
}

.sidebar h2 {
    font-size: 24px;
    color: #1abc9c;
    margin-bottom: 0px;
}

.sidebar ul {
    list-style: none;
    padding: 0;
}

.sidebar ul li {
    margin: 20px 0;
}

.sidebar ul li a {
    text-decoration: none;
    color: white;
    padding: 12px;
    display: block;
    font-size: 18px;
    transition: background-color 0.3s ease;
}

.sidebar ul li a:hover,
.sidebar ul li a.active {
    background-color: #1abc9c;
}

.main-content {
    margin-left: 270px;
    padding: 30px;
}

.main-content h1 {
    font-size: 28px;
    color: #0984e3;
    margin-bottom: 20px;
    text-align: center;
    padding-left: 30px;
    margin-top: 10px;
}

form {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-width: 100%;
    margin: 0 auto;
}

form label {
    font-size: 14px;
    color: #34495e;
    margin-bottom: 5px;
    display: block;
}

form input[type="text"],
form input[type="date"],
form select,
form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

form textarea {
    resize: vertical;
}

form button {
    width: 100%;
    background-color: #1abc9c;
    color: white;
    font-size: 16px;
    padding: 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

form button:hover {
    background-color: #16a085;
}

.table-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 20px;
    overflow-x: auto; /* Permite scroll horizontal si es necesario */
    width: 100%; /* Asegura que no se desborde */
}

.table-container h3 {
    margin-bottom: 10px;
    font-size: 20px;
    color: #2c3e50;
    text-align: center;
}

table {
    width: 100%; /* Tabla ocupa el ancho del contenedor */
    max-width: 800px; /* Limita el ancho máximo */
    border-collapse: collapse;
    background-color: white;
    border: 1px solid #ddd;
}

table th,
table td {
    text-align: center;
    vertical-align: middle;
    padding: 8px;
    font-size: 14px;
    border: 1px solid #ddd;
}

table th {
    background-color: #2c3e50;
    color: white;
    word-wrap: break-word; /* Asegura que el texto largo no se salga */
    white-space: normal; /* Permite el texto multilínea */
}

table td {
    word-wrap: break-word;
    white-space: normal;
}

table td input[type="radio"] {
    margin: 0 auto;
    display: block;
}

/* Estilo responsivo */
@media (max-width: 768px) {
    table th,
    table td {
        font-size: 12px;
        padding: 6px;
    }

    .table-container h3 {
        font-size: 18px;
    }
}

@media (max-width: 576px) {
    .sidebar {
        position: static;
        width: 100%;
        height: auto;
        padding: 10px 0;
    }

    .main-content {
        margin-left: 0;
        padding: 10px;
    }

    .table-container {
        overflow-x: auto; /* Scroll horizontal para evitar desbordamiento */
    }

    table {
        width: 100%; /* Asegura que la tabla ocupe todo el ancho disponible */
    }

    table th,
    table td {
        font-size: 12px;
        padding: 5px;
    }

    table thead {
        display: table-header-group; /* Mantiene los encabezados visibles */
    }
}

/* Oculta el botón y el menú por defecto */
.menu-button {
    display: none;
}

/* Muestra el botón en pantallas pequeñas */
@media (max-width: 768px) {
    .menu-button {
        display: block;
        position: fixed;
        top: 5px;
        left: 20px;
        font-size: 24px;
        background-color: #1abc9c;
        color: white;
        border: none;
        padding: 10px 15px;
        border-radius: 5px;
        cursor: pointer;
        z-index: 1000;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        transition: background-color 0.3s ease;
    }

    .menu-button:hover {
        background-color: #16a085;
    }

    .menu-sidebar {
        position: fixed;
        top: 0;
        left: -300px;
        width: 250px;
        height: 100vh;
        background-color: #2c3e50;
        color: white;
        padding: 20px 10px;
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
        z-index: 999;
        overflow: hidden;
        
    }

    .menu-sidebar.active {
        left: 0;
    }

    .menu-sidebar h2 {
        text-align: center;
        font-size: 24px;
        color: #1abc9c;
        margin-bottom: 30px;
        margin-top: 40px;
        
    }
    
    /* Ocultar el título del menú móvil en pantallas grandes */
    .menu-sidebar h2.menu-title {
        display: none; /* Ocultar el título por defecto */
    }
    
    /* Mostrar el título solo en pantallas pequeñas */
    @media (max-width: 768px) {
        .menu-sidebar h2.menu-title {
            display: block; /* Mostrar el título en móviles */
            text-align: center;
            font-size: 24px;
            color: #1abc9c;
            margin-bottom: 20px;
        }
    }

    .menu-sidebar ul {
        list-style: none;
        padding: 0;
    }

    .menu-sidebar ul li {
        margin: 15px 0;
    }

    .menu-sidebar ul li a {
        text-decoration: none;
        color: white;
        font-size: 18px;
        padding: 10px 15px;
        display: block;
        transition: background-color 0.3s ease;
    }

    .menu-sidebar ul li a:hover {
        background-color: #1abc9c;
    }

    .logout-button {
        background-color: #e74c3c;
        color: white;
        border: none;
        padding: 10px 15px;
        font-size: 16px;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s ease;
        width: 100%;
        text-align: center;
    }

    .logout-button:hover {
        background-color: #c0392b;
    }
}

    </style>
   </head>
<body>
   
    <div class="sidebar">
        <h2>PYP Conservación Auditiva</h2>
        <ul>
            <li><a href="index.php">Inicio</a></li>
            <li><a href="empleados.php" class="active">Registrar Empleado</a></li>
            <li><a href="listar_empleados.php">Gestionar Empleados</a></li>
        </ul>
    </div>

    <div class="main-content">
        <h1>Registrar Empleado</h1>
        <form action="empleados.php" method="POST">
            <!-- Campos básicos del empleado -->
            <label for="nombre">Nombre Completo:</label>
            <input type="text" id="nombre" name="nombre" placeholder="Escribe el nombre completo" required>

            <label for="documento">Número de Documento:</label>
            <input type="text" id="documento" name="documento" placeholder="Escribe el número de documento" required>

            <label for="fecha_nacimiento">Fecha de Nacimiento:</label>
            <input type="date" id="fecha_nacimiento" name="fecha_nacimiento" required>

            <label for="edad">Edad:</label>
            <input type="number" id="edad" name="edad" placeholder="Escribe la edad" required>

            <label for="sexo">Sexo:</label>
            <select id="sexo" name="sexo">
                <option value="Masculino">Masculino</option>
                <option value="Femenino">Femenino</option>
                <option value="Otros">Otros</option>
            </select>

            <label for="cargo">Cargo:</label>
            <select id="cargo" name="cargo" required>
                <option value="">Seleccione un cargo</option>
                <option value="Gerente">Gerente</option>
                <option value="Supervisor">Supervisor</option>
                <option value="Operario">Operario</option>
                <option value="Auxiliar Administrativo">Auxiliar Administrativo</option>
                <option value="Otros">Otros</option>
            </select>
            <input type="text" id="cargo_otro" name="cargo_otro" placeholder="Escriba el cargo" style="display: none; margin-top: 10px;">
            
            <label for="area">Área:</label>
            <select id="area" name="area" required>
                <option value="">Seleccione un área</option>
                <option value="Producción">Producción</option>
                <option value="Logística">Logística</option>
                <option value="Recursos Humanos">Recursos Humanos</option>
                <option value="Ventas">Ventas</option>
                <option value="Otros">Otros</option>
            </select>
            <input type="text" id="area_otro" name="area_otro" placeholder="Escriba el área" style="display: none; margin-top: 10px;">

            <label for="experiencia">Tiempo de Experiencia (años):</label>
            <select id="experiencia" name="experiencia">
                <?php for ($i = 0; $i <= 30; $i++): ?>
                    <option value="<?= $i ?>"><?= $i ?> año(s)</option>
                <?php endfor; ?>
            </select>

            <label for="fecha_ingreso">Fecha de Ingreso:</label>
            <input type="date" id="fecha_ingreso" name="fecha_ingreso" required>

            <label for="valoraciones_medicas">Valoraciones Médicas:</label>
            <textarea id="valoraciones_medicas" name="valoraciones_medicas" rows="4" placeholder="Describa las valoraciones médicas"></textarea>

    <div class="table-container">
        <h3>Factores de Riesgo</h3>
        <table>
            <thead>
                <tr>
                    <th>Criterio</th>
                    <th>Descripción</th>
                    <th>Sí</th>
                    <th>No</th>
                </tr>
            </thead>
            <tbody>
                <?php while ($factor = $resultadoFactores->fetch_assoc()): ?>
                    <tr>
                        <td data-label="Criterio"><?php echo $factor['nombre_enfermedad']; ?></td>
                        <td data-label="Descripción"><?php echo $factor['descripcion']; ?></td>
                        <td data-label="Sí">
                            <input type="radio" name="factores[<?php echo $factor['nombre_enfermedad']; ?>]" value="Sí">
                        </td>
                        <td data-label="No">
                            <input type="radio" name="factores[<?php echo $factor['nombre_enfermedad']; ?>]" value="No">
                        </td>
                    </tr>
                <?php endwhile; ?>
            </tbody>
        </table>
        </div>
    
                <label for="observaciones">Observaciones:</label>
                <textarea id="observaciones" name="observaciones" rows="4" placeholder="Escribe observaciones relevantes"></textarea>
    
                <button type="submit">Registrar Empleado</button>
            </form>
        </div>
        <script>
        // Mostrar el campo de texto si selecciona "Otros" en Cargo
        document.getElementById('cargo').addEventListener('change', function () {
            const cargoOtro = document.getElementById('cargo_otro');
            cargoOtro.style.display = this.value === 'Otros' ? 'block' : 'none';
        });
    
        // Mostrar el campo de texto si selecciona "Otros" en Área
        document.getElementById('area').addEventListener('change', function () {
            const areaOtro = document.getElementById('area_otro');
            areaOtro.style.display = this.value === 'Otros' ? 'block' : 'none';
        });
        </script>
        <script>
    function toggleMenu() {
        const menu = document.getElementById('menuSidebar');
        menu.classList.toggle('active');
    }
</script>

    </body>
</html>