<div class="row">
    <div class="col-md-12">
        <div class="form-group">
            <label>Tipo Colaborador:</label>
            <div id="div-tipos-colaboradores{{hash_vista}}"></div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-6">
        <div class="form-group">
            <label>Tipo Cargo:</label>
            <div id="div-tipos-cargos{{hash_vista}}"></div>
        </div>
    </div>
    <div class="col-md-6" >
        <div class="form-group">
            <label>Cargo:</label>
            <div id="div-cargos{{hash_vista}}"></div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-6" >
        <div class="form-group">
            <label>Sede:</label>
            <div id="div-sede{{hash_vista}}"></div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group">
            <label>Puesto de Trabajo:</label>
            <div id="div-puesto-trabajo{{hash_vista}}"></div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-6" >
        <div class="form-group">
            <label>Jefe Inmediato:</label>
            <div id="div-jefe-inmediato{{hash_vista}}"></div>
        </div>
    </div>
    <div class="col-md-6" id="div-estado">
        <div class="form-group">
            <label>Estado</label>
            <select class="form-control select2" id="colaboradorESTADO" name="colaboradorESTADO" style="width: 100%;">
                <option value="ACTIVO" selected>ACTIVO</option>
                <option value="SUSPENDIDO">SUSPENDIDO</option>
                <option value="DESACTIVO">DESACTIVO</option>
            </select>
        </div>
    </div>
</div>

<script type="text/javascript" >
    $(document).ready(function () {
        cargarSelectTipoColaborador('div-tipos-colaboradores{{hash_vista}}', function(){
            seleccionSelect{{hash_vista}}("#div-tipos-colaboradores{{hash_vista}} #tiposColaboradoresID", '{{Usuario.colaborador.tipoColaboradorID}}');
        });
        cargarSelectTipoCargo('div-tipos-cargos{{hash_vista}}', function () {
            seleccionSelect{{hash_vista}}("#div-tipos-cargos{{hash_vista}} #tiposCargos", '{{Usuario.colaborador.tipoCargoID}}');
            cargarSelectCargo('div-cargos{{hash_vista}}', $("#div-tipos-cargos{{hash_vista}} #tiposCargos").val(), function(){
                seleccionSelect{{hash_vista}}("#div-cargos{{hash_vista}} #cargoID", '{{Usuario.colaborador.cargoID}}');
            });
            $("#div-tipos-cargos{{hash_vista}} #tiposCargos").change(function () {
                cargarSelectCargo('div-cargos{{hash_vista}}', $("#div-tipos-cargos{{hash_vista}} #tiposCargos").val(), function () {
                 $("#div-cargos{{hash_vista}} #cargoID").change(function () {
                        cargarSelectJefeInmediato('div-jefe-inmediato{{hash_vista}}', $("#div-cargos{{hash_vista}} #cargoID").val(), function () {
                        });
                    });
                });
            });
        });
        cargarSelectJefeInmediato('div-jefe-inmediato{{hash_vista}}', $("#div-cargos{{hash_vista}} #cargoID").val(), function () {
            seleccionSelect{{hash_vista}}("#div-jefe-inmediato{{hash_vista}} #jefeInmediatoID", '{{Usuario.colaborador.jefeInmediato}}');
        });
        cargarSelectSede('div-sede{{hash_vista}}', function () {
            seleccionSelect{{hash_vista}}("#div-sede{{hash_vista}} #sedeID", '{{Usuario.colaborador.sedeID}}');
            cargarSelectPuestoTrabajo('div-puesto-trabajo{{hash_vista}}', $("#div-sede{{hash_vista}} #sedeID").val(), function(){
                seleccionSelect{{hash_vista}}("#div-puesto-trabajo{{hash_vista}} #puestoTrabajoID", '{{Usuario.colaborador.puestoTrabajoID}}');
            });
            $("#div-sede{{hash_vista}} #sedeID").change(function () {
                cargarSelectPuestoTrabajo('div-puesto-trabajo{{hash_vista}}', $("#div-sede{{hash_vista}} #sedeID").val(), null);
            });
        });
        
        seleccionSelect{{hash_vista}}("#colaboradorESTADO{{hash_vista}}", '{{Usuario.colaborador.colaboradorESTADO}}');
    });
    
    function cargarSelectTipoColaborador(divComponent, fuctionEjecutable) {
        cargarDivision(divComponent, 'talento-humano', 'TiposColaboradores', 'mostrarSelect', null, function (response) {
            if (fuctionEjecutable != null) {
                fuctionEjecutable(response);
            }
        });
    }
    
    function cargarSelectTipoCargo(divComponent, fuctionEjecutable) {
        cargarDivision(divComponent, 'talento-humano', 'TiposCargos', 'mostrarSelect', null, function (response) {
            if (fuctionEjecutable != null) {
                fuctionEjecutable(response);
            }
        });
    }
    
    function cargarSelectCargo(divComponent, tipoCargoID, fuctionEjecutable) {
        if (tipoCargoID != null) {
            cargarDivision(divComponent, 'talento-humano', 'Cargos', 'mostrarSelect', 'tipoCargoID=' + tipoCargoID, function (response) {
                if (fuctionEjecutable != null) {
                    fuctionEjecutable(response);
                }
            });
        } else {
            cargarDivision(divComponent, 'talento-humano', 'Cargos', 'mostrarSelect', null, function (response) {
                if (fuctionEjecutable != null) {
                    fuctionEjecutable(response);
                }
            });
        }
    }
    
    function cargarSelectJefeInmediato(divComponent, cargoID, fuctionEjecutable) {
        if (cargoID != null) {
            cargarDivision(divComponent, 'talento-humano', 'Cargos', 'mostrarSelectJefeInmediato', 'cargoID=' + cargoID, function (response) {
                if (fuctionEjecutable != null) {
                    fuctionEjecutable(response);
                }
            });
        } else {
            cargarDivision(divComponent, 'talento-humano', 'Cargos', 'mostrarSelectJefeInmediato', null, function (response) {
                if (fuctionEjecutable != null) {
                    fuctionEjecutable(response);
                }
            });
        }
    }
    
    function cargarSelectSede(divComponent, fuctionEjecutable) {
        cargarDivision(divComponent, 'camara', 'Sedes', 'mostrarSelect', null, function (response) {
            if (fuctionEjecutable != null) {
                fuctionEjecutable(response);
            }
        });
    }
    
    function cargarSelectPuestoTrabajo(divComponent, sedeID, fuctionEjecutable) {
        if (sedeID != null) {
            cargarDivision(divComponent, 'camara', 'PuestosTrabajos', 'mostrarSelectPorSede', 'sedeID=' + sedeID, function (response) {
                if (fuctionEjecutable != null) {
                    fuctionEjecutable(response);
                }
            });
        } else {
            cargarDivision(divComponent, 'camara', 'PuestosTrabajos', 'mostrarSelectPorSede', null, function (response) {
                if (fuctionEjecutable != null) {
                    fuctionEjecutable(response);
                }
            });
        }
    }
    
    function seleccionSelect{{hash_vista}}(nameSelect, valor) {
        if (valor != null) {
            $( nameSelect + " option[value='" + valor + "']").attr("selected", true);
        }
    }
</script>