<form id="frm-Planeador-PlanesProgramas-{{hash_vista}}" >
    <div class="box">
        <div class="box-header with-border">
            <h3 class="box-title">Formulario de PlanesProgramas</h3>
            <div class="box-tools pull-right">
                {% if PlanesProgramas %}
                {{ boton("guardar","mostrarFormularioEditarPlanesProgramasPlaneador")}}
                {% else %}
                {{ boton("guardar","mostrarFormularioNuevoPlanesProgramasPlaneador")}}
                {% endif %}
                {{ boton("cerrar", null, "cerrarFormularioPlanesProgramasPlaneador()")}}
                {{ boton("resetear", null, "programaTITULO.focus();")}}  
            </div>            
        </div>        
        <div class="box-body">
            <div class="row">
                <div class="col-md-4" id="">
                    <div class="form-group">
                        <label for="programaCODIGO">Código del Programa:</label>
                        <input type="text" class="form-control uppercase" name="programaCODIGO" id="programaCODIGO"  readonly=""
                               value="{{ PlanesProgramas.programaCODIGO }}" placeholder="Código de Programas"  />
                    </div>
                </div>
                <div class="col-md-8" id="">
                    <div class="form-group">
                        <label for="programaTITULO">Título del Programa:</label>
                        <input type="text" class="form-control uppercase" name="programaTITULO" id="programaTITULO"  required
                               value="{{ PlanesProgramas.programaTITULO }}" placeholder="Título de Programas"  />
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" >
                    <div class="form-group">
                        <label for="programaDESCRIPCION">Descripción del Programa (max 140 caracteres):</label>
                        <textarea rows="5" cols="80" maxlength="140" class="wysiwyg form-control " placeholder="Descripción del programa" 
                                  name="programaDESCRIPCION" id="programaDESCRIPCION-{{ hash_vista }}" 
                                  >{{ PlanesProgramas.programaDESCRIPCION }}</textarea>
                    </div>
                    <div class="form-group">
                        <label for="programaJUSTIFICACION">Justificación del Programa:</label>
                        <textarea rows="5" cols="80" maxlength="140" class="wysiwyg form-control " placeholder="Descripción del programa" 
                                  name="programaJUSTIFICACION" id="programaJUSTIFICACION-{{ hash_vista }}" 
                                  >{{ PlanesProgramas.programaJUSTIFICACION }}</textarea>
                    </div>
                    <div class="form-group">
                        <label for="programaFCHINICIO">Fecha de Inicio del Programa:</label>
                        <div class="input-group">
                            <div class="input-group-addon">
                                <i class="fa fa-calendar"></i>
                            </div>
                            <input value="{{PlanesProgramas.programaFCHINICIA}}"  type="text" class="form-control tipoFecha" id="programaFCHINICIO" name="programaFCHINICIO">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="programaFCHTERMINA">Fecha de Finalización del Programa:</label>
                        <div class="input-group">
                            <div class="input-group-addon">
                                <i class="fa fa-calendar"></i>
                            </div>
                            <input value="{{PlanesProgramas.programaFCHTERMINA}}"  type="text" class="form-control tipoFecha" id="programaFCHTERMINA" name="programaFCHTERMINA">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="programaFCHTERMINA">Estado:</label>
                        <div style="text-align:center;">
                            <div class="row">
                                {% for ProgramaEstado in PlanesProgramasEstados %}
                                
                                    <label class="col-sm-2">
                                        <input type="radio" name="programaESTADO" id="programaEnConstruccion" class="flat-red programaESTADORADIO" required 
                                               {% if PlanesProgramas.estadoProgramaID == ProgramaEstado.estadoProgramaID  %} checked {% endif %} value={{ ProgramaEstado.estadoProgramaID }} />
                                               {{ ProgramaEstado.estadoProgramaTITULO }}
                                    </label>
                                
                                {% endfor %}   
                                <!--label class="col-sm-4">
                                    <input type="radio" name="programaESTADO" id="programaIniciado" class="flat-red programaESTADORADIO" required 
                                           {% if PlanesProgramas.estadoProgramaTITULO == 'INICIADO' %} checked {% endif %} value="INICIADO" />
                                           INICIADO
                                </label>
                                <label class="col-sm-4">
                                    <input type="radio" name="programaESTADO" id="programaTerminado" class="flat-red programaESTADORADIO" required
                                           {% if PlanesProgramas.estadoProgramaTITULO == 'TERMINADO' %} checked {% endif %} value="TERMINADO" /> 
                                           TERMINADO
                                </label>
                            </div>
                            <div class="row">
                                <label class="col-sm-6">
                                    <input type="radio" name="programaESTADO" id="programaCancelado" class="flat-red programaESTADORADIO" required 
                                           {% if PlanesProgramas.estadoProgramaTITULO == 'CANCELADO' %} checked {% endif %} value="CANCELADO" />
                                           CANCELADO
                                </label>
                                <label class="col-sm-6">
                                    <input type="radio" name="programaESTADO" id="programaSuspendido" class="flat-red programaESTADORADIO" required 
                                           {% if PlanesProgramas.estadoProgramaTITULO == 'SUSPENDIDO' %} checked {% endif %} value="SUSPENDIDO" />
                                           SUSPENDIDO
                                </label-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <input type="hidden" name="PlanesProgramasID" value="{{PlanesProgramas.programaID}}" />
</form>
<script>
    $(document).ready(function () {
        $("#frm-Planeador-PlanesProgramas-{{hash_vista}}").submit(function () {
            ejecutarOperacionArchivo(
                    "Planeador", "PlanesProgramas", "guardarDatos",
                    crearFormData("frm-Planeador-PlanesProgramas-{{hash_vista}}"),
                    function (programaID) {
                        cerrarTabContenedor("frm-Planeador-PlanesProgramas-{{hash_vista}}");
                        cargarVista('Planeador', 'PlanesProgramas', 'mostrarFormularioEditar', 'PlanesProgramasID=' + programaID);
                        if (typeof cargarTablaPlanesProgramasPlaneador === "function") {
                            cargarTablaPlanesProgramasPlaneador();
                        }
                    }
            );
        });
        $("#programaDESCRIPCION-{{hash_vista}}").wysihtml5();
        $("#programaJUSTIFICACION-{{hash_vista}}").wysihtml5();
        
        $('.programaESTADORADIO').iCheck({
            radioClass: 'iradio_flat-blue'
        });
        
        var dateformat = 'yyyy-mm-dd';
        
        $(".tipoFecha").datepicker({
           autoclose: true,
           format: dateformat
          });
    });
    function cerrarFormularioPlanesProgramasPlaneador() {
        cerrarTabContenedor("frm-Planeador-PlanesProgramas-{{hash_vista}}");
    }
</script>