<div class="row">
    <div class="col-md-12">
        <div class="col-md-6">
            <div class="form-group">
                <label for="exampleInputEmail1">OPERACION</label>
                <input type="text" class="form-control uppercase" name="operacionTITULO" id="operacionTITULO-{{ hash_form }}" readonly placeholder="TITULO DE OPERACION"  />
             </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                <label for="exampleInputEmail1">TIPO DE OPERACION</label>
                <input type="text" class="form-control uppercase" name="operacionTIPOOPEREACION" id="operacionTIPOOPEREACION-{{ hash_form }}"  readonly="" placeholder="TIPO DE OPERACION"  />
             </div>
        </div>
    </div>
    <div class="col-md-12">
        <div class="col-md-6">
            <div clasa="col-md-12">
                <label for="inputEmail3">FECHA DE INICIO</label>
                <div class="input-group">
                    <input value=""  type="text" class="form-control tipoFecha-{{ hash_vista }}" required
                        id="operacionFCHINICIO-{{ hash_form }}" name="operacionFCHINICIO" placeholder="Fecha Inicio" >
                    <div class="input-group-addon">
                        <i class="fa fa-calendar"></i>
                    </div>
                </div>   
            </div>
            <div clasa="col-md-12">
                <label for="inputEmail3">FECHA DE FINAL</label>
                <div class="input-group">
                    <input value=""  type="text" class="form-control tipoFecha-{{ hash_vista }}" required 
                        id="operacionFCHFINAL-{{ hash_form }}" name="operacionFCHFINAL" placeholder="Fecha Final" >
                    <div class="input-group-addon">
                        <i class="fa fa-calendar"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div id="div-descripcion-{{ hash_vista }}">
                <label for="">DESCRIPCION:</label>
                <!--<div id="operacionDESCRIPCION-{{ hash_form }}" required ></div>-->
                <textarea class="form-control " placeholder="Descripción" 
                          name="operacionDESCRIPCION" id="operacionDESCRIPCION-{{ hash_form }}" required ></textarea>
            </div>
        </div>
        <div class="col-md-12">
            <div class="form-group">
                <label for="exampleInputEmail1">COSTOS</label>
                <input value="0"  type="number" class="form-control" id="operacionCOSTO-{{ hash_form }}" name="operacionCOSTO">
            </div>
        </div>
    </div>
    <input type="hidden" name="operacionPredefinidaID" readonly id="operacionPredefinidaID-{{ hash_form }}"/>
    <input type="hidden" name="operacionID" readonly id="operacionID-{{ hash_form }}"/>
    <input type="hidden" name="planOperacionID" readonly id="planOperacionID-{{ hash_form }}"/>
    <input type="hidden" name="tipoOperacionID" readonly id="tipoOperacionID-{{ hash_form }}"/>

    
    <div class="col-md-12" style="padding-top:1cm;">
        <div class="pull-right">
            <button type="button" onclick="limpiarFormularioOperacion{{ hash_form }}()" class="btn btn-danger" ><i class="fa fa-trash"></i>Cancelar</button>
            <button type="submit" id="btn-agregar-operacion-{{ hash_form }}" class="btn btn-success"><i class="fa fa-plus" style="color:#fff;"></i>Guardar</button>
        </div>
    </div>
</div>

