{% extends '::base.html.twig' %}
{#{% block menuTop %}{% endblock %}#}

{% block dashboard %}
    <style>
        .pager {
            padding: 5px;
        }

        /* 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: 11px;
            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;
        }

        table.tablesorter thead tr th, table.tablesorter tfoot tr th {
            background-color: #aa0001;
            border: 1px solid #FFF;
            font-size: 8pt;
            padding: 4px;
            color: white;
        }

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

        .isloading-right {
            font-size: 30px;
            padding-left: 48%;
        }

        .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-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);
            }
        }

        .btn-amarillo {
            background-color: #F4FF77;
            color: #000;
        }

        .btn-warning {
            color: #000;
        }

        .btn-danger {
            color: #ffffff;
        }

        table td {
            text-transform: uppercase;
        }

        .form-group {
            margin-left: 20px;
            margin-top: 30px;
        }

        #menuTop {
            margin-top: 0px;
        }

        #identity {
            font-size: 16px;
            font-weight: bold;
            max-width: 365px;
            max-height: 100px;
            min-height: 55px;
            min-width: 150px;
            word-wrap: break-word;
            margin-bottom: 20px;
        }

        #_logo {
            max-height: 100px;
        }


    </style>

    <script src="{{ asset('js/highcharts.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/jquery.isloading.js') }}" type="text/javascript"></script>
    <script>

        $(function () {
            // bind change event to select
            $('#filtro_proyecto').on('change', function () {
                var url = $(this).val(); // get selected value
                if (url) { // require a URL
                    window.location = url; // redirect
                }
                return false;
            });
        });

        var pagerOptions = {
            // target the pager markup - see the HTML block below
            container: $(".pager"),
            // output string - default is '{page}/{totalPages}'; possible variables: {page}, {totalPages}, {startRow}, {endRow} and {totalRows}
            output: '{startRow} - {endRow} / {filteredRows} ({totalRows})',
            // if true, the table will remain the same height no matter how many records are displayed. The space is made up by an empty
            // table row set to a height to compensate; default is false
            fixedHeight: false,
            // remove rows from the table to speed up the sort of large tables.
            // setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.
            removeRows: true,
            // go to page selector - select dropdown that sets the current page
            cssGoto: '.gotoPage'
        };

        $(".basicTable").tablesorter({
            theme: 'blue',
            // sort on the first column and second column in ascending order
            widgets: ["zebra", "filter"],
            widgetOptions: {
                // extra css class applied to the table row containing the filters & the inputs within that row
                filter_cssFilter: '',
                // If there are child rows in the table (rows with class name from "cssChildRow" option)
                // and this option is true and a match is found anywhere in the child row, then it will make that row
                // visible; default is false
                filter_childRows: false,
                // if true, filters are collapsed initially, but can be revealed by hovering over the grey bar immediately
                // below the header row. Additionally, tabbing through the document will open the filter row when an input gets focus
                filter_hideFilters: false,
                // Set this option to false to make the searches case sensitive
                filter_ignoreCase: true,
                // jQuery selector string of an element used to reset the filters
                filter_reset: '.reset',
                // Use the $.tablesorter.storage utility to save the most recent filters
                filter_saveFilters: true
            }
        }).tablesorterPager(pagerOptions);

        var arrymeses = ['TODOS', 'ENERO', 'FEBRERO', 'MARZO',
            'ABRIL', 'MAYO', 'JUNIO', 'JULIO', 'AGOSTO',
            'SEPTIEMBRE', 'OCTUBRE', 'NOVIEMBRE', 'DICIEMBRE'];

        function buscador(tabindex) {
            var input, filter, table, tr, td, i;
            console.log('el di del elemento es ' + ('msg' + tabindex));
            input = document.getElementById('msg' + tabindex);
            filter = input.value.toUpperCase();
            table = document.getElementById("basicTable");
            tr = table.getElementsByTagName("tr");
            for (i = 0; i < tr.length; i++) {
                td = tr[i].getElementsByTagName("td")[tabindex];
                if (td) {
                    if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                        tr[i].style.display = "";
                    } else {
                        tr[i].style.display = "none";
                    }
                }
            }
        }

        window.onload = function llenarfechas() {

            $.getJSON('{{ path('TipoServicios_FechasGt') }}', function (data) {
                var data = data.Fechas
                console.table(data);
                var arrayyear = [];
                $("select[id='selec_mes']").find('option').remove();
                $("select[id='selec_year']").find('option').remove();
                $("select[id='selec_mes']").append('<option value="' + 0 + '"selected="selected"> SELECIONE MES </option>');
                for (index = 0; index < data.length; ++index) {
                    $("select[id='selec_mes']").append('<option value="' + data[index]['MONTH'] + '">' + arrymeses[data[index]['MONTH']] + '</option>');

                    if ((arrayyear.indexOf(data[index]['YEAR']) == -1) == true) {
                        console.log('estamos anadiendo un ano el select');
                        $("#selec_year").append('<option value="' + data[index]['YEAR'] + '">' + data[index]['YEAR'] + '</option>');
                    }
                    arrayyear.push(data[index]['YEAR']);
                }

            });


        }

        function createTable_alarma(noCOLUMNS, noROWS, dataROWS, dataCOLUMNS, id, table, nonNullData) {
            $(table).remove();
            mytable = $('<table></table>').attr({
                id: table,
                class: "table table-bordered table-hover table-striped table-responsive basicTable tablesorter "
            });
            var rows = noROWS;
            var cols = noCOLUMNS;
            var tr = [];

            for (var f = 0; f < rows; f++) {
                var row = $('<tr></tr>').attr({align: ["left"].join(' ')}).appendTo(mytable);
                if (f == 0) {
                    for (var j = 0; j < cols; j++) {
                        if (dataCOLUMNS[j] == 'URL') {
                            dataCOLUMNS[j] = 'ENTREGABLES';
                        }
                        ;
                        if (table == 'basicTable') {
                            tabindex = j;
                            idelement = 'msg' + j;
                            varinput = "";
                            varinput = nonNullData[j];
                            varinput = varinput.concat('<input id=' + idelement + ' type="text" class="form-control" onkeyup="buscador(' + tabindex + ',' + idelement + ')" name="msg">');

                            $('<th style="vertical-align: middle; user-select: none;" class="btn-info text-center tablesorter-header tablesorter-headerAsc" data-column=' + j + ' tabindex="0" scope="col" role="columnheader" aria-disabled="false" aria-controls="basicTable" unselectable="on" aria-sort="ascending" aria-label=" Ascending sort applied, activate to apply a descending sort" >' + varinput + '</th>').attr({
                                class: ["text-center tablesorter-header tablesorter-headerUnSorted"],
                                align: ["left"],
                                style: ["background-color: #082a99; color:white"]
                            }).appendTo(row);

                        } else {
                            $('<th ></th>').text(dataCOLUMNS[j]).attr({
                                class: ["text-center tablesorter-header tablesorter-headerUnSorted"],
                                align: ["left"]
                            }).appendTo(row);
                        }
                        ;


                    }
                } else {
                    index = dataROWS[f];
                    for (var i = 0; i < cols; i++) {


                        if (table == 'basicTable1') {
                            vartext = dataROWS[f - 1][dataCOLUMNS[i]];
                            if (i == cols - 1) {

                                if (dataROWS[f - 1]['URL'] != null) {
                                    $('<td></td>').append("<center><a class='btn btn-link' target='_blank' href=" + dataROWS[f - 1]['URL'] + "><img border=0; src='{{ asset('images/greencheck.png') }}'; width='15' height='15'></img></a></center>").appendTo(row);

                                } else {

                                    $('<td></td>').append("<center><img border=0; src='{{ asset('images/gray_sync.png') }}'; width='15' height='15'></img></center>").appendTo(row);
                                }
                            } else {
                                $('<td></td>').text(vartext).appendTo(row);
                            }

                        } else {
                            vartext = dataROWS[f - 1][nonNullData[i]];
                            if (vartext == null) {
                                if (i < 3) {
                                    vartext = 'No se especifico';
                                } else {
                                    vartext = '0';
                                }


                            }
                            $('<td></td>').text(vartext).appendTo(row);
                        }


                    }
                }
            }

            mytable.appendTo(id);
        }

        function getDataServicios_Gt() {
            $.isLoading({
                text: "Loading"
            });
            data = {};
            data['month_gt'] = $("#selec_mes").val();
            data['year_gt'] = $("#selec_year").val();


            $.getJSON('{{ path('TipoServicios_Todosgt') }}', data, function (data) {
                Servicios_GT = data.Servicios_GT;
                nonNullData = data.Tablas.map(function (a) {
                    return a.Tabla;
                });
                console.log(data.Tablas);
                console.log(data.Sum_GT);
                Sum_GT = data.Sum_GT;
                columns = Object.keys(Servicios_GT[0]);
                tipos = nonNullData;
                $('#basicTable').remove();
                createTable_alarma(nonNullData.length, Servicios_GT.length + 1, Servicios_GT, columns, '#box', 'basicTable', nonNullData);

                datatipos = [];
                for (var i = 3; i < nonNullData.length; i++) {
                    /*el numero 6 da conflicto con ambas graficas*/
                    if (i == 6) {
                        i++;
                    }

                    columname = nonNullData[i];
                    datatipos.push([columname, Sum_GT[Sum_GT.length - 1][columname] * 1]);
                }
                console.table(datatipos);

                datacategorias = [];

                dataseries = [];

                for (var i = 0; i < Sum_GT.length; i++) {
                    if (Sum_GT[i]['REGION'] != null) {
                        datacategorias.push(Sum_GT[i]['REGION']);
                    }
                }

                for (var i = 3; i < tipos.length; i++) {
                    if (i == 6) {
                        i++;
                    }

                    tmpdata = [];
                    tmptipos = tipos[i];
                    for (var j = 1; j < Sum_GT.length - 1; j++) {
                        tmpdata.push(Sum_GT[j][tipos[i]] * 1);

                    }
                    dataseries.push({
                        name: tmptipos,
                        data: tmpdata
                    });
                }
                graficarTipos(datatipos);
                graficarRegion(datacategorias, dataseries);
                $.isLoading("hide");
                return false;

            });
        };

        $("#basicTable td").live("click", function (event) {
            var col = $(this).parent().children().index($(this));
            var row = $(this).parent().parent().children().index($(this).parent());
            id = document.getElementById("basicTable").rows[row].cells[0].innerHTML;
            var target = event.target || event.srcElement;
            tabla = document.getElementById("basicTable").rows[0].cells[col].innerText;
            if (target.innerHTML != '0' && col > 2) {
                tabla = tabla.replace(/(\r\n|\n|\r)/gm, "");
                tabla = tabla.trim();
                crearDetalle(id, tabla);

            }
        });

        var table = $('basicTable');

        function crearDetalle(id, tabla) {
            $.isLoading({
                text: "Loading"
            });
            data = {};
            data['month_gt'] = $("#selec_mes").val();
            data['year_gt'] = $("#selec_year").val();
            data['id'] = id;
            data['tabla'] = tabla;
            data['pais'] = 'GT'
            $.getJSON('{{ path('TipoServicios_DetallesGt') }}', data, function (data) {
                detalles = data.detalles;
                columns = Object.keys(detalles[0]);
                $('#myModalDetalle .modal-body').empty();
                tablamodal = ''
                tablamodal = '<div  id="boxdetalle" ><table id="header-fixed"></table></div>'
                $('#myModalDetalle .modal-body').append(tablamodal);
                createTable_alarma(columns.length, detalles.length + 1, detalles, columns, '#boxdetalle', 'basicTable1');
                $('#myModalDetalle').modal();

                $.isLoading("hide");

            });
        }
    </script>
    <script>
        var chart;

        function graficarTipos(tipos) {

            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'graficaTipos'
                },
                title: {
                    text: 'TYPES OF WORK'
                },
                subtitle: {},
                plotArea: {
                    shadow: null,
                    borderWidth: null,
                    backgroundColor: null
                },
                tooltip: {
                    formatter: function () {
                        return '<b>' + this.point.name + '</b>: ' + this.y;
                    }
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            color: '#000000',
                            connectorColor: '#000000',
                            formatter: function () {
                                return '<b>' + this.point.name + '</b>: ' + this.y;
                            }
                        }
                    }
                },
                series: [{
                    type: 'pie',
                    name: 'Browser share',
                    data: tipos
                }]
            });
        }
        ;
    </script>
    <script>
        var chart1;

        function graficarRegion(datacategorias, dataseries) {
            console.table(datacategorias);
            console.table(dataseries);
            chart = new Highcharts.Chart({
                chart: {
                    type: 'column',
                    renderTo: 'graficaRegion'
                },
                title: {
                    text: 'TYPE OF WORKS by REGION'
                },
                subtitle: {},
                xAxis: {
                    categories: datacategorias,
                    crosshair: true
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: 'Rainfall (mm)'
                    }
                },
                tooltip: {
                    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
                    footerFormat: '</table>',
                    shared: true,
                    useHTML: true
                },
                plotOptions: {
                    column: {
                        pointPadding: 0.2,
                        borderWidth: 0
                    }
                },
                series: dataseries
            });
        };

        function selectdate_change() {
            var typedate = $('#tipoBusqueda').find(":selected").text();
            var hiddenDiv = document.getElementById("selec_mes");
            console.log(typedate);
            if (typedate == 'MES' || typedate == 'MONTH') {
                hiddenDiv.style.visibility = "visible";
                $('#selec_mes').find(":selected").val("0");

            } else {
                hiddenDiv.style.visibility = "hidden";
                $('#selec_mes').find(":selected").val("0");
                $('#selec_mes').find(":selected").val("0");

            }
        }

    </script>

    <div class="page-header text-center">
        <h1 class="eri-font" style="text-transform:uppercase;">{{ 'MONITOR DE EVIDENCIAS' | trans }} GUATEMALA</h1>
    </div>

    <div class="page-header">

        <div class="container">

            {% if proyecto==75 %}

                <div class="row" style="padding-bottom: 2%">
                    <div class="col-lg-2">
                        <select id="filtro_proyecto">

                            <!--{INICIO} OPCIONES PRODUCCION-->
                            <option value="{{ path('TipoServicios_indexGt',{'idproyectos':75,'idmodule':118} ) }}">
                                Guatemala
                            </option>
                            <!--<option value="{{ path('TipoServicios_indexSv',{'idproyectos':75,'idmodule':179} ) }}">El
                                Salvador
                            </option>
                            <option value="{{ path('TipoServicios_indexNi',{'idproyectos':75,'idmodule':181} ) }}">
                                Nicaragua
                            </option>-->
                            <!--{FIN} OPCIONES PRODUCCION-->

                            <!--{INICIO} OPCIONES PARA PROBAR EN LOCAL
                            <option value="http://localhost/site/web/app_dev.php/es/controlCasos/TipoServicios/indexGt/75/118">Guatemala</option>
                            <option value="http://localhost/site/web/app_dev.php/es/controlCasos/TipoServicios/indexSv/75/179">El Salvador</option>
                            <option value="http://localhost/site/web/app_dev.php/es/controlCasos/TipoServicios/indexNi/75/181">Nicaragua</option>
                            OPCIONES PARA PROBAR EN LOCAL {FIN}-->

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

            {% endif %}

            <div class="pull-right" style="">

                <div class="col-lg-12">
                    {%if proyecto == 39 %}
                    <img id="logo" class="pull-right" src="{{ asset('images/LogoTIGO.png') }}"  width="350" height="65" />
                    {%else%}
                    <img id="logo" class="pull-right" src="{{ asset('images/telefonica.png') }}"  width="350" height="65" />
                    {%endif%}
                    <!--<img id="logo" src="{#{ asset('images/telefonica.png') }#}" width="350" height="65">-->

                    {% if proyecto==75 %}

                        <p class="text-center" style="font-size: 14pt;font-weight: bold;">MAYA</p>

                    {% else %}

                        <p class="text-center" style="font-size: 14pt;font-weight: bold;">Guatemala- Telefónica</p>

                    {% endif %}

                </div>
            </div>

            <div class="row" style="height: 100px;">
                <div class="col-lg-2">

                    <select id="selec_year">

                    </select>
                </div>
                <div class="col-lg-2" id="divdate">
                    <select onchange="selectdate_change()" id="tipoBusqueda">
                        <option value=""> {{ 'Seleccione Fecha' | trans }}</option>

                        <option value="mes">{{ 'monitoriii.month' | trans }}</option>
                        <option value="ano">{{ 'monitoriii.year' | trans }}</option>

                    </select>
                </div>
                <div class="col-lg-2" style="visibility: hidden">

                    <select id="selec_mes">

                    </select>
                </div>

                <div class="col-lg-2">

                    <button class="btn btn-primary" onclick="getDataServicios_Gt()">
                        {{ 'inbox.search' | trans }}
                    </button>
                </div>


            </div>

        </div>

        <div class="panel-body col-lg-6">
            <div id="graficaTipos" style="height: 470px; width:725;"></div>
        </div>
        <div class="panel-body col-lg-6 pull-right">
            <div id="graficaRegion" style="height: 470px;  width:725;"></div>
        </div>
    </div>

    <br/><br/>
    <div class="panel-body col-lg-12">
        <div class="row" style="margin-top: 1%; height:500px; overflow-x:auto; ">
            <div class="col-lg-12" id="box" style="margin-top: 1%;">
                <table id="header-fixed"></table>
            </div>
        </div>
    </div>
    <div class="modal" id="myModalDetalle" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <div id="boxdetalle">
                        <table id="header-fixed"></table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">
                        {{ 'monitorii.close' | trans }}&nbsp;<span class="glyphicon glyphicon-remove"></span>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div id="pager" class="pager" style="display: none">
        <form>
            <img src="{{ asset('tablesorter-master/addons/pager/icons/first.png') }}" class="first"/>
            <img src="{{ asset('tablesorter-master/addons/pager/icons/prev.png') }}" class="prev"/>
            <span class="pagedisplay"></span>
            <img src="{{ asset('tablesorter-master/addons/pager/icons/next.png') }}" class="next"/>
            <img src="{{ asset('tablesorter-master/addons/pager/icons/last.png') }}" class="last"/>
            <select class="pagesize" title="Select page size">
                <option selected="selected" value="1000">1000</option>
                <option value="500">500</option>
                <option value="100">100</option>

            </select>
        </form>
    </div>

{% endblock %}