<?php
include("conexion.php");
include("funciones.php");

// Código para leer el inicio de sesión 
session_start();

if (!isset($_SESSION['usuario'])) {
    header('Location: login.php');
    exit;
}

// Reiniciar los resultados de las consultas para reutilizarlos
mysqli_data_seek($resultado_turnos ?? null, 0);
mysqli_data_seek($resultado_cargos ?? null, 0);

// Guardar el registro
if (isset($_POST["guardar"])) {
    // Recibir y sanitizar datos
    $nombre = mysqli_real_escape_string($conexion, $_POST["nombre"]);
    $apellido = mysqli_real_escape_string($conexion, $_POST["apellido"]);
    $fecha_nacimiento = mysqli_real_escape_string($conexion, $_POST["fecha_nacimiento"]);
    $cedula = mysqli_real_escape_string($conexion, $_POST["cedula"]);
    $direccion = mysqli_real_escape_string($conexion, $_POST["direccion"]);
    $telefono = mysqli_real_escape_string($conexion, $_POST["telefono"]);
    $id_turno = mysqli_real_escape_string($conexion, $_POST["id_turno"]);
    $nacionalidad = mysqli_real_escape_string($conexion, $_POST["nacionalidad"]);
    $edad = mysqli_real_escape_string($conexion, $_POST["edad"]);
    $sexo = mysqli_real_escape_string($conexion, $_POST["sexo"]);
    $numero_gaceta = mysqli_real_escape_string($conexion, $_POST["numero_gaceta"]);
    $estado_civil = mysqli_real_escape_string($conexion, $_POST["estado_civil"]);
    $especificar_estado_civil = mysqli_real_escape_string($conexion, $_POST["especificar_estado_civil"]);
    $numero_rif = mysqli_real_escape_string($conexion, $_POST["numero_rif"]);
    $urbanizacion = mysqli_real_escape_string($conexion, $_POST["urbanizacion"]);
    $avenida_calle = mysqli_real_escape_string($conexion, $_POST["avenida_calle"]);
    $edificio_casa = mysqli_real_escape_string($conexion, $_POST["edificio_casa"]);
    $piso = mysqli_real_escape_string($conexion, $_POST["piso"]);
    $nro_apto_casa = mysqli_real_escape_string($conexion, $_POST["nro_apto_casa"]);
    $estado = mysqli_real_escape_string($conexion, $_POST["estado"]);
    $ciudad = mysqli_real_escape_string($conexion, $_POST["ciudad"]);
    $municipio = mysqli_real_escape_string($conexion, $_POST["municipio"]);
    $codigo_postal = mysqli_real_escape_string($conexion, $_POST["codigo_postal"]);
    $telefono_celular = mysqli_real_escape_string($conexion, $_POST["telefono_celular"]);
    $telefono_habitacion = mysqli_real_escape_string($conexion, $_POST["telefono_habitacion"]);
    $correo_electronico = mysqli_real_escape_string($conexion, $_POST["correo_electronico"]);
    $tiene_cuenta_bancaria = mysqli_real_escape_string($conexion, $_POST["tiene_cuenta_bancaria"]);
    $numero_cuenta = mysqli_real_escape_string($conexion, $_POST["numero_cuenta"]);
    $banco = mysqli_real_escape_string($conexion, $_POST["banco"]);
    $tipo_cuenta = mysqli_real_escape_string($conexion, $_POST["tipo_cuenta"]);
    $maneja = mysqli_real_escape_string($conexion, $_POST["maneja"]);
    $grado_licencia = mysqli_real_escape_string($conexion, $_POST["grado_licencia"]);
    $talla_camisa = mysqli_real_escape_string($conexion, $_POST["talla_camisa"]);
    $talla_pantalon = mysqli_real_escape_string($conexion, $_POST["talla_pantalon"]);
    $numero_calzado = mysqli_real_escape_string($conexion, $_POST["numero_calzado"]);
    $nivel_educacion = mysqli_real_escape_string($conexion, $_POST["nivel_educacion"]);
    $profesion = mysqli_real_escape_string($conexion, $_POST["profesion"]);
    $estudio_especial = mysqli_real_escape_string($conexion, $_POST["estudio_especial"]);
    $titulo_estudio_especial = mysqli_real_escape_string($conexion, $_POST["titulo_estudio_especial"]);
    $idioma_extranjero = mysqli_real_escape_string($conexion, $_POST["idioma_extranjero"]);
    $id_cargo = mysqli_real_escape_string($conexion, $_POST["id_cargo"]);
    $fecha_ingreso = mysqli_real_escape_string($conexion, $_POST["fecha_ingreso"]);
    $login = $_SESSION['usuario'];

    // Validación de cédula
    if (!validarCedula($cedula)) {
        $error_message = "La cédula no es válida.";
    }

    $fecha_registro = date("Y-m-d");

    // Manejo de la foto
    $rutaDestino = null;
    if (isset($_FILES['foto']) && $_FILES['foto']['error'] == UPLOAD_ERR_OK) {
        $foto = $_FILES['foto'];
        $rutaDestino = 'fotos/' . basename($foto['name']);
        
        // Crear carpeta si no existe
        if (!file_exists('fotos')) {
            mkdir('fotos', 0777, true);
        }

        // Validar si el archivo es una imagen
        $tipoArchivo = strtolower(pathinfo($rutaDestino, PATHINFO_EXTENSION));
        $tiposPermitidos = ['jpg', 'jpeg', 'png', 'gif'];

        if (!in_array($tipoArchivo, $tiposPermitidos)) {
            $error_message = "Solo se permiten imágenes (JPG, JPEG, PNG, GIF).";
        }

        // Mover el archivo subido a la carpeta de destino
        if (!isset($error_message) && !move_uploaded_file($foto['tmp_name'], $rutaDestino)) {
            $error_message = "Error al subir la foto.";
        }
    }

    // Si no hay errores, proceder con la inserción
    if (!isset($error_message)) {
        $sql = "INSERT INTO personas (
            nombre, apellido, fecha_nacimiento, cedula, direccion, telefono, id_turno, fecha_registro, usuario,
            nacionalidad, edad, sexo,
            numero_gaceta, estado_civil, especificar_estado_civil, numero_rif,
            urbanizacion, avenida_calle, edificio_casa, piso,
            nro_apto_casa, estado, ciudad, municipio, codigo_postal,
            telefono_celular, telefono_habitacion, correo_electronico,
            tiene_cuenta_bancaria, numero_cuenta, banco, tipo_cuenta,
            maneja, grado_licencia, talla_camisa, talla_pantalon, numero_calzado,
            nivel_educacion, profesion, estudio_especial, titulo_estudio_especial,
            idioma_extranjero, id_cargo, foto, fecha_ingreso
        ) VALUES (
            '$nombre', '$apellido', '$fecha_nacimiento', '$cedula', '$direccion', '$telefono', '$id_turno', '$fecha_registro', '$login',
            '$nacionalidad', $edad, '$sexo',
            '$numero_gaceta', '$estado_civil', '$especificar_estado_civil', '$numero_rif',
            '$urbanizacion', '$avenida_calle', '$edificio_casa', '$piso',
            '$nro_apto_casa', '$estado', '$ciudad', '$municipio', '$codigo_postal',
            '$telefono_celular', '$telefono_habitacion', '$correo_electronico',
            '$tiene_cuenta_bancaria', '$numero_cuenta', '$banco', '$tipo_cuenta',
            '$maneja', '$grado_licencia', '$talla_camisa', '$talla_pantalon', '$numero_calzado',
            '$nivel_educacion', '$profesion', '$estudio_especial', '$titulo_estudio_especial',
            '$idioma_extranjero', '$id_cargo', " . ($rutaDestino ? "'$rutaDestino'" : "NULL") . ", '$fecha_ingreso'
        )";

        if (mysqli_query($conexion, $sql)) {
            $success_message = "Registro guardado exitosamente.";
            header("refresh:2;url=index.php");
        } else {
            $error_message = "Error al guardar el registro: " . mysqli_error($conexion);
        }
    }
}

