<style>
    .image-preview-container {
        position: relative;
        width: 100%;
        min-height: 250px;
        max-height: 400px;
        border-radius: .35rem;
    }

    .image-preview-container img {
        display: block;
        width: 100%;
        min-height: 250px;
        max-height: 400px;
        object-fit: contain;
        border-radius: .35rem;
    }
</style>

<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0">Gestión de Empleados</h4>

            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item">Recursos humanos</li>
                    <li class="breadcrumb-item">Administración</li>
                    <li class="breadcrumb-item active">Empleados</li>
                </ol>
            </div>

        </div>
    </div>
</div>
<div class="card">
    <div class="card-header pt-1">
        <form id="buscarEmpleado-form" name="buscarEmpleado-form" accept-charset="utf-8" class="needs-validation" novalidate>
            <div class="row">
                <div class="col-sm-12 col-md-4 col-lg-2">
                    <label class="form-label" for="cbo-tipoPlanilla">Tipo de planilla <span class="required">*</span></label>
                    <select class="form-select form-select-sm" id="cbo-tipoPlanilla" required>
                        <option value="">Seleccionar tipo de planilla</option>
                    </select>
                    <div class="invalid-feedback">
                        Por favor seleccione el tipo de planilla
                    </div>
                </div>
                <div class="col-sm-12 col-md-4 col-lg-2">
                    <label class="form-label" for="cbo-sucursal">Sucursal <span class="required">*</span></label>
                    <div class="form-group form-group-sm has-validation">
                        <select class="form-control form-control-sm selectpicker" id="cbo-sucursal" data-live-search="true" title="" required>
                            <option value="">Selecciona la sucursal</option>
                        </select>
                        <div class="invalid-feedback">
                            Por favor seleccione la sucursal
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 col-md-4 col-lg-2">
                    <label class="form-label" for="cbo-proyecto">Proyecto <span class="required"></label>
                    <div class="form-group form-group has-validation">
                        <select class="form-control form-control-sm selectpicker" id="cbo-proyecto" data-live-search="true" title="" required>
                            <option value="">Selecionar el proyecto</option>
                        </select>
                        <div class="invalid-feedback">
                            Por favor seleccione el proyecto
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 col-md-4 col-lg-2 d-none">
                    <select id="cbo-empresa" name="cbo-empresa" class="form-select">
                        <option value=""></option>
                    </select>
                </div>
                <div class="col-sm-12 col-md-4 col-lg-2">
                    <label for="cbo-estadoBusqueda" class="form-label">Estado</label>
                    <select id="cbo-estadoBusqueda" name="cbo-estadoBusqueda" class="form-select form-select-sm" required>
                        <option value="1" selected>Activo</option>
                        <option value="0">Inactivo</option>
                        <option value="2">Todos</option>
                    </select>
                </div>
                <div class="col-sm-12 col-md-4 col-lg-1">
                    &nbsp;
                    <div class="d-grid">
                        <button type="submit" class="btn btn-sm btn-primary btn-rounded waves-effect waves-light" id="btn-buscar-empleado" style="margin-top:1.5px !important;">
                            <i class="fas fa-search"></i>
                            <span>Buscar</span>
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div class="border">
        <ul class="nav nav-pills custom-hover-nav-tabs">
            <li class="nav-item">
                <a href="#contenedor-usuarios" data-bs-toggle="tab" aria-expanded="false" class="nav-link active" id="empleados-tab">
                    <i class="fas fa-users nav-icon nav-tab-position"></i>
                    <h5 class="nav-titl nav-tab-position m-0">Empleados</h5>
                </a>
            </li>
            <li class="nav-item">
                <a href="#contenedor-edicion" data-bs-toggle="tab" aria-expanded="false" class="nav-link disabled" id="editar-empleado-tab">
                    <i class="fas fa-user-edit nav-icon nav-tab-position"></i>
                    <h5 class="nav-titl nav-tab-position m-0">Edición</h5>
                </a>
            </li>
            <li class="nav-item ms-auto" id="btns-nuevo-empleado">
                <div class="h-100 pe-1 d-flex align-items-center">
                    <button class="btn btn-sm btn-primary btn-rounded waves-effect waves-light" id="btn-agregar-empleado" type="button" disabled>
                        <i class="fas fa-user-plus"></i>
                        <span>Agregar empleado</span>
                    </button>
                </div>
            </li>
            <li class="nav-item ms-auto d-none" id="btns-guardar-empleado">
                <div class="h-100 pe-1 d-flex align-items-center">
                    <div class="h-100 pe-1 d-flex align-items-center">
                        <button class="btn btn-sm btn-primary btn-rounded waves-effect waves-light" type="button" id="btn-guardar-empleado">
                            <i class="fa-solid fa-save"></i>
                            <span>Guardar</span>
                        </button>
                        <button class="btn ms-2 btn-sm btn-danger btn-rounded waves-effect waves-light" type="button" id="btn-cancelar-edicion">
                            <i class="fa-solid fa-times"></i>
                            <span>Cancelar</span>
                        </button>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="card-body p-0">
        <div class="tab-content text-muted">
            <div class="tab-pane fade show active pt-3 pb-3 pe-2 ps-2" id="contenedor-usuarios">
                <div class="row">
                    <div class="col-12">
                        <table class="table table-sm table-responsive table-bordered w-100" id="tbl-empleados" name="tbl-empleados" style="text-align:center;">
                            <thead>
                                <tr>
                                    <th class="text-center">N°</th>
                                    <th class="text-center">Foto</th>
                                    <th class="text-center">CODEMPLEADO</th>
                                    <th>Nombre completo</th>
                                    <th class="text-center">Sucursal</th>
                                    <th class="text-center">Proyecto</th>
                                    <th class="text-center">Departamento</th>
                                    <th class="text-center">Puesto</th>
                                    <th class="text-center">Planilla</th>
                                    <th class="text-center">Estado</th>
                                    <th class="text-center">Acciones</th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade ps-2 pe-2" id="contenedor-edicion">
                <fieldset class="w-auto border">
                    <legend>Datos generales</legend>
                    <form id="empleado-form" name="empleado-form" accept-charset="utf-8" class="needs-validation" novalidate>
                        <div class="row">
                            <div class="col-sm-12 col-md-4 col-lg-2">
                                <div class="custom-employee-image">
                                    <div class="profile-user position-relative d-inline-block mx-auto  mb-4">
                                        <img src="main/RRHH/assets/images/empleados/default.png?v=<?= rand(); ?>" class="rounded-circle avatar-xxl img-thumbnail user-profile-image" alt="empleado-profile-image" id="img-foto-empleado">
                                        <div class="avatar-xxl p-0 rounded-circle profile-photo-delete">
                                            <button type="button" id="btn-eliminarFotoEmpleado" class="d-none"></button>
                                            <label for="btn-eliminarFotoEmpleado" class="profile-photo-delete avatar-ssm">
                                                <span class="avatar-title rounded-circle bg-danger text-body custom-employee-button">
                                                    <i class="fas fa-trash-can"></i>
                                                </span>
                                            </label>
                                        </div>
                                        <div class="avatar-xxl p-0 rounded-circle profile-photo-edit">
                                            <input id="file-foto-empleado" type="file" class="profile-img-file-input" accept="image/*" name="file-foto-empleado" />
                                            <label for="file-foto-empleado" class="profile-photo-edit avatar-ssm">
                                                <span class="avatar-title rounded-circle bg-secondary text-body custom-employee-button">
                                                    <i class="ri-camera-fill"></i>
                                                </span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-12 col-md-8 col-lg-10">
                                <div class="row">
                                    <div class="col-sm-12 col-md-4 col-lg-3 mayusculas">
                                        <label for="txt-codigoEmpleado" class="form-label mt-0">Código de empleado <span class="required">*</span></label>
                                        <div class="input-group input-group-sm has-validation">
                                            <input type="text" class="form-control" id="txt-codigoEmpleado" name="txt-codigoEmpleado" placeholder="Código de empleado" required readonly>
                                            <div class="invalid-feedback">
                                                Por favor ingrese el código de empleado
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-12 col-md-4 col-lg-3">
                                        <label for="cbo-tipoDocumento" class="form-label mt-0">Tipo de documento <span class="required">*</span></label>
                                        <select class="form-select form-select-sm" id="cbo-tipoDocumento" name="cbo-tipoDocumento" required title="">
                                            <option value="">Seleccione</option>
                                        </select>
                                        <div class="invalid-feedback">
                                            Por favor ingrese tipo de documento.
                                        </div>
                                    </div>
                                    <div class="col-sm-12 col-md-4 col-lg-3">
                                        <label for="txt-numeroDocumento" class="form-label mt-0">Número de documento <span class="required">*</span></label>
                                        <input type="text" class="form-control form-control-sm" id="txt-numeroDocumento" name="txt-numeroDocumento" placeholder="Número de documento" required>
                                        <div class="invalid-feedback">
                                            Por favor ingrese el número de documento
                                        </div>
                                    </div>
                                    <div class="col-sm-12 col-md-4 col-lg-3">
                                        <label for="txt-nit" class="form-label mt-0">NIT <span class="required">*</span></label>
                                        <input type="text" class="form-control form-control-sm nit" id="txt-nit" name="txt-nit" placeholder="Número de documento" required pattern="^[0-9]{4}-[0-9]{6}-[0-9]{3}-[0-9]{1}$">
                                        <div class="invalid-feedback">
                                            Por favor ingrese el NIT
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-12 col-md-4 col-lg-3 mayusculas">
                                        <label for="txt-primerNombre" class="form-label">Primer nombre <span class="required">*</span></label>
                                        <input type="text" class="form-control form-control-sm" id="txt-primerNombre" name="txt-primerNombre" placeholder="Primer nombre" required>
                                        <div class="invalid-feedback">
                                            Por favor ingrese el primer nombre
                                        </div>
                                    </div>
                                    <div class="col-sm-12 col-md-4 col-lg-3 mayusculas">
                                        <label for="txt-segundoNombre" class="form-label">Segundo nombre <span class="required">*</span></label>
                                        <input type="text" class="form-control form-control-sm" id="txt-segundoNombre" name="txt-segundoNombre" placeholder="Segundo nombre">
                                        <div class="invalid-feedback">
                                            Por favor ingrese el segundo nombre
                                        </div>
                                    </div>
                                    <div class="col-sm-12 col-md-4 col-lg-3 mayusculas">
                                        <label for="txt-primerApellido" class="form-label">Primer apellido <span class="required">*</span></label>
                                        <input type="text" class="form-control form-control-sm" id="txt-primerApellido" name="txt-primerApellido" placeholder="Primer apellido" required>
                                        <div class="invalid-feedback">
                                            Por favor ingrese el primer apellido
                                        </div>
                                    </div>
                                    <div class="col-sm-12 col-md-4 col-lg-3 mayusculas">
                                        <label for="txt-segundoApellido" class="form-label">Segundo apellido <span class="required">*</span></label>
                                        <input type="text" class="form-control form-control-sm" id="txt-segundoApellido" name="txt-segundoApellido" placeholder="Segundo apellido">
                                        <div class="invalid-feedback">
                                            Por favor ingrese el segundo apellido
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-12 col-md-4 col-lg-3 d-none">
                                        <label for="cbo-empresaEmpleado" class="form-label">Empresa <span class="required">*</span></label>
                                        <select id="cbo-empresaEmpleado" name="cbo-empresaEmpleado" title="" class="form-select form-select-sm" required>
                                            <option value="" selected disabled>Seleccione</option>
                                        </select>
                                        <div class="invalid-feedback">
                                            Por favor seleccione la empresa
                                        </div>
                                    </div>
                                    <div class="col-sm-12 col-md-4 col-lg-3">
                                        <label for="cbo-sucursalEmpleado" class="form-label">Sucursal <span class="required">*</span></label>
                                        <div class="form-group form-group-sm has-validation">
                                            <select id="cbo-sucursalEmpleado" name="cbo-sucursalEmpleado" class="form-control form-control-sm selectpicker" data-live-search="true" title="" required>
                                                <option value="" selected disabled>Seleccione</option>
                                            </select>
                                            <div class="invalid-feedback">
                                                Por favor seleccione la sucursal
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-12 col-md-4 col-lg-3">
                                        <label for="cbo-proyectoEmpleado" class="form-label">Proyecto <span class="required">*</span></label>
                                        <div class="form-group form-group-sm has-validation">
                                            <select id="cbo-proyectoEmpleado" name="cbo-proyectoEmpleado" class="form-control form-control-sm selectpicker" data-live-search="true" title="" required>
                                                <option value="" selected disabled>Seleccione</option>
                                            </select>
                                            <div class="invalid-feedback">
                                                Por favor seleccione el proyecto
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-12 col-md-4 col-lg-3">
                                        <label for="cbo-unidadTrabajo" class="form-label">Unidad de trabajo <span class="required">*</span></label>
                                        <div class="form-group form-group-sm has-validation">
                                            <select id="cbo-unidadTrabajo" name="cbo-unidadTrabajo" class="form-control form-control-sm selectpicker" data-live-search="true" title="" required>
                                                <option value="" selected disabled>Seleccione</option>
                                            </select>
                                            <div class="invalid-feedback">
                                                Por favor seleccione el proyecto
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </fieldset>
                <ul class="nav nav-tabs mt-2" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="datosPersonales-tab" data-bs-toggle="tab" data-bs-target="#datosPersonales" type="button" role="tab" aria-controls="datosPersonales" aria-selected="true">Datos personales</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="datosGenerales-tab" data-bs-toggle="tab" data-bs-target="#datosGenerales" type="button" role="tab" aria-controls="datosGenerales" aria-selected="false">Datos generales</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="datosComplementarios-tab" data-bs-toggle="tab" data-bs-target="#datosComplementarios" type="button" role="tab" aria-controls="datosComplementarios" aria-selected="false">Datos complementarios</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="adjuntos-tab" data-bs-toggle="tab" data-bs-target="#adjuntos" type="button" role="tab" aria-controls="adjuntos" aria-selected="false">Adjuntos</button>
                    </li>
                </ul>
                <div class="tab-content pb-3">
                    <div class="tab-pane fade show active" id="datosPersonales" role="tabpanel" aria-labelledby="datosPersonales-tab">
                        <form id="datosPersonales-form" name="datosPersonales-form" class="needs-validation" novalidate accept-charset="utf-8">
                            <div class="row">
                                <div class="col-sm-12 col-md-4 col-lg-2">
                                    <label for="cbo-genero" class="form-label">Género <span class="required">*</span></label>
                                    <select id="cbo-genero" name="cbo-genero" required class="form-select form-select-sm" title="">
                                        <option selected disabled value="">Seleccione</option>
                                        <option value="M">Masculino</option>
                                        <option value="F">Femenino</option>
                                    </select>
                                    <div class="invalid-feedback">
                                        Por favor seleccione el género
                                    </div>
                                </div>
                                <div class="col-sm-12 col-md-4 col-lg-2">
                                    <label for="cbo-estadoCivil" class="form-label">Estado civil <span class="required">*</span></label>
                                    <div class="form-group form-group-sm has-validation">
                                        <select id="cbo-estadoCivil" name="cbo-estadoCivil" class="form-control form-control-sm selectpicker" data-live-search="true" title="" required>
                                            <option value="" selected disabled>Seleccione</option>
                                        </select>
                                        <div class="invalid-feedback">
                                            Por favor seleccione el estado civil
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-12 col-md-4 col-lg-2 mayusculas">
                                    <label for="txt-apellidoCasada" class="form-label">Apellido de casada </label>
                                    <input type="text" class="form-control form-control-sm" id="txt-apellidoCasada" name="txt-apellidoCasada" placeholder="Apellido de casada">
                                    <div class="invalid-feedback">
                                        Por favor ingrese el apellido de casada
                                    </div>
                                </div>
                                <div class="col-sm-12 col-md-6 col-lg-4 mayusculas">
                                    <label for="txt-conociPor" class="form-label">Conocido por</label>
                                    <input type="text" class="form-control form-control-sm" id="txt-conocidoPor" name="txt-conocidoPor" placeholder="Conocido por">
                                </div>
                                <div class="col-sm-12 col-md-4 col-lg-2">
                                    <label for="txt-fechaNacimiento" class="form-label">Fecha de nacimiento <span class="required">*</span></label>
                                    <input type="text" class="form-control form-control-sm flatpickr" id="txt-fechaNacimiento" name="txt-fechaNacimiento" placeholder="DD-MM-YYYY" required data-only-adults="true" data-static="false">
                                </div>
                                <div class="col-sm-12 col-md-4 col-lg-2">
                                    <label for="num-edad" class="form-label">Edad <span class="required">*</span></label>
                                    <input type="num" class="form-control form-control-sm" id="num-edad" name="num-edad" placeholder="Edad" required disabled>
                                </div>
                                <div class="col-sm-12 col-md-4 col-lg-2">
                                    <label for="cbo-pais" class="form-label">País <span class="required">*</span></label>
                                    <div class="form-group form-group-sm has-validation">
                                        <select id="cbo-pais" name="cbo-pais" class="form-control form-control-sm selectpicker" data-live-search="true" title="" required>
                                            <option value="" selected disabled>Seleccione</option>
                                        </select>
                                        <div class="invalid-feedback">
                                            Por favor seleccione el país
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-12 col-md-4 col-lg-2">
                                    <label for="cbo-departamento" class="form-label">Departamento <span class="required">*</span></label>
                                    <div class="form-group form-group-sm has-validation">
                                        <select id="cbo-departamento" name="cbo-departamento" class="form-control form-control-sm selectpicker" title="" data-live-search="true" required>
                                            <option selected disabled value="">Seleccione</option>
                                        </select>
                                        <div class="invalid-feedback">
                                            Por favor seleccione el departamento
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-12 col-md-4 col-lg-2">
                                    <label for="txt-nunicipio" class="form-label">Municipio <span class="required">*</span></label>
                                    <div class="form-group form-group-sm has-validation">
                                        <select id="cbo-municipio" name="cbo-municipio" class="form-control form-control-sm selectpicker" data-live-search="true" title="" required>
                                            <option value="" selected disabled>Seleccione</option>
                                        </select>
                                        <div class="invalid-feedback">
                                            Por favor seleccione el municipio
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-12 col-md-6 col-lg-4 mayusculas">
                                    <label for="txt-direccion" class="form-label">Dirección <span class="required">*</span></label>
                                    <input type="text" class="form-control form-control-sm" id="txt-direccion" name="txt-direccion" placeholder="Dirección" required>
                                    <div class="invalid-feedback">
                                        Por favor ingrese la dirección
                                    </div>
                                </div>
                                <div class="col-sm-12 col-md-4 col-lg-2">
                                    <label for="txt-telefonoFijo" class="form-label">Teléfono fijo</label>
                                    <input type="text" class="form-control form-control-sm telefono" id="txt-telefonoFijo" name="txt-telefonoFijo" placeholder="Teléfono fijo">
                                </div>
                                <div class="col-sm-12 col-md-4 col-lg-2">
                                    <label for="txt-telefonoCelular" class="form-label">Teléfono celular</label>
                                    <input type="text" class="form-control form-control-sm telefono" id="txt-telefonoCelular" name="txt-telefonoCelular" placeholder="Teléfono celular">
                                </div>
                                <div class="col-sm-12 col-md-6 col-lg-4">
                                    <label for="cbo-profesion" class="form-label">Profesión <span class="required">*</span></label>
                                    <div class="form-group form-group-sm has-validation">
                                        <select id="cbo-profesion" name="cbo-profesion" class="form-control form-control-sm selectpicker" data-live-search="true" title="" required>
                                            <option value="" selected disabled>Seleccione</option>
                                        </select>
                                        <div class="invalid-feedback">
                                            Por favor seleccione la profesión
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-12 col-md-4 col-lg-2">
                                    <label for="txt-fechaEmisionDUI" class="form-label">Fecha emisión DUI<span class="required">*</span></label>
                                    <input type="text" class="form-control form-control-sm flatpickr" id="txt-fechaEmisionDUI" name="txt-fechaEmisionDUI" placeholder="DD-MM-YYYY" required data-max-today="true" data-static="false">
                                    <div class="invalid-feedback">
                                        Por favor ingrese la fecha de emisión del DUI
                                    </div>
                                </div>
                                <div class="col-sm-12 col-md-4 col-lg-2">
                                    <label for="txt-fechaVencimientoDUI" class="form-label">Vencimiento DUI <span class="required">*</span></label>
                                    <input type="text" class="form-control form-control-sm flatpickr" data-min-today="true" id="txt-fechaVencimientoDUI" name="txt-fechaVencimientoDUI" placeholder="DD-MM-YYYY" required data-static="false">
                                    <div class="invalid-feedback">
                                        Por favor ingrese la fecha de vencimiento del DUI
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="tab-pane fade" id="datosGenerales" role="tabpanel" aria-labelledby="datosGenerales-tab">
                        <form id="datosGenerales-form" name="datosGenerales-form" class="needs-validation" novalidate accept-charset="utf-8">
                            <div class="row">
                                <div class="col-sm-12 col-md-4 col-lg-2">
                                    <label for="cbo-departamentoEmpresa" class="form-label">Departamento empresa <span class="required">*</span></label>
                                    <div class="form-group form-group-sm has-validation">
                                        <select class="form-control form-control-sm selectpicker" id="cbo-departamentoEmpresa" name="cbo-departamentoEmpresa" required title="" data-live-search="true">
                                            <option selected disabled value="">Seleccione</option>
                                        </select>
                                        <div class="invalid-feedback">
                                            Por favor seleccione el departamento de la empresa
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-12 col-md-4 col-lg-2">
                                    <label for="cbo-puesto" class="form-label">Puesto <span class="required">*</span></label>
                                    <div class="form-group form-group-sm has-validation">
                                        <select class="form-control form-control-sm selectpicker" id="cbo-puesto" name="cbo-puesto" required title="" data-live-search="true">
                                            <option selected disabled value="">Seleccione</option>
                                        </select>
                                        <div class="invalid-feedback">
                                            Por favor seleccione el puesto
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-12 col-md-6 col-lg-4">
                                    <label for="cbo-jefeInmediato" class="form-label">Jefe inmediato</label>
                                    <div class="form-group form-group-sm has-validation">
                                        <select class="form-control form-control-sm selectpicker" id="cbo-jefeInmediato" data-live-search="true" name="cbo-jefeInmediato" title="">
                                            <option selected disabled value="">Seleccione</option>
                                        </select>
                                        <div class="invalid-feedback">
                                            Por favor seleccione el jefe inmediato
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-12 col-md-4 col-lg-2">
                                    <label for="cbo-estado" class="form-label">Estado <span class="required">*</span></label>
                                    <select id="cbo-estado" name="cbo-estado" class="form-select form-select-sm" title="" required disabled>
                                        <option selected disabled value="">Seleccione</option>
                                    </select>
                                </div>
                                <div class="col-sm-12 col-md-4 col-lg-2">
                                    <label for="txt-fechaIngreso" class="form-label">Fecha de ingreso <span class="required">*</span></label>
                                    <input type="text" class="form-control form-control-sm flatpickr" id="txt-fechaIngreso" name="txt-fechaIngreso" placeholder="DD-MM-YYYY" data-static="false" required>
                                    <div class="invalid-feedback">
                                        Por favor ingrese la fecha de ingreso
                                    </div>
                                </div>
                                <div class="col-sm-12 col-md-4 col-lg-2">
                                    <label class="form-label">¿Cotiza ISSS?</label><br />
                                    <input type="checkbox" id="chk-cotizaISSS" switch="none">
                                    <label for="chk-cotizaISSS" data-on-label="Si" data-off-label="No" class="mb-0"></label>
                                </div>
                                <div class="col-sm-12 col-md-4 col-lg-2">
                                    <label for="txt-fechaInicioCotizacion" class="form-label">Fecha inicio cotización <span class="required">*</span></label>
                                    <input type="date" class="form-control form-control-sm flatpickr" id="txt-fechaInicioCotizacion" name="txt-fechaInicioCotizacion" placeholder="DD-MM-YYYY" data-static="false" required>
                                </div>
                                <div class="col-sm-12 col-md-4 col-lg-2">
                                    <label for="txt-numeroAfiliadoISSS" class="form-label">Número de afiliado ISSS <span class="required">*</span></label>
                                    <input type="text" class="form-control form-control-sm" id="txt-numeroAfiliadoISSS" name="txt-numeroAfiliadoISSS" placeholder="Número de afiliado ISSS" required>
                                </div>
                                <div class="col-sm-12 col-md-4 col-lg-2">
                                    <label class="form-label">¿Cotiza AFP?</label><br />
                                    <input type="checkbox" id="chk-cotizaAFP" switch="none">
                                    <label for="chk-cotizaAFP" data-on-label="Si" data-off-label="No" class="mb-0"></label>
                                </div>
                                <div class="col-sm-12 col-md-4 col-lg-2">
                                    <label for="cbo-tipoAFP" class="form-label">Tipo de AFP <span class="required">*</span></label>
                                    <select id="cbo-tipoAFP" name="cbo-tipoAFP" class="form-select form-select-sm" required title="">
                                        <option selected disabled value="">Seleccione</option>
                                    </select>
                                    <div class="invalid-feedback">
                                        Por favor seleccione el tipo de AFP
                                    </div>
                                </div>
                                <div class="col-sm-12 col-md-4 col-lg-2">
                                    <label for="txt-nup" class="form-label">NUP <span class="required">*</span></label>
                                    <input type="num" class="form-control form-control-sm" id="txt-nup" name="txt-nup" placeholder="NUP" required>
                                </div>
                                <div class="col-sm-12 col-md-4 col-lg-2">
                                    <label for="num-salario" class="form-label">Salario quincenal <span class="required">*</span></label>
                                    <input type="number" class="form-control form-control-sm" id="num-salario" name="num-salario" placeholder="Salario" min="0" step="0.01" required>
                                </div>
                                <div class="col-sm-12 col-md-4 col-lg-2">
                                    <label class="form-label" for="cbo-tipoPago">Tipo de pago</label>
                                    <select class="form-select form-select-sm" id="cbo-tipoPago" name="cbo-tipoPago" title="" required>
                                        <option selected disabled value="">Seleccionar tipo de pago</option>
                                        <option value="0">Efectivo</option>
                                        <option value="1">Transferencia</option>
                                    </select>
                                </div>
                                <div class="col-sm-12 col-md-4 col-lg-2">
                                    <label class="form-label" for="cbo-banco">Banco de pago</label>
                                    <select class="form-control form-control-sm selectpicker" id="cbo-banco" name="cbo-banco" required title="" data-live-search="true">
                                        <option selected disabled value="">Seleccione</option>
                                    </select>
                                    <div class="invalid-feedback">
                                        Por favor seleccione el banco
                                    </div>
                                </div>
                                <div class="col-sm-12 col-md-4 col-lg-2">
                                    <label class="form-label" for="txt-numeroCuenta">Número de cuenta</label>
                                    <input type="num" class="form-control form-control-sm" id="txt-numeroCuenta" name="txt-numeroCuenta" placeholder="Numero de cuenta" required>
                                </div>
                                <div class="col-sm-12 col-md-4 col-lg-2">
                                    <label class="form-label" for="txt-numeroTarjeta">Número de tarjeta</label>
                                    <input type="num" class="form-control form-control-sm" id="txt-numeroTarjeta" name="txt-numeroTarjeta" placeholder="Numero de tarjeta" required>
                                </div>
                                <div class="col-sm-12 col-md-4 col-lg-2">
                                    <label class="form-label">¿Posee arma de fuego?</label><br />
                                    <input type="checkbox" id="chk-armaFuego" switch="none">
                                    <label for="chk-armaFuego" data-on-label="Si" data-off-label="No" class="mb-0"></label>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="tab-pane fade" id="datosComplementarios" role="tabpanel" aria-labelledby="datosComplementarios-tab">
                        <fieldset class="w-auto border pt-0">
                            <legend>Licencia de portación de armas</legend>
                            <form id="portacionArmas-form" name="portacionArmas-form" accept-charset="utf-8" method="POST" class="needs-validation" novalidate>
                                <div class="row">
                                    <div class="col-sm-12 col-md-4 col-lg-2">
                                        <label class="form-label mt-1" for="txt-licenciaArmas">Número de licencia</label>
                                        <input type="text" class="form-control form-control-sm" id="txt-licenciaArmas" placeholder="Número de licencia" onkeypress="return soloNumeros(event);" required>
                                        <div class="invalid-feedback">
                                            Por favor ingrese el número de licencia
                                        </div>
                                    </div>
                                    <div class="col-sm-12 col-md-4 col-lg-2">
                                        <label class="form-label mt-1" for="txt-fechaEmisionLicenciaArmas">Fecha de emisión</label>
                                        <input type="text" class="form-control form-control-sm flatpickr" data-max-today="true" id="txt-fechaEmisionLicenciaArmas" placeholder="DD-MM-YYYY" data-static="false" required>
                                        <div class="invalid-feedback">
                                            Por favor ingrese la fecha de emisión
                                        </div>
                                    </div>
                                    <div class="col-sm-12 col-md-4 col-lg-2">
                                        <label class="form-label mt-1" for="txt-fechaExpiracionLicenciaArmas">Fecha de expiración</label>
                                        <input type="date" class="form-control form-control-sm flatpickr" data-min-month="true" id="txt-fechaExpiracionLicenciaArmas" placeholder="MM-YYYY" data-static="false" required data-only-MY="true">
                                        <div class="invalid-feedback">
                                            Por favor ingrese la fecha de expiración
                                        </div>
                                    </div>
                                    <div class="col-sm-12 col-md-4 col-lg-2 mayusculas">
                                        <label class="form-label mt-1" for="txt-emergenciaLicenciaArmas">En emergencia llamar a</label>
                                        <input type="text" class="form-control form-control-sm" id="txt-emergenciaLicenciaArmas" placeholder="Favor escriba el nombre" required>
                                        <div class="invalid-feedback">
                                            Por favor ingrese el nombre
                                        </div>
                                    </div>
                                    <div class="col-sm-12 col-md-4 col-lg-2">
                                        <label class="form-label mt-1" for="txt-registroLicenciaArmas">Número de registro</label>
                                        <input type="text" class="form-control form-control-sm" id="txt-registroLicenciaArmas" placeholder="Número de registro" onkeypress="return soloNumeros(event);" required>
                                        <div class="invalid-feedback">
                                            Por favor ingrese el número de registro
                                        </div>
                                    </div>
                                    <div class="col-sm-12 col-md-4 col-lg-2">
                                        <label class="form-label mt-1" for="txt-tipoSangreLicenciaArma">Tipo de sangre</label>
                                        <input type="text" class="form-control form-control-sm" id="txt-tipoSangreLicenciaArma" placeholder="Tipo de sangre" required>
                                        <div class="invalid-feedback">
                                            Por favor ingrese el tipo de sangre
                                        </div>
                                    </div>
                                    <div class="col-sm-12 col-md-4 col-lg-2">
                                        <label class="form-label" for="txt-telefonoLicenciaArma">Teléfono</label>
                                        <input type="text" class="form-control form-control-sm telefono" id="txt-telefonoLicenciaArma" placeholder="Teléfono" onkeypress="return soloNumeros(event);" required>
                                        <div class="invalid-feedback">
                                            Por favor ingrese el teléfono
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </fieldset>
                        <fieldset class="w-auto border d-none">
                            <legend>Datos de seguro de vida</legend>
                            <h3>Pendiente de definir el formulario</h3>
                        </fieldset>
                    </div>
                    <div class="tab-pane fade" id="adjuntos" role="tabpanel" aria-labelledby="adjuntos-tab">
                        <div class="row">
                            <div class="col-sm-12 col-md-12 col-lg-6">
                                <fieldset class="w-auto border">
                                    <legend>Detalle de archivos</legend>
                                    <table class="table table-sm table-responsive table-bordered w-100" id="tbl-adjuntos" name="tbl-adjuntos" style="text-align: center !important;">
                                        <thead>
                                            <tr>
                                                <th class="text-center">#</th>
                                                <th>Tipo</th>
                                                <th>Nombre archivo</th>
                                                <th class="text-center">Acciones</th>
                                            </tr>
                                        </thead>
                                        <tbody>

                                        </tbody>
                                    </table>
                                </fieldset>
                            </div>
                            <div class="col-sm-12 col-md-12 col-lg-6">
                                <fieldset class="w-auto border" style="height: 475px;">
                                    <legend>Visor de documentos</legend>
                                    <div class="image-preview-container d-none" id="container-image">
                                        <img id="image-preview" src="main/assets/images/prueba.jpg" alt="Image Preview" class="rounded" />
                                    </div>
                                    <iframe id="pdf-preview" src="" frameborder="0" style="width:100%; height:450px;" class="d-none"></iframe>
                                </fieldset>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" data-bs-keyboard="false" data-bs-backdrop="static" id="modal-adjunto">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Adjunto</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body pt-1">
                <form id="adjunto-form" name="adjunto-form" accept-charset="utf-8" method="POST" class="needs-validation" novalidate>
                    <div class="row">
                        <div class="col-sm-12 col-md-6 col-md-8">
                            <label for="cbo-tipoDocumentoAdjunto" class="form-label">Tipo de documento <span class="required">*</span></label>
                            <div class="form-group form-group-sm has-validation">
                                <select id="cbo-tipoDocumentoAdjunto" name="cbo-tipoDocumentoAdjunto" class="form-control form-control-sm selectpicker" data-live-search="true" title="" required>
                                    <option value="" selected disabled>Seleccione</option>
                                </select>
                                <div class="invalid-feedback">
                                    Por favor seleccione el tipo de documento
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <input type="file" id="file-adjuntoEmpleado" name="file-adjuntoEmpleado" accept="image/*, application/pdf" class="d-none" />
                            &nbsp;
                            <div class="d-grid">
                                <label for="file-adjuntoEmpleado" id="label-adjuntos" class="btn btn-sm btn-primary" style="margin-top:1.5px !important;">
                                    <i class="fas fa-upload"></i> Seleccionar archivo
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <fieldset class="w-auto border" style="height: 475px;">
                                <legend>Preview</legend>
                                <div class="image-preview-container d-none" id="container-image-modal">
                                    <img id="image-preview-modal" src="main/assets/images/prueba.jpg" alt="Image Preview" class="rounded" />
                                </div>
                                <iframe id="pdf-preview-modal" src="" frameborder="0" style="width:100%; height:450px;" class="d-none"></iframe>
                            </fieldset>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-sm btn-primary" type="submit" form="adjunto-form">Guardar</button>
                <button class="btn btn-sm btn-secondary" type="button" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>

<?php
$jsModules = [
    'empleadosPage'
];
