{% extends "base.html.twig" %}

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('css/templateOneBlock.css')}}">
{% endblock %}

{% block titulo %} 
    - <a href="{{path('projectInitial',{ 'idproyectos':idproyectos})}}">{{proyectos.proyecto}}</a> 
    - <a href="{{path(modulo.path,{ 'idproyectos':idproyectos,'idmodule':idmodule})}}">{{modulo.modulo}}</a>
{% endblock %}

{% block menuTop %}
    
    <div class="col-lg-6">
        <div class="container" id="menuTop">
            <button id="incluir" class="btn btn-primary openDialogStatus">{{ 'asp.index.add' | trans }}</button>
            <button id="incluirASP" class="btn btn-primary openDialogStatus">{{ 'asp.index.addasp' | trans }}</button>
            <button id="incluirBrigada" class="btn btn-primary openDialogStatus">{{ 'asp.index.addcrew' | trans }}</button>
            <button id="sinUtilizacionBrigada" class="btn btn-primary openDialogStatus">{{ 'asp.index.crewavailable' | trans }}</button>
            {# render(controller("PortalBundle:Default:topModule",{'idproyectos':idproyectos,'idmodule':idmodule})) #}
        </div> 
    </div>

{% endblock %}


{%block dashboard %}

<div class="container" id="tableSitios"></div>
    
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header  bg-primary">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h2 class="modal-title text-center" id="myModalLabel">{{ 'asp.modal.header' | trans }}</h2>
            </div>
            <div class="modal-body">
            <form action='' id="formCrear" name="formCrear" method="GET" >
                    <div class="row">
                        <div class="col-xs-12 col-sm-4 col-lg-12">
                            <div class="form-group">
                                <div class="col-lg-4 col-xs-9"><b>{{ 'ticketDetail.site' | trans }}: </b>

                                    <select class="form-control" id="sitio" name="sitio">
                                        <option value="">{{ 'asp.modal.select' | trans }}...</option>
                                    {% for ticket  in tickets%}
                                        <option value="{{ticket.idticket}}">{{ticket.sitio | upper}}</option>
                                    {% endfor %}
                                    </select>                                        
                                </div>
                                <div class="col-lg-4 col-xs-9"><b>ASP: </b>
                                    <select id="asp" name="asp" class="form-control">
                                        <option value="">{{ 'asp.modal.select' | trans }}...</option>
                                    </select>
                                </div>                                    
                                  
                            </div>
                        </div>
                    </div>
                <div class="row">
                    <div class="col-xs-12 col-sm-8 col-lg-12">
                        <div class="form-group">   
                            <div class="col-lg-4 col-xs-9"><b>{{ 'BRIGADA' | trans}}: </b>
                                <select class="form-control" id="brigada" name="brigada" disabled="true">
                                    <option value="">-- {{ 'asp.modal.select' | trans }} --</option>

                                </select>
                            </div>                              
                            <div class="col-lg-4 col-xs-2">
                                <b>{{ 'asp.index.leadersite' | trans }}: </b>
                                <input type='text' class="form-control" id="liderSitio" name="liderSitio"/>
                            </div>  
                            <div class="col-lg-4 col-xs-2">
                                <b>{{ 'asp.modal.crewnumber' | trans }}: </b>
                                <input type='text' class="form-control" id="cantidadSitio" name="cantidadSitio"/>
                            </div>                             
                        </div>      
                     </div>                                 
                </div>                                      
                <div class="row">
                    <div class="col-sm-offset-2 col-sm-8 text-center">
                        <div class="btn btn-group">

                            <button name='save' id='save' class="btn btn-info center-block">{{ 'ticketDetail.save' | trans }}</button>
                        </div>
                    </div>
                </div>
            </form>

        </div>
    </div>
</div>
</div>    

<div class="modal fade" id="myModalASP" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header  bg-primary">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h2 class="modal-title text-center" id="myModalLabel">{{ 'asp.index.addasp' | trans }}</h2>
            </div>
            <div class="modal-body">
            <form action='' id="formCrearAsp" name="formCrearAsp" method="GET" >

                <div class="row">
                    <div class="col-xs-12 col-sm-4 col-lg-12">
                        <div class="form-group">                            
                            <div class="col-lg-2 col-xs-9">
                                <b>ASP: </b>
                            </div>
                            <div class="col-lg-8 col-xs-9">
                                <input type='text' class="form-control" id="nombreAsp" name="nombreAsp"/>
                            </div>                                
                        </div>
                    </div>                            
                </div>
                <div class="row">
                    <div class="col-sm-offset-2 col-sm-8 text-center">
                        <div class="btn btn-group">

                            <button name='save2' id='save2' class="btn btn-info center-block">{{ 'ticketDetail.save' | trans }}</button>
                        </div>
                    </div>
                </div>
            </form>

        </div>
    </div>
</div>
</div>  
                                        
<div class="modal fade" id="myModalBrigada" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header  bg-primary">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h2 class="modal-title text-center" id="myModalLabel">{{ 'asp.index.addasp' | trans }}</h2>
            </div>
            <div class="modal-body">
            <form action='' id="formCrearBrigada" name="formCrearBrigada" method="GET" >

                <div class="row">
                    <div class="col-xs-12 col-sm-8 col-lg-12">
                        <div class="form-group">                            
                            <div class="col-lg-6 col-xs-2">
                                <b>ASP: </b>
                                <select class="form-control" id="nombreasp2" name="nombreasp2">
                                        <option value="">-- {{ 'asp.modal.select' | trans }} --</option>
                                </select> 
                            </div>
                        </div>      
                     </div>                                 
                </div> 
                <div class="row">
                    <div class="col-xs-12 col-sm-8 col-lg-12">
                        <div class="form-group">                            
                            <div class="col-lg-4 col-xs-2">
                                <b>{{ 'user.name' | trans }}: </b>
                                <input type='text' class="form-control" id="nombreBrigada" name="nombreBrigada"/>
                            </div> 
                            <div class="col-lg-4 col-xs-2">
                                <b>{{ 'asp.modal.leader' | trans }}: </b>
                                <input type='text' class="form-control" id="nombreLider" name="nombreLider"/>
                            </div>  
                            <div class="col-lg-4 col-xs-2">
                                <b>{{ 'asp.modal.number' | trans }}: </b>
                                <input type='text' class="form-control" id="cantidad" name="cantidad"/>
                            </div>                             
                        </div>      
                     </div>                                 
                </div>                  
                               
                <div class="row">
                    <div class="col-sm-offset-2 col-sm-8 text-center">
                        <div class="btn btn-group">

                            <button name='save3' id='save3' class="btn btn-info center-block">{{ 'ticketDetail.save' | trans }}</button>
                        </div>
                    </div>
                </div>
            </form>

        </div>
    </div>
</div>
</div>

    <!-- SIN UTILIZACION !-->

    <div class="modal fade" id="myModalSinUtilizacionBrigada" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header  bg-primary">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h2 class="modal-title text-center" id="myModalLabel">BRIGADAS SIN UTILIZACION</h2>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-lg-6" id="general" style="margin-top:100px"></div>
                    <div class="col-lg-6" id="chart"></div>
                </div>
                <div class="row">
                    <div class="col-lg-12" id="table"></div>
                </div>
        </div>
    </div>
</div>
</div>

<script>
        
        $(window).load(function(){
            $.ajax({
                
                url:"{{path('ListaTicketAspBrigada',{'idproyectos':idproyectos,'idmodule':idmodule})}}",
                        beforeSend: function () {
                            
                            $("#cargar").show();
                            
                        }


            }).done(function (html) {

                $("#tableSitios").html(html);
                $("#cargar").hide();

            });
            
            
        });

        $("#sinUtilizacionBrigada").click(function () {

            $.getJSON('{{path('Brigada_brigadasSinUtilizacion',{'idproyectos':idproyectos})}}', function (data) {

                var sinUtilizacion = data.sinUtilizacion;
                var totalSinUtilizacion = sinUtilizacion.length;
                var brigadaGeneral  = data.brigadaGeneral;

                if(totalSinUtilizacion == 0){

                    $("#table").empty();
                    $("#table").append('<div class="alert alert-warning" role="alert">NO HAY BRIGADAS SIN UTILIZACION </div>');

                    return false;
                }


                    $("#table").empty();
                    $("#table").append(createTable(sinUtilizacion));
                    $("#general").empty();
                    $("#general").append(createTable(brigadaGeneral));
                    //console.log(brigadaGeneral);
                var primeraGraficaOpt = {
                    chart: {
                        width: 420,
                        type: 'pie',
                        renderTo: 'chart',
                        options3d: {
                            enabled: true,
                            alpha: 45,
                            beta: 0
                        }
                    },
                    title: {
                        text: 'UTILIZACION BRIGADAS'
                    },
                    tooltip: {
                        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            depth: 35,
                            dataLabels: {
                                enabled: true,
                                format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                                style: {
                                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                                }

                            }

                        }
                    },
                    series: [{
                        type: 'pie',
                        name: 'BRIGADAS',
                        data: [



                        ]
                    }]
                };
                var chart = new Highcharts.Chart(primeraGraficaOpt);
                chart.series[0].setData([{
                    name: 'EN USO',
                    y: parseInt(brigadaGeneral[1]['CANTIDAD']),
                    sliced: true,
                    selected: true
                },
                    {
                        name: 'DISPONIBLE',
                        y: parseInt(brigadaGeneral[0]['CANTIDAD']),
                        sliced: true,
                        selected: true,
                        color: '#FE0909'
                    }]);
                $('#myModalSinUtilizacionBrigada').modal('show');
            });

        });

        $("#incluir").click(function(){
            $('#save').attr('disabled', false);
            $("#asp").val('');
            $("#brigada").val('');
            $("#sitio").val('');
            $('#liderSitio').val('');
            $('#cantidadSitio').val('');        
            $('#asp').find('option').remove();
            $('#brigada').find('option').remove();
            $.ajax({
                type:"GET",
                async:true,
                url:"{{path('getAspxProyecto')}}?idproyectos="+{{idproyectos}}
            }).done(function(data){
                var asp = data;
                for (var i=0;i<asp.length;i++){
                   $('#asp').append('<option selected value='+asp[i]['id']+'>'+asp[i]['descripcion']+'</option>');   
                }
            }); 
           $(".error").remove(); 
           $('#myModal').modal('show');            

        });
        
        $("#incluirASP").click(function(){
           $('#save2').attr('disabled', false);
           $("#nombreAsp").val('');       
           $(".error").remove();
           $('#myModalASP').modal('show');

        });        
        
        $("#incluirBrigada").click(function(){
           $('#save3').attr('disabled', false);            
            $("#nombreasp2").val('');
            $("#nombreBrigada").val(''); 
            $("#nombreLider").val('SIN ESPECIFICAR'); 
            $("#cantidad").val(0); 
            $('#nombreasp2').find('option').remove();            
            $.ajax({
                type:"GET",
                async:true,
                url:"{{path('getAspxProyecto')}}?idproyectos="+{{idproyectos}}
            }).done(function(data){
                var asp = data;
                for (var i=0;i<asp.length;i++){
                   $('#nombreasp2').append('<option selected value='+asp[i]['id']+'>'+asp[i]['descripcion']+'</option>');   
                }
            });             
           $(".error").remove();
           $('#myModalBrigada').modal('show');

        });           
        
        $("#save").click(function(){
            $(".error").remove();
            if(($("#asp").val() === "") || ($("#brigada").val() === "") || ($("#sitio").val() === "") 
                || ($("#liderSitio").val() === "") || ($("#cantidadSitio").val() === "") ) {
                $("#save").focus().after("<span class='error'>Introduzca todos los campos</span>");
                return false;
            }else{
                $('#save').attr('disabled', true);

                var asp=$("#asp").val();
                var brigada = $("#brigada").val();
                var ticket = $("#sitio").val();
                var liderSitio = $("#liderSitio").val();
                var cantidadSitio = $("#cantidadSitio").val();
                
                $.ajax({
                    type:"GET",
                    async:true,
                    url:"{{path('ticketAspBrigada_create', {'idproyectos':idproyectos})}}?asp="+asp+"&brigada="+brigada+"&sitio="+ticket+"&liderSitio="+liderSitio+"&cantidadSitio="+cantidadSitio
                }).done(function(msj){
                    swal({title: "Guardado Correctamente", text: "", type: "success"},
                                function () {
                                    $("#asp").val('');
                                    $("#brigada").val('');
                                    $("#sitio").val('');
                                    $("#liderSitio").val('');
                                    $("#cantidadSitio").val('');
                                    $('#myModal').modal('hide'); 
                                });

                            $.ajax({
                                url:"{{path('ListaTicketAspBrigada',{'idproyectos':idproyectos,'idmodule':idmodule})}}",
                                        beforeSend: function () {
                                            $("#cargar").show();
                                        }
                            }).done(function (html) {
                                $("#tableSitios").html(html);
                                $("#cargar").hide();
                            });                    
                });

           
            }
        });      
        
        $("#sitio").change( function() {
           $("#sitio option:selected").each( function() {
            
            var elegido = $(this).val();
            
            if ( elegido != '' ) {
                
                $.ajax({
                    
                    type:"GET",
                    async:true,
                    url:"{{path('getAspBrigadaxSitio')}}?sitio="+elegido
                }).done( function(data) {
                    
                    var asp     = data.asp[0],
                        brigada = data.brigada[0];

                    $('#asp').append('<option selected value=' + asp.id + '>' + asp.asp + '</option>');   
                    $('#brigada').append('<option selected value=' + brigada.id + '>'+ brigada.brigada + '</option>');
                    $('#liderSitio').val(brigada.lider);
                    $('#cantidadSitio').val(brigada.numeroIntegrantes);                       
                });                
            }
           });
        });     
        
        $("#asp").change(function () {
           $("#asp option:selected").each(function () {
            var elegido=$(this).val();
            if (elegido!=''){
                $('#brigada').attr('disabled',false);
                $('#brigada').find('option').remove();
                
                $.ajax({
                    type:"GET",
                    async:true,
                    url:"{{path('getBrigadaxProyecto')}}?idproyectos="+{{idproyectos}}+"&asp="+elegido
                }).done(function(data){
                    var brigada = data;
                    for (var i=0;i<brigada.length;i++){
                       $('#brigada').append('<option selected value='+brigada[i]['id']+'>'+brigada[i]['descripcion']+'</option>');   
                    }
                });        
            }
           });
        }); 
        
        $("#brigada").change(function () {
           $("#brigada option:selected").each(function () {
            var elegido=$(this).val();
            if (elegido!=''){
                $('#liderSitio').val('');
                $('#cantidadSitio').val('');
                
                $.ajax({
                    type:"GET",
                    async:true,
                    url:"{{path('getDtosxBrigada')}}?idproyectos="+{{idproyectos}}+"&brigada="+elegido
                }).done(function(data){
                    var brigada = data;
                    $('#liderSitio').val(brigada[0]['lider']);
                    $('#cantidadSitio').val(brigada[0]['cantidad']);
                
                });        
            }
           });
        });         
        
        $("#save2").click(function(){
            $(".error").remove();
            if($("#nombreAsp").val() === "")  {
                $("#save2").focus().after("<span class='error'>Ingrese Nombre de ASP</span>");
                return false;
            }else{
                $('#save2').attr('disabled', true);

                var asp=$("#nombreAsp").val();

                $.ajax({
                    type:"GET",
                    async:true,
                    url:"{{path('ASP_create', {'idproyectos':idproyectos})}}?asp="+asp
                }).done(function(msj){
                    swal({title: "Guardado Correctamente", text: "", type: "success"},

                    function () {
                        $("#nombreAsp").val('');
                        $('#myModalASP').modal('hide'); 
                    });                    
                });

          
               }
        });              
       
        $("#save3").click(function(){
            $(".error").remove();
            if ( ($("#nombreasp2").val() === "") || ($("#nombreBrigada").val() === "") ||
                  ($("#cantidad").val() === "") || ($("#nombreLider").val() === "") )  {
                $("#save3").focus().after("<span class='error'>Seleccione ASP e Ingrese la información</span>");
                return false;
            }else{
                 $('#save3').attr('disabled', true);

                var asp=$("#nombreasp2").val();
                var brigada=$("#nombreBrigada").val();    
                var lider=$("#nombreLider").val(); 
                var cantidad=$("#cantidad").val(); 

                $.ajax({
                    type:"GET",
                    async:true,
                    url:"{{path('Brigada_create', {'idproyectos':idproyectos})}}?asp="+asp+"&brigada="+brigada+"&lider="+lider+"&cantidad="+cantidad
                }).done(function(msj){
                    swal({title: "Guardado Correctamente", text: "", type: "success"},

                    function () {
                        $("#nombreasp2").val('');
                        $("#nombreBrigada").val('');    
                        $("#nombreLider").val('');  
                        $("#cantidad").val('');  
                        $('#myModalBrigada').modal('hide'); 
                    });                    
                    
                });
            }
        });

        function createTable(monitor,total,nombreColTotal){
            var header = Object.keys(monitor[0]);
            var table = '<table  class="table table-bordered table-hover table-striped table-responsive"> <thead>' +

                    '<tr class="btn-info">';

            for (var j = 0; j < header.length; j++) {


                table += "<th class='text-center'>" + header[j] + "</th>"



            }
            table += "</tr></thead>";

            for (var i = 0; i < monitor.length; i++) {
                table += "<tr>";
                for (var j = 0; j < header.length; j++) {

                    table += "<td>" + monitor[i][header[j]]  + "</td>";

                }
                table += "</tr>";

                if(typeof total !== "undefined") {

                    if (i == monitor.length - 1) {

                        var headerTotal = Object.keys(total);
                        table += '<tr><td>' + nombreColTotal +'</td>';

                        for(var x=0; x<headerTotal.length;x++){
                            table += '<td>';
                            table += total[headerTotal[x]];

                            table += '</td>';

                        }
                        table += '</tr>';
                    }
                }
            }
            table += "</table>";

            return table;
        }
    </script>
{% endblock %}