{% extends '::base.html.twig' %}

{% block menuTop %}{% endblock %}


{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('datatables/css/dataTables.bootstrap.min.css')}}">
    <link rel="stylesheet" href="{{ asset('datatables/css/buttons.bootstrap.min.css')}}">
{% endblock %}

{% block javascripts %}

    <script src="{{asset('js/jquery.isloading.js')}}" type="text/javascript"></script>
    <script src="{{asset('js/jquery.isloading.js')}}" type="text/javascript"></script>
    <script src="{{ asset('js/tableExport.js') }}"></script>
    <script src="{{ asset('js/jquery.base64.js') }}"></script>
    <script src="{{ asset('js/jquery.numeric.js') }}"></script>
    <script src="{{ asset('js/jquery.form.js') }}"></script>
    <script src="{{asset('js/jquery.isloading.js')}}" type="text/javascript"></script>
    <script> 
        $(function(){
            $('#btnClear').live('click', ()=> {
                $('#capacidadMG').val('');
                $('#fasesMG').val('');
                $('#serialMG').val('');
                $('#idsitioMG').val('');
                $('#modeloMG').empty();
                $('#modeloMG').append(`<option value="" selected>MODELO MOTOGENERADOR</option>`);
                $('#modeloM').empty();
                $('#modeloM').append(`<option value="" selected>MODELO MOTOR</option>`);
                $('#modeloPanel').empty();
                $('#modeloPanel').append(`<option value="" selected>MODELO PANEL</option>`);
                $('#modeloG').empty();
                $('#modeloG').append(`<option value="" selected>MODELO GENERADOR</option>`);
                $('input[name=marcaMG_B]').val("");
                $('input[name=modeloMG_B]').val('');
                $('input[name=marcaPanel_B]').val('');
                $('input[name=modeloPanel_B]').val('');
                $('input[name=marcaM_B]').val('');
                $('input[name=modeloM_B]').val('');
                $('input[name=marcaG_B]').val('');
                $('input[name=modeloG_B]').val('');
            });
            $('#btnSaveMG').live('click', ()=>{
                                
                if($('input[name=marcaMG_B]').val()){
                    var marcaMg = $('input[name=marcaMG_B]').val();
                }else{
                    var marcaMg = $('#marcaMG').val();
                }

                if($('input[name=modeloMG_B]').val()){
                    var modeloMg = $('input[name=modeloMG_B]').val();
                }else{
                    var modeloMg = $('#modeloMG').val();
                }

                if($('input[name=marcaPanel_B]').val()){
                    var marcaPanel = $('input[name=marcaPanel_B]').val();
                }else{
                    var marcaPanel = $('#marcaPanel').val();
                }

                if($('input[name=modeloPanel_B]').val()){
                    var modeloPanel = $('input[name=modeloPanel_B]').val();
                }else{
                    var modeloPanel = $('#modeloPanel').val();
                }

                if($('input[name=modeloM_B]').val()){
                    var marcaMotor = $('input[name=marcaM_B]').val();
                }else{
                    var marcaMotor = $('#marcaM').val();
                }

                if($('input[name=modeloMG_B]').val()){
                    var modeloMotor = $('input[name=modeloM_B]').val();
                }else{
                    var modeloMotor = $('#modeloM').val();
                }

                if($('input[name=marcaG_B]').val()){
                    var marcaG = $('input[name=marcaG_B]').val();
                }else{
                    var marcaG = $('#marcaG').val();
                }

                if($('input[name=modeloG_B]').val()){
                    var modeloG = $('input[name=modeloG_B]').val();
                }else{
                    var modeloG = $('#modeloG').val();
                }

                var data ={
                    idproyectos: $('.idproyectos').attr('id'),
                    idSitio: $('#idsitioMG').val(),
                    marcaMg: marcaMg,
                    modeloMg: modeloMg,
                    cap: $('#capacidadMG').val(),
                    fases: $('#fasesMG').val(),
                    serial: $('#serialMG').val(),
                    marcaPanel: marcaPanel,
                    modeloPanel: modeloPanel,
                    marcaMotor: marcaMotor,
                    modeloMotor: modeloMotor,
                    marcaG: marcaG,
                    modeloG: modeloG
                };
                
                $.isLoading({
                    text: 'Guardando...'
                });

                $.ajax({
                    type: "POST",
                    url: '{{path('maple_saveEquipoMg')}}',
                    data: data,
                    success: function(res){
                        $.isLoading('hide');
                        $('.alert').show();
                        setTimeout(()=>{
                            $(".alert").fadeTo(500, 0).slideUp(500, ()=>{
                                $(this).remove(); 
                            });
                        }, 3000);

                        clear();
                    }
                });
                
            });

            function clear(){
                $('#capacidadMG').val('');
                $('#fasesMG').val('');
                $('#serialMG').val('');
                $('#idsitioMG').val('');
                $('#modeloMG').empty();
                $('#modeloMG').append(`<option value="" selected>MODELO MOTOGENERADOR</option>`);
                $('#modeloM').empty();
                $('#modeloM').append(`<option value="" selected>MODELO MOTOR</option>`);
                $('#modeloPanel').empty();
                $('#modeloPanel').append(`<option value="" selected>MODELO PANEL</option>`);
                $('#modeloG').empty();
                $('#modeloG').append(`<option value="" selected>MODELO GENERADOR</option>`);
                $('input[name=marcaMG_B]').val("");
                $('input[name=modeloMG_B]').val('');
                $('input[name=marcaPanel_B]').val('');
                $('input[name=modeloPanel_B]').val('');
                $('input[name=marcaM_B]').val('');
                $('input[name=modeloM_B]').val('');
                $('input[name=marcaG_B]').val('');
                $('input[name=modeloG_B]').val('');
            }

            $('#btnMarcaMG').live('click', ()=>{
                $('#marcaMG_A').toggle(1,()=>{
                    $('input[name="marcaMG_B"]').val('');
                });
                $('#marcaMG_B').toggle();
                $('#modeloMG_A').toggle(1, ()=>{
                    $('input[name="modeloMG_B"]').val('');
                });
                $('#modeloMG_B').toggle();
                $('#btnModeloMG').toggle();
                
            });

            $('#btnModeloMG').live('click', ()=>{
                $('#modeloMG_A').toggle(1, ()=>{
                    $('input[name="modeloMG_B"]').val('');
                });
                $('#modeloMG_B').toggle();
                $('#btnMarcaMG').toggle();
            });

            $('#btnMarcaMotor').live('click', ()=>{
                $('#marcaM_A').toggle(1, ()=>{
                    $('input[name="marcaM_B"]').val('');
                });
                $('#marcaM_B').toggle();
                $('#modeloM_A').toggle(1,()=>{
                    $('input[name="modeloM_B"]').val('');
                });
                $('#modeloM_B').toggle();
                $('#btnModeloMotor').toggle();
            })

            $('#btnModeloMotor').live('click', ()=>{
                $('#modeloM_A').toggle(1, ()=>{
                    $('input[name="modeloM_B"]').val('');
                });
                $('#modeloM_B').toggle();
                $('#btnMarcaMotor').toggle();
            })

            $('#btnMarcaPanel').live('click', ()=>{
                $('#marcaPanel_A').toggle(1,()=>{
                    $('input[name="marcaPanel_B"]').val('');
                });
                $('#marcaPanel_B').toggle();
                $('#modeloPanel_A').toggle(1, ()=>{
                    $('input[name="modeloPanel_B"]').val('');
                });
                $('#modeloPanel_B').toggle();
                $('#btnModeloPanel').toggle();
            })

            $('#btnModeloPanel').live('click', ()=>{
                $('#modeloPanel_A').toggle(1, ()=>{
                    $('input[name="modeloPanel_B"]').val('');
                });
                $('#modeloPanel_B').toggle();
                $('#btnMarcaPanel').toggle();
            })

            $('#btnMarcaG').live('click', ()=>{
                $('#marcaG_A').toggle(1, ()=>{
                    $('input[name="marcaG_B"]').val('');
                });
                $('#marcaG_B').toggle();
                $('#modeloG_A').toggle(1, ()=>{
                    $('input[name="modeloG_B"]').val('');
                });
                $('#modeloG_B').toggle();
                $('#btnModeloG').toggle();
            })

            $('#btnModeloG').live('click', ()=>{
                $('#modeloG_A').toggle(1, ()=>{
                    $('input[name="modeloG_B"]').val('');
                });
                $('#modeloG_B').toggle();
                $('#btnMarcaG').toggle();
            })

            $('#btnMarcaAA').live('click', ()=>{
                
                $('#marcaAA_B').toggle();
                $('#modeloAA_B').toggle();
                $('#marcaAA_A').toggle();
                $('#modeloAA_A').toggle();
                $('#btnModeloAA').toggle();
                
            });

            $('#btnModeloAA').live('click', ()=>{
                $('#modeloAA_A').toggle();
                $('#modeloAA_B').toggle();
            });

            $('#marcaPanel').change(function(){
                var value = $(this).attr('value');
                var data = {'marca': value, 'columna': 'Modelo_Panel', 'columna2':'Marca_Panel'};

                $.isLoading({
                    text: 'Loading'
                });
                 $('#modeloPanel').empty();

                if(value != 'marcaPanel1'){

                    $.getJSON('{{path('maple_modeloEquipo')}}', data).done( res => {
                        var modelos = res.modelos;
                        console.log(modelos);
                        for( i = 0; i < modelos.length; i++){
                            var modelo = modelos[i]['Modelo_Panel'];
                            
                            $('#modeloPanel').append(
                                `<option value="${modelo}">${modelo}</option>`
                            );
                        }
                    }).fail( ()=>{
                        console.log('Error');
                    }).always( ()=> {
                        $.isLoading('hide');
                    });
                }else{
                    $('#modeloPanel').append(
                        `<option value="modeloPanel" selected >MODELO PANEL</option>`
                    );
                    $.isLoading('hide');
                }

            });

            $('#marcaMG').change(function(){
                var value = $(this).attr('value');
                var data = {'marca': value, 'columna': 'Modelo_MG', 'columna2':'Marca_MG'};

                $.isLoading({
                    text: 'Loading'
                });

                $('#modeloMG').empty();

                if(value != 'marcaMG1'){

                    $.getJSON('{{path('maple_modeloEquipo')}}', data).done( res=> {
                        var modelos = res.modelos;

                        for(i = 0; i < modelos.length; i++){
                            var modelo = modelos[i]['Modelo_MG']
                            $('#modeloMG').append(
                                `<option value="${modelo}" >${modelo}</option>`
                            );
                    }
                    }).fail(()=>{
                        console.log('Error');
                    }).always(()=>{
                        $.isLoading('hide');
                    });
                }else{
                    $('#modeloMG').append(
                        `<option value="modelo1" selected >MODELO MOTOGENERADOR</option>`
                    );
                    $.isLoading('hide');
                }

            });

            $('#marcaG').change(function(){
                var value = $(this).attr('value');
                var data = {'marca': value, 'columna': 'Modelo_Generador', 'columna2':'Marca_Generador'};
                
                $.isLoading({
                    text: 'Loading'
                });

                $('#modeloG').empty();

                if(value != 'marcaG1'){

                    $.getJSON('{{path('maple_modeloEquipo')}}', data).done( res=> {
                        var modelos = res.modelos;

                        for(i = 0; i < modelos.length; i++){
                            var modelo = modelos[i]['Modelo_Generador']
                            
                            $('#modeloG').append(
                                `<option value="${modelo}" >${modelo}</option>`
                            );
                    }
                    }).fail(()=>{
                        console.log('Error');
                    }).always(()=>{
                        $.isLoading('hide');
                    });
                }else{
                    $('#modeloG').append(
                        `<option value="modeloG1" selected >MODELO GENERADOR</option>`
                    );
                    $.isLoading('hide');
                }

            });

            $('#marcaM').change(function(){
                var value = $(this).attr('value');
                var data = {'marca': value, 'columna': 'Modelo_Motor', 'columna2':'Marca_Motor'};
                
                $.isLoading({
                    text: 'Loading'
                });

                $('#modeloM').empty();

                if(value != 'marcaM1'){

                    $.getJSON('{{path('maple_modeloEquipo')}}', data).done( res=> {
                        var modelos = res.modelos;

                        for(i = 0; i < modelos.length; i++){
                            var modelo = modelos[i]['Modelo_Motor']
                            
                            $('#modeloM').append(
                                `<option value="${modelo}" >${modelo}</option>`
                            );
                    }
                    }).fail(()=>{
                        console.log('Error');
                    }).always(()=>{
                        $.isLoading('hide');
                    });
                }else{
                    $('#modeloM').append(
                        `<option value="modeloM1" selected >MODELO MOTOR</option>`
                    );
                    $.isLoading('hide');
                }

            });

            $('#marcaAA').change( function(){
                var value = $(this).attr('value');
                var data = {'marca': value};
                
                $.isLoading({
                    text: 'Loading'
                });

                $('#modeloAA').empty();

                if(value != 'marcaAA1'){

                    $.getJSON('{{path('maple_modeloAA')}}', data).done( res=> {
                        var modelos = res.modelos;

                        for(i = 0; i < modelos.length; i++){
                            var modelo = modelos[i]['tipo']
                            
                            $('#modeloAA').append(
                                `<option value="${modelo}" >${modelo}</option>`
                            );
                    }
                    }).fail(()=>{
                        console.log('Error');
                    }).always(()=>{
                        $.isLoading('hide');
                    });
                }else{
                    $('#modeloAA').append(
                        `<option value="modeloAA1" selected >MODELO AA</option>`
                    );
                    $.isLoading('hide');
                }
            });
        });
    </script>
{% endblock %}

