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

{% endblock %}


{% block dashboard %}
    <style>
        .btn-claro {
            color: #fff;
            background-color: #aa0001;
            border-color: #e06a70;

        }
        .btn-claro:hover, .btn-claro:focus {
            color: #fcfcfc;
            text-decoration: none;
        }
        .text-global{
            margin-top: 10px;
        }
        .huge {
            font-size: 25px;
        }
        .panel-green {
                border-color: #5cb85c;
            }

        .panel-green .panel-heading {
            border-color: #5cb85c;
            color: #fff;
            background-color: #5cb85c;
        }
        .panel-green a {
            color: #5cb85c;
        }
        .panel-green a:hover {
            color: #3d8b3d;
        }
        .panel-red {
            border-color: #d9534f;
        }
        .panel-red .panel-heading {
            border-color: #d9534f;
            color: #fff;
            background-color: #d9534f;
        }
        .panel-red a {
            color: #d9534f;
        }
        .panel-red a:hover {
            color: #b52b27;
        }
        .panel-yellow {
            border-color: #f0ad4e;
        }
        .panel-yellow .panel-heading {
            border-color: #f0ad4e;
            color: #fff;
            background-color: #f0ad4e;
        }
        .panel-yellow a {
            color: #f0ad4e;
        }
        .panel-yellow a:hover {
            color: #df8a13;
        }
        .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;
        }
        .tablesorter-header-inner,table.tablesorter thead tr th,.tablesorter-filter {
            color: #fff;
            background-color: #aa0001;
            border-color: #aa0001;
        }
        table.tablesorter thead tr th{
            height: 40px;
        }
        .tablesorter-blue .headerSortUp, .tablesorter-blue .tablesorter-headerSortUp, .tablesorter-blue .tablesorter-headerAsc {
            background-color: #aa0001;}
        .tablesorter-blue .headerSortDown, .tablesorter-blue .tablesorter-headerSortDown, .tablesorter-blue .tablesorter-headerDesc {
            background-color: #aa0001;}
        .tablesorter-blue .tablesorter-filter-row td {
            background: #aa0001;}
        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;
        }
        /*.modal-lg {
          max-width: 400% !important;
        }*/
        #mdialTamanio{
      width: 90% !important;
    }
    </style>
    <script src="{{asset('js/jquery.isloading.js')}}" type="text/javascript"></script>
    <script src="{{asset('js/jquery.doubleScroll.js')}}" type="text/javascript"></script>
    <script src="{{ asset('js/tableExport.js') }}"></script>
    <script src="{{ asset('js/jquery.base64.js') }}"></script>
    <script>
        $(function() {
            var intervalTime = null;
            $('#autoload').click(function() {
                var time = parseInt($('#time').val());
                if ($(this).prop('checked')) {
                    intervalTime = window.setInterval(getReporte, time);
                }
                else {
                    clearInterval(intervalTime);
                }
            });

            $('.datepicker').datepicker({
                dateFormat: 'yy-mm-dd',
                maxDate: new Date(),
                defaultDate: new Date(),
            });

            $('#fechaIni').datepicker({
                dateFormat: 'yy-mm-dd',
                maxDate: new Date(),
                defaultDate: new Date(),
            });

            $('#fechaFin').datepicker({
                    dateFormat: 'yy-mm-dd',
                    maxDate: new Date(),
                    defaultDate: new Date(),
            });

            var starYear = 2018;
            var d = new Date();
            var year = d.getFullYear();
            var month = new Array();
            $('.checklist').live('click', function() {
                window.location.href = $(this).attr('href');
            });
            for (var i = starYear; year >= i; i++) {
                $('#ano').append($('<option/>', {
                    value: i,
                    text: i,
                }));
            }
            month[0] = 'Enero';
            month[1] = 'Febrero';
            month[2] = 'Marzo';
            month[3] = 'Abril';
            month[4] = 'Mayo';
            month[5] = 'Junio';
            month[6] = 'Julio';
            month[7] = 'Agosto';
            month[8] = 'Septiembre';
            month[9] = 'Octubre';
            month[10] = 'Noviembre';
            month[11] = 'Deciembre';
            /*month[0] = 'January';
            month[1] = 'February';
            month[2] = 'March';
            month[3] = 'April';
            month[4] = 'May';
            month[5] = 'June';
            month[6] = 'July';
            month[7] = 'August';
            month[8] = 'September';
            month[9] = 'October';
            month[10] = 'November';
            month[11] = 'December';*/
            var n = month[d.getMonth()];
            var options = new Array();
            for (var i = 0; i < month.length; i++) {
                if (i <= d.getMonth()) {
                    $('#mes').append($('<option/>', {
                        value: month[i],
                        text: month[i],
                    }));
                }
            }
            $('#ano').change(function() {
                var yearSelected = parseInt($(this).val());
                var semana = ISO8601_week_no(new Date());
                $('#mes').empty();
                for (var i = 0; i < month.length; i++) {
                    if (yearSelected < year) {
                        $('#mes').append($('<option/>', {
                            value: month[i],
                            text: month[i],
                        }));
                    }
                    else if (i <= d.getMonth()) {
                        $('#mes').append($('<option/>', {
                            value: month[i],
                            text: month[i],
                        }));
                    }
                }
                $('#semana').empty();
                if (yearSelected < year) {
                    var semana = 52;
                    for (var i = semana; i >= 1; i--) {
                        $('#semana').append($('<option/>', {
                            value: i,
                            text: i,
                        }));
                    }
                }
                else {
                    for (var i = semana; i >= 1; i--) {
                        $('#semana').append($('<option/>', {
                            value: i,
                            text: i,
                        }));
                    }
                }
            });
            $('#tipoBusqueda').on('change load', function() {
                $(this).val() == 'mes' ? $('#mes').removeAttr('class', 'hide') : $('#mes').addClass('hide');
                $(this).val() == 'semana' ? $('#semana').removeAttr('class', 'hide') : $('#semana').addClass('hide');
                $(this).val() == 'dia' ? $('#dia').removeClass('hide') : $('#dia').addClass('hide');
            });

            {%if idproyectos == 35 or idproyectos == 30 or idproyectos == 32 or idproyectos == 36 or idproyectos == 37 or idproyectos == 38 or idproyectos == 57%}
                   {%if idproyectos == 35 %} {%set idpais=1%} {%set pais='Guatemala'%}{%endif%}
                   {%if idproyectos == 30 %} {%set idpais=2%} {%set pais='Honduras'%}{%endif%}
                   {%if idproyectos == 32 %} {%set idpais=4%} {%set pais='Nicaragua'%}{%endif%}
                   {%if idproyectos == 36 %} {%set idpais=3%} {%set pais='El Salvador'%}{%endif%}
                   {%if idproyectos == 37 %} {%set idpais=5%} {%set pais='Costa Rica'%}{%endif%}
                   {%if idproyectos == 57 %} {%set idpais=6%} {%set pais='Panamá'%}{%endif%}

                   $("#pais option").remove();
                   $("#pais").append('<option value={{idpais}}>{{pais}}</option>');
            {%endif%}

            $('#generar').click(function() {
                if ($('#ano').val() == '' || $('#tipoBusqueda').val() == '') {
                    return false;
                }
                $.isLoading({
                                text: 'Loading',
                            });

                getReporte();
            });

            $('#generar').click(function() {
                $.isLoading({
                    text: 'Loading',
                });
                getReporte();
            });



        });



        function getReporte() {

            var data = {};


            var tipo = $('#tipoBusqueda').val();
            switch (tipo) {
                case 'semana':
                    data = {'semana': $('#semana').val()};
                    break;
                case 'mes':
                    data = {'mes': $('#mes').val()};
                    break;
                case 'dia':
                    data = {'dia': $('#dia').val()};
                    break;
            }
            data['ano'] = $('#ano').val();
            data['pais'] = $("#pais").val();
            //if ($("#pais").val()!="TODOS") data['pais'] = $("#pais").val();
            //else data['pais'] = 87;

            //data['fechaIni'] = $("#fechaIni").val();
            //data['fechaFin'] = $("#fechaFin").val();

            //$.getJSON('{#{path('controlInsumos_getControlInsumosMapple')}#}', data, function (data) {
                var monitor = data.datos;
                //alert(monitor)
            $.getJSON('{{ path('controlInsumos_consultaControlInsumos') }}', data, function(data) {
                var flag = true;
                var monitor = data.monitor;


                if (monitor.length == 0) {
                    $('#reporte1').empty();
                    $('#reporte1').append(
                        '<div class="alert alert-warning text-center" role="alert">NO HAY SITIOS POR REVISION</div>');
                    $.isLoading('hide');
                    $('#inicio').show();
                    return false;
                }

                var objectType = {'8': 1, '9': 2};
                $('#reporte1').empty().append(
                    createTable(monitor, undefined, undefined, objectType, undefined));
                $('.double-scroll').doubleScroll();
                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: 'Rows : {endRow}',
                    // 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',
                };
                // initial sort set using sortList option
                $('.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);

                $('.pager').show();
                $('#inicio').show();
                $('#autoload').attr('disabled', false);
                $.isLoading('hide');

            }).fail(function() {
                $.isLoading('hide');
            });
        }

        function createTable(monitor, total, nombreColTotal, type, entregableAux) {
            console.log(monitor);
            var header = Object.keys(monitor[0]);
            //var headerType = Object.keys(type);
            var table = '<table  class="table table-bordered table-hover table-striped table-responsive table1" id="tableSitios"> <thead>' +
                        '<tr class="btn-info">';

            for (var j = 0; j < header.length; j++) {
                if (header[j] != 'ID') {
                  //if (header[j] != 'status equipamiento' && header[j] != 'status instalacion' && header[j] != 'status etiquetas' && header[j] != 'status post' && header[j] != 'status rv'
                    table += '<th class=\'text-center\'>' + header[j] + '</th>';
                }
            }

            table += '</tr></thead>';

            for (var i = 0; i < monitor.length; i++) {
                table += "<tr id="+monitor[i]['NUMERO DE COTIZACION']+">";

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

                    if (header[j] != 'ID' && header[j] != 'REVISAR' && header[j] != 'APROBAR COTIZACION COMPLETA' ) {


                      table += "<td "+clases+">" + 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;
        }


        function createTableSimple(monitor, total, nombreColTotal) {
            var header = Object.keys(monitor[0]);
            var table = '<table id="tableSitios"  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++) {
                    if (typeof monitor[i][header[j]] === 'object') {
                        table += '<td>' + monitor[i][header[j]].date.substring(0, 19) + '</td>';
                    }
                    else {
                        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;
        }

        function ISO8601_week_no(dt) {
            var tdt = new Date(dt.valueOf());
            var dayn = (dt.getDay() + 6) % 7;
            tdt.setDate(tdt.getDate() - dayn + 3);
            var firstThursday = tdt.valueOf();
            tdt.setMonth(0, 1);
            if (tdt.getDay() !== 4) {
                tdt.setMonth(0, 1 + ((4 - tdt.getDay()) + 7) % 7);
            }
            return 1 + Math.ceil((firstThursday - tdt) / 604800000);
        }

        function getTotal(valor, key, tipo) {
            var total = new Array();
            var header = Object.keys(valor[0]);
            for (var i = 0; i < valor.length; i++) {
                for (var j = 0; j < key.length; j++) {
                    if (typeof total[key[j]] === 'undefined') {
                        total[key[j]] = 0;
                    }
                    if (tipo == 1) {
                        total[key[j]] += parseFloat(valor[i][header[key[j]]]);
                        if (i == (valor.length - 1)) {
                            total[key[j]] = parseFloat(total[key[j]]).toPrecision(3);
                        }
                        //alert(total[key[j]]);
                    }
                    else {
                        total[key[j]] += parseInt(valor[i][header[key[j]]]);
                    }
                }
            }
            return total;
        }

           $('form[name="rechazo"]').ajaxForm({
                beforeSubmit: function (formData, jqForm, options) {

                    $.isLoading({
                     });
                    // console.log($("#suministro_suministrobundle_recibopagodetalle_reciboPago").val());
                },
                error: function (error) {


                    $.isLoading('hide');
                },
                success: function (responseText, statusText, xhr, $form) {
                    $.isLoading('hide');
                    swal("Entregables Revisados", "You clicked the button!", "success");
                    $("#modalRechazo").modal('hide');

                    getReporte();
                }


            });

    </script>

    <div class="container-fluid">
      <div class="row">
          <div style="text-align: center" class="col-lg-2">
              <img id="logo" src=""  width="220" height="120">
          </div>
          <div class="col-lg-8 col-md-12">
              <h1 class="text-center text-primary"><i class="fa fa-file-text-o"></i>{{ title }}</h1>
          </div>
          <div style="text-align: center" class="col-lg-2">
              <img class="text-right" id="logo" src="{{ asset( identity.pathLogo ) }}" width="220" height="120">
          </div>
      </div>

        <!--<div class="row">
           <div class="col-lg-2"  style="margin-top: -1.7%">
               <label>Fecha Inicio: </label>
                <input type="text" class="form-control datepicker" id="fechaIni" value="{{ fechaIni }}">
            </div>
            <div class="col-lg-2"  style="margin-top: -1.7%">
               <label>Fecha Fin: </label>
                <input type="text" class="form-control datepicker" id="fechaFin" value="{{ fechaFin }}">
            </div>
            <div class="col-lg-3" id="parametros">
                <button class="btn btn-claro col-lg-5" id="generar">{{ 'monitoriii.generate' | trans }}</button>

            </div>
        </div>-->

        <div class="row">
          <div class="col-lg-2" id="parametros">
              <select class="form-control" id="pais">
                <option value="TODOS">Country</option>
                  <option value="37">COSTA RICA</option>
                  <option value="36">EL SALVADOR</option>
                  <option value="35">GUATEMALA</option>
                  <option value="30">HONDURAS</option>
                  <option value="32">NICARAGUA</option>
                  <option value="57">PANAMA</option>
                <!--<option value="TODOS">Country</option>
                  <option value="COSTA RICA">COSTA RICA</option>
                  <option value="EL SALVADOR">EL SALVADOR</option>
                  <option value="GUATEMALA">GUATEMALA</option>
                  <option value="HONDURAS">HONDURAS</option>
                  <option value="NICARAGUA">NICARAGUA</option>
                  <option value="PANAMA">PANAMA</option>-->
              </select>
          </div>
          <div class="col-lg-2" id="parametros">

              <select class="form-control" id="ano">
                  <option value="">{{'Seleccione Año' | trans}}</option>

              </select>
          </div>
          <div class="col-lg-2" id="parametros">

              <select class="form-control" id="tipoBusqueda">
                  <option value=""> {{'Seleccione Fecha' | trans}}</option>

                  <!--<option value="dia">DAY</option>
                  <option value="semana">{{'monitor.week' | trans}}</option>-->
                  <option value="mes">{{'monitoriii.month' | trans}}</option>
                  <option value="ano">{{'monitoriii.year' | trans}}</option>

              </select>
          </div>
          <div class="col-lg-2 " id="parametros" >
              <select class="hide" id="mes">



              </select>
              <select class="hide" id="semana">



              </select>

                  <input type="text" id="dia" class="hide form-control datepicker">


          </div>
          <!-- <div class="col-lg-2"  style="margin-top: -1.7%">
               <label>Fecha Inicio: </label>
                <input type="text" class="form-control datepicker" id="fechaIni" value="{{ fechaIni }}">
            </div>
            <div class="col-lg-2"  style="margin-top: -1.7%">
               <label>Fecha Fin: </label>
                <input type="text" class="form-control datepicker" id="fechaFin" value="{{ fechaFin }}">
            </div>-->
            <div class="col-lg-3" id="parametros">
                <button class="btn btn-claro col-lg-5" id="generar">{{ 'monitoriii.generate' | trans }}</button>

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

    <div class="container-fluid" id="inicio" style="display: none">
        <div class="tab-content" style="margin-top: 20px;">
            <div id="_summary" class="tab-pane fade in active">
                <div class="row">
                    <div class="col-lg-4" id="chart1">
                    </div>
                    <div class="col-lg-4" id="chart3">
                    </div>
                    <div class="col-lg-4" id="chart2">
                    </div>
                </div>
                <div class="row">
                    <div class="btn-group pull-right" role="group" aria-label="..." style="margin-right: 50px">
                        <a href="#"
                           onclick="$('#tableSitios').tableExport({type: 'excel', escape: 'false',fileName: 'Distribuidores',ignoreRow: [1]});">
                            <img src={{ asset("images/xls.png") }} width="24px">
                            XLS
                        </a>
                    </div>
                    <div class="pager">
                        <span class="pagedisplay"></span>
                    </div>
                    <a class="reset"><i class="fa fa-eraser" aria-hidden="true"></i></a>
                </div>
                <div class="row double-scroll" id="reporte1">
                </div>
                <div id="pager" class="pager" style="display: none;text-align: center; ">
                    <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"/>
                        <img src="{{ asset('tablesorter-master/addons/pager/icons/next.png') }}" class="next"/>
                        <img src="{{ asset('tablesorter-master/addons/pager/icons/last.png') }}" class="last"/>
                        <span class="pagedisplay"></span>
                        <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>
            </div>
            <div id="_detail" class="tab-pane fade in">
                <div class="col-lg-6" id="chart3">
                </div>
                <div class="col-lg-6" id="chart4">
                </div>
            </div> <!-- end detail -->
        </div>
    </div>


{% endblock %}