{% extends 'base.html.twig' %}
{% block body_id 'reports' %}
{% block title %}{{ 'Reports'|trans }}{% endblock %}

{% block body %}
    <!-- content main container -->
    <div class="mm-page">
        <div id="wrap">

            <div class="row">
                <div id="content" class="col-md-12">
                    <div class="main">        



                        <!-- row -->
                        <div class="row">




                            <!-- col 12 -->
                            <div class="col-md-12">



                                <!-- tile -->
                                <section class="tile transparent" id="superbox-gallery">
                          <div class="btn-group">
                            <button id="btnGroupAnno" type="button" class="btn btn-default dropdown-toggle" data-value="{{ dt_now|date('Y') }}" data-toggle="dropdown" style="width: 80px;">
                                <span class="valueplace" style="float: left;">{{ dt_now|date('Y') }}</span>                              
                                <span class="caret" style="float: right; margin-top: 8px;"></span><div style="clear: both;"></div>
                            </button>
                            <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop1">
                                {% for i in range("now"|date("Y") - 3, "now"|date("Y")) %}
                                    <li><a href="#" onclick="javascript:cambioAnno({{ i }})">{{ i }}</a></li>
                                {% endfor %}
                            </ul>
                          </div>                                    

                          <div class="btn-group">
                            <button id="btnGroupMese" type="button" class="btn btn-default dropdown-toggle" data-value="{{ dt_now|date('m') }}" data-toggle="dropdown" style="width: 150px;">
                                <span class="valueplace" style="float: left;">{{ dt_now|date('F') }}</span>                              
                                <span class="caret" style="float: right; margin-top: 8px;"></span><div style="clear: both;"></div>
                            </button>
                            <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop1">
                                {% for riga in elenco_mesi %}
                                    <li><a href="#" onclick="javascript:cambioMese('{{ riga.codice }}', '{{ riga.nome }}')">{{ riga.nome }}</a></li>
                                {% endfor %}
                            </ul>
                          </div>                                    

                          <div class="btn-group">
                            <button id="btnGroupGiorno" type="button" class="btn btn-default dropdown-toggle" data-value="{{ dt_now|date('d') }}" data-toggle="dropdown" style="width: 80px;">
                                <span class="valueplace" style="float: left;">{{ dt_now|date('d') }}</span>                              
                                <span class="caret" style="float: right; margin-top: 8px;"></span><div style="clear: both;"></div>
                            </button>
                            <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop1">
                                {% for i in range(1, 'now' | date_modify('last day of this month') | date('d')) %}
                                    <li><a href="#" class="sel-giorni" data-giorno="{{ i }}" onclick="javascript:cambioGiorno('{{ "%02d"|format(i) }}')">{{ "%02d"|format(i) }}</a></li>
                                {% endfor %}
                            </ul>
                          </div>                                    

<div class="tile-body color transparent-black rounded-bottom-corners" style="margin-top: 10px;">
<input id="email-to" type="email" placeholder="TO..." class="w100p bottommargin form-control" style="width: 100%;">

