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

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

        .tablesorter-pager select {
            margin: 0;
            padding: 0;
            width: 50px;
        }
        table.tablesorter thead tr th {
            background-color:#00569C;
            border: 2px solid #FFF;
            font-size: 8pt;
            text-transform:uppercase;
            padding: 4px;
            text-align: center;
            color: white;
            font-weight: bold;
        }
        .th2
        {
            background-color:#00569C;
            border: 2px solid #FFF;
            font-size: 8pt;
            text-transform:uppercase;
            padding: 4px;
            text-align: center;
            color: white;
            font-weight: bold;
        }
        .std {
            background-color:#00569C;
            border: 2px solid #FFF;
            font-size: 8pt;
            text-transform:uppercase;
            padding: 4px;
            text-align: right;
            color: white;
            font-weight: bold;
        }
        .stdLeft {
            background-color:#00569C;
            border: 2px solid #FFF;
            font-size: 8pt;
            text-transform:uppercase;
            padding: 4px;
            text-align: left;
            color: white;
            font-weight: bold;
        }
        .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;
        }
        /* .table{
             font-size: 12px;
             width: 3000px;
         }
 */
        .estilod{
            background-color: green;

        }

        .estilof{
            background-color: red;

        }
        espacio{
            padding-top: 20px;
        }

        .reconocer
        {
            background:#00569C;
            color:#ffffff;
            border-radius: 300px 300px 300px 300px;
            -moz-border-radius: 300px 300px 300px 300px;
            -webkit-border-radius: 300px 300px 300px 300px;
            border: 1px solid #000000;
            height: 38px;
            width: 80px;
            font: oblique bold 120% ;
        }
        .modal-header{
            background:#00569C;
            font:oblique bold;
            text-transform: uppercase;
        }


        .btn-orange {
            color: #fff;
            background-color: #00569C;
            border-color: #ecea19;
        }

    </style>
    <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>

        function myFunction(index , idelment) {
            // Declare variables
            var input, filter, table, tr, td, i, tmpstr;

            input = document.getElementById('id'+index+'id');
            //   index =index-1;
            filter = input.value.toUpperCase();
            table = document.getElementById("tabla1");
            tr = table.getElementsByTagName("tr");

            for (i = 0; i < tr.length; i++) {

                td = tr[i].getElementsByTagName("td")[index];

                if (td) {
                    tmpstr = td.innerHTML.toUpperCase();
                    if (tmpstr.search(filter) > -1) {
                        tr[i].style.display = "";
                    } else {
                        if(i>1)
                        {
                            tr[i].style.display = "none";
                        }

                    }
                }
            }
        }

        $(function () {
            $("#generar").click(function(){
                $.isLoading({
                    text:       "Loading"
                });
                $("#cantidad").html(0);

                getGrafica();

            });

            $('#Filtros_fechaIni').datepicker({
                dateFormat: 'yy-mm-dd',
                onClose: function( selectedDate ) {
                    $( "#Filtros_fechaFin" ).datepicker( "option", "minDate", selectedDate );

                }
            });

            $('#Filtros_fechaFin').datepicker({
                dateFormat: 'yy-mm-dd',
            });

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

                $('#Filtros_fechaIni').val("");
                $('#Filtros_fechaFin').val("");
            });

            $('#generar').trigger('click');
        });


        function getGrafica(){

            data = {};
            data['fechaIni'] = $("#Filtros_fechaIni").val();
            data['fechaFin'] = $("#Filtros_fechaFin").val();

            $.getJSON('{{path('ONEGIGA_getSiteSurvey')}}',data, function (data) {

                var datos  = data.datos;
                var grafica = data.grafica;
                if(grafica.length === 0){

                    $("#primera_grafica").empty();
                    $("#primera_grafica").append('<div class="alert alert-warning" role="alert">NO SE HA ECONTRADO DATA</div>');
                    $.isLoading("hide");
                    return false;
                }
                $.isLoading("hide");

                var region = [];
                var report_HSE = [];
                var report_JSA = [];

                for (var i = 0; i < data.grafica.length; i++) {
                    region.push(data.grafica[i].REGION);

                    report_HSE.push(parseInt(data.grafica[i].HSE_AUDIT));
                    report_JSA.push(parseInt(data.grafica[i].JSA_AUDIT))
                }

                // Se declara los colores para las series
                var colors = ['#04B431','#02641b','#990000','#0099ff','#004d80','#000099','#00001a'];
                var grafica1 = {
                    chart: {
                        type: 'column',
                        renderTo: 'primera_grafica',
                        options3d:{
                            enabled: true,
                            alpha: 10,
                            beta: 10,
                            viewDistance: 85,
                            depth: 60
                        }
                    },
                    title: {
                        text: 'EVIDENCE PER SITE'
                    },

                    xAxis: {
                        categories: region
                    },

                    yAxis: {
                        allowDecimals: false,
                        min: 0,
                        title: {
                            text: 'Valores'
                        }
                    },
                    stackLabels: {
                        enabled: true,
                        style: {
                            fontWeight: 'bold',
                            color: (Highcharts.theme && Highcharts.theme.textColor) || 'red'
                        }
                    },
                    legend: {
                        align: 'right',
                        verticalAlign: 'top',
                        layout: 'vertical',
                        x: -20,
                        y: 25,
                        floating: true,
                        backgroundColor: (Highcharts.theme && Highcharts.theme.background5) || 'white',
                        borderColor: '#CCC',
                        borderWidth: 1,
                        shadow: false,
                        width: 100
                    },
                    tooltip: {
                        headerFormat: '<b>{point.key}</b><br>',
                        pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: {point.y}'
                    },
                    plotOptions: {
                        series: {

                            cursor: 'pointer',
                            borderWidth: 0,
                            stacking: 'normal',
                            depth: 60,
                            dataLabels: {
                                enabled: true,
                                color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
                            }
                        }
                    },

                    series: [{
                        name: 'HSE AUDIT',
                        data: report_HSE,
                        stack: 'HSE',
                        color: colors[4]
                    }, {
                        name: 'JSA AUDIT',
                        data: report_JSA,
                        stack: 'JSA',
                        color: colors[3]
                    }
                    ]
                };
                var chart1 = new Highcharts.Chart(grafica1);

                $("#tablaData").empty().append(createTable(datos));
                $.isLoading("hide");
                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'
                };

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

                $.isLoading("hide");
            });


                //$("#cantidad").html(datos.length);





        }

        function createTable(monitor){

            var header = Object.keys(monitor[0]);
            var clase="";
            if(monitor.length === 0){

                $("#tablaData").empty();
                $("#tablaData").append('<div class="alert alert-warning" role="alert">NO SE HA ECONTRADO DATA</div>');
                $.isLoading("hide");
                return false;
            }
            $.isLoading("hide");
            var table = '<table id="tabla1" class="table relleno table-bordered table-hover table-striped table-responsive table1 tablesorter tablesorter-blue hasFilters"> <thead>' +
                '<tr class="btn-claro">';


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

                table+="<th width='5%'>"+header[j]+"</th>";


            }
            table+="</tr></thead>";
            table+="<tr>";
            var flagnumber =0;
            for(var j = 0; j < header.length; j++)
            {
                var tmpid = 'id'+flagnumber+'id';
                table += "<td style='vertical-align:middle;' class='text-center'>\n\
                        <input  class='form-control' style=font-size:9px type=input id="+tmpid+" onkeyup=myFunction("+flagnumber+","+"id"+flagnumber+"id"+")></td>"
                flagnumber +=1;
            }
            table+="</tr></thead>";
            for(i=0;i<monitor.length;i++)
            {
                //if(monitor[i]['total']>0)
               // {
                    for (var j = 0; j < header.length; j++)

                    {
                        if(([header[j]]=='HSE_AUDIT') || ([header[j]]=='JSA_AUDIT')){
                            if(monitor[i][header[j]]=='1'){
                                table+="<td><img border=0; src='{{ asset('images/greencheck.png') }}'; width='20' height='20' style='margin: 0 auto; display: block;'></img></td>";
                            }
                            else {
                                table+="<td></td>";
                            }

                        }
                        else if([header[j]]=='SITE_SURVEY') {

                            if (monitor[i][header[j]] != null) {
                                table += "<td><a style='margin: 0 auto; display: block;' class='btn btn-default' target='_blank' href=" + monitor[i]['SITE_SURVEY'] + ">REPORT</a></td>";
                            }
                            else{
                                table+="<td></td>";
                            }

                        }
                        else {
                            table+="<td id='' style='text-align:left'>"+monitor[i][header[j]]+"</td>";
                        }

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


            return table;
        }


    </script>

    <div class="container-fluid">

        <div class="row">
            <div class="col-lg-12">

            </div>
        </div>

        <div class="row">

            <div class="col-lg-2 "  style="margin-top: 1%">
                <label>{{'monitor.etiqueta.fechaI' | trans}}: </label>
                <input class='form-control' type="text" id="Filtros_fechaIni" value="{{ dateStart }}">
            </div>

            <div class="col-lg-2"  style="margin-top: 1%">
                <label>{{'monitor.etiqueta.fechaF' | trans}}: </label>
                <input class='form-control' type="text" id="Filtros_fechaFin" value="{{ dateEnd }}">
            </div>

            <div class="col-lg-3 col-lg-offset-1" id="parametros" style="margin-top: 2%">
                <button class="reconocer " id="generar">{{'ticketDetail.boton.generar' | trans}}</button>
                <button class="reconocer " id="clear">{{'ticketDetail.boton.limpiar' | trans}}</button>
            </div>
        </div>

        {#GRAFICAS#}
        <div class="row">

            <div class="col-lg-12 eri-font"  id="primera_grafica">
            </div>

        </div>

        {#TABLA#}
        <div class="row">

            <div class="col-md-12 " id="tablaData" style="margin-top:1%;margin-left:1%"></div>

        </div>

    </div>

    </div>

    <div class="modal fade" id="myModalDetalle" 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"></h2>
                </div>
                <div class="col-md-12">
                    <div class="col-md-12"  style="margin-top: 1%">
                        <div class="btn-group pull-right">
                            <button class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"><i class="fa fa-bars"></i> {{'Exportar datos de la tabla' | trans}}</button>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#" onclick="$('#myModalDetalle').tableExport({type: 'excel', escape: 'false'});"> <img src={{ asset("images/xls.png")}} width="24px"> XLS</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-md-12" id='detalleT'  style='height:315px; overflow: scroll;'></div>
                </div>
                <div class="modal-footer">

                    &nbsp;&nbsp;  <button type="button" class="btn btn-default" data-dismiss="modal">{{'monitorii.close' | trans}}</button>

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

    </div>
{% endblock %}