<form id="frm-acciones-{{ hash_vista }}">
    <div class="row">
        <div class="col-md-12">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">Formulario de Acciones</h3>
                    <div class="box-tools pull-right">
                        {{ boton("guardar","guardarNuevoParametro")}}
                        {{ boton("cancelar","", "cancelarFormularioAccion()")}}
                        {{ boton("resetear", "", "")}}  
                    </div>
                </div>
                <div class="box-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                               <label>Programas</label>
                                <select class="form-control select2 select2-hidden-accessible" style="width: 100%;" id="programa" name="programa">
                                    {% for programa in PlanesPrograma  %}
                                        {% set seleccion = '' %}
                                            {% if objAcciones.programaID == programa.programaID %}
                                                {% set seleccion = 'selected' %}  
                                            {% endif %}  
                                            <option value="{{programa.programaID}}" {{seleccion}} > {{programa.programaTITULO}}</option>
                                        {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="codigo">Código</label>
                                <input type="text" disabled class="form-control" id="codigo" name="codigo" placeholder="CÓDIGO AUTOMATICO" value="{{objAcciones.accionCODIGO}}">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                              <label for="titulo">Título</label>
                              <input type="text" class="form-control" id="titulo" name="titulo" placeholder="Título" value="{{objAcciones.accionTITULO}}" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Responsable</label>
                                <select class="form-control select2 select2-hidden-accessible" style="width: 100%;"  id="responsable" name="responsable" required>
                                    {% for responsable in CamaraCargos  %}
                                        {% set seleccion = '' %}
                                        {% if responsable.cargoID == objAcciones.accionRESPONSABLE %}
                                             {% set seleccion = 'selected' %}  
                                        {% endif %}  
                                        <option value="{{responsable.cargoID}}"  {{seleccion}} > {{responsable.cargoTITULO}}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                    </div>  
                    <!-- <div class="col-md-6">
                    <div class="form-group">
                    <label>Estado</label>
                                    <select class="form-control" id="estado" name="estado">
                                        {% for estado in PlanesEstados  %}
    
                                        <option value="{{estado.planEstadoID}}"> {{estado.planEstadoTITULO}}</option>
    
                                        {% endfor %}
                                    </select>
                    </div>
                     </div>
                       </div>  -->
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Descripción</label>
                                <textarea class="form-control" rows="3" id="descripcion-{{hash_vista}}" name="descripcion"  placeholder="Descripción ..." >{{objAcciones.accionDESCRIPCION}}</textarea>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Justificación</label>
                                <textarea class="form-control" rows="3" id="justificacion-{{hash_vista}}" name="justificacion"  placeholder="Justificación ...">{{objAcciones.accionJUSTIFICACION}}</textarea>
                            </div>
                        </div>
                    </div>
                    <input value="{{objAcciones.accionID}}" required type="hidden"  id="accionesID" name="accionesID" >
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="box box-primary box-solid">
                <div class="box-header with-border">
                    <h3 class="box-title">Control de Metas</h3>
                        <div class="box-tools pull-right">
                            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                            </button>
                        </div>
                    </div>
                <div class="box-body">
                    <div class="col-md-12" id="planes-{{ hash_vista }}">
                        {% for plan in planes %}
                            <div class="form-group col-md-4">
                                <label>
                                      <input type="radio" name="plan" class="flat-blue planes" value="{{ plan.planID }}" {% if loop.last %} checked {% endif%} >
                                      {{ plan.planCODIGO }}
                                </label>
                            </div>
                        {% endfor %}
                        <div id="select-metas-{{ hash_vista }}"></div>
                        <div class="box-tools pull-right">
                            <button id="btn-asignar-meta-{{ hash_vista }}" type="button" class="btn btn-success">Agregar Meta</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="box-tools pull-right">
                {% if objAcciones.accionID %}
                     <button type="button" id="btn-{{ hash_vista }}" onclick="eliminar_meta('{{ hash_vista }}')" class="btn btn-sm btn-danger"><i class="fa fa-trash"></i> Eliminar Meta</button>
                {% endif %}
            </div>
            <br>
            <div class="form-group">
                <label>Metas</label>
                <div id="tbl-metas-{{ hash_vista }}"></div>
            </div>
        </div>
    </div>
</form>


<script type="text/javascript" >
    
    $("#frm-acciones-{{ hash_vista }}").submit(function(event){
        ejecutarOperacion(
                "planeador",
                "Acciones",
                "registrar",
                $("#frm-acciones-{{ hash_vista }}").serialize(),
                function (accion) {
                    cerrarTabContenedor("frm-acciones-{{ hash_vista }}");
                    cargarVista('planeador','Acciones','mostrarFormularioEditar','accionesID='+accion.accionID);
                    if (typeof cargarTablaAcciones === "function") {
                            cargarTablaAcciones();
                        }
                }
        );
    });
    
    $(document).ready(function() {
        $("#descripcion-{{hash_vista}}").wysihtml5();
        $("#justificacion-{{hash_vista}}").wysihtml5();
        cargarTablaMetas();
        $('.select2').select2();
        
        $('input[type="radio"].flat-blue').iCheck({
          radioClass   : 'iradio_flat-blue'
        });
        cargarDivisionSicam('select-metas-{{ hash_vista }}','planeador', 'Metas', 'mostrarSelect', "planID="+$('#planes-{{ hash_vista }} input[type="radio"][name="plan"]:checked').val(), function(){
            $('#planes-{{ hash_vista }} .planes').on('ifChecked', function(event){
               mostrarSelectMetas('select-metas-{{ hash_vista }}', this.value);
            });
        });
    });
    
    function cargarTablaMetas(metaID = null){
        if(metaID != null){
            cargarDivisionSicam('tbl-metas-{{ hash_vista }}', 'planeador', 'Metas', 'tablaDeLaAccion', 'accionID='+metaID);
        }else{
            cargarDivisionSicam('tbl-metas-{{ hash_vista }}', 'planeador', 'Metas', 'tablaDeLaAccion', 'accionID={{objAcciones.accionID}}');
        }
    }
    
    function cancelarFormularioAccion(){
        cerrarTabContenedor("frm-acciones-{{ hash_vista }}");
    }
    
    $("#btn-asignar-meta-{{ hash_vista }}").click(function () {
        if($('#select-metas-{{ hash_vista }} #idMetas').val()){
            {% if objAcciones.accionID %}
                ejecutarOperacion('planeador', 'Acciones', 'asignarMetas', 'metaID=' +$("#select-metas-{{ hash_vista }} #idMetas").val() + '&accionID={{objAcciones.accionID}}',function(response){
                    cargarTablaMetas();
                });
            {% else %}
                ejecutarOperacion('planeador', 'Metas', 'obtenerDatos', 'metaID=' +$("#select-metas-{{ hash_vista }} #idMetas").val() ,function(response){
                    agregarMeta(response);
                });
            {% endif %}
        }else{
            swal("Alerta!", "No existe meta para asignar!", "warning");
        }
    });
    
    function agregarMeta(meta) {
        console.log(meta);
        if(!$('#tbl-metas-{{ hash_vista }} .table tr#' + meta.metaID).length){
            $("#tbl-metas-{{ hash_vista }} table tbody").append(
                        "<tr id=\"" + meta.metaID + "\" >"
                        + "<td>"
                        + "<button onclick=\"quitarMeta('" + meta.metaID + "');\" type=\"button\" class=\"btn btn-mini btn-danger btn-xs\">"
                        + "<span class=\"glyphicon glyphicon-remove\" ></span></button>"
                        + '<input type="hidden" name="metasID[]" value="' +  meta.metaID + '" />'
                        + "</td>"
                        + "<td>" + meta.planCODIGO + "</td>"
                        + "<td>" + meta.metaCODIGO + "</td>"
                        + "<td>" + meta.metaDESCRIPCION + "</td>"
                        + "<td>" + meta.metaEVALUACION + " " +meta.metaVALORESPERADO  + "</td>"
                        + "<td>" + meta.metaFRECUENCIAMEDIDA + "</td>"
                        + "</tr>");
        }else{
            swal("Alerta!", "La accion ya se encuentra registrada en la accion!", "warning");
        }
    }
    
    function quitarMeta(meta) {
        $("#tbl-metas-{{ hash_vista }} .table tr#" + meta + "").remove();
    }
    
    function eliminar_meta(hash_vista) {
        var seleccionados = checkSelecionados('tbl-metas-' + hash_vista + ' .table', true);
        validacionCheckbox(seleccionados, function (){
            swal({
                  title: "¿Estás Seguro que Deseas Eliminar?",
                  text: "Una vez que elimines no podrás recuperar los datos!",
                  icon: "warning",
                  buttons: ["Cancelar", "Eliminar"],
                  dangerMode: true,
                })
                .then((willDelete) => {
                  if (willDelete) {
                    ejecutarOperacion(
                            "planeador",
                            "Acciones",
                            "eliminarMeta",
                            seleccionados + '&accionID={{objAcciones.accionID}}',
                            function (response) {
                                cargarTablaMetas();
                            });    
                    }
                });
            }, false);
    }
    
</script>

