<style type="text/css">
    .nav-tabs-editorphp > .nav-tabs > li {
        max-width: 210px!important;
    }
</style>
<form id="frm-editor-constructor" >
<div class="box box-warning box-solid">
    <div class="box-header with-border">
      <h3 class="box-title">Datos para el Constructor</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">
            <div class="form-group col-md-8">
                <label for="componenteID">Componente:</label>
                {% if Controlador %}
                <input type="text" value="{{controlador.componenteTITULO}}" readonly />
                {% else %}
                <select class="form-control select2 afecta-ruta" 
                    id="componenteID" name="componenteID" style="width: 100%;">
                    {% if Componentes %}
                        {% for Componente in Componentes %}
                    <option value="{{Componente.componenteID}}" class="col-xs-12"
                        datadir="{{Componente.componenteCARPETA}}/" >{{Componente.componenteTITULO}}</option>
                        {% endfor %}
                    {% endif %}
                </select>
                {% endif %}
            </div>
            <div class="form-group col-md-4">
                <label for="controladorCLASE">Clase PHP para el Controlador</label>
                <input type="text" class="form-control uppercase afecta-ruta" name="controladorCLASE" id="controladorCLASE"  required
                    value="{{ Controlador.controladorCLASE }}" placeholder="Clase"  />
            </div>
            <hr />
            <div class="form-group col-md-6">
                <label> Crear Modelo <input type="radio" class="flat-red" name="crearMODELO" value="SI" /></label>
                <label> con SQL EJEMPLO <input type="radio" class="flat-red" name="crearMODELO" value="CON_SQL" checked /></label>
                <label> NO <input type="radio" class="flat-red" name="crearMODELO" value="NO" /></label>
            </div>
            <div class="form-group col-md-6">
                <label> Crear Vistas Basicas <input type="radio" class="flat-red" name="crearVISTAS" value="SI" checked /></label>
                <label> con HTML EJEMPLO <input type="radio" class="flat-red" name="crearVISTAS" value="CON_HTML" /></label>
            </div>
            <hr />
            <div class="form-group clearfix">
                <div class="row-fluid clearfix" >
                    <div class="form-group col-md-3">
                        <label>Nombre del Modelo:</label>
                        <div class="input-group">
                          <div class="input-group-addon">
                            <i class="fa fa-table"></i>
                          </div>
                          <input type="text" class="form-control" name="nombreMODELO" 
                            data-mask  placeholder="Colaboradores" />
                        </div>
                    </div>
                    <div class="form-group col-md-3">
                        <label>Nombre de la Entidad:</label>
                        <div class="input-group">
                          <div class="input-group-addon">
                            <i class="fa fa-table"></i>
                          </div>
                          <input type="text" class="form-control" name="nombreENTIDAD" onchange="$('#entidadPLURAR').val($(this).val()+'s');"
                             data-mask  placeholder="Colaborador" />
                        </div>
                    </div>
                    <div class="form-group col-md-3">
                        <label>Entidad en Plurar:</label>
                        <div class="input-group">
                          <div class="input-group-addon">
                            <i class="fa fa-table"></i>
                          </div>
                          <input type="text" class="form-control" id="entidadPLURAR"  name="entidadPLURAR" 
                            data-mask  placeholder="Colaboradores" />
                        </div>
                    </div>
                    <div class="form-group col-md-3">
                        <label>Tabla de Datos:</label>
                        <div class="input-group">
                          <div class="input-group-addon">
                            <i class="fa fa-table"></i>
                          </div>
                          <input type="text" class="form-control" name="nombreTABLA"
                            data-mask placeholder="CamaraColaboradores" />
                        </div>
                    </div>
                    <div class="form-group col-md-3">
                        <label>Prefijo Datos:</label>
                        <div class="input-group">
                          <div class="input-group-addon">
                            <i class="fa fa-table"></i>
                          </div>
                          <input type="text" class="form-control" name="prefijoTABLA"
                            data-mask placeholder="colaborador" />
                        </div>
                    </div>
                    <div class="form-group col-md-3">
                        <label>Vista Personalizada:</label>
                        <div class="input-group">
                          <div class="input-group-addon">
                            <i class="fa fa-table"></i>
                          </div>
                          <input type="text" class="form-control" name="nombreVISTA" data-mask placeholder="todos" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="box box-default collapsed-box">
                <div class="box-header with-border">
                  <h3 class="box-title">Operaciónes / Métodos </h3>
                  <div class="box-tools pull-right">
                    <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i>
                    </button>
                  </div>
                </div>
                <div class="box-body">
                    <div class="form-group">
                        <label for="">Operaciones SICAM:</label>
                    </div>
                    <div class="form-group">
                        <div class="row">
                        {% if OperacionesSICAM %}
                            {% set item = 0 %}
                            {% for indice, Operacion in OperacionesSICAM %}
                        <div class="col-md-3" >
                            <span class="info-box">
                                <span class="info-box-icon" style="width: 40px;font-size:200%;"><i class="{{Operacion.icono}}"></i></span>
                                <div class="info-box-content"  style="margin-left: 40px;">
                                  <span class="pull-right"><input type="checkbox" name="operaciones[]"  class="minimal-red" value="{{indice}}" checked disabled /> </span>
                                  <span class="info-box-">{{Operacion.titulo}}</span>
                                  <span class="info-box-number">{{Operacion.operacion}}();</span>
                                  <span class="info-box-">¿es menú?: {%if Operacion.menu %}{{Operacion.menu}}{% else %}NO{% endif %}</span>
                                </div>
                            </span>
                        </div>
                            {% set item = item + 1 %}
                            {% if item == 4 %}
                            <div  style="clear: both;"></div>
                            {% set item = 0 %}
                            {% endif %}
                            {% endfor %}
                        {% endif %}
                        </div>
                    </div>        
                    <hr />
                    <div class="form-group">
                        <label for="">Operaciones API:</label>
                    </div>
                    <div class="form-group">
                        <div class="row">
                        {% if OperacionesAPI %}
                            {% for indice, Operacion in OperacionesAPI %}
                        <div class="col-md-4" >
                            <label title="{{Operacion.operacion}}()" class="titulo-flotante" >
                                <i class="{{Operacion.icono}}"></i> {{Operacion.titulo}}  
                                <input type="checkbox" name="operaciones[]"  class="minimal-red" value="{{indice}}" checked readonly />
                            </label>
                        </div>
                            {% endfor %}
                        {% endif %}
                        </div>
                    </div>  
                </div>
              </div>
            <hr />
            <div class="nav-tabs-custom nav-tabs-editorphp">
                <ul class="nav nav-tabs">
                    <li class="active">
                        <a href="#tab_1" data-toggle="tab">Controlador</a>
                    </li>
                    <li>
                      <a href="#tab_2" data-toggle="tab">Modelos</a>
                    </li>
                    <li>
                      <a href="#tab_3" data-toggle="tab">Vistas</a>
                    </li>
                    <li><button onclick="cargarCodigoPreGeneradoTODOS();" >Generar TODOS</button></li>
                </ul>
                <div class="tab-content" style="min-height: 320px;">
                  <div id="tab_1" class="tab-pane active">
                    <div class="row">
                        <div class="form-group col-md-8">
                            <label for="rutaCONTROLADOR">Ruta Controlador:</label>
                            <input type="text" id="rutaCONTROLADOR" value="{{DIR_COMPONENTES}}{{controlador.componenteCARPETA}}controladores/" class="col-xs-12" readonly />
                        </div>
                        <div class="form-group col-md-4">
                            <label for="archivoCONTROLADOR">Archivo Controlador:</label>
                            <div class="input-group">
                                 <span class="input-group-btn">
                                    <button type="button" onclick="cargarCodigoPreGeneradoControlador();" class="btn btn-flat" ><i class="fa fa-terminal"></i></button>
                                </span>
                                <input type="text" id="archivoCONTROLADOR"  name="archivoCONTROLADOR" value="{{controlador.controladorCLASE}}.control.php" class="col-xs-12" readonly />
                            </div>
                        </div>
                    </div>
                    <div id="tab_controlador"></div>
                  </div> 
                  <div id="tab_2" class="tab-pane">
                    <div class="row">
                        <div class="form-group col-md-8">
                            <label for="rutaMODELOS">Ruta Modelos:</label>
                            <input type="text" id="rutaMODELOS" value="{{DIR_MODELOS}}{{controlador.componenteCARPETA}}{{controlador.controladorCLASE}}" class="col-xs-12" readonly />
                        </div>
                        <div class="form-group col-md-4">
                            <label for="archivoMODELO">Archivo Modelo:</label>
                            <div class="input-group">
                                 <span class="input-group-btn">
                                    <button type="button" onclick="cargarCodigoPreGeneradoModelo();" class="btn btn-flat" ><i class="fa fa-terminal"></i></button>
                                </span>
                                <input type="text" id="archivoMODELO"  name="archivoMODELO" value="{{controlador.controladorCLASE}}.php" class="col-xs-12" readonly />
                            </div>
                        </div>
                    </div>
                    <div id="tab_modelo"></div>
                    
                    <div class="row">
                        <div class="form-group col-md-4">
                            <label for="archivoSQL">Archivo SQL:</label>
                            <div class="input-group">
                                 <span class="input-group-btn">
                                    <button type="button" onclick="cargarCodigoPreGeneradoSQL();" class="btn btn-flat" ><i class="fa fa-terminal"></i></button>
                                </span>
                                <input type="text" id="archivoSQL"  name="archivoSQL" value="{{controlador.controladorCLASE}}SQL.php" class="col-xs-12" readonly />
                            </div>
                        </div>
                    </div>
                    <div id="tab_modelosql"></div>
                  </div> 
                  <div id="tab_3" class="tab-pane">
                    <div class="row">
                        <div class="form-group col-md-12">
                            <label for="rutaMODELOS">Ruta Vistas:</label>
                            <input type="text" id="rutaVISTAS" value="{{DIR_COMPONENTES}}{{controlador.componenteCARPETA}}/{{controlador.controladorCLASE|lower}}/" class="col-xs-12" readonly />
                        </div>
                    </div>
                    <div class="nav-tabs-custom nav-tabs-editorphp">
                        <ul class="nav nav-tabs">
                          <li class="active" style="max-width: 210px">
                              <a data-toggle="tab" href="#tab_vista_listado">
                                <div class="input-group">
                                 <span class="input-group-btn">
                                    <button type="button" onclick="cargarCodigoPreGeneradoListado();" class="btn btn-flat" ><i class="fa fa-terminal"></i></button>
                                </span>
                                <input type="text" id="archivoLISTADO"  name="archivoLISTADO" value="lst-todos.php" class="col-xs-12" readonly />
                            </div>
                              </a>
                          </li>
                          <li style="max-width: 210px">
                              <a data-toggle="tab" href="#tab_vista_tabla">
                              <div class="input-group">
                                     <span class="input-group-btn">
                                        <button type="button" onclick="cargarCodigoPreGeneradoTabla();" class="btn btn-flat" ><i class="fa fa-terminal"></i></button>
                                    </span>
                                    <input type="text" id="archivoTABLA"  name="archivoTABLA" value="tbl-todos.php" class="col-xs-12" readonly />
                              </div>
                              </a>
                          </li>
                          <li style="max-width: 210px">
                            <a data-toggle="tab" href="#tab_vista_formulario">
                                <div class="input-group">
                                <span class="input-group-btn">
                                <button type="button" onclick="cargarCodigoPreGeneradoFormulario();" class="btn btn-flat" ><i class="fa fa-terminal"></i></button>
                                </span>
                                <input type="text" id="archivoFORMULARIO"  name="archivoFORMULARIO" value="frm-completo.php" class="col-xs-12" readonly />
                                </div> 
                            </a>
                          </li>
                          <li style="max-width: 210px">
                            <a data-toggle="tab" href="#tab_vista_detalles">
                                <div class="input-group">
                                <span class="input-group-btn">
                                <button type="button" onclick="cargarCodigoPreGeneradoDetalles();" class="btn btn-flat" ><i class="fa fa-terminal"></i></button>
                                </span>
                                <input type="text" id="archivoDETALLES"  name="archivoDETALLES" value="ver-detalles.php" class="col-xs-12" readonly />
                                </div> 
                            </a>
                          </li>
                        </ul>
                        <div class="tab-content">
                          <div id="tab_vista_listado" class="tab-pane fade in active"></div>
                          <div id="tab_vista_tabla" class="tab-pane fade"></div>
                          <div id="tab_vista_formulario" class="tab-pane fade"></div>
                          <div id="tab_vista_detalles" class="tab-pane fade"></div>
                        </div>
                    </div>
                  </div> 
                </div>
            </div>
        </div>
    </div>
