@extends('layouts.master')

@section('title')
    Registro de empleados
@endsection

@section('css')
    <link href="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" type="text/css" />
    <style>
        .permisos-ofertas-grid .chips-wrap-ofertas { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1rem; align-content: start; }
        @media (max-width: 768px) { .permisos-ofertas-grid .chips-wrap-ofertas { grid-template-columns: 1fr; } }
    </style>
@endsection

@section('content')
    @component('components.breadcrumb')
        @slot('li_1') Control Escolar @endslot
        @slot('title') Registro de empleados @endslot
    @endcomponent

    <div class="row">
        <div class="col-12">
            <p class="text-muted mb-3">
                Completa la información del empleado que a continuación se solicita y al finalizar presiona el botón GUARDAR para completar el registro.
            </p>

            <!-- Pestañas -->
            <ul class="nav nav-tabs nav-tabs-custom nav-primary mb-3" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" data-bs-toggle="tab" href="#tab-info-personal" role="tab">1. Información personal</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="tab" href="#tab-info-contacto" role="tab">2. Información de contacto</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="tab" href="#tab-info-institucional" role="tab">3. Información institucional</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="tab" href="#tab-permisos-planteles" role="tab">4. Permisos sobre planteles</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="tab" href="#tab-permisos-ofertas" role="tab">5. Permisos sobre ofertas educativas</a>
                </li>
            </ul>

            <div class="tab-content">
                <!-- Pestaña 1: Información personal -->
                <div class="tab-pane fade show active" id="tab-info-personal" role="tabpanel">
                    <div class="card">
                        <div class="card-body">
                            <p class="text-muted mb-4">
                                Ingresa los datos del empleado que deseas registrar y presiona el botón Continuar para continuar con el formulario.
                            </p>

                            <form id="formInfoPersonalEmpleado" class="needs-validation" novalidate>
                                <div class="row g-3">
                                    <div class="col-12 col-md-4">
                                        <label for="empleadoNombramiento" class="form-label">* Nombramiento</label>
                                        <select class="form-select" id="empleadoNombramiento">
                                            <option value="">-- Seleccione --</option>
                                            <option value="Almirante">Almirante</option>
                                            <option value="Arquitecto(a)">Arquitecto(a)</option>
                                            <option value="Contador(a)">Contador(a)</option>
                                            <option value="Director(a)">Director(a)</option>
                                            <option value="Doctor(a)">Doctor(a)</option>
                                            <option value="General">General</option>
                                            <option value="Ingeniero(a)">Ingeniero(a)</option>
                                            <option value="Licenciado(a)">Licenciado(a)</option>
                                            <option value="Monseñor">Monseñor</option>
                                            <option value="Maestro(a)">Maestro(a)</option>
                                            <option value="Obispo">Obispo</option>
                                            <option value="Orientador(a)">Orientador(a)</option>
                                            <option value="Profesor(a)">Profesor(a)</option>
                                            <option value="Rabino">Rabino</option>
                                            <option value="Reverendo">Reverendo</option>
                                            <option value="Sargento">Sargento</option>
                                            <option value="Señor" selected>Señor</option>
                                            <option value="Señora">Señora</option>
                                            <option value="Señorita">Señorita</option>
                                            <option value="Teniente">Teniente</option>
                                        </select>
                                    </div>
                                    <div class="col-12 col-md-4">
                                        <label for="empleadoNombre" class="form-label">* Nombre</label>
                                        <input type="text" class="form-control" id="empleadoNombre" placeholder="">
                                    </div>
                                    <div class="col-12 col-md-4">
                                        <label for="empleadoApellidoPaterno" class="form-label">* Apellido paterno</label>
                                        <input type="text" class="form-control" id="empleadoApellidoPaterno" placeholder="">
                                    </div>

                                    <div class="col-12 col-md-4">
                                        <label for="empleadoApellidoMaterno" class="form-label">Apellido materno</label>
                                        <input type="text" class="form-control" id="empleadoApellidoMaterno" placeholder="">
                                    </div>
                                    <div class="col-12 col-md-4">
                                        <label for="empleadoNacionalidad" class="form-label">* Nacionalidad</label>
                                        <select class="form-select" id="empleadoNacionalidad">
                                            <option value="">-- Seleccione --</option>
                                        </select>
                                    </div>
                                    <div class="col-12 col-md-4">
                                        <label for="empleadoEntidadFederativa" class="form-label">* Entidad federativa</label>
                                        <select class="form-select" id="empleadoEntidadFederativa">
                                            <option value="">-- Seleccione --</option>
                                        </select>
                                    </div>

                                    <div class="col-12 col-md-4">
                                        <label for="empleadoLugarNacimiento" class="form-label">Lugar de nacimiento</label>
                                        <input type="text" class="form-control" id="empleadoLugarNacimiento" placeholder="">
                                    </div>
                                    <div class="col-12 col-md-4">
                                        <label for="empleadoFechaNacimiento" class="form-label">* Fecha de nacimiento</label>
                                        <div class="input-group">
                                            <input type="date" class="form-control" id="empleadoFechaNacimiento" placeholder="dd/mm/aaaa">
                                            <span class="input-group-text bg-light">+18</span>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-4">
                                        <label for="empleadoSexo" class="form-label">Sexo</label>
                                        <select class="form-select" id="empleadoSexo">
                                            <option value="Femenino">Femenino</option>
                                            <option value="Masculino">Masculino</option>
                                        </select>
                                    </div>

                                    <div class="col-12 col-md-6">
                                        <label for="empleadoCurp" class="form-label">* CURP</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control" id="empleadoCurp" placeholder="" maxlength="18">
                                            <button type="button" class="btn btn-outline-secondary" id="btnGenerarCurpEmpleado" title="Generar CURP">
                                                <i class="ri-settings-3-line"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-6">
                                        <label for="empleadoEstadoCivil" class="form-label">* Estado Civil</label>
                                        <select class="form-select" id="empleadoEstadoCivil">
                                            <option value="">-- Seleccione --</option>
                                            <option value="Soltero" selected>Soltero</option>
                                            <option value="Casado">Casado</option>
                                            <option value="Union libre">Unión libre</option>
                                            <option value="Viudo">Viudo</option>
                                            <option value="Divorciado">Divorciado</option>
                                        </select>
                                    </div>

                                    <div class="col-12 col-md-4">
                                        <label for="empleadoCarrera" class="form-label">Carrera</label>
                                        <input type="text" class="form-control" id="empleadoCarrera" placeholder="">
                                    </div>
                                    <div class="col-12 col-md-4">
                                        <label for="empleadoNivelEstudios" class="form-label">* Nivel de estudios</label>
                                        <select class="form-select" id="empleadoNivelEstudios" required>
                                            <option value="">-- Seleccione --</option>
                                            <option value="Licenciatura">Licenciatura</option>
                                            <option value="Maestría">Maestría</option>
                                            <option value="Doctorado">Doctorado</option>
                                        </select>
                                    </div>
                                    <div class="col-12 col-md-4">
                                        <label for="empleadoCedulaProfesional" class="form-label">Cédula profesional</label>
                                        <input type="text" class="form-control" id="empleadoCedulaProfesional" placeholder="">
                                    </div>
                                    <div class="col-12 col-md-4">
                                        <label for="empleadoFechaEmisionCedula" class="form-label">Fecha de emisión de cédula profesional</label>
                                        <input type="text" class="form-control" id="empleadoFechaEmisionCedula" placeholder="dd/mm/aaaa">
                                    </div>

                                    <div class="col-12 col-md-6">
                                        <label for="empleadoNss" class="form-label">Número de seguro social (NSS)</label>
                                        <input type="text" class="form-control" id="empleadoNss" placeholder="">
                                    </div>
                                </div>

                                <p class="text-muted mt-3 mb-2 small">Nota: Campos obligatorios (*).</p>
                                <div class="d-flex gap-2 justify-content-end mt-3">
                                    <a href="{{ url('profesores') }}" class="btn btn-secondary">Cancelar</a>
                                    <button type="button" class="btn btn-info" id="btnContinuarEmpleado">Continuar</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <!-- Pestaña 2: Información de contacto -->
                <div class="tab-pane fade" id="tab-info-contacto" role="tabpanel">
                    <div class="card">
                        <div class="card-body">
                            <p class="text-muted mb-4">Ingresa los datos de contacto del empleado que deseas registrar y presiona el botón Continuar.</p>

                            <form id="formInfoContactoEmpleado">
                                <h6 class="text-primary mb-2 d-flex justify-content-between align-items-center flex-wrap gap-2">
                                    <span>Domicilio</span>
                                </h6>
                                <div class="row g-3 mb-4">
                                    <div class="col-12">
                                        <label for="empleadoCalleNumero" class="form-label">Calle y No.</label>
                                        <input type="text" class="form-control" id="empleadoCalleNumero" placeholder="">
                                    </div>
                                    <div class="col-12 col-md-6">
                                        <label for="empleadoEntreCalle" class="form-label">Entre calle</label>
                                        <input type="text" class="form-control" id="empleadoEntreCalle" placeholder="">
                                    </div>
                                    <div class="col-12 col-md-6">
                                        <label for="empleadoYcalle" class="form-label">Y calle</label>
                                        <input type="text" class="form-control" id="empleadoYcalle" placeholder="">
                                    </div>
                                    <div class="col-12">
                                        <label for="empleadoOtraReferencia" class="form-label">Otra referencia</label>
                                        <input type="text" class="form-control" id="empleadoOtraReferencia" placeholder="">
                                    </div>
                                    <div class="col-12 col-md-6">
                                        <label for="empleadoPais" class="form-label">País</label>
                                        <select class="form-select" id="empleadoPais">
                                            <option value="">-- Seleccione --</option>
                                        </select>
                                    </div>
                                    <div class="col-12 col-md-6">
                                        <label for="empleadoCodigoPostal" class="form-label">Código postal</label>
                                        <input type="text" class="form-control" id="empleadoCodigoPostal" placeholder="Ej: 20000" maxlength="5">
                                    </div>
                                    <div class="col-12">
                                        <label for="empleadoLocalidad" class="form-label">Localidad</label>
                                        <select class="form-select" id="empleadoLocalidad">
                                            <option value="">Selecciona una opción...</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="row g-3 mb-4">
                                    <div class="col-12 col-md-6">
                                        <label for="empleadoTelefonoCasa" class="form-label">Teléfono de casa</label>
                                        <div class="input-group">
                                            <input type="tel" class="form-control input-telefono-empleado" id="empleadoTelefonoCasa" placeholder="Ej: 4491234567" maxlength="10" inputmode="numeric" autocomplete="tel">
                                            <button type="button" class="btn btn-outline-secondary btn-comunicacion-empleado" data-campo="empleadoTelefonoCasa" title="¿Podemos comunicarnos?">
                                                <i class="ri-close-line icon-comunicacion-empleado" data-estado="no"></i>
                                                <span class="ms-1 d-none d-sm-inline">¿Podemos comunicarnos?</span>
                                            </button>
                                        </div>
                                        <small class="text-muted">Solo 10 dígitos numéricos.</small>
                                    </div>
                                    <div class="col-12 col-md-6">
                                        <label for="empleadoTelefonoCelular" class="form-label">* Teléfono celular</label>
                                        <div class="input-group">
                                            <input type="tel" class="form-control input-telefono-empleado" id="empleadoTelefonoCelular" placeholder="Ej: 4491234567" maxlength="10" inputmode="numeric" autocomplete="tel">
                                            <button type="button" class="btn btn-outline-secondary btn-comunicacion-empleado" data-campo="empleadoTelefonoCelular" title="¿Podemos comunicarnos?">
                                                <i class="ri-close-line icon-comunicacion-empleado" data-estado="no"></i>
                                                <span class="ms-1 d-none d-sm-inline">¿Podemos comunicarnos?</span>
                                            </button>
                                        </div>
                                        <small class="text-muted">Solo 10 dígitos numéricos.</small>
                                    </div>
                                    <div class="col-12 col-md-6">
                                        <label for="empleadoEmail" class="form-label">* Email</label>
                                        <div class="input-group">
                                            <input type="email" class="form-control" id="empleadoEmail" placeholder="Ej: correo@ejemplo.com" autocomplete="email">
                                            <button type="button" class="btn btn-outline-secondary btn-comunicacion-empleado" data-campo="empleadoEmail" title="¿Podemos comunicarnos?">
                                                <i class="ri-close-line icon-comunicacion-empleado" data-estado="no"></i>
                                                <span class="ms-1 d-none d-sm-inline">¿Podemos comunicarnos?</span>
                                            </button>
                                        </div>
                                    </div>
                                </div>

                                <p class="text-muted mt-3 mb-2 small">Nota: Campos obligatorios (*).</p>
                                <div class="d-flex gap-2 justify-content-end mt-3">
                                    <button type="button" class="btn btn-secondary" id="btnRegresarContacto">Regresar</button>
                                    <button type="button" class="btn btn-info" id="btnContinuarContacto">Continuar</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <!-- Pestaña 3: Información institucional -->
                <div class="tab-pane fade" id="tab-info-institucional" role="tabpanel">
                    <div class="card">
                        <div class="card-body">
                            <p class="text-muted mb-4">Ingresa la información interna del empleado que deseas registrar y presiona el botón Continuar.</p>

                            <form id="formInfoInstitucionalEmpleado">
                                <div class="row g-3 mb-4">
                                    <div class="col-12 col-md-3">
                                        <label for="empleadoPlantel" class="form-label">* Plantel</label>
                                        <select class="form-select" id="empleadoPlantel">
                                            <option value="UNII AGS">UNII AGS</option>
                                        </select>
                                    </div>
                                    <div class="col-12 col-md-3">
                                        <label for="empleadoEsProfesor" class="form-label">Es profesor</label>
                                        <select class="form-select" id="empleadoEsProfesor">
                                            <option value="No" selected>No</option>
                                            <option value="Si">Sí</option>
                                        </select>
                                    </div>
                                    <div class="col-12 col-md-3">
                                        <label for="empleadoTieneAcceso" class="form-label">Tiene acceso al sistema</label>
                                        <select class="form-select" id="empleadoTieneAcceso">
                                            <option value="No" selected>No</option>
                                            <option value="Si">Sí</option>
                                        </select>
                                    </div>
                                    <div class="col-12 col-md-3">
                                        <label for="empleadoClave" class="form-label">* Clave</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control" id="empleadoClave" placeholder="Se generará al concluir el registro" readonly>
                                            <button type="button" class="btn btn-outline-secondary" title="Generar"><i class="ri-settings-3-line"></i></button>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-6">
                                        <label for="empleadoCaracteristicasAdmin" class="form-label">Características administrativas</label>
                                        <select class="form-select" id="empleadoCaracteristicasAdmin">
                                            <option value="No" selected>No</option>
                                            <option value="Si">Sí</option>
                                        </select>
                                    </div>
                                </div>

                                <h6 class="text-primary mb-2 mt-4">Información de contrato</h6>
                                <div class="row g-3 mb-3">
                                    <div class="col-12 col-md-4">
                                        <label for="empleadoAccionContrato" class="form-label">Acción</label>
                                    </div>
                                </div>
                                <div class="row g-3 mb-3">
                                    <div class="col-12 col-md-3">
                                        <label for="empleadoNumEmpleado" class="form-label">* N° Empleado</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control" id="empleadoNumEmpleado" placeholder="Se asigna automáticamente (ej. DOC001)" readonly>
                                            <button type="button" class="btn btn-outline-secondary" id="btnActualizarNumEmpleado" title="Obtener siguiente número"><i class="ri-refresh-line"></i></button>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-3">
                                        <label for="empleadoInicioRelacion" class="form-label">Inicio de relación laboral</label>
                                        <input type="text" class="form-control" id="empleadoInicioRelacion" placeholder="dd/mm/aaaa" value="{{ date('d/m/Y') }}">
                                    </div>
                                    <div class="col-12 col-md-3">
                                        <label for="empleadoAntiguedad" class="form-label">Antigüedad (Semanas)</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control" id="empleadoAntiguedad" placeholder="">
                                            <span class="input-group-text"><i class="ri-time-line"></i></span>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-3">
                                        <label for="empleadoDepartamento" class="form-label">* Departamento</label>
                                        <select class="form-select" id="empleadoDepartamento" required>
                                            <option value="">-- Seleccione --</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="row g-3 mb-3">
                                    <div class="col-12 col-md-3">
                                        <label for="empleadoTipoContrato" class="form-label">Tipo de contrato</label>
                                        <select class="form-select" id="empleadoTipoContrato">
                                            <option value="Sin Asignar" selected>Sin Asignar</option>
                                            <option value="Contrato de trabajo por tiempo indeterminado">Contrato de trabajo por tiempo indeterminado</option>
                                            <option value="Contrato de trabajo para obra determinada">Contrato de trabajo para obra determinada</option>
                                            <option value="Contrato de trabajo por tiempo determinado">Contrato de trabajo por tiempo determinado</option>
                                            <option value="Contrato de trabajo por temporada">Contrato de trabajo por temporada</option>
                                            <option value="Contrato de trabajo sujeto a prueba">Contrato de trabajo sujeto a prueba</option>
                                            <option value="Contrato de trabajo con capacitación inicial">Contrato de trabajo con capacitación inicial</option>
                                            <option value="Modalidad de contratación por pago de hora laborada">Modalidad de contratación por pago de hora laborada</option>
                                            <option value="Modalidad de trabajo por comisión laboral">Modalidad de trabajo por comisión laboral</option>
                                            <option value="Modalidades de contratación donde no existe relación de trabajo">Modalidades de contratación donde no existe relación de trabajo</option>
                                            <option value="Jubilación, pensión, retiro">Jubilación, pensión, retiro</option>
                                            <option value="Otro contrato">Otro contrato</option>
                                        </select>
                                    </div>
                                    <div class="col-12 col-md-3">
                                        <label for="empleadoTipoJornada" class="form-label">* Tipo de jornada</label>
                                        <select class="form-select" id="empleadoTipoJornada">
                                            <option value="Sin Asignar" selected>Sin Asignar</option>
                                            <option value="Continuada">Continuada</option>
                                            <option value="Diurna">Diurna</option>
                                            <option value="Mixta">Mixta</option>
                                            <option value="Nocturna">Nocturna</option>
                                            <option value="Otra Jornada">Otra Jornada</option>
                                            <option value="Partida">Partida</option>
                                            <option value="Por hora">Por hora</option>
                                            <option value="Por turnos">Por turnos</option>
                                            <option value="Reducida">Reducida</option>
                                        </select>
                                    </div>
                                    <div class="col-12 col-md-3">
                                        <label for="empleadoPuesto" class="form-label">* Puesto</label>
                                        <select class="form-select" id="empleadoPuesto">
                                            <option value="Sin Asignar" selected>Sin Asignar</option>
                                            <option value="Administrativo">Administrativo</option>
                                            <option value="Auxiliar">Auxiliar</option>
                                            <option value="Contador">Contador</option>
                                            <option value="Coordinador">Coordinador</option>
                                            <option value="Director">Director</option>
                                            <option value="Director general">Director general</option>
                                            <option value="Doctor">Doctor</option>
                                            <option value="Intendente">Intendente</option>
                                            <option value="Profesor">Profesor</option>
                                            <option value="Psicólogo">Psicólogo</option>
                                            <option value="Secretaria">Secretaria</option>
                                            <option value="Supervisor">Supervisor</option>
                                        </select>
                                    </div>
                                    <div class="col-12 col-md-3">
                                        <label for="empleadoRegimen" class="form-label">* Régimen</label>
                                        <select class="form-select" id="empleadoRegimen">
                                            <option value="Sin Asignar" selected>Sin Asignar</option>
                                            <option value="Asimilados acciones">Asimilados acciones</option>
                                            <option value="Asimilados comisionistas">Asimilados comisionistas</option>
                                            <option value="Asimilados Honorarios">Asimilados Honorarios</option>
                                            <option value="Asimilados Integrantes Sociedades Asociaciones Civiles">Asimilados Integrantes Sociedades Asociaciones Civiles</option>
                                            <option value="Asimilados Miembros consejos">Asimilados Miembros consejos</option>
                                            <option value="Asimilados Miembros Sociedades Cooperativas Produccion">Asimilados Miembros Sociedades Cooperativas Produccion</option>
                                            <option value="Asimilados otros">Asimilados otros</option>
                                            <option value="Indemnización o Separación">Indemnización o Separación</option>
                                            <option value="Jubilados">Jubilados</option>
                                            <option value="Jubilados o Pensionados">Jubilados o Pensionados</option>
                                            <option value="Otro Regimen">Otro Regimen</option>
                                            <option value="Pensionados">Pensionados</option>
                                            <option value="Sueldos">Sueldos</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="row g-3 mb-3">
                                    <div class="col-12 col-md-3">
                                        <label for="empleadoPeriodicidadPago" class="form-label">* Periodicidad de pago</label>
                                        <select class="form-select" id="empleadoPeriodicidadPago">
                                            <option value="Sin Asignar" selected>Sin Asignar</option>
                                            <option value="Bimestral">Bimestral</option>
                                            <option value="Catorcenal">Catorcenal</option>
                                            <option value="Comisión">Comisión</option>
                                            <option value="Decenal">Decenal</option>
                                            <option value="Diario">Diario</option>
                                            <option value="Mensual">Mensual</option>
                                            <option value="Otra Periodicidad">Otra Periodicidad</option>
                                            <option value="Precio alzado">Precio alzado</option>
                                            <option value="Quincenal">Quincenal</option>
                                            <option value="Semanal">Semanal</option>
                                            <option value="Unidad obra">Unidad obra</option>
                                        </select>
                                    </div>
                                    <div class="col-12 col-md-3">
                                        <label for="empleadoBanco" class="form-label">Banco</label>
                                        <select class="form-select" id="empleadoBanco">
                                            <option value="">-- Seleccione --</option>
                                        </select>
                                    </div>
                                    <div class="col-12 col-md-3">
                                        <label for="empleadoJornadaLaboral" class="form-label">Jornada laboral</label>
                                        <select class="form-select" id="empleadoJornadaLaboral">
                                            <option value="">No se encontró información</option>
                                        </select>
                                    </div>
                                    <div class="col-12 col-md-3">
                                        <label for="empleadoSalarioBase" class="form-label">Salario base de cotización</label>
                                        <input type="text" class="form-control" id="empleadoSalarioBase" placeholder="">
                                    </div>
                                    <div class="col-12 col-md-3">
                                        <label for="empleadoSalarioDiario" class="form-label">Salario diario integrado</label>
                                        <input type="text" class="form-control" id="empleadoSalarioDiario" placeholder="">
                                    </div>
                                    <div class="col-12 col-md-3">
                                        <label for="empleadoClabe" class="form-label">CLABE</label>
                                        <input type="text" class="form-control" id="empleadoClabe" placeholder="">
                                    </div>
                                </div>

                                <h6 class="text-primary mb-2 mt-4">Información fiscal</h6>
                                <div class="row g-3 mb-3">
                                    <div class="col-12 col-md-4">
                                        <label for="empleadoAccionFiscal" class="form-label">Acción</label>
                                    </div>
                                </div>
                                <div class="row g-3 mb-3">
                                    <div class="col-12 col-md-6">
                                        <label for="empleadoRazonSocial" class="form-label">* Razón Social</label>
                                        <input type="text" class="form-control" id="empleadoRazonSocial" placeholder="">
                                    </div>
                                    <div class="col-12 col-md-6">
                                        <label for="empleadoRfc" class="form-label">* RFC</label>
                                        <input type="text" class="form-control" id="empleadoRfc" placeholder="">
                                    </div>
                                </div>

                                <p class="text-muted mt-3 mb-2 small">Nota: Campos obligatorios (*).</p>
                                <div class="d-flex gap-2 justify-content-end mt-3">
                                    <button type="button" class="btn btn-secondary" id="btnRegresarInstitucional">Regresar</button>
                                    <button type="button" class="btn btn-info" id="btnContinuarInstitucional">Continuar</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <!-- Pestaña 4: Permisos sobre planteles -->
                <div class="tab-pane fade" id="tab-permisos-planteles" role="tabpanel">
                    <div class="card">
                        <div class="card-body">
                            <p class="text-muted mb-4 text-center">Selecciona los <strong>PLANTELES</strong> a los cuales el usuario tendrá acceso para ver o administrar la información.</p>
                            <div class="d-flex justify-content-end gap-2 mb-3">
                                <a href="#" class="text-warning text-decoration-none" id="permisosPlantelesMarcarTodos">Marcar todos</a>
                                <a href="#" class="text-warning text-decoration-none" id="permisosPlantelesDesmarcarTodos">Desmarcar todos</a>
                            </div>
                            <div class="border rounded p-3 bg-light" id="permisosPlantelesChips" style="min-height: 80px;"><span class="text-muted small">No hay planteles registrados en la base de datos.</span></div>
                            <div class="d-flex gap-2 justify-content-end mt-4">
                                <button type="button" class="btn btn-secondary" id="btnRegresarPermisosPlanteles">Regresar</button>
                                <button type="button" class="btn btn-info" id="btnContinuarPermisosOfertas">Continuar</button>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Pestaña 5: Permisos sobre ofertas educativas -->
                <div class="tab-pane fade" id="tab-permisos-ofertas" role="tabpanel">
                    <div class="card">
                        <div class="card-body">
                            <p class="text-muted mb-4 text-center">Selecciona las <strong>OFERTAS EDUCATIVAS</strong> a las cuales el empleado tendrá acceso para ver o administrar la información.</p>
                            <div class="d-flex justify-content-end gap-2 mb-3">
                                <a href="#" class="text-warning text-decoration-none" id="permisosOfertasMarcarTodos">Marcar todos</a>
                                <a href="#" class="text-warning text-decoration-none" id="permisosOfertasDesmarcarTodos">Desmarcar todos</a>
                            </div>
                            <div class="border rounded p-3 bg-light permisos-ofertas-grid" id="permisosOfertasChips" style="min-height: 120px; max-height: 320px; overflow-y: auto;"><span class="text-muted small">No hay ofertas educativas en la base de datos.</span></div>
                            <div class="d-flex gap-2 justify-content-end mt-4">
                                <button type="button" class="btn btn-secondary" id="btnRegresarPermisosOfertas">Regresar</button>
                                <button type="button" class="btn btn-success" id="btnGuardarEmpleado">Guardar</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.js') }}"></script>
    <script src="{{ URL::asset('js/datos-registro.js') }}"></script>
    <script>
    (function() {
        var baseUrl = '{{ url("") }}';
        // Datos incrustados desde el servidor (sin depender de fetch)
        var listadoPlanteles = @json($planteles ?? []);
        var listadoOfertas = @json($ofertasEducativas ?? []);

        // Rellenar nacionalidades
        var selNac = document.getElementById('empleadoNacionalidad');
        if (selNac && typeof NACIONALIDADES !== 'undefined') {
            NACIONALIDADES.forEach(function(n) {
                var opt = document.createElement('option');
                opt.value = n;
                opt.textContent = n;
                if (n === 'Mexicana') opt.selected = true;
                selNac.appendChild(opt);
            });
        }

        // Entidades según nacionalidad
        function actualizarEntidadesEmpleado() {
            var nac = document.getElementById('empleadoNacionalidad').value;
            var selEnt = document.getElementById('empleadoEntidadFederativa');
            if (!selEnt) return;
            var entidades = [];
            if (typeof obtenerEntidadesPorNacionalidad === 'function') {
                entidades = obtenerEntidadesPorNacionalidad(nac) || [];
            } else if (typeof ENTIDADES_MEXICO !== 'undefined') {
                entidades = ENTIDADES_MEXICO;
            }
            selEnt.innerHTML = '<option value="">-- Seleccione --</option>';
            entidades.forEach(function(e) {
                var opt = document.createElement('option');
                opt.value = e;
                opt.textContent = e;
                selEnt.appendChild(opt);
            });
        }
        if (document.getElementById('empleadoNacionalidad')) {
            actualizarEntidadesEmpleado();
            document.getElementById('empleadoNacionalidad').addEventListener('change', actualizarEntidadesEmpleado);
        }

        // Pestaña 2: Poblar País con lista completa de países (datos-registro.js)
        if (typeof PAISES !== 'undefined') {
            var selPais = document.getElementById('empleadoPais');
            if (selPais) {
                selPais.innerHTML = '<option value="">-- Seleccione --</option>';
                PAISES.forEach(function(p) {
                    var opt = document.createElement('option');
                    opt.value = p;
                    opt.textContent = p;
                    if (p === 'México') opt.selected = true;
                    selPais.appendChild(opt);
                });
            }
        }

        // Generar CURP (usa generarCURP de datos-registro.js que llama a generaCurp correctamente)
        document.getElementById('btnGenerarCurpEmpleado').addEventListener('click', function() {
            var nombre = document.getElementById('empleadoNombre').value.trim();
            var ap = document.getElementById('empleadoApellidoPaterno').value.trim();
            var am = document.getElementById('empleadoApellidoMaterno').value.trim();
            var fn = document.getElementById('empleadoFechaNacimiento').value.trim();
            var sexo = document.getElementById('empleadoSexo').value;
            var entidad = document.getElementById('empleadoEntidadFederativa').value;
            if (!nombre || !ap || !fn || !entidad) {
                Swal.fire({ icon: 'warning', title: 'Datos requeridos', text: 'Completa Nombre, Apellido paterno, Fecha de nacimiento y Entidad federativa para generar la CURP.' });
                return;
            }
            if (typeof generarCURP === 'function') {
                document.getElementById('empleadoCurp').value = generarCURP(ap, am, nombre, fn, sexo, entidad);
            } else {
                Swal.fire({ icon: 'info', title: 'Función no disponible', text: 'Completa los campos manualmente.' });
            }
        });

        // Continuar: pasar a pestaña 2 (validar pestaña 1)
        document.getElementById('btnContinuarEmpleado').addEventListener('click', function() {
            var nombramiento = document.getElementById('empleadoNombramiento').value;
            var nombre = document.getElementById('empleadoNombre').value.trim();
            var ap = document.getElementById('empleadoApellidoPaterno').value.trim();
            var nac = document.getElementById('empleadoNacionalidad').value;
            var entidad = document.getElementById('empleadoEntidadFederativa').value;
            var fn = document.getElementById('empleadoFechaNacimiento').value.trim();
            var curp = document.getElementById('empleadoCurp').value.trim();
            var estadoCivil = document.getElementById('empleadoEstadoCivil').value;
            var nivelEstudios = document.getElementById('empleadoNivelEstudios').value;
            var faltantes = [];
            if (!nombramiento) faltantes.push('Nombramiento');
            if (!nombre) faltantes.push('Nombre');
            if (!ap) faltantes.push('Apellido paterno');
            if (!nac) faltantes.push('Nacionalidad');
            if (!entidad) faltantes.push('Entidad federativa');
            if (!fn) faltantes.push('Fecha de nacimiento');
            if (!curp) faltantes.push('CURP');
            if (!estadoCivil) faltantes.push('Estado Civil');
            if (!nivelEstudios) faltantes.push('Nivel de estudios');
            if (curp.length > 0 && curp.length !== 18) {
                Swal.fire({ icon: 'warning', title: 'CURP inválida', text: 'La CURP debe tener 18 caracteres.' });
                return;
            }
            if (faltantes.length > 0) {
                Swal.fire({ icon: 'warning', title: 'Campos obligatorios', text: 'Completa los siguientes campos antes de continuar: ' + faltantes.join(', ') + '.' });
                return;
            }
            document.querySelector('a[href="#tab-info-contacto"]').click();
        });

        // --- Pestaña 2: Información de contacto ---
        // Código postal: auto-llenar Localidad
        var empleadoCP = document.getElementById('empleadoCodigoPostal');
        var empleadoLocalidad = document.getElementById('empleadoLocalidad');
        var empleadoPais = document.getElementById('empleadoPais');
        var timeoutCPEmpleado = null;
        function buscarCPEmpleado() {
            var cp = (empleadoCP.value || '').replace(/\D/g, '');
            if (cp.length !== 5) return;
            if ((empleadoPais.value || '').toLowerCase().indexOf('méxico') === -1) return;
            fetch(baseUrl + '/api/codigo-postal/' + cp, { headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' } })
                .then(function(r) { return r.json(); })
                .then(function(data) {
                    if (!data || data.success !== true) return;
                    var estado = (data.estado || '').toString().trim();
                    var municipio = (data.municipio || '').toString().trim();
                    var asentamiento = (data.asentamiento || '').toString().trim();
                    var texto = [asentamiento, municipio, estado].filter(Boolean).join(', ');
                    if (!texto) return;
                    empleadoLocalidad.innerHTML = '';
                    var opt = document.createElement('option');
                    opt.value = texto;
                    opt.textContent = texto;
                    empleadoLocalidad.appendChild(opt);
                    empleadoLocalidad.value = texto;
                })
                .catch(function() {});
        }
        if (empleadoCP) {
            empleadoCP.addEventListener('input', function() {
                clearTimeout(timeoutCPEmpleado);
                var cp = (empleadoCP.value || '').replace(/\D/g, '');
                if (cp.length === 5) timeoutCPEmpleado = setTimeout(buscarCPEmpleado, 400);
                else if (cp.length > 5) empleadoCP.value = cp.slice(0, 5);
            });
            empleadoCP.addEventListener('blur', function() {
                if ((empleadoCP.value || '').replace(/\D/g, '').length === 5) buscarCPEmpleado();
            });
        }

        // ¿Podemos comunicarnos? (toggle x / check)
        document.querySelectorAll('.btn-comunicacion-empleado').forEach(function(btn) {
            btn.addEventListener('click', function() {
                var icon = this.querySelector('.icon-comunicacion-empleado');
                var estado = icon.getAttribute('data-estado');
                if (estado === 'no') {
                    icon.setAttribute('data-estado', 'si');
                    icon.classList.remove('ri-close-line');
                    icon.classList.add('ri-check-line');
                } else {
                    icon.setAttribute('data-estado', 'no');
                    icon.classList.remove('ri-check-line');
                    icon.classList.add('ri-close-line');
                }
            });
        });

        // Restringir teléfonos a solo 10 dígitos numéricos
        document.querySelectorAll('.input-telefono-empleado').forEach(function(input) {
            input.addEventListener('input', function() {
                this.value = this.value.replace(/\D/g, '').slice(0, 10);
            });
            input.addEventListener('paste', function(e) {
                e.preventDefault();
                var text = (e.clipboardData || window.clipboardData).getData('text').replace(/\D/g, '').slice(0, 10);
                this.value = text;
            });
        });

        document.getElementById('btnRegresarContacto').addEventListener('click', function() {
            document.querySelector('a[href="#tab-info-personal"]').click();
        });
        document.getElementById('btnContinuarContacto').addEventListener('click', function() {
            var email = document.getElementById('empleadoEmail').value.trim();
            var telCelular = (document.getElementById('empleadoTelefonoCelular').value || '').replace(/\D/g, '');
            var telCasa = (document.getElementById('empleadoTelefonoCasa').value || '').replace(/\D/g, '');
            var faltantes = [];
            if (!email) faltantes.push('Email');
            else {
                var reEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                if (!reEmail.test(email)) {
                    Swal.fire({ icon: 'warning', title: 'Email inválido', text: 'Ingresa un correo electrónico válido (ej: correo@ejemplo.com).' });
                    return;
                }
            }
            if (telCelular.length !== 10 && telCelular.length > 0) {
                Swal.fire({ icon: 'warning', title: 'Teléfono celular', text: 'El teléfono celular debe tener exactamente 10 dígitos.' });
                return;
            }
            if (!telCelular) faltantes.push('Teléfono celular');
            if (telCasa.length > 0 && telCasa.length !== 10) {
                Swal.fire({ icon: 'warning', title: 'Teléfono de casa', text: 'El teléfono de casa debe tener exactamente 10 dígitos si lo ingresas.' });
                return;
            }
            if (faltantes.length > 0) {
                Swal.fire({ icon: 'warning', title: 'Campos obligatorios', text: 'Completa los siguientes campos: ' + faltantes.join(', ') + '.' });
                return;
            }
            document.querySelector('a[href="#tab-info-institucional"]').click();
        });

        // + Agregar nueva colonia / Buscar detalladamente (solo si existen en el DOM)
        var btnAgregarColonia = document.getElementById('btnAgregarColoniaEmpleado');
        if (btnAgregarColonia) btnAgregarColonia.addEventListener('click', function(e) { e.preventDefault(); Swal.fire({ icon: 'info', title: 'Próximamente', text: 'Esta función se habilitará posteriormente.' }); });
        var btnBuscarDetallado = document.getElementById('btnBuscarDetalladoEmpleado');
        if (btnBuscarDetallado) btnBuscarDetallado.addEventListener('click', function(e) { e.preventDefault(); Swal.fire({ icon: 'info', title: 'Próximamente', text: 'Esta función se habilitará posteriormente.' }); });

        // --- Pestaña 3: Información institucional ---
        // Departamentos desde API (universidad)
        fetch(baseUrl + '/api/profesores/departamentos').then(function(r) { return r.json(); }).then(function(data) {
            var sel = document.getElementById('empleadoDepartamento');
            if (!sel) return;
            var opts = (data || []).map(function(d) { return '<option value="' + (d.id || d.nombre || '').replace(/"/g, '&quot;') + '">' + (d.nombre || d.id || '') + '</option>'; }).join('');
            sel.innerHTML = '<option value="">-- Seleccione --</option>' + opts;
        });

        // Bancos (México)
        var BANCOS_MEXICO = ['BANCOMEXT', 'BANOBRAS', 'BBVA BANCOMER', 'BANAMEX', 'SANTANDER', 'HSBC', 'SCOTIABANK', 'BANORTE', 'INBURSA', 'BANREGIO', 'AFIRME', 'BANCO DEL BAJIO', 'BANCOPPEL', 'BANCO FAMSA', 'BANCO MULTIVA', 'INVEX', 'BANCO S3', 'ACTINVER', 'INTERCAM', 'CI BANCO', 'BANCO BASE', 'CONSUBANCO', 'UBS BANK', 'ABC CAPITAL', 'BANCREA', 'BANCO PAGATODO', 'FORJADORES', 'BANCO REGIONAL', 'BANCO WALMART', 'BANCO AZTECA', 'BANCO FACIL', 'BANCO FINTERRA', 'BANCO MONEX', 'BANCO SABADELL', 'BANCO SECURITY', 'BANCO BIM', 'BANCO FALABELLA', 'BANCO PLATINUM', 'BANCO DEL BIENESTAR', 'CIBANCO', 'COMPARTAMOS', 'FAMSA', 'NU MEXICO', 'KUSPIT', 'BANCO VERTEX', 'BANCOPPEL', 'BANCO W'];
        var selBanco = document.getElementById('empleadoBanco');
        if (selBanco) {
            selBanco.innerHTML = '<option value="">-- Seleccione --</option>' + BANCOS_MEXICO.map(function(b) { return '<option value="' + b + '">' + b + '</option>'; }).join('');
        }

        // N° Empleado: asignación automática con nomenclatura DOC001, DOC002, ...
        function cargarSiguienteNumeroEmpleado() {
            fetch(baseUrl + '/api/profesores/siguiente-numero-empleado', { headers: { 'Accept': 'application/json' } })
                .then(function(r) { return r.json(); })
                .then(function(data) {
                    var input = document.getElementById('empleadoNumEmpleado');
                    if (input && data && data.numero_empleado) input.value = data.numero_empleado;
                })
                .catch(function() {});
        }
        cargarSiguienteNumeroEmpleado();
        document.querySelector('a[href="#tab-info-institucional"]').addEventListener('click', function() {
            if (!document.getElementById('empleadoNumEmpleado').value) cargarSiguienteNumeroEmpleado();
        });
        var btnActualizarNum = document.getElementById('btnActualizarNumEmpleado');
        if (btnActualizarNum) btnActualizarNum.addEventListener('click', function() { cargarSiguienteNumeroEmpleado(); });

        document.getElementById('btnRegresarInstitucional').addEventListener('click', function() {
            document.querySelector('a[href="#tab-info-contacto"]').click();
        });
        document.getElementById('btnContinuarInstitucional').addEventListener('click', function() {
            var plantel = document.getElementById('empleadoPlantel').value;
            var numEmp = document.getElementById('empleadoNumEmpleado').value.trim();
            var departamento = document.getElementById('empleadoDepartamento').value;
            var puesto = document.getElementById('empleadoPuesto').value;
            var jornada = document.getElementById('empleadoTipoJornada').value;
            var regimen = document.getElementById('empleadoRegimen').value;
            var periodicidad = document.getElementById('empleadoPeriodicidadPago').value;
            var razon = document.getElementById('empleadoRazonSocial').value.trim();
            var rfc = document.getElementById('empleadoRfc').value.trim();
            var faltantes = [];
            if (!plantel) faltantes.push('Plantel');
            if (!numEmp) faltantes.push('N° Empleado');
            if (!departamento) faltantes.push('Departamento');
            if (!puesto || puesto === 'Sin Asignar') faltantes.push('Puesto');
            if (!jornada || jornada === 'Sin Asignar') faltantes.push('Tipo de jornada');
            if (!regimen || regimen === 'Sin Asignar') faltantes.push('Régimen');
            if (!periodicidad || periodicidad === 'Sin Asignar') faltantes.push('Periodicidad de pago');
            if (!razon) faltantes.push('Razón Social');
            if (!rfc) faltantes.push('RFC');
            if (faltantes.length > 0) {
                Swal.fire({ icon: 'warning', title: 'Campos obligatorios', text: 'Completa o selecciona los siguientes campos antes de continuar: ' + faltantes.join(', ') + '.' });
                return;
            }
            document.querySelector('a[href="#tab-permisos-planteles"]').click();
        });

        // --- Pestaña 4: Permisos sobre planteles (datos desde servidor en la página) ---
        if (!Array.isArray(listadoPlanteles)) listadoPlanteles = [];
        var plantelesSeleccionados = {};
        function renderChipsPlanteles() {
            var cont = document.getElementById('permisosPlantelesChips');
            if (!cont) return;
            if (listadoPlanteles.length === 0) {
                cont.innerHTML = '<span class="text-muted small">No hay planteles registrados en la base de datos.</span>';
                return;
            }
            var chips = listadoPlanteles.map(function(p) {
                var id = String(p.id != null ? p.id : p.nombre || '');
                var nombre = (p.nombre || p.id || '').toString().replace(/</g, '&lt;').replace(/"/g, '&quot;');
                var sel = plantelesSeleccionados[id];
                if (sel) {
                    return '<span class="badge bg-secondary me-2 mb-2 d-inline-flex align-items-center chip-plantel" data-plantel-id="' + id.replace(/"/g, '&quot;') + '">' +
                        '<i class="ri-close-line me-1 chip-remove-plantel" style="cursor:pointer;"></i>' + nombre + '</span>';
                } else {
                    return '<span class="badge bg-light text-dark border me-2 mb-2 d-inline-flex align-items-center chip-plantel chip-plantel-no-sel" data-plantel-id="' + id.replace(/"/g, '&quot;') + '" style="cursor:pointer;">' + nombre + '</span>';
                }
            }).join('');
            cont.innerHTML = '<div class="chips-wrap-planteles">' + chips + '</div>';
            cont.querySelectorAll('.chip-remove-plantel').forEach(function(el) {
                el.onclick = function(e) { e.preventDefault(); var id = this.closest('[data-plantel-id]').getAttribute('data-plantel-id'); delete plantelesSeleccionados[id]; renderChipsPlanteles(); };
            });
            cont.querySelectorAll('.chip-plantel-no-sel').forEach(function(el) {
                el.onclick = function() { var id = this.getAttribute('data-plantel-id'); var p = listadoPlanteles.find(function(x) { return String(x.id != null ? x.id : x.nombre) === id; }); if (p) plantelesSeleccionados[id] = p.nombre || p.id; renderChipsPlanteles(); };
            });
        }
        document.querySelector('a[href="#tab-permisos-planteles"]').addEventListener('click', function() {
            renderChipsPlanteles();
        });
        document.getElementById('permisosPlantelesMarcarTodos').addEventListener('click', function(e) { e.preventDefault(); listadoPlanteles.forEach(function(p) { var v = String(p.id != null ? p.id : p.nombre); plantelesSeleccionados[v] = p.nombre || p.id; }); renderChipsPlanteles(); });
        document.getElementById('permisosPlantelesDesmarcarTodos').addEventListener('click', function(e) { e.preventDefault(); plantelesSeleccionados = {}; renderChipsPlanteles(); });
        document.getElementById('btnRegresarPermisosPlanteles').addEventListener('click', function() { document.querySelector('a[href="#tab-info-institucional"]').click(); });
        document.getElementById('btnContinuarPermisosOfertas').addEventListener('click', function() { document.querySelector('a[href="#tab-permisos-ofertas"]').click(); });

        // --- Pestaña 5: Permisos sobre ofertas educativas (datos desde servidor en la página) ---
        if (!Array.isArray(listadoOfertas)) listadoOfertas = [];
        var ofertasSeleccionadas = {};
        function renderChipsOfertas() {
            var cont = document.getElementById('permisosOfertasChips');
            if (!cont) return;
            if (listadoOfertas.length === 0) {
                cont.innerHTML = '<span class="text-muted small">No hay ofertas educativas en la base de datos.</span>';
                return;
            }
            var chips = listadoOfertas.map(function(o) {
                var id = String(o.id != null ? o.id : '');
                var nombre = (o.nombre || '').toString().replace(/</g, '&lt;').replace(/"/g, '&quot;');
                var sel = ofertasSeleccionadas[id];
                if (sel) {
                    return '<span class="badge bg-secondary me-2 mb-2 d-inline-flex align-items-center chip-oferta" data-oferta-id="' + id + '">' +
                        '<i class="ri-close-line me-1 chip-remove-oferta" style="cursor:pointer;"></i>' + nombre + '</span>';
                } else {
                    return '<span class="badge bg-light text-dark border me-2 mb-2 d-inline-flex align-items-center chip-oferta chip-oferta-no-sel" data-oferta-id="' + id + '" style="cursor:pointer;">' + nombre + '</span>';
                }
            }).join('');
            cont.innerHTML = '<div class="chips-wrap-ofertas">' + chips + '</div>';
            cont.querySelectorAll('.chip-remove-oferta').forEach(function(el) {
                el.onclick = function(e) { e.preventDefault(); var id = this.closest('[data-oferta-id]').getAttribute('data-oferta-id'); delete ofertasSeleccionadas[id]; renderChipsOfertas(); };
            });
            cont.querySelectorAll('.chip-oferta-no-sel').forEach(function(el) {
                el.onclick = function() { var id = this.getAttribute('data-oferta-id'); var o = listadoOfertas.find(function(x) { return String(x.id) === id; }); if (o) ofertasSeleccionadas[id] = o.nombre; renderChipsOfertas(); };
            });
        }
        document.querySelector('a[href="#tab-permisos-ofertas"]').addEventListener('click', function() {
            renderChipsOfertas();
        });
        document.getElementById('permisosOfertasMarcarTodos').addEventListener('click', function(e) { e.preventDefault(); listadoOfertas.forEach(function(o) { ofertasSeleccionadas[String(o.id)] = o.nombre; }); renderChipsOfertas(); });
        document.getElementById('permisosOfertasDesmarcarTodos').addEventListener('click', function(e) { e.preventDefault(); ofertasSeleccionadas = {}; renderChipsOfertas(); });
        document.getElementById('btnRegresarPermisosOfertas').addEventListener('click', function() { document.querySelector('a[href="#tab-permisos-planteles"]').click(); });
        document.getElementById('btnGuardarEmpleado').addEventListener('click', function() {
            var numEmp = document.getElementById('empleadoNumEmpleado').value.trim();
            var departamento = document.getElementById('empleadoDepartamento').value;
            var puesto = document.getElementById('empleadoPuesto').value;
            var jornada = document.getElementById('empleadoTipoJornada').value;
            var regimen = document.getElementById('empleadoRegimen').value;
            var periodicidad = document.getElementById('empleadoPeriodicidadPago').value;
            var razon = document.getElementById('empleadoRazonSocial').value.trim();
            var rfc = document.getElementById('empleadoRfc').value.trim();
            var nombre = document.getElementById('empleadoNombre').value.trim();
            var ap = document.getElementById('empleadoApellidoPaterno').value.trim();
            var email = document.getElementById('empleadoEmail').value.trim();
            var telCelular = (document.getElementById('empleadoTelefonoCelular').value || '').replace(/\D/g, '');
            var nivelEstudios = document.getElementById('empleadoNivelEstudios').value;
            var faltantes = [];
            if (!nombre) faltantes.push('Nombre (pestaña 1)');
            if (!ap) faltantes.push('Apellido paterno (pestaña 1)');
            if (!nivelEstudios) faltantes.push('Nivel de estudios (pestaña 1)');
            if (!email) faltantes.push('Email (pestaña 2)');
            if (telCelular.length !== 10) faltantes.push('Teléfono celular con 10 dígitos (pestaña 2)');
            if (!numEmp) faltantes.push('N° Empleado (pestaña 3)');
            if (!departamento) faltantes.push('Departamento (pestaña 3)');
            if (!puesto || puesto === 'Sin Asignar') faltantes.push('Puesto (pestaña 3)');
            if (!jornada || jornada === 'Sin Asignar') faltantes.push('Tipo de jornada (pestaña 3)');
            if (!regimen || regimen === 'Sin Asignar') faltantes.push('Régimen (pestaña 3)');
            if (!periodicidad || periodicidad === 'Sin Asignar') faltantes.push('Periodicidad de pago (pestaña 3)');
            if (!razon) faltantes.push('Razón Social (pestaña 3)');
            if (!rfc) faltantes.push('RFC (pestaña 3)');
            if (faltantes.length > 0) {
                Swal.fire({ icon: 'warning', title: 'Faltan datos obligatorios', text: 'Completa o corrige: ' + faltantes.join(', ') + '.' });
                return;
            }
            var reEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!reEmail.test(email)) {
                Swal.fire({ icon: 'warning', title: 'Email inválido', text: 'Ingresa un correo electrónico válido.' });
                return;
            }
            var payload = {
                numero_empleado: numEmp,
                nombre: nombre,
                apellido_paterno: ap,
                apellido_materno: (document.getElementById('empleadoApellidoMaterno') && document.getElementById('empleadoApellidoMaterno').value) ? document.getElementById('empleadoApellidoMaterno').value.trim() : '',
                email: email,
                telefono: telCelular || (document.getElementById('empleadoTelefonoCasa').value || '').replace(/\D/g, '') || null,
                especialidad: (document.getElementById('empleadoCarrera') && document.getElementById('empleadoCarrera').value) ? document.getElementById('empleadoCarrera').value.trim() : null,
                nivel_estudios: nivelEstudios
            };
            fetch(baseUrl + '/api/profesores/empleados', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'X-Requested-With': 'XMLHttpRequest' },
                body: JSON.stringify(payload)
            }).then(function(r) {
                return r.json().then(function(data) { return { ok: r.ok, status: r.status, data: data }; });
            }).then(function(res) {
                var data = res.data;
                if (res.ok && data && data.success) {
                    Swal.fire({
                        icon: 'success',
                        title: '¡Registro exitoso!',
                        text: 'El empleado se ha registrado correctamente en el sistema.',
                        confirmButtonColor: '#3085d6'
                    }).then(function() {
                        window.location.href = baseUrl + '/profesores';
                    });
                } else {
                    var msg = (data && data.message) ? data.message : 'No se pudo guardar el empleado.';
                    if (data && data.errors) {
                        var first = Object.keys(data.errors)[0];
                        if (first && data.errors[first][0]) msg = data.errors[first][0];
                    }
                    Swal.fire({ icon: 'error', title: 'Error', text: msg });
                }
            }).catch(function(err) {
                Swal.fire({ icon: 'error', title: 'Error', text: 'No se pudo conectar con el servidor. Intenta de nuevo.' });
            });
        });

        // Pintar chips al cargar la página (datos ya vienen en listadoPlanteles y listadoOfertas)
        renderChipsPlanteles();
        renderChipsOfertas();
    })();
    </script>
@endsection