{% block dashboard %}

    <style>
        .double-scroll {
            width: 100%;
            margin-bottom: 40px;
        }

        /* pager wrapper, div */
        .pager {
            padding-left: 0;
            margin: 0;
            text-align: left;
            list-style: none;
        }

        /* pager wrapper, in thead/tfoot */
        td.pager {
            background-color: #e6eeee;
        }

        /* pager navigation arrows */
        .pager img {
            vertical-align: middle;
            margin-right: 2px;
        }

        /* pager output text */
        .pager .pagedisplay {
            font-size: 14px;
            font-weight: bold;
            padding: 0 5px 0 5px;
            width: 50px;
            text-align: center;
        }

        /*** loading ajax indeterminate progress indicator ***/
        #tablesorterPagerLoading {
            background: rgba(255, 255, 255, 0.8) url(icons/loading.gif) center center no-repeat;
            position: absolute;
            z-index: 1000;
        }

        /*** css used when "updateArrows" option is true ***/
        /* the pager itself gets a disabled class when the number of rows is less than the size */
        .pager.disabled {
            display: none;
        }

        /* hide or fade out pager arrows when the first or last row is visible */
        .pager img.disabled {
            /* visibility: hidden */
            opacity: 0.5;
            filter: alpha(opacity=50);
        }

        .tablesorter-pager select {
            margin: 0;
            padding: 0;
            width: 50px;
        }

        .wrapper {
            padding-bottom: 50px;
        }

        .header {
            background: #000000;
        }

        .header .container {
            padding-bottom: 20px;
        }

        .header .container h1 {
            color: #FFF;
            line-height: 50px;
            margin-top: 30px;
            margin-bottom: 0;
        }

        .header .container h3 {
            color: #E0E0E0;
            font-size: 16px;
            margin-top: -5px;
        }

        .header .container h3 a {
            color: #66aacc;
        }

        .header .container h3 a:hover {
            color: #b3d5e6;
        }

        .top-menu {
            position: absolute;
            z-index: 9999;
        }

        .top-menu .nav-list {
            background: rgba(255, 255, 255, 0.8);
            border: 1px solid #CCC;
            margin: 20px;
            position: fixed;
            right: 0;
        }

        pre, .well {
            background: #FFFFFF;
        }

        .syntax-container {
            background: #FCFCFC;
            -webkit-border-radius: 7px;
            -webkit-background-clip: padding-box;
            -moz-border-radius: 7px;
            -moz-background-clip: padding;
            border-radius: 7px;
            background-clip: padding-box;
            border: 1px solid #e3e3e3;
            margin-bottom: 30px;
            padding-bottom: 20px;
        }

        .isloading-wrapper.isloading-right {
            margin-left: 10px;
        }

        .isloading-overlay {
            position: relative;
            text-align: center;
        }

        .isloading-overlay .isloading-wrapper {
            background: #FFFFFF;
            -webkit-border-radius: 7px;
            -webkit-background-clip: padding-box;
            -moz-border-radius: 7px;
            -moz-background-clip: padding;
            border-radius: 7px;
            background-clip: padding-box;
            display: inline-block;
            margin: 0 auto;
            padding: 10px 20px;
            top: 10%;
            z-index: 9000;
        }

        /*Glyphicon Spinner*/
        .glyphicon-spin {
            -animation: spin .9s infinite linear;
            -webkit-animation: spin2 .9s infinite linear;
        }

        @-webkit-keyframes spin2 {
            from {
                -webkit-transform: rotate(0deg);
            }
            to {
                -webkit-transform: rotate(360deg);
            }
        }

        @keyframes spin {
            from {
                transform: scale(1) rotate(0deg);
            }
            to {
                transform: scale(1) rotate(360deg);
            }
        }

        #menuTop {
            margin-top: 30px;
        }

        body {
             /*margin-top: 80px;*/
        }

        h1 {
            font-size: 36px;
        }

    
        /*color de cabecera de tabla*/
        .tablesorter-header-inner, table.tablesorter thead tr th, .tablesorter-filter {
            color: #fff;
            background-color: #307aba;
            border-color: #dedede;
            font-weight: normal;
        }

        table.tablesorter thead tr th {

            height: 40px;
        }

        .tablesorter-blue .headerSortUp, .tablesorter-blue .tablesorter-headerSortUp, .tablesorter-blue .tablesorter-headerAsc {
            background-color: #307aba;
        }

        .tablesorter-blue .headerSortDown, .tablesorter-blue .tablesorter-headerSortDown, .tablesorter-blue .tablesorter-headerDesc {
            background-color: #307aba;
        }

        .tablesorter-blue .tablesorter-filter-row td {
            background: #307aba;
        }

        input[type="search"] {
            display: block;
            width: 100%;
            height: 34px;
            padding: 6px 12px;
            font-size: 14px;
            line-height: 1.42857143;
            color: #555;
            background-color: #fff;
            background-image: none;
            border: 1px solid #ccc;
            border-radius: 4px;
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
            -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
            -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
            transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        }
    </style>

    <div class="container alert alert-success" role="alert" style="display: none">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <strong>Completado!</strong> Se ha guadado la información correctamente!
    </div>
    <div class ="container-fluid">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 text-center idproyectos" id= "{{idproyectos}}" >
                <h2>{{title}}</h2>
            </div>
        </div>
    </div>
    
    <div class="container">
        <div class="row">
            <div role="tabpanel">
                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active">
                        <a href="#mg" aria-controls="home" role="tab" data-toggle="tab">Motogenerador</a>
                    </li>
                    <!--
                    <li role="presentation">
                        <a href="#rec" aria-controls="tab" role="tab" data-toggle="tab">Rectificadores</a>
                    </li>
                     <li role="presentation">
                        <a href="#bat" aria-controls="tab" role="tab" data-toggle="tab">Baterias</a>
                    </li>
                     <li role="presentation">
                        <a href="#aa" aria-controls="tab" role="tab" data-toggle="tab">AA</a>
                    </li>
                    -->
                </ul>

                <!-- Tab panes -->
                <div class="tab-content">
                    <!-- Motogenerador -->
                    <div role="tabpanel" class="tab-pane active" id="mg">
                        <div class="panel panel-info">
                            <div class="panel-heading">
                                NUEVO MOTOGENERADOR
                            </div>
                            <div class="panel-body">
                                <form action='' class="form-horizontal" name="MG"role="form" method="POST" data-toggle="validator">
                                    <div class="row" >
                                        <div class="col-xs-12 col-sm-4 col-lg-6">
                                            <fieldset>
                                                <legend>MOTOGENERADOR</legend>
                                                <div class="row">
                                                    <label for="" class="col-lg-4 control-label">MARCA </label>
                                                    <div class="col-xs-12 col-sm-4 col-lg-6" id= 'marcaMG_A'>
                                                        <select name="marcaMG" id="marcaMG" class="form-control" required="required">
                                                            <option value="" selected >MARCA MOTOGENERADOR</option>
                                                           {% for marca in marcasMG %}
                                                               <option value="{{marca.Marca_MG}}" >{{marca.Marca_MG}}</option>  
                                                           {% endfor %}
                                                        </select>
                                                    </div>
                                                    <div class="col-xs-12 col-sm-4 col-lg-6" style="display: none" id= 'marcaMG_B' >
                                                        <input type="text" name="marcaMG_B" value=""  class="form-control" placeholder="MARCA MOTOGENERADOR">
                                                    </div>
                                                    <button type="button" class="btn btn-link btn-lg" id="btnMarcaMG">
                                                        <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
                                                    </button>
                                                </div>
                                                <div class="row">
                                                    <label for="" class="col-lg-4 control-label">MODELO </label>
                                                    <div class="col-xs-12 col-sm-4 col-lg-6" id= 'modeloMG_A'>
                                                        <select name="modeloMG" id="modeloMG" class="form-control" required="required">
                                                            <option value="modelo1" selected >MODELO MOTOGENERADOR</option>
                                                        </select>
                                                    </div>
                                                    <div class="col-xs-12 col-sm-4 col-lg-6" style="display: none" id= 'modeloMG_B' >
                                                        <input type="text" name="modeloMG_B" value=""  class="form-control" placeholder="MODELO MOTOGENERADOR">
                                                    </div>
                                                    <button type="button" class="btn btn-link btn-lg" id="btnModeloMG">
                                                        <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
                                                    </button>
                                                </div>
                                                <!--
                                                <div class="row">
                                                    <label for="" class="col-lg-4 control-label">CAPACIDAD </label>
                                                    <div class="col-xs-12 col-sm-4 col-lg-6">
                                                        <input type="text" id="capacidadMG" name="capacidadMG" value=""  class="form-control" placeholder="CAPACIDAD">
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <label for="" class="col-lg-4 control-label">FASES </label>
                                                    <div class="col-xs-12 col-sm-4 col-lg-6">
                                                        <input type="text" id="fasesMG" name="fasesMG" value=""  class="form-control" placeholder="FASES">
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <label for="" class="col-lg-4 control-label">NÚMERO SERIAL</label>
                                                    <div class="col-xs-12 col-sm-4 col-lg-6">
                                                        <input type="text" id="serialMG" name="serialMG" value=""  class="form-control" placeholder="NUMERO SERIAL">
                                                    </div>
                                                </div>
                                                -->
                                            </fieldset>
                                        </div>
                                        <div class="col-xs-12 col-sm-4 col-lg-6">
                                            <fieldset>
                                                <legend>PANEL</legend>
                                                 <div class="row">
                                                    <label for="" class="col-lg-4 control-label">MARCA </label>
                                                    <div class="col-xs-12 col-sm-4 col-lg-6" id="marcaPanel_A">
                                                        <select name="marcaPanel" id="marcaPanel" class="form-control" required="required">
                                                            <option value="marcaPanel1" selected >MARCA PANEL</option>
                                                            {% for marca in marcasPanel %}
                                                               <option value="{{marca.Marca_Panel}}" >{{marca.Marca_Panel}}</option>  
                                                            {% endfor %}
                                                        </select>
                                                    </div>
                                                    <div class="col-xs-12 col-sm-4 col-lg-6" style="display: none" id= 'marcaPanel_B' >
                                                        <input type="text" name="marcaPanel_B" value=""  class="form-control" placeholder="MARCA PANEL">
                                                    </div>
                                                    <button type="button" class="btn btn-link btn-lg" id="btnMarcaPanel">
                                                        <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
                                                    </button>
                                                </div>
                                                <div class="row">
                                                    <label for="" class="col-lg-4 control-label">MODELO </label>
                                                    <div class="col-xs-12 col-sm-4 col-lg-6" id="modeloPanel_A">
                                                        <select name="modeloPanel" id="modeloPanel" class="form-control" required="required">
                                                            <option value="modeloPanel1" selected >MODELO PANEL</option>
                                                        </select>
                                                    </div>
                                                    <div class="col-xs-12 col-sm-4 col-lg-6" style="display: none" id= 'modeloPanel_B' >
                                                        <input type="text" name="modeloPanel_B" value=""  class="form-control" placeholder="MARCA PANEL">
                                                    </div>
                                                    <button type="button" class="btn btn-link btn-lg" id="btnModeloPanel">
                                                        <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
                                                    </button>
                                                </div>
                                            </fieldset>
                                        </div>
                                        
                                        <div class="row" >
                                            <div class="col-xs-12 col-sm-4 col-lg-8"></div>
                                        </div>
                                        <div class="row" >
                                            <div class="col-xs-12 col-sm-4 col-lg-8"></div>
                                        </div>
                                        <div class="col-xs-12 col-sm-4 col-lg-6">
                                            <fieldset>
                                                <legend>MOTOR</legend>
                                                <div class="row">
                                                    <label for="" class="col-lg-4 control-label">MARCA</label>
                                                    <div class="col-xs-12 col-sm-4 col-lg-6" id ="marcaM_A" >
                                                        <select name="marcaM" id="marcaM" class="form-control" required="required">
                                                            <option value="marcaM1" selected >MARCA MOTOR</option>
                                                                {% for marca in marcasMotor %}
                                                                    <option value="{{marca.Marca_Motor}}" >{{marca.Marca_Motor}}</option>  
                                                                {% endfor %}
                                                        </select>
                                                    </div>
                                                    <div class="col-xs-12 col-sm-4 col-lg-6" style="display: none" id= 'marcaM_B' >
                                                        <input type="text" name="marcaM_B" value=""  class="form-control" placeholder="MARCA MOTOR">
                                                    </div>
                                                    <button type="button" class="btn btn-link btn-lg" id="btnMarcaMotor">
                                                        <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
                                                    </button>
                                                </div>
                                                <div class="row">
                                                    <label for="" class="col-lg-4 control-label">MODELO</label>
                                                    <div class="col-xs-12 col-sm-4 col-lg-6" id ="modeloM_A" >
                                                        <select name="modeloM" id="modeloM" class="form-control" required="required">
                                                            <option value="modeloM1" selected >MODELO MOTOR</option>
                                                        </select>
                                                    </div>
                                                    <div class="col-xs-12 col-sm-4 col-lg-6" style="display: none" id= 'modeloM_B' >
                                                        <input type="text" name="modeloM_B" value=""  class="form-control" placeholder="MODELO MOTOR">
                                                    </div>
                                                    <button type="button" class="btn btn-link btn-lg" id="btnModeloMotor">
                                                        <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
                                                    </button>
                                                </div>
                                                <div class="col-xs-12 col-sm-4 col-lg-12"></div>
                                                <div class="col-xs-12 col-sm-4 col-lg-12"></div>
                                                <div class="col-xs-12 col-sm-4 col-lg-12"></div>
                                                <div class="col-xs-12 col-sm-4 col-lg-12"></div>
                                            </fieldset>
                                        </div>
                                        <div class="col-xs-12 col-sm-4 col-lg-6">
                                            <fieldset>
                                                <legend>GENERADOR</legend>
                                                 <div class="row">
                                                    <label for="" class="col-lg-4 control-label">MARCA </label>
                                                    <div class="col-xs-12 col-sm-4 col-lg-6" id='marcaG_A'>
                                                        <select name="marcaG" id="marcaG" class="form-control" required="required">
                                                            <option value="marcaG1" selected >MARCA GENERADOR</option>
                                                            {% for marca in marcasG %}
                                                               <option value="{{marca.Marca_Generador}}" >{{marca.Marca_Generador}}</option>  
                                                            {% endfor %}
                                                        </select>
                                                    </div>
                                                    <div class="col-xs-12 col-sm-4 col-lg-6" style="display: none" id= 'marcaG_B' >
                                                        <input type="text" name="marcaG_B" value=""  class="form-control" placeholder="MARCA GENERADOR">
                                                    </div>
                                                    <button type="button" class="btn btn-link btn-lg" id="btnMarcaG">
                                                        <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
                                                    </button>
                                                </div>
                                                <div class="row">
                                                    <label for="" class="col-lg-4 control-label">MODELO </label>
                                                    <div class="col-xs-12 col-sm-4 col-lg-6"id= 'modeloG_A'>
                                                        <select name="modeloG" id="modeloG" class="form-control" required="required">
                                                            <option value="modeloG1" selected >MODELO GENERADOR</option>
                                                        </select>
                                                    </div>
                                                    <div class="col-xs-12 col-sm-4 col-lg-6" style="display: none" id= 'modeloG_B' >
                                                        <input type="text" name="modeloG_B" value=""  class="form-control" placeholder="MARCA GENERADOR">
                                                    </div>
                                                    <button type="button" class="btn btn-link btn-lg" id="btnModeloG">
                                                        <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
                                                    </button>
                                                </div>
                                            </fieldset>
                                        </div>
                                        <div class="row">
                                            <div class="col-sm-offset-2 col-sm-8 text-center">
                                                <div class="btn btn-group">
                                                    <button type="button" class="btn btn-info center-block" id="btnSaveMG">Guardar</button>
                                                    <button type="button" class="btn btn-danger center-block" id="btnClear">Limpiar</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>        
                            </div>
                        </div>
                    </div>
                    <!-- Rectificadores -->
                    <div role="tabpanel" class="tab-pane" id="rec">
                        <div class="panel panel-info">
                            <div class="panel-heading">
                                NUEVO RECTIFICADOR
                            </div>
                            <div class="panel-body">
                                <form action='/site/web/app.php/st/newSite/37/2/1' class="form-horizontal" name="sitioDatos"role="form" method="POST" data-toggle="validator">
                                    <div class="row" >
                                        <div class="col-xs-12 col-sm-4 col-lg-6">
                                            <fieldset>
                                                <div class="row">
                                                    <label for="" class="col-lg-4 control-label">MARCA </label>
                                                    <div class="col-xs-12 col-sm-4 col-lg-6">
                                                        <select name="marcaPanel" id="marcaPanel" class="form-control" required="required">
                                                            <option value="marca1" selected >MARCA RECTIFICADOR</option>
                                                            <option value="marca1">Marca 1</option>
                                                            <option value="marca2">Marca 2</option>
                                                            <option value="marca3">Marca 3</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <label for="" class="col-lg-4 control-label">MODELO </label>
                                                    <div class="col-xs-12 col-sm-4 col-lg-6">
                                                        <select name="modeloPanel" id="modeloPanel" class="form-control" required="required">
                                                            <option value="modelo" selected >MODELO RECTIFICADOR</option>
                                                            <option value="modelo1">MODELO 1</option>
                                                            <option value="modelo2">MODELO 2</option>
                                                            <option value="modelo3">MODELO 3</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <label for="" class="col-lg-4 control-label">RECTIFICADOR </label>
                                                    <div class="col-xs-12 col-sm-4 col-lg-6">
                                                        <input type="text" id="sitioUbicacion_longitud" name="sitioUbicacion[latitud]" value=""  class="form-control" placeholder="RECTIFICADOR">
                                                    </div>
                                                </div>
                                            </fieldset>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-offset-2 col-sm-8 text-center">
                                            <div class="btn btn-group">
                                                <button type="submit" class="btn btn-info center-block">Crear</button>
                                                    <a  type="button" class="btn btn-danger center-block" href="/site/web/app.php/st/inicio/37/2">Cancel</a>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <!-- Baterias -->
                    <div role="tabpanel" class="tab-pane" id="bat">
                         <div class="panel panel-info">
                            <div class="panel-heading">
                                NUEVA BATERIA
                            </div>
                            <div class="panel-body">
                                <form action='/site/web/app.php/st/newSite/37/2/1' class="form-horizontal" name="sitioDatos"role="form" method="POST" data-toggle="validator">
                                    <div class="row" >
                                        <div class="col-xs-12 col-sm-4 col-lg-6">
                                            <fieldset>  
                                                <div class="row">
                                                    <label for="" class="col-lg-4 control-label">MARCA </label>
                                                    <div class="col-xs-12 col-sm-4 col-lg-6">
                                                        <select name="marcaPanel" id="marcaPanel" class="form-control" required="required">
                                                            <option value="marca1" selected >MARCA BATERIA</option>
                                                            <option value="marca1">Marca 1</option>
                                                            <option value="marca2">Marca 2</option>
                                                            <option value="marca3">Marca 3</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <label for="" class="col-lg-4 control-label">MODELO </label>
                                                    <div class="col-xs-12 col-sm-4 col-lg-6">
                                                        <select name="modeloPanel" id="modeloPanel" class="form-control" required="required">
                                                            <option value="modelo" selected >MODELO BATERIA</option>
                                                            <option value="modelo1">MODELO 1</option>
                                                            <option value="modelo2">MODELO 2</option>
                                                            <option value="modelo3">MODELO 3</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <label for="" class="col-lg-4 control-label">VOLTAJE NOMINAL </label>
                                                    <div class="col-xs-12 col-sm-4 col-lg-6">
                                                        <input type="text" id="sitioUbicacion_longitud" name="sitioUbicacion[latitud]" value=""  class="form-control" placeholder="VOLTAJE NOMINAL">
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <label for="" class="col-lg-4 control-label">CAPACIDAD NOMINAL </label>
                                                    <div class="col-xs-12 col-sm-4 col-lg-6">
                                                        <input type="text" id="sitioUbicacion_longitud" name="sitioUbicacion[latitud]" value=""  class="form-control" placeholder="CAPACIDAD NOMINAL Ah">
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <label for="" class="col-lg-4 control-label">CONDUCTANCIA NOMINAL ( mho ) </label>
                                                    <div class="col-xs-12 col-sm-4 col-lg-6">
                                                        <input type="text" id="sitioUbicacion_longitud" name="sitioUbicacion[latitud]" value=""  class="form-control" placeholder="CONDUCTANCIA NOMINAL ( mho )">
                                                    </div>
                                                </div>
                                            </fieldset>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-offset-2 col-sm-8 text-center">
                                            <div class="btn btn-group">
                                                <button type="submit" class="btn btn-info center-block">Crear</button>
                                                    <a  type="button" class="btn btn-danger center-block" href="/site/web/app.php/st/inicio/37/2">Cancel</a>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <!-- AA -->
                    <div role="tabpanel" class="tab-pane" id="aa">
                        <div class="panel panel-info">
                            <div class="panel-heading">
                                NUEVO AA
                            </div>
                            <div class="panel-body">
                                <form action='/site/web/app.php/st/newSite/37/2/1' class="form-horizontal" name="sitioDatos"role="form" method="POST" data-toggle="validator">
                                    <div class="row" >
                                        <div class="col-xs-12 col-sm-4 col-lg-6">
                                            <fieldset>  
                                                <div class="row">
                                                    <label for="" class="col-lg-4 control-label">MARCA </label>
                                                    <div class="col-xs-12 col-sm-4 col-lg-6" id='marcaAA_A'>
                                                        <select name="marcaAA" id="marcaAA" class="form-control" required="required">
                                                            <option value="marcaAA1" selected >MARCA AA</option>
                                                            {% for marca in marcasAA %}
                                                               <option value="{{marca.marca}}" >{{marca.marca}}</option>  
                                                            {% endfor %}
                                                        </select>
                                                    </div>
                                                    <div class="col-xs-12 col-sm-4 col-lg-6" style="display: none" id= 'marcaAA_B' >
                                                        <input type="text" name="sitioUbicacion[latitud]" value=""  class="form-control" placeholder="MARCA AA">
                                                    </div>
                                                    <button type="button" class="btn btn-link btn-lg" id="btnMarcaAA">
                                                        <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
                                                    </button>
                                                </div>
                                                <div class="row">
                                                    <label for="" class="col-lg-4 control-label">MODELO </label>
                                                    <div class="col-xs-12 col-sm-4 col-lg-6" id='modeloAA_A'>
                                                        <select name="modeloAA" id="modeloAA" class="form-control" required="required">
                                                            <option value="modeloAA1" selected >MODELO AA</option>
                                                        </select>
                                                    </div>
                                                    <div class="col-xs-12 col-sm-4 col-lg-6" style="display: none" id= 'modeloAA_B' >
                                                        <input type="text" name="sitioUbicacion[latitud]" value=""  class="form-control" placeholder="MARCA AA">
                                                    </div>
                                                    <button type="button" class="btn btn-link btn-lg" id="btnModeloAA">
                                                        <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
                                                    </button>
                                                </div>
                                                <div class="row">
                                                    <label for="" class="col-lg-4 control-label">TIPO </label>
                                                    <div class="col-xs-12 col-sm-4 col-lg-6">
                                                        <input type="text" id="sitioUbicacion_longitud" name="sitioUbicacion[latitud]" value=""  class="form-control" placeholder="TIPO">
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <label for="" class="col-lg-4 control-label">CAPACIDAD </label>
                                                    <div class="col-xs-12 col-sm-4 col-lg-6">
                                                        <input type="text" id="sitioUbicacion_longitud" name="sitioUbicacion[latitud]" value=""  class="form-control" placeholder="CAPACIDAD">
                                                    </div>
                                                </div>
                                            </fieldset>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-offset-2 col-sm-8 text-center">
                                            <div class="btn btn-group">
                                                <button type="submit" class="btn btn-info center-block">Crear</button>
                                                    <a  type="button" class="btn btn-danger center-block" href="/site/web/app.php/st/inicio/37/2">Cancel</a>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}