</div>

                                </section>


                                    <section class="tile transparent">
                                        <div class="tile-header color transparent-black rounded-corners">
                                            <div class="controls">
                                                <a href="#" class="minimize"><i class="fa fa-chevron-down fa-2x"></i></a>
                                                <a href="#" class="refresh"><i class="fa fa-refresh fa-2x"></i></a>
                                            </div>
                                        </div>
                                        <div class="tile-body color transparent-black rounded-corners">
                                            <div class="table-responsive">
                                                <table class="table table-datatable table-custom tabella-pesata no-row-select" id="id-tabella-pesata">
                                                    <!--end - Advanced table TOP-->
                                                    <thead>
                                                        <tr>
                                                            <th class="sort-alpha identify-detail" style="width: 400px; text-align:center;"><h3>{{ 'Code'|trans }}</h3></th>
                                                            <th class="sort-alpha identify-detail" style="text-align: center;"><h3>{{ 'Description'|trans }}</h3></th>
                                                            <th width="50" class="text-center" style="width: 150px; text-align: center;"><br></th>
                                                            <th width="50" class="text-center" style="width: 150px; text-align: center;"><br></th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        {% for riga in elenco %}
                                                            <tr class="detail-code-row" data-code-id="{{ riga.code }}">
                                                                <td class="identify-detail detail-code" style="text-align: center;"><h3>{{ riga.code }}{{ riga.date }}</h3></td>
                                                                <td class="identify-detail" style="text-align: center;"><h3>{{ riga.description }}</h3></td>
                                                                <td width="50" class="text-center" style="text-align: center;"><a class="pdf detail-code-exec" href="#" onclick="javascript:downloadpdf(this);" data-code="{{ riga.code }}{{ riga.date }}"><i class="fa fa-file-pdf-o fa-2x"></i></a><div class="identify-detail messaggio-pdf" style="text-align: center;"><h3></h3></div></td>
                                                                <td width="50" class="text-center" style="text-align: center;"><a class="emai detail-code-exec" href="#" onclick="javascript:sendemail(this);" data-code="{{ riga.code }}{{ riga.date }}"><i class="fa fa-envelope fa-2x"></i></a><div class="identify-detail messaggio-email" style="text-align: center;"><h3></h3></div></td>
                                                            </tr>
                                                        {% endfor %}
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </section>                                    
                                
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endblock %}                                                   
    {% block javascripts %}
        {{ parent() }}
        <script type="text/javascript" src="{{ asset('static/js/download.js') }}"></script>                                                    
        <script type="text/javascript" src="{{ asset('static/js/base64.js') }}"></script>		
    <script>
        
        function getWeek(date) {
            if (!(date instanceof Date)) date = new Date();

            // ISO week date weeks start on Monday, so correct the day number
            var nDay = (date.getDay() + 6) % 7;

            // ISO 8601 states that week 1 is the week with the first Thursday of that year
            // Set the target date to the Thursday in the target week
            date.setDate(date.getDate() - nDay + 3);

            // Store the millisecond value of the target date
            var n1stThursday = date.valueOf();

            // Set the target to the first Thursday of the year
            // First, set the target to January 1st
            date.setMonth(0, 1);

            // Not a Thursday? Correct the date to the next Thursday
            if (date.getDay() !== 4) {
              date.setMonth(0, 1 + ((4 - date.getDay()) + 7) % 7);
            }

            // The week number is the number of weeks between the first Thursday of the year
            // and the Thursday in the target week (604800000 = 7 * 24 * 3600 * 1000)
            return 1 + Math.ceil((n1stThursday - date) / 604800000);
        }
        function downloadpdf(v) {
            if ($(v).hasClass('disabled')) {
                return;
            }
            $(v).addClass('disabled');            
            var url = "{{ path('api_reportspdf') }}" + "/" + $(v).data('code');
            $(v).html('<i class="fas fa-spinner fa-spin fa-2x"></i>');
            $(v).parent().find('.messaggio-pdf').html("{{ 'Wait...'|trans }}")
            $(v).parent().find('.messaggio-pdf').css("color", "white");
            var x = new XMLHttpRequest();
            x.open("GET", url, true);
            x.responseType = 'blob';
            x.onload=function(e) {
                $(v).removeClass('disabled');
                $(v).html('<i class="fa fa-file-pdf-o fa-2x"></i>');
                if (x.status == 200) {
                    download(x.response, "report_" + $(v).data('code') + ".pdf", "application/pdf"); 
                    $(v).parent().find('.messaggio-pdf').html("{{ 'PDF Generated'|trans }}")
                    $(v).parent().find('.messaggio-pdf').css("color", "green");
                }
                else {
                    $(v).parent().find('.messaggio-pdf').html("{{ 'Not Found'|trans }}")
                    $(v).parent().find('.messaggio-pdf').css("color", "red");
                }
            }
            x.onerror = function(e) {
                $(v).removeClass('disabled');
                $(v).parent().find('.messaggio-pdf').html("{{ 'Not Found'|trans }}")
                $(v).parent().find('.messaggio-pdf').css("color", "red");
            }
            x.onprogress = function(e) {
                //console.log(JSON.stringify(e));
            }
            x.send();            
/*            $.get(url, function(data, status){
            alert("Data: " + data + "\nStatus: " + status);
            });*/
    /*        $.ajax({
                url: url,
                success: function (data, status) {
                    download(data, "application/pdf", "pippo.pdf");
                },
                error: function (e) {
                    alert('ERR');
                }
            });*/
            
//            location.href = url;
        }
        function sendemail(v) {
            if ($(v).hasClass('disabled')) {
                return;
            }
			var to = '';
            if ($('#email-to').val() !== '') {
				to = Base64.encode($('#email-to').val());
			}
            $(v).addClass('disabled');
            var url = "{{ path('api_reportsemail') }}" + "/" + $(v).data('code') + '/U' + to;
            $(v).html('<i class="fas fa-spinner fa-spin fa-2x"></i>');
            $(v).parent().find('.messaggio-email').html("{{ 'Wait...'|trans }}")
            $(v).parent().find('.messaggio-email').css("color", "white");            
            $.ajax({
                url: url,
                success: function (e) {
                    $(v).removeClass('disabled');
                    var p = JSON.parse(e);
                    $(v).html('<i class="fa fa-envelope fa-2x"></i>');
//                    alert(p.msg);
                    if (p.err === '0') {
                        $(v).parent().find('.messaggio-email').html(p.msg);
                        $(v).parent().find('.messaggio-email').css("color", "green");
                    } else {
                        $(v).parent().find('.messaggio-email').html(p.msg);
                        $(v).parent().find('.messaggio-email').css("color", "red");
                    }

             //       download(data, "application/pdf", "pippo.pdf");
                },
                error: function (e) {
                    $(v).removeClass('disabled');
                    $(v).html('<i class="fa fa-envelope fa-2x"></i>');
                    $(v).parent().find('.messaggio-email').html('{{ 'Not Found'|trans }}');
                    $(v).parent().find('.messaggio-email').css("color", "red");
                 //   alert("{{ 'Not Found'|trans }}");
                }
            });
    //        location.href = url;
        }
        function cambioData() {
            var data = $('#btnGroupAnno').data('value') + '-' + $('#btnGroupMese').data('value') + '-' + $('#btnGroupGiorno').data('value');
            var data1 = $('#btnGroupAnno').data('value') + '-' + $('#btnGroupMese').data('value') + '-01';
            var dt = new Date(data);
            var dt1 = new Date(data1);
            var lastDay = new Date(dt1.getFullYear(), dt1.getMonth() + 1, 0);
            var lDay = lastDay.getDate();
            var curDay = parseInt($('#btnGroupGiorno').data('value'));
            $('.sel-giorni').each(
                function () {
                    var nday = $(this).data('giorno');
                    if (nday <= lDay) {
                        $(this).show();
                    }
                    else {
                        $(this).hide();
                    }
                }
            );
            if (curDay > lDay) {
                $('#btnGroupGiorno').data('value', 1);
                $('#btnGroupGiorno .valueplace').html('01');
                data = $('#btnGroupAnno').data('value') + '-' + $('#btnGroupMese').data('value') + '-' + $('#btnGroupGiorno').data('value');
                dt = new Date(data);
            }
            $('.detail-code-row').each(
                function() {
                    var codeval = '';
                    var code = $(this).data('code-id');
                    switch (code) {
                        case 'D':
                            codeval = code + data;
                            break;
                        case 'W':
                            codeval = code + $('#btnGroupAnno').data('value') + '-' + getWeek(dt);
                            break;
                        case 'M':
                            codeval = code + $('#btnGroupAnno').data('value') + '-' + parseInt($('#btnGroupMese').data('value'));
                            break;
                        case 'N':
                            codeval = code + $('#btnGroupAnno').data('value') + '-' + parseInt($('#btnGroupMese').data('value'));
                            break;
                        case 'T':
                            codeval = code + $('#btnGroupAnno').data('value') + '-' + (parseInt((parseInt($('#btnGroupMese').data('value')) - 1) / 3) + 1) ;
                            break;
                        case 'Q':
                            codeval = code + $('#btnGroupAnno').data('value') + '-' + (parseInt((parseInt($('#btnGroupMese').data('value')) - 1) / 4) + 1) ;
                            break;
                        case 'S':
                            codeval = code + $('#btnGroupAnno').data('value') + '-' + (parseInt((parseInt($('#btnGroupMese').data('value')) - 1) / 6) + 1) ;
                            break;
                        case 'A':
                            codeval = code + $('#btnGroupAnno').data('value');
                            break;
                    }
                   // $(this).find('h3').html(codeval);
                    $(this).find('.detail-code-exec').data('code', codeval);
                    $(this).find('.detail-code').find('h3').html(codeval);
                }
            );
        }
        function cambioAnno(v) {
            $('#btnGroupAnno').data('value', v);
            $('#btnGroupAnno .valueplace').html(v);
            cambioData();
        }
        function cambioMese(v, nome) {
            $('#btnGroupMese').data('value', v);
            $('#btnGroupMese .valueplace').html(nome);
            cambioData();
        }
        function cambioGiorno(v) {
            $('#btnGroupGiorno').data('value', v);
            $('#btnGroupGiorno .valueplace').html(v);
            cambioData();
        }

    </script>    
     {% endblock %}