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

{% block dashboard %}
    <style>

        .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>

        $(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 arrymeses = ['TODOS', 'ENERO', 'FEBRERO', 'MARZO',
            'ABRIL', 'MAYO', 'JUNIO', 'JULIO', 'AGOSTO',
            'SEPTIEMBRE', 'OCTUBRE', 'NOVIEMBRE', 'DICIEMBRE'];

        window.onload = function llenarfechas() {

            $.getJSON('{{ path('TipoServicios_FechasSv') }}', function (data) {
                var data = data.Fechas
                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']);
                }

            });


        }

        $("#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);

            }
        });

        function crearDetalle(id, tabla) {
            $.isLoading({
                text: "Loading"
            });
            data = {};
            data['month_sv'] = $("#selec_mes").val();
            data['year_sv'] = $("#selec_year").val();
            data['id'] = id;
            data['tabla'] = tabla;
            data['pais'] = 'SV'
            $.getJSON('{{ path('TipoServicios_DetallesSv') }}', 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");

            });
        }

        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";
                    }
                }
            }
        }

        $(document).ready(function () {
                $("#basicTable").tablesorter();
            }
        );


        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>NO DISPONIBLES</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_Sv() {
            $.isLoading({
                text: "Loading"
            });
            data = {};
            data['month_sv'] = $("#selec_mes").val();
            data['year_sv'] = $("#selec_year").val();


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

                datatipos = [];
                for (var i = 3; i < nonNullData.length; i++) {
                    columname = nonNullData[i];
                    datatipos.push([columname, Sum_SV[Sum_SV.length - 1][columname] * 1]);
                }
                datacategorias = [];

                dataseries = [];
                for (var i = 0; i < Sum_SV.length - 1; i++) {
                    datacategorias.push(Sum_SV[i]['REGION']);
                }
                for (var i = 3; i < tipos.length; i++) {
                    tmpdata = [];
                    tmptipos = tipos[i];
                    for (var j = 0; j < Sum_SV.length - 1; j++) {
                        tmpdata.push(Sum_SV[j][tipos[i]] * 1);

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

            });
        };


    </script>
    <script src="{{ asset('sorter/js/jquery.tablesorter.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/jquery.isloading.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/jquery.isloading.js') }}" type="text/javascript"></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) {
            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 }} EL SALVADOR</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_indexSv',{'idproyectos':75,'idmodule':179} ) }}">El
                                Salvador
                            </option>
                            <option value="{{ path('TipoServicios_indexNi',{'idproyectos':75,'idmodule':181} ) }}">
                                Nicaragua
                            </option>
                            <option value="{{ path('TipoServicios_indexGt',{'idproyectos':75,'idmodule':118} ) }}">
                                Guatemala
                            </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">
                    <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;">Salvador- 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_Sv()">
                        {{ '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>


{% endblock %}