</div>
</form>
<script src="componentes/desarrollosoftware/recursos/ace-builds-master/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
    $(document).ready(function () {
        cargarCodigoPreGeneradoTODOS();
        checkBoxSICAM('.flat-red');
        checkBoxSICAM('.minimal-red');
        $('.afecta-ruta').change(function(){
            actualizarRutas();
        });
        $('#componenteID').select2();
    });
    function actualizarRutas(){
        var rutaComponente = $("#componenteID").find(':selected').attr('datadir');
        var rutaBase = '{{DIR_COMPONENTES}}';
        var rutaModelos = "{{DIR_MODELOS}}";
        var rutaControaldor = "controladores/";
        var rutaVistas = "vistas/";
        var claseNombre = $("#controladorCLASE").val();
        
        $("#rutaMODELOS").val( rutaModelos + rutaComponente );
        $("#rutaCONTROLADOR").val( rutaBase + rutaComponente + rutaControaldor );
        $("#rutaVISTAS").val( rutaBase + rutaComponente + rutaVistas + claseNombre.toLowerCase() + "/" );
        
        $("#archivoCONTROLADOR").val( claseNombre +".control.php" );
        $("#archivoMODELO").val( claseNombre +".php" );
        $("#archivoSQL").val( claseNombre +"SQL.php" );
    }
    
    function cargarCodigoPreGeneradoTODOS(){
        cargarCodigoPreGeneradoControlador();
        cargarCodigoPreGeneradoModelo();
        cargarCodigoPreGeneradoSQL();
        cargarCodigoPreGeneradoListado();
        cargarCodigoPreGeneradoTabla();
        cargarCodigoPreGeneradoFormulario();
        cargarCodigoPreGeneradoDetalles();
    }
    function cargarCodigoPreGeneradoControlador(){
         cargarDivisionSicam( 'tab_controlador',
            'desarrollosoftware','constructor','generarCodificacionControlador', 
            $("#frm-editor-constructor").serialize(),
            function( codigoPHP ){
                actualizarRutas();
            }
        );
    }
    function cargarCodigoPreGeneradoModelo(){
         cargarDivisionSicam( 'tab_modelo',
            'desarrollosoftware','constructor','generarCodificacionModelo', 
            $("#frm-editor-constructor").serialize(),
            function( codigoPHP ){
                actualizarRutas();
            }
        );
    }
    function cargarCodigoPreGeneradoSQL(){
         cargarDivisionSicam( 'tab_modelosql',
            'desarrollosoftware','constructor','generarCodificacionModeloSQL', 
            $("#frm-editor-constructor").serialize(),
            function( codigoPHP ){
                actualizarRutas();
            }
        );
    }
    
    function cargarCodigoPreGeneradoListado(){
         cargarDivisionSicam( 'tab_vista_listado',
            'desarrollosoftware','constructor','generarCodificacionModeloListado', 
            $("#frm-editor-constructor").serialize(),
            function( codigoPHP ){
                actualizarRutas();
            }
        );
    }
    function cargarCodigoPreGeneradoTabla(){
         cargarDivisionSicam( 'tab_vista_tabla',
            'desarrollosoftware','constructor','generarCodificacionModeloTabla', 
            $("#frm-editor-constructor").serialize(),
            function( codigoPHP ){
                actualizarRutas();
            }
        );
    }
    function cargarCodigoPreGeneradoFormulario(){
         cargarDivisionSicam( 'tab_vista_formulario',
            'desarrollosoftware','constructor','generarCodificacionModeloFormulario', 
            $("#frm-editor-constructor").serialize(),
            function( codigoPHP ){
                actualizarRutas();
            }
        );
    }
    function cargarCodigoPreGeneradoDetalles(){
         cargarDivision( 'tab_vista_detalles',
            'desarrollosoftware','constructor','generarCodificacionModeloDetalles', 
            $("#frm-editor-constructor").serialize(),
            function( codigoPHP ){
                actualizarRutas();
            }
        );
    }
    
</script>