<form id="frm-DesarrolloSoftware-ControlOperaciones-{{hash_vista}}" >
    <div class="box">
        <div class="box-header with-border">
            <h3 class="box-title">Formulario de Control de Operaciones</h3>
            <div class="box-tools pull-right">
                {{ boton("guardar","guardarDatosControlOperacionesAdministracion")}}
                {{ boton("cerrar", null, "cerrarFormularioControlOperacionesDesarrolloSoftware" ~ hash_vista ~ "()")}}
                {{ boton("resetear", null, "operacionTITULO.focus();")}}  
            </div>            
        </div>        
        <div class="box-body">
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="controladorID">Controlador:</label>
                        <select class="form-control select2" id="controladorID" name="controladorID" style="width: 100%;">
                            {% if Controladores %}
                                {% for controlador in Controladores %}
                                    <option value="{{controlador.controladorID}}" >{{controlador.controladorTITULO}}</option>
                                {% endfor %}
                            {% endif %}
                        </select>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <div class="form-group">
                            <label for="operacionORDEN">Orden:</label>
                            <input type="number" class="form-control uppercase" name="operacionORDEN" id="operacionORDEN"  required
                              value="{{ ControlOperaciones.operacionORDEN }}" placeholder="Orden Operación"  />
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="operacionCODIGO">Código de la Operación:</label>
                        <input type="text" class="form-control uppercase" name="operacionCODIGO" id="operacionCODIGO"
                               value="{{ ControlOperaciones.operacionCODIGO }}" placeholder="Código de la operación"  />
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="operacionTITULO">Título de la Operación:</label>
                        <input type="text" class="form-control uppercase" name="operacionTITULO" id="operacionTITULO"  required
                               value="{{ ControlOperaciones.operacionTITULO }}" placeholder="Título de la operación"  />
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="operacionFUNCION">Nombre de la Función:</label>
                        <input type="text" class="form-control uppercase" name="operacionFUNCION" id="operacionFUNCION"  required
                               value="{{ ControlOperaciones.operacionFUNCION }}" placeholder="Nombre de la función"  />
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="operacionNOMBRETAB">Nombre del TAB:</label>
                        <input type="text" class="form-control uppercase" name="operacionNOMBRETAB" id="operacionNOMBRETAB"  required
                               value="{{ ControlOperaciones.operacionNOMBRETAB }}" placeholder="Nombre que aparece del TAB"  />
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-4">
                    <div class="form-group">
                        <label for="operacionMENU">Aparece en el Menú:</label>
                        <select class="form-control select2" id="operacionMENU" name="operacionMENU" style="width: 100%;">
                            <option value="SI" {% if ControlOperaciones.operacionMENU == 'SI' %} selected {% endif %}>SI</option>
                            <option value="NO" {% if ControlOperaciones.operacionMENU == 'NO' %} selected {% endif %}>NO</option>
                        </select>
                    </div>
                </div>
                <div class="col-xs-4">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="operacionMENUICONO">Icono del menú:</label> 
                            <input type="text" class="form-control uppercase" name="operacionMENUICONO" id="operacionMENUICONO"  required
                             {% if ControlOperaciones.operacionMENUICONO %} value="{{ ControlOperaciones.operacionMENUICONO }}" {% else %} value="fa fa-cog fa-spin" {% endif %} onkeyup="vistaPreviaIcono_{{hash_vista}}()" placeholder="Icono del menú"  />
                        </div>
                    </div>
                    <div class="col-md-6" style="text-align:center;">
                        <label>Vista previa del Icono:</label><br>
                        <a class="btn  btn-default"><i id="icon" aria-hidden="true" ></i></a>
                    </div>
                </div>
                <div class="col-xs-4">
                    <div class="form-group">
                        <label for="operacionMENUTITULO">Titulo que aparece en el menú:</label>
                        <input type="text" class="form-control uppercase" name="operacionMENUTITULO" id="operacionMENUTITULO"  required
                               value="{{ ControlOperaciones.operacionMENUTITULO }}" placeholder="Titulo que aparece en el menú"  />
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-6">
                    <div class="form-group">
                        <label for="operacionPUBLICO">La operación es pública:</label>
                        <select class="form-control select2" id="operacionPUBLICO" name="operacionPUBLICO" style="width: 100%;">
                            <option value="SI" {% if ControlOperaciones.operacionPUBLICO == 'SI' %} selected {% endif %}>SI</option>
                            <option value="NO" {% if ControlOperaciones.operacionPUBLICO == 'NO' %} selected {% endif %}>NO</option>
                        </select>
                    </div>
                </div>
                <div class="col-xs-6">
                    <div class="form-group" style="text-align:center;">
                        <label>Estado de la operación:</label>
                        <div class="row">
                            <label class="col-sm-6">
                                 <input type="radio" name="operacionESTADO" id="operacionActivado" class="flat-red operacionESTADORADIO" required="" value="ACTIVO" {% if ControlOperaciones.operacionESTADO == 'ACTIVO' %} checked {% endif %}> ACTIVO
                            </label>
                            <label class="col-sm-6">
                                <input type="radio" name="operacionESTADO" id="operacionDesactivo" class="flat-red operacionESTADORADIO" required="" value="DESACTIVO" {% if ControlOperaciones.operacionESTADO == 'DESACTIVO' %} checked {% endif %}> DESACTIVO
                            </label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="form-group">
                        <label for="operacionDESCRIPCION">Descripción de la operación:</label>
                        <textarea class="form-control" rows="3" id="operacionDESCRIPCION-{{ hash_vista }}" name="operacionDESCRIPCION" placeholder="Descripción ...">{{ControlOperaciones.operacionDESCRIPCION}}</textarea> 
                    </div>
                </div>
            </div>
        </div>
    </div>
    <input type="hidden" name="operacionID" value="{{ControlOperaciones.operacionID}}" />