// Obtener los turnos para el dropdown
$sql_turnos = "SELECT id, nombre FROM turnos ORDER BY nombre";
$resultado_turnos = mysqli_query($conexion, $sql_turnos);

// Obtener los cargos para el dropdown
$sql_cargos = "SELECT id_cargo, cargo FROM cargos ORDER BY cargo";
$resultado_cargos = mysqli_query($conexion, $sql_cargos);

?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Registrar Personal | Sistema de Talento Humano</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary-color: #1a3c8b;
            --secondary-color: #4CAF50;
            --accent-color: #FF9800;
            --light-color: #f8f9fa;
            --dark-color: #2c3e50;
            --gray-light: #f5f7fa;
            --border-color: #e1e5eb;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--gray-light);
            color: var(--dark-color);
            line-height: 1.6;
        }
        
        .app-container {
            display: flex;
            min-height: 100vh;
        }
        
        /* Sidebar */
        .sidebar {
            width: 260px;
            background: linear-gradient(180deg, var(--primary-color) 0%, #15326f 100%);
            color: white;
            padding: 0;
            box-shadow: 3px 0 15px rgba(0, 0, 0, 0.1);
            z-index: 100;
            position: fixed;
            height: 100vh;
            overflow-y: auto;
        }
        
        .sidebar-header {
            padding: 25px 20px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            text-align: center;
        }
        
        .company-logo {
            width: 70px;
            height: 70px;
            background-color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 15px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        }
        
        .company-logo img {
            max-width: 50px;
            max-height: 50px;
        }
        
        .company-name {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 5px;
        }
        
        .system-name {
            font-size: 0.85rem;
            opacity: 0.9;
            font-weight: 400;
        }
        
        .user-info {
            padding: 20px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: center;
        }
        
        .user-avatar {
            width: 45px;
            height: 45px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
        }
        
        .user-avatar i {
            font-size: 1.2rem;
        }
        
        .user-details h4 {
            font-size: 1rem;
            font-weight: 600;
            margin-bottom: 2px;
        }
        
        .user-details p {
            font-size: 0.8rem;
            opacity: 0.8;
        }
        
        .sidebar-menu {
            padding: 20px 0;
        }
        
        .menu-section {
            margin-bottom: 25px;
        }
        
        .menu-title {
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            opacity: 0.7;
            padding: 0 20px 10px;
            margin-bottom: 10px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }
        
        .menu-item {
            display: flex;
            align-items: center;
            padding: 12px 20px;
            color: rgba(255, 255, 255, 0.8);
            text-decoration: none;
            transition: all 0.3s;
            border-left: 3px solid transparent;
        }
        
        .menu-item:hover, .menu-item.active {
            background: rgba(255, 255, 255, 0.1);
            color: white;
            border-left-color: var(--accent-color);
        }
        
        .menu-item i {
            margin-right: 12px;
            width: 20px;
            text-align: center;
            font-size: 1.1rem;
        }
        
        .logout-item {
            margin-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            padding-top: 20px;
        }
        
        /* Main Content */
        .main-content {
            flex: 1;
            margin-left: 260px;
            padding: 0;
        }
        
        .top-navbar {
            background-color: white;
            padding: 15px 30px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: sticky;
            top: 0;
            z-index: 99;
        }
        
        .page-title h1 {
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--dark-color);
            margin: 0;
        }
        
        .page-title p {
            font-size: 0.9rem;
            color: #666;
            margin: 5px 0 0;
        }
        
        .content-wrapper {
            padding: 30px;
        }
        
        /* Registration Form */
        .registration-container {
            background: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            margin-bottom: 30px;
            border: 1px solid var(--border-color);
        }
        
        .form-header {
            background: linear-gradient(135deg, var(--primary-color), #2a4ca3);
            color: white;
            padding: 25px 30px;
        }
        
        .form-header h2 {
            font-size: 1.8rem;
            font-weight: 600;
            margin: 0;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .form-header h2 i {
            color: var(--accent-color);
        }
        
        .form-header p {
            opacity: 0.9;
            margin-top: 8px;
            font-size: 0.95rem;
        }
        
        .form-body {
            padding: 30px;
        }
        
        /* Tabs Navigation */
        .form-tabs {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 30px;
            border-bottom: 2px solid var(--border-color);
            padding-bottom: 15px;
        }
        
        .tab-btn {
            background: none;
            border: none;
            padding: 12px 24px;
            font-size: 1rem;
            font-weight: 500;
            color: #666;
            cursor: pointer;
            border-radius: 8px;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .tab-btn:hover {
            background: #f8f9fa;
            color: var(--primary-color);
        }
        
        .tab-btn.active {
            background: var(--primary-color);
            color: white;
        }
        
        /* Form Sections */
        .form-section {
            display: none;
            animation: fadeIn 0.5s ease;
        }
        
        .form-section.active {
            display: block;
        }
        
        .section-title {
            color: var(--primary-color);
            font-size: 1.3rem;
            font-weight: 600;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 2px solid var(--border-color);
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .section-title i {
            color: var(--accent-color);
        }
        
        .form-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 25px;
            margin-bottom: 30px;
        }
        
        .form-group {
            display: flex;
            flex-direction: column;
        }
        
        .form-label {
            font-weight: 600;
            color: var(--dark-color);
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .required::after {
            content: '*';
            color: #dc3545;
            margin-left: 4px;
        }
        
        .form-control, .form-select {
            padding: 12px 15px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            font-size: 1rem;
            transition: all 0.3s;
            width: 100%;
        }
        
        .form-control:focus, .form-select:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(26, 60, 139, 0.1);
        }
        
        .form-control[type="file"] {
            padding: 8px 15px;
        }
        
        .photo-preview {
            width: 120px;
            height: 120px;
            border-radius: 8px;
            border: 2px dashed var(--border-color);
            margin-top: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            background: #f8f9fa;
        }
        
        .photo-preview img {
            max-width: 100%;
            max-height: 100%;
            object-fit: cover;
        }
        
        .photo-placeholder {
            text-align: center;
            color: #999;
        }
        
        .photo-placeholder i {
            font-size: 2rem;
            margin-bottom: 8px;
        }
        
        .checkbox-group {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .checkbox-group input[type="checkbox"] {
            width: 18px;
            height: 18px;
        }
        
        .form-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 30px;
            border-top: 1px solid var(--border-color);
            margin-top: 20px;
        }
        
        .btn-primary {
            background: linear-gradient(to right, var(--primary-color), #2a4ca3);
            color: white;
            border: none;
            padding: 12px 30px;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .btn-primary:hover {
            background: linear-gradient(to right, #15326f, var(--primary-color));
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(26, 60, 139, 0.2);
        }
        
        .btn-secondary {
            background: #6c757d;
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 8px;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: all 0.3s;
        }
        
        .btn-secondary:hover {
            background: #545b62;
            color: white;
            transform: translateY(-2px);
        }
        
        .progress-bar {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-top: 20px;
        }
        
        .progress-step {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5px;
        }
        
        .step-number {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: var(--border-color);
            color: #666;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
        }
        
        .step-number.active {
            background: var(--primary-color);
            color: white;
        }
        
        .step-label {
            font-size: 0.8rem;
            color: #666;
        }
        
        /* Alert Messages */
        .alert-message {
            padding: 15px 20px;
            border-radius: 8px;
            margin-bottom: 25px;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .alert-success {
            background: rgba(40, 167, 69, 0.1);
            border: 1px solid rgba(40, 167, 69, 0.2);
            color: #155724;
        }
        
        .alert-danger {
            background: rgba(220, 53, 69, 0.1);
            border: 1px solid rgba(220, 53, 69, 0.2);
            color: #721c24;
        }
        
        /* Animations */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* Responsive */
        @media (max-width: 992px) {
            .sidebar {
                width: 70px;
                overflow: visible;
            }
            
            .sidebar-header, .company-name, .system-name, .user-details, .menu-title, .menu-item span {
                display: none;
            }
            
            .company-logo {
                width: 40px;
                height: 40px;
                margin-bottom: 0;
            }
            
            .company-logo img {
                max-width: 25px;
                max-height: 25px;
            }
            
            .user-info {
                justify-content: center;
                padding: 15px 10px;
            }
            
            .user-avatar {
                margin-right: 0;
            }
            
            .menu-item {
                justify-content: center;
                padding: 15px 10px;
            }
            
            .menu-item i {
                margin-right: 0;
                font-size: 1.3rem;
            }
            
            .main-content {
                margin-left: 70px;
            }
        }
        
        @media (max-width: 768px) {
            .top-navbar {
                flex-direction: column;
                align-items: flex-start;
                gap: 15px;
                padding: 15px 20px;
            }
            
            .content-wrapper {
                padding: 20px 15px;
            }
            
            .form-grid {
                grid-template-columns: 1fr;
            }
            
            .form-tabs {
                flex-direction: column;
            }
            
            .form-actions {
                flex-direction: column;
                gap: 15px;
            }
            
            .btn-primary, .btn-secondary {
                width: 100%;
                justify-content: center;
            }
        }
        
        /* Custom scrollbar */
        ::-webkit-scrollbar {
            width: 6px;
        }
        
        ::-webkit-scrollbar-track {
            background: #f1f1f1;
        }
        
        ::-webkit-scrollbar-thumb {
            background: #c1c1c1;
            border-radius: 3px;
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background: #a8a8a8;
        }
    </style>
</head>
<body>
    <div class="app-container">
        <!-- Sidebar -->
        <aside class="sidebar">
            <div class="sidebar-header">
                <div class="company-logo">
                    <i class="fas fa-building" style="color: var(--primary-color); font-size: 1.8rem;"></i>
                </div>
                <div class="company-name">Distribuidora Riga0803 C.A.</div>
                <div class="system-name">Sistema de Talento Humano</div>
            </div>
            
            <div class="user-info">
                <div class="user-avatar">
                    <i class="fas fa-user-circle"></i>
                </div>
                <div class="user-details">
                    <h4><?php echo $_SESSION['usuario']; ?></h4>
                    <p><?php echo ucfirst($_SESSION['rol']); ?></p>
                </div>
            </div>
            
            <nav class="sidebar-menu">
                <div class="menu-section">
                    <div class="menu-title">Principal</div>
                    <a href="index.php" class="menu-item">
                        <i class="fas fa-users"></i>
                        <span>Personal</span>
                    </a>
                    <a href="ficha.php" class="menu-item">
                        <i class="fas fa-id-card"></i>
                        <span>Fichas</span>
                    </a>
                </div>
                
                <div class="menu-section">
                    <div class="menu-title">Módulos</div>
                    <a href="turnos.php" class="menu-item">
                        <i class="fas fa-clock"></i>
                        <span>Turnos</span>
                    </a>
                    <a href="cargos.php" class="menu-item">
                        <i class="fas fa-briefcase"></i>
                        <span>Cargos</span>
                    </a>
                    <a href="carga_familiar.php" class="menu-item">
                        <i class="fas fa-family"></i>
                        <span>Carga Familiar</span>
                    </a>
                </div>
                
                <div class="menu-section logout-item">
                    <a href="logout.php" class="menu-item">
                        <i class="fas fa-sign-out-alt"></i>
                        <span>Cerrar Sesión</span>
                    </a>
                </div>
            </nav>
        </aside>
        
        <!-- Main Content -->
        <main class="main-content">
            <!-- Top Navbar -->
            <header class="top-navbar">
                <div class="page-title">
                    <h1>Registrar Nuevo Personal</h1>
                    <p>Complete todos los campos para registrar un nuevo empleado</p>
                </div>
            </header>
            
            <!-- Content Area -->
            <div class="content-wrapper">
                <?php if (isset($success_message)): ?>
                    <div class="alert-message alert-success">
                        <i class="fas fa-check-circle"></i>
                        <div>
                            <strong>¡Éxito!</strong> <?php echo $success_message; ?>
                            <p>Redirigiendo al listado principal...</p>
                        </div>
                    </div>
                <?php endif; ?>
                
                <?php if (isset($error_message)): ?>
                    <div class="alert-message alert-danger">
                        <i class="fas fa-exclamation-circle"></i>
                        <div>
                            <strong>Error:</strong> <?php echo $error_message; ?>
                        </div>
                    </div>
                <?php endif; ?>
                
                <div class="registration-container">
                    <div class="form-header">
                        <h2><i class="fas fa-user-plus"></i> Formulario de Registro</h2>
                        <p>Complete la información del nuevo empleado en las diferentes secciones</p>
                    </div>
                    
                    <div class="form-body">
                        <!-- Tabs Navigation -->
                        <div class="form-tabs">
                            <button type="button" class="tab-btn active" data-tab="personal">
                                <i class="fas fa-user"></i> Datos Personales
                            </button>
                            <button type="button" class="tab-btn" data-tab="contacto">
                                <i class="fas fa-address-book"></i> Información de Contacto
                            </button>
                            <button type="button" class="tab-btn" data-tab="laboral">
                                <i class="fas fa-briefcase"></i> Datos Laborales
                            </button>
                            <button type="button" class="tab-btn" data-tab="adicional">
                                <i class="fas fa-info-circle"></i> Información Adicional
                            </button>
                        </div>
                        
                        <!-- Progress Bar -->
                        <div class="progress-bar">
                            <div class="progress-step">
                                <div class="step-number active">1</div>
                                <span class="step-label">Personal</span>
                            </div>
                            <div class="progress-step">
                                <div class="step-number">2</div>
                                <span class="step-label">Contacto</span>
                            </div>
                            <div class="progress-step">
                                <div class="step-number">3</div>
                                <span class="step-label">Laboral</span>
                            </div>
                            <div class="progress-step">
                                <div class="step-number">4</div>
                                <span class="step-label">Adicional</span>
                            </div>
                        </div>
                        
                        <form action="crear.php" method="post" enctype="multipart/form-data" id="registrationForm">
                            <!-- Datos Personales -->
                            <div class="form-section active" id="personal-section">
                                <h3 class="section-title"><i class="fas fa-user"></i> Información Personal Básica</h3>
                                <div class="form-grid">
                                    <div class="form-group">
                                        <label for="nombre" class="form-label required">
                                            <i class="fas fa-signature"></i> Nombre
                                        </label>
                                        <input type="text" class="form-control" name="nombre" id="nombre" required 
                                               placeholder="Ingrese el nombre">
                                    </div>
                                    
                                    <div class="form-group">
                                        <label for="apellido" class="form-label required">
                                            <i class="fas fa-signature"></i> Apellido
                                        </label>
                                        <input type="text" class="form-control" name="apellido" id="apellido" required 
                                               placeholder="Ingrese el apellido">
                                    </div>
                                    
                                    <div class="form-group">
                                        <label for="cedula" class="form-label required">
                                            <i class="fas fa-id-card"></i> Cédula
                                        </label>
                                        <input type="text" class="form-control" name="cedula" id="cedula" required 
                                               placeholder="Ej: V-12345678">
                                    </div>
                                    
                                    <div class="form-group">
                                        <label for="fecha_nacimiento" class="form-label required">
                                            <i class="fas fa-calendar-alt"></i> Fecha de Nacimiento
                                        </label>
                                        <input type="date" class="form-control" name="fecha_nacimiento" id="fecha_nacimiento" required>
                                    </div>
                                    
                                    <div class="form-group">
                                        <label for="edad" class="form-label required">
                                            <i class="fas fa-birthday-cake"></i> Edad
                                        </label>
                                        <input type="number" class="form-control" name="edad" id="edad" required 
                                               placeholder="Ingrese la edad" min="18" max="80">
                                    </div>
                                    
                                    <div class="form-group">
                                        <label for="sexo" class="form-label required">
                                            <i class="fas fa-venus-mars"></i> Sexo
                                        </label>
                                        <select class="form-select" name="sexo" id="sexo" required>
                                            <option value="">Seleccione...</option>
                                            <option value="M">Masculino</option>
                                            <option value="F">Femenino</option>
                                        </select>
                                    </div>
                                    
                                    <div class="form-group">
                                        <label for="estado_civil" class="form-label required">
                                            <i class="fas fa-heart"></i> Estado Civil
                                        </label>
                                        <select class="form-select" name="estado_civil" id="estado_civil" required>
                                            <option value="">Seleccione...</option>
                                            <option value="SOLTERO">Soltero(a)</option>
                                            <option value="CASADO">Casado(a)</option>
                                            <option value="VIUDO">Viudo(a)</option>
                                            <option value="DIVORCIADO">Divorciado(a)</option>
                                            <option value="OTROS">Otros</option>
                                        </select>
                                    </div>
                                    
                                    <div class="form-group">
                                        <label for="especificar_estado_civil" class="form-label">
                                            <i class="fas fa-comment-alt"></i> Especificar Estado Civil
                                        </label>
                                        <input type="text" class="form-control" name="especificar_estado_civil" id="especificar_estado_civil" 
                                               placeholder="Solo si seleccionó 'Otros'">
                                    </div>
                                    
                                    <div class="form-group">
                                        <label for="nacionalidad" class="form-label required">
                                            <i class="fas fa-globe-americas"></i> Nacionalidad
                                        </label>
                                        <input type="text" class="form-control" name="nacionalidad" id="nacionalidad" required 
                                               placeholder="Ej: Venezolana">
                                    </div>
                                    
                                    <div class="form-group">
                                        <label for="numero_rif" class="form-label">
                                            <i class="fas fa-file-alt"></i> Número RIF
                                        </label>
                                        <input type="text" class="form-control" name="numero_rif" id="numero_rif" 
                                               placeholder="Ej: J-123456789">
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Información de Contacto -->
                            <div class="form-section" id="contacto-section">
                                <h3 class="section-title"><i class="fas fa-address-book"></i> Información de Contacto</h3>
                                <div class="form-grid">
                                    <div class="form-group">
                                        <label for="direccion" class="form-label required">
                                            <i class="fas fa-home"></i> Dirección Principal
                                        </label>
                                        <input type="text" class="form-control" name="direccion" id="direccion" required 
                                               placeholder="Ingrese la dirección completa">
                                    </div>
                                    
                                    <div class="form-group">
                                        <label for="urbanizacion" class="form-label">
                                            <i class="fas fa-building"></i> Urbanización
                                        </label>
                                        <input type="text" class="form-control" name="urbanizacion" id="urbanizacion" 
                                               placeholder="Nombre de la urbanización">
                                    </div>
                                    
                                    <div class="form-group">
                                        <label for="avenida_calle" class="form-label">
                                            <i class="fas fa-road"></i> Avenida/Calle
                                        </label>
                                        <input type="text" class="form-control" name="avenida_calle" id="avenida_calle" 
                                               placeholder="Nombre de avenida o calle">
                                    </div>
                                    
                                    <div class="form-group">
                                        <label for="edificio_casa" class="form-label">
                                            <i class="fas fa-building"></i> Edificio/Casa
                                        </label>
                                        <input type="text" class="form-control" name="edificio_casa" id="edificio_casa" 
                                               placeholder="Número o nombre del edificio">
                                    </div>
                                    
                                    <div class="form-group">
                                        <label for="piso" class="form-label">
                                            <i class="fas fa-layer-group"></i> Piso
                                        </label>
                                        <input type="text" class="form-control" name="piso" id="piso" 
                                               placeholder="Número de piso">
                                    </div>
                                    
                                    <div class="form-group">
                                        <label for="nro_apto_casa" class="form-label">
                                            <i class="fas fa-door-closed"></i> N° Apto/Casa
                                        </label>
                                        <input type="text" class="form-control" name="nro_apto_casa" id="nro_apto_casa" 
                                               placeholder="Número de apartamento o casa">
                                    </div>
                                    
                                    <div class="form-group">
                                        <label for="estado" class="form-label">
                                            <i class="fas fa-map-marker-alt"></i> Estado
                                        </label>
                                        <input type="text" class="form-control" name="estado" id="estado" 
                                               placeholder="Estado donde reside">
                                    </div>
                                    
                                    <div class="form-group">
                                        <label for="ciudad" class="form-label">
                                            <i class="fas fa-city"></i> Ciudad
                                        </label>
                                        <input type="text" class="form-control" name="ciudad" id="ciudad" 
                                               placeholder="Ciudad donde reside">
                                    </div>
                                    
                                    <div class="form-group">
                                        <label for="municipio" class="form-label">
                                            <i class="fas fa-map"></i> Municipio
                                        </label>
                                        <input type="text" class="form-control" name="municipio" id="municipio" 
                                               placeholder="Municipio donde reside">
                                    </div>
                                    
                                    <div class="form-group">
                                        <label for="codigo_postal" class="form-label">
                                            <i class="fas fa-mail-bulk"></i> Código Postal
                                        </label>
                                        <input type="text" class="form-control" name="codigo_postal" id="codigo_postal" 
                                               placeholder="Código postal">
                                    </div>
                                    
                                    <div class="form-group">
                                        <label for="telefono" class="form-label required">
                                            <i class="fas fa-phone"></i> Teléfono Principal
                                        </label>
                                        <input type="text" class="form-control" name="telefono" id="telefono" required 
                                               placeholder="Ej: 0412-1234567">
                                    </div>
                                    
                                    <div class="form-group">
                                        <label for="telefono_celular" class="form-label">
                                            <i class="fas fa-mobile-alt"></i> Teléfono Celular
                                        </label>
                                        <input type="text" class="form-control" name="telefono_celular" id="telefono_celular" 
                                               placeholder="Número de celular">
                                    </div>
                                    
                                    <div class="form-group">
                                        <label for="telefono_habitacion" class="form-label">
                                            <i class="fas fa-phone-square"></i> Teléfono Habitación
                                        </label>
                                        <input type="text" class="form-control" name="telefono_habitacion" id="telefono_habitacion" 
                                               placeholder="Teléfono de habitación">
                                    </div>
                                    
                                    <div class="form-group">
                                        <label for="correo_electronico" class="form-label">
                                            <i class="fas fa-envelope"></i> Correo Electrónico
                                        </label>
                                        <input type="email" class="form-control" name="correo_electronico" id="correo_electronico" 
                                               placeholder="ejemplo@email.com">
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Datos Laborales -->
                            <div class="form-section" id="laboral-section">
                                <h3 class="section-title"><i class="fas fa-briefcase"></i> Información Laboral</h3>
                                <div class="form-grid">
                                    <div class="form-group">
                                        <label for="fecha_ingreso" class="form-label required">
                                            <i class="fas fa-calendar-check"></i> Fecha de Ingreso
                                        </label>
                                        <input type="date" class="form-control" name="fecha_ingreso" id="fecha_ingreso" required>
                                    </div>
                                    
                                    <div class="form-group">
                                        <label for="id_cargo" class="form-label required">
                                            <i class="fas fa-user-tie"></i> Cargo
                                        </label>
                                        <select class="form-select" name="id_cargo" id="id_cargo" required>
                                            <option value="">Seleccione un cargo</option>
                                            <?php while ($cargo = mysqli_fetch_assoc($resultado_cargos)): ?>
                                                <option value="<?php echo $cargo['id_cargo']; ?>">
                                                    <?php echo htmlspecialchars($cargo['cargo']); ?>
                                                </option>
                                            <?php endwhile; ?>
                                        </select>
                                    </div>
                                    
                                    <div class="form-group">
                                        <label for="id_turno" class="form-label required">
                                            <i class="fas fa-clock"></i> Turno
                                        </label>
                                        <select class="form-select" name="id_turno" id="id_turno" required>
                                            <option value="">Seleccione un turno</option>
                                            <?php while ($turno = mysqli_fetch_assoc($resultado_turnos)): ?>
                                                <option value="<?php echo $turno['id']; ?>">
                                                    <?php echo htmlspecialchars($turno['nombre']); ?>
                                                </option>
                                            <?php endwhile; ?>
                                        </select>
                                    </div>
                                    
                                    <div class="form-group">
                                        <label for="numero_gaceta" class="form-label">
                                            <i class="fas fa-file-contract"></i> Número de Gaceta
                                        </label>
                                        <input type="text" class="form-control" name="numero_gaceta" id="numero_gaceta" 
                                               placeholder="Número de publicación en gaceta">
                                    </div>
                                    
                                    <div class="form-group">
                                        <label for="tiene_cuenta_bancaria" class="form-label required">
                                            <i class="fas fa-university"></i> ¿Tiene Cuenta Bancaria?
                                        </label>
                                        <select class="form-select" name="tiene_cuenta_bancaria" id="tiene_cuenta_bancaria" required>
                                            <option value="">Seleccione...</option>
                                            <option value="SI">Sí</option>
                                            <option value="NO">No</option>
                                        </select>
                                    </div>
                                    
                                    <div class="form-group">
                                        <label for="banco" class="form-label">
                                            <i class="fas fa-landmark"></i> Banco
                                        </label>
                                        <input type="text" class="form-control" name="banco" id="banco" 
                                               placeholder="Nombre del banco">
                                    </div>
                                    
                                    <div class="form-group">
                                        <label for="numero_cuenta" class="form-label">
                                            <i class="fas fa-credit-card"></i> Número de Cuenta
                                        </label>
                                        <input type="text" class="form-control" name="numero_cuenta" id="numero_cuenta" 
                                               placeholder="Número de cuenta bancaria">
                                    </div>
                                    
                                    <div class="form-group">
                                        <label for="tipo_cuenta" class="form-label">
                                            <i class="fas fa-wallet"></i> Tipo de Cuenta
                                        </label>
                                        <select class="form-select" name="tipo_cuenta" id="tipo_cuenta">
                                            <option value="">Seleccione...</option>
                                            <option value="AHORRO">Ahorro</option>
                                            <option value="CORRIENTE">Corriente</option>
                                        </select>
                                    </div>
                                    
                                    <div class="form-group">
                                        <label for="foto" class="form-label">
                                            <i class="fas fa-camera"></i> Fotografía
                                        </label>
                                        <input type="file" class="form-control" name="foto" id="foto" accept="image/*">
                                        <div class="photo-preview" id="photoPreview">
                                            <div class="photo-placeholder">
                                                <i class="fas fa-user"></i>
                                                <p>Vista previa</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Información Adicional -->
                            <div class="form-section" id="adicional-section">
                                <h3 class="section-title"><i class="fas fa-info-circle"></i> Información Adicional</h3>
                                <div class="form-grid">
                                    <div class="form-group">
                                        <label for="maneja" class="form-label required">
                                            <i class="fas fa-car"></i> ¿Maneja Vehículo?
                                        </label>
                                        <select class="form-select" name="maneja" id="maneja" required>
                                            <option value="">Seleccione...</option>
                                            <option value="SI">Sí</option>
                                            <option value="NO">No</option>
                                        </select>
                                    </div>
                                    
                                    <div class="form-group">
                                        <label for="grado_licencia" class="form-label">
                                            <i class="fas fa-id-badge"></i> Grado de Licencia
                                        </label>
                                        <input type="text" class="form-control" name="grado_licencia" id="grado_licencia" 
                                               placeholder="Ej: Tipo I, II, III">
                                    </div>
                                    
                                    <div class="form-group">
                                        <label for="talla_camisa" class="form-label">
                                            <i class="fas fa-tshirt"></i> Talla de Camisa
                                        </label>
                                        <input type="text" class="form-control" name="talla_camisa" id="talla_camisa" 
                                               placeholder="Ej: S, M, L, XL">
                                    </div>
                                    
                                    <div class="form-group">
                                        <label for="talla_pantalon" class="form-label">
                                            <i class="fas fa-tshirt"></i> Talla de Pantalón
                                        </label>
                                        <input type="text" class="form-control" name="talla_pantalon" id="talla_pantalon" 
                                               placeholder="Ej: 30, 32, 34, 36">
                                    </div>
                                    
                                    <div class="form-group">
                                        <label for="numero_calzado" class="form-label">
                                            <i class="fas fa-shoe-prints"></i> Número de Calzado
                                        </label>
                                        <input type="text" class="form-control" name="numero_calzado" id="numero_calzado" 
                                               placeholder="Número de calzado">
                                    </div>
                                    
                                    <div class="form-group">
                                        <label for="nivel_educacion" class="form-label required">
                                            <i class="fas fa-graduation-cap"></i> Nivel de Educación
                                        </label>
                                        <select class="form-select" name="nivel_educacion" id="nivel_educacion" required>
                                            <option value="">Seleccione...</option>
                                            <option value="PRIMARIA">Primaria</option>
                                            <option value="SECUNDARIA">Secundaria</option>
                                            <option value="TSU">Técnico Superior Universitario</option>
                                            <option value="UNIVERSITARIA">Universitaria</option>
                                            <option value="POSTGRADO">Postgrado</option>
                                        </select>
                                    </div>
                                    
                                    <div class="form-group">
                                        <label for="profesion" class="form-label">
                                            <i class="fas fa-user-graduate"></i> Profesión
                                        </label>
                                        <input type="text" class="form-control" name="profesion" id="profesion" 
                                               placeholder="Profesión u oficio">
                                    </div>
                                    
                                    <div class="form-group">
                                        <label for="estudio_especial" class="form-label">
                                            <i class="fas fa-certificate"></i> Estudio Especial
                                        </label>
                                        <input type="text" class="form-control" name="estudio_especial" id="estudio_especial" 
                                               placeholder="Estudios especiales o adicionales">
                                    </div>
                                    
                                    <div class="form-group">
                                        <label for="titulo_estudio_especial" class="form-label">
                                            <i class="fas fa-award"></i> Título de Estudio Especial
                                        </label>
                                        <input type="text" class="form-control" name="titulo_estudio_especial" id="titulo_estudio_especial" 
                                               placeholder="Título obtenido">
                                    </div>
                                    
                                    <div class="form-group">
                                        <label for="idioma_extranjero" class="form-label">
                                            <i class="fas fa-language"></i> Idioma Extranjero
                                        </label>
                                        <input type="text" class="form-control" name="idioma_extranjero" id="idioma_extranjero" 
                                               placeholder="Idiomas que domina">
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Form Actions -->
                            <div class="form-actions">
                                <a href="index.php" class="btn-secondary">
                                    <i class="fas fa-arrow-left"></i> Cancelar
                                </a>
                                
                                <div>
                                    <button type="button" class="btn-secondary" id="prevBtn">
                                        <i class="fas fa-chevron-left"></i> Anterior
                                    </button>
                                    <button type="button" class="btn-secondary" id="nextBtn">
                                        Siguiente <i class="fas fa-chevron-right"></i>
                                    </button>
                                    <button type="submit" name="guardar" class="btn-primary" id="submitBtn">
                                        <i class="fas fa-save"></i> Guardar Registro
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </main>
    </div>
    
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Tabs functionality
            const tabBtns = document.querySelectorAll('.tab-btn');
            const formSections = document.querySelectorAll('.form-section');
            const progressSteps = document.querySelectorAll('.step-number');
            let currentTab = 0;
            
            // Initialize tabs
            showTab(currentTab);
            
            // Tab click event
            tabBtns.forEach((btn, index) => {
                btn.addEventListener('click', () => {
                    currentTab = index;
                    showTab(currentTab);
                });
            });
            
            // Previous button
            document.getElementById('prevBtn').addEventListener('click', () => {
                if (currentTab > 0) {
                    currentTab--;
                    showTab(currentTab);
                }
            });
            
            // Next button
            document.getElementById('nextBtn').addEventListener('click', () => {
                if (validateForm()) {
                    if (currentTab < formSections.length - 1) {
                        currentTab++;
                        showTab(currentTab);
                    }
                }
            });
            
            // Show specific tab
            function showTab(n) {
                // Hide all sections
                formSections.forEach(section => {
                    section.classList.remove('active');
                });
                
                // Remove active class from all tabs
                tabBtns.forEach(btn => {
                    btn.classList.remove('active');
                });
                
                // Remove active class from all progress steps
                progressSteps.forEach(step => {
                    step.classList.remove('active');
                });
                
                // Show current section
                formSections[n].classList.add('active');
                tabBtns[n].classList.add('active');
                
                // Update progress steps
                for (let i = 0; i <= n; i++) {
                    progressSteps[i].classList.add('active');
                }
                
                // Update buttons visibility
                updateButtons();
            }
            
            // Update buttons based on current tab
            function updateButtons() {
                const prevBtn = document.getElementById('prevBtn');
                const nextBtn = document.getElementById('nextBtn');
                const submitBtn = document.getElementById('submitBtn');
                
                if (currentTab === 0) {
                    prevBtn.style.display = 'none';
                    nextBtn.style.display = 'inline-flex';
                    submitBtn.style.display = 'none';
                } else if (currentTab === formSections.length - 1) {
                    prevBtn.style.display = 'inline-flex';
                    nextBtn.style.display = 'none';
                    submitBtn.style.display = 'inline-flex';
                } else {
                    prevBtn.style.display = 'inline-flex';
                    nextBtn.style.display = 'inline-flex';
                    submitBtn.style.display = 'none';
                }
            }
            
            // Form validation
            function validateForm() {
                const currentSection = formSections[currentTab];
                const requiredInputs = currentSection.querySelectorAll('[required]');
                let isValid = true;
                
                requiredInputs.forEach(input => {
                    if (!input.value.trim()) {
                        isValid = false;
                        input.style.borderColor = '#dc3545';
                        setTimeout(() => {
                            input.style.borderColor = '';
                        }, 2000);
                    }
                });
                
                return isValid;
            }
            
            // Photo preview
            const photoInput = document.getElementById('foto');
            const photoPreview = document.getElementById('photoPreview');
            
            if (photoInput) {
                photoInput.addEventListener('change', function(e) {
                    const file = e.target.files[0];
                    if (file) {
                        const reader = new FileReader();
                        reader.onload = function(e) {
                            photoPreview.innerHTML = `<img src="${e.target.result}" alt="Vista previa de la foto">`;
                        };
                        reader.readAsDataURL(file);
                    }
                });
            }
            
            // Auto-calculate age based on birth date
            const birthDateInput = document.getElementById('fecha_nacimiento');
            const ageInput = document.getElementById('edad');
            
            if (birthDateInput && ageInput) {
                birthDateInput.addEventListener('change', function() {
                    const birthDate = new Date(this.value);
                    const today = new Date();
                    let age = today.getFullYear() - birthDate.getFullYear();
                    const monthDiff = today.getMonth() - birthDate.getMonth();
                    
                    if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
                        age--;
                    }
                    
                    if (age > 0) {
                        ageInput.value = age;
                    }
                });
            }
            
            // Smooth transitions
            document.body.style.opacity = '0';
            setTimeout(() => {
                document.body.style.transition = 'opacity 0.3s';
                document.body.style.opacity = '1';
            }, 50);
        });
    </script>
</body>
</html>
