<link rel="stylesheet" href="plantillas/default/plugins/jQueryWizard/dist/css/smart_wizard.css">
<link rel="stylesheet" href="plantillas/default/plugins/jQueryWizard/dist/css/smart_wizard_theme_arrows.css">

<script src="plantillas/default/plugins/jQueryWizard/dist/js/jquery.smartWizard.min.js"></script>
<form id="frm-Usuarios-UsuariosColaborador-{{hash_vista}}" >
    <div class="box">
        <div class="box-header with-border">
            <h3 class="box-title">Formulario de UsuariosColaborador</h3>
            <div class="box-tools pull-right">
                {% if UsuariosColaborador %}
                {{ boton("guardar","mostrarFormularioEditarUsuariosColaboradorUsuarios")}}
                {% else %}
                {{ boton("guardar","mostrarFormularioNuevoUsuariosColaboradorUsuarios")}}
                {% endif %}
                {{ boton("cerrar", null, "cerrarFormularioUsuariosColaboradorUsuarios" ~ hash_vista ~ "()")}}
            </div>            
        </div>        
        <div class="box-body">
            <div id="smartwizard{{hash_vista}}">
            <ul align="center">
                <li><a href="#step-1{{hash_vista}}" >
                    <i class="glyphicon glyphicon-cog"></i><br />
                    Información Laboral<br/>
                    <small>Informacion Laboral del Colaborador</small></a></li>
                <li><a href="#step-2{{hash_vista}}">
                    <i class="glyphicon glyphicon-user"></i><br />
                    Información Permonal<br />
                    <small>Datos Basico del colaborador</small></a></li>
                <li><a href="#step-3{{hash_vista}}">
                    <i class="glyphicon glyphicon-earphone"></i><br />
                    Información de Contacto
                    <br /><small>This is step description</small>
                    </a>
                </li>
                <li><a href="#step-4{{hash_vista}}">
                    <i class="glyphicon glyphicon-ok"></i><br />
                    Información de Usuario<br />
                    <small>This is step description</small>
                    </a>
                </li>
            </ul>
            
            <div>
                <div id="step-1{{hash_vista}}" class="">
                    {{ mostrarVista( 'talento-humano', 'colaboradores/datos-form-info-laboral', {"Usuario":Usuario} ) }}
                </div>
                <div id="step-2{{hash_vista}}" class="">
                    {{ mostrarVista( 'personas', 'personas/datos-form-general', {"Usuario":Usuario}  ) }}
                </div>
                <div id="step-3{{hash_vista}}" class="">
                    {{ mostrarVista( 'personas', 'personas/datos-form-contacto', {"Usuario":Usuario}  ) }}
                </div>
                <div id="step-4{{hash_vista}}" class="">
                    {{ mostrarVista( 'usuarios', 'usuarioscolaborador/datos-form-usuario', {"Roles":Roles , "Usuario":Usuario, "Operaciones": Operaciones} ) }}
                </div>
            </div>
        </div>
        </div>
    </div>
    <input type="hidden" name="usuarioID" value="{{Usuario.usuarioID}}" />
</form>
{% block javascript %}
<script>
    $(document).ready(function () {
        $('#smartwizard{{hash_vista}}').smartWizard({
            theme: 'arrows',
            anchorSettings: {
                anchorClickable: true, // Enable/Disable anchor navigation
                enableAllAnchors: true, // Activates all anchors clickable all times
                markDoneStep: true, // add done css
                enableAnchorOnDoneStep: true // Enable/Disable the done steps navigation
            },       
            lang: {  // Language variables
                next: 'Siguiente', 
                previous: 'Anterior'
            },
        });
        
        $("#frm-Usuarios-UsuariosColaborador-{{hash_vista}}").submit(function () {
            ejecutarOperacionArchivo(
                    "Usuarios", "UsuariosColaborador", "guardarDatos",
                    crearFormData("frm-Usuarios-UsuariosColaborador-{{hash_vista}}"),
                    function (usuario) {
                        cerrarFormularioUsuariosColaboradorUsuarios{{hash_vista}}();
                        cargarVista('Usuarios', 'UsuariosColaborador', 'mostrarFormularioEditar', 'UsuariosColaboradorID=' + usuario.usuarioID);
                        if (typeof cargarTablaUsuariosColaboradorUsuarios === "function") {
                            cargarTablaUsuariosColaboradorUsuarios();
                        }
                    }
            );
        });
    });
    
    function cerrarFormularioUsuariosColaboradorUsuarios{{hash_vista}}() {
        cerrarTabContenedor("frm-Usuarios-UsuariosColaborador-{{hash_vista}}");
    }
    
</script>   
{% endblock %}