</form>
{% block javascript %}
<script type="text/javascript">

    $(document).ready(function () {
        
        deshabilitarInput();
            
        vistaPreviaIcono_{{hash_vista}}(); 
        
        $("#frm-DesarrolloSoftware-ControlOperaciones-{{hash_vista}}").submit(function () {
            ejecutarOperacion(
                    "administrador", "ControlOperaciones", "guardarDatos",
                   $("#frm-DesarrolloSoftware-ControlOperaciones-{{hash_vista}}").serialize(),
                    function (operacion) {
                        cerrarFormularioControlOperacionesDesarrolloSoftware{{hash_vista}}();
                        if (typeof cargarTablaControlOperacionesAdministrador === "function") {
                            cargarTablaControlOperacionesAdministrador();
                        }
                    }
            );
        });
        
        $('#operacionDESCRIPCION-{{ hash_vista }}').wysihtml5();
        
        $('.operacionESTADORADIO').iCheck({
            radioClass: 'iradio_flat-blue'
        });
        
        $('#frm-DesarrolloSoftware-ControlOperaciones-{{hash_vista}} #controladorID').select2();
        $('#frm-DesarrolloSoftware-ControlOperaciones-{{hash_vista}} #operacionMENU').select2();
        $('#frm-DesarrolloSoftware-ControlOperaciones-{{hash_vista}} #operacionPUBLICO').select2();
        
        $("#frm-DesarrolloSoftware-ControlOperaciones-{{hash_vista}} #operacionMENU").change(function() {
            deshabilitarInput();
        });
    });
    
    function deshabilitarInput(){
        var valor = $("#frm-DesarrolloSoftware-ControlOperaciones-{{hash_vista}} #operacionMENU").val();
            if(valor=='SI'){
                $("#frm-DesarrolloSoftware-ControlOperaciones-{{hash_vista}} #operacionMENUICONO").removeAttr('readonly');
                $("#frm-DesarrolloSoftware-ControlOperaciones-{{hash_vista}} #operacionMENUTITULO").removeAttr('readonly');
            }else{
                $("#frm-DesarrolloSoftware-ControlOperaciones-{{hash_vista}} #operacionMENUICONO").attr('readonly','');
                $("#frm-DesarrolloSoftware-ControlOperaciones-{{hash_vista}} #operacionMENUTITULO").attr('readonly',''); 
            }
    }
    
    function vistaPreviaIcono_{{hash_vista}}(){
        $("#frm-DesarrolloSoftware-ControlOperaciones-{{hash_vista}} #icon").attr('class',$("#frm-DesarrolloSoftware-ControlOperaciones-{{hash_vista}} #operacionMENUICONO").val());
    }
    
    function cerrarFormularioControlOperacionesDesarrolloSoftware{{hash_vista}}() {
        cerrarTabContenedor("frm-DesarrolloSoftware-ControlOperaciones-{{hash_vista}}");
    }
    
</script>   
{% endblock %}