{% block javascript %} 
<script type="text/javascript">
    var wysihtml5{{hash_form}} = null;
    
    // var wysihtml5{{hash_form}} = $('operacionDESCRIPCION-{{hash_form}}').wysihtml5();
    $(document).ready(function () {
        var dateformat = 'yyyy-mm-dd'
        $(".tipoFecha-{{ hash_vista }}").datepicker({
            autoclose: true,
            format: dateformat
        });
            
            
        wysihtml5{{hash_form}} = $('#operacionDESCRIPCION-{{hash_form}}').wysihtml5({
            'html': true
         });
    });
    
    
    /*function actualizarEditor(txt){
        console.log(wysihtml5{{hash_form}}.val());
        wysihtml5{{hash_form}}.val( "simple val" + txt);
        console.log(wysihtml5{{hash_form}}.val()); 
        $('#operacionDESCRIPCION-{{ hash_form }}').val( "val " + txt + new Date() );
        console.log(wysihtml5{{hash_form}}.val()); 
        wysihtml5{{hash_form}}.html( "simple html " + txt);
        console.log(wysihtml5{{hash_form}}.val()); 
        $('#operacionDESCRIPCION-{{ hash_form }}').html( "html " + txt + new Date() );
        console.log(wysihtml5{{hash_form}}.val()); 
        console.log( wysihtml5{{hash_form}}.html ); 
        console.log( wysihtml5{{hash_form}}.data ); 
        console.log( wysihtml5{{hash_form}}.data('wysihtml5') ); 
        console.log( wysihtml5{{hash_form}}.data('wysihtml5').editor ); 
        console.log( wysihtml5{{hash_form}}.data.editor ); 
      
        console.log( wysihtml5{{hash_form}}.editor ); 
        console.log( wysihtml5{{hash_form}}.value ); 
    }
    */
    
    function actualizarEditor(txt){
        $('#operacionDESCRIPCION-{{ hash_form }}').val( "val " + txt + new Date() );
    }
    

    function limpiarFormularioOperacion{{ hash_form }}(){
        $("#operacionID-{{ hash_form }}").val("");
        $("#planOperacionID-{{ hash_form }}").val("");
        $("#operacionPredefinidaID-{{ hash_form }}").val("");
        $("#tipoOperacionID-{{ hash_form }}").val("");
        $("#operacionTITULO-{{ hash_form }}").val("");
        $("#operacionTIPOOPEREACION-{{ hash_form }}").val("");
        $('#div-descripcion-{{ hash_vista }} iframe').contents().find('.wysihtml5-editor').empty();

        $("#operacionDESCRIPCION-{{ hash_form }}").val("");
        $("#operacionCOSTO-{{ hash_form }}").val(0);
        $("#operacionFCHINICIO-{{ hash_form }}").val("");
        $("#operacionFCHFINAL-{{ hash_form }}").val("");
    }
    
    
    function cargarFormOperacion{{hash_form}}(planOperacionID, planOperacionPredefinidaID, tipoOperacionID, tipoOperacionTITULO ,
                                    operacionPredefinidaTITULO ,planOperacionDESCRIPCION,planOperacionCOSTO, planOperacionFCHINICIO,
                                    planOperacionFCHFINAL, operacionID=''){
        $("#planOperacionID-{{ hash_form }}").val(planOperacionID);
        $("#operacionTITULO-{{ hash_form }}").val(operacionPredefinidaTITULO);
        $("#operacionTIPOOPEREACION-{{ hash_form }}").val(tipoOperacionTITULO);
        $("#operacionFCHINICIO-{{ hash_form }}").val(planOperacionFCHINICIO);
        $("#operacionFCHFINAL-{{ hash_form }}").val(planOperacionFCHFINAL);
        $('#operacionDESCRIPCION-{{ hash_form }}').html(planOperacionDESCRIPCION);
        //actualizarEditor("" + planOperacionDESCRIPCION + "");
        $('#div-descripcion-{{ hash_vista }} iframe').contents().find('.wysihtml5-editor').html(planOperacionDESCRIPCION);
        
        $("#operacionDESCRIPCION-{{ hash_form }}").next().html();
        $("#operacionCOSTO-{{ hash_form }}").val(planOperacionCOSTO);
        $("#operacionPredefinidaID-{{ hash_form }}").val(planOperacionPredefinidaID);
        $("#operacionID-{{ hash_form }}").val(operacionID);
        $("#tipoOperacionID-{{ hash_form }}").val(tipoOperacionID);
    }
    

</script>                          
{% endblock %}