{% extends 'base.html.twig' %}

{% block body_id 'search' %}

    {#
        the homepage is a special page which displays neither a header nor a footer.
        this is done with the 'trick' of defining empty Twig blocks without any content
    #}

    {% block stylesheets %}
        {{ parent() }}
        <link rel="stylesheet" href="{{ asset('static/c4rg0_themes/assets/js/vendor/datatables/css/dataTables.bootstrap.css') }}">
        <link rel="stylesheet" href="{{ asset('static/c4rg0_themes/assets/js/vendor/datatables/css/ColVis.css') }}">
        <link rel="stylesheet" href="{{ asset('static/c4rg0_themes/assets/js/vendor/datatables/css/TableTools.css') }}">
        <link rel="stylesheet" href="{{ asset('static/DataTables/DataTables-1.10.20/css/jquery.dataTables.min.css') }}">
        <link rel="stylesheet" href="{{ asset('static/c4rg0_themes/assets/js/vendor/datepicker/css/bootstrap-datetimepicker.css') }}">
    {% endblock %}

    {% block header %}
    {% endblock %}

    {% block modal %}
        {{ parent() }}
        <div class="md-modal md-effect-10 md-hotpink colorize-overlay" id="id-msg-red">
            <div class="md-content">
                <h3>ERROR</h3>   
                <div id="id-msg-err" class="tile-body nopadding rounded-corners">
                </div>
                <button class="md-close btn btn-default">{{ "OK"|trans }}</button>
            </div>
        </div>

    {% endblock %}

    {% block body %}

        <div class="md-overlay"></div><!-- the overlay element -->        
        <!-- Page content -->
        <div id="content" class="col-md-12">

            <!-- page header -->
            <div class="pageheader">




            </div>
            <!-- /page header -->

            <!-- tile -->

            <!--    <section id="search-result" class="tile transparent">
    
                    <style>
                        .lds-ring {
                            display: inline-block;
                            position: relative;
                            width: 64px;
                            height: 64px;
                        }
                        .lds-ring div {
                            box-sizing: border-box;
                            display: block;
                            position: absolute;
                            width: 51px;
                            height: 51px;
                            margin: 6px;
                            border: 6px solid #fff;
                            border-radius: 50%;
                            animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
                            border-color: #fff transparent transparent transparent;
                        }
                        .lds-ring div:nth-child(1) {
                            animation-delay: -0.45s;
                        }
                        .lds-ring div:nth-child(2) {
                            animation-delay: -0.3s;
                        }
                        .lds-ring div:nth-child(3) {
                            animation-delay: -0.15s;
                        }
                        @keyframes lds-ring {
                            0% {
                                transform: rotate(0deg);
                            }
                            100% {
                                transform: rotate(360deg);
                            }
                        }
    
                    </style>
                    <div style="width: 100%; height: 200px; text-align: center; margin-top: 100px;">
                        <div class="lds-ring"><div></div><div></div><div></div><div></div></div>
                    </div>
                    
                    
                    
                    
                </section> -->



            <section class="tile transparent" id="id-search-block" style="margin-top: 0;">
                <!-- tile widget -->
                    

                    <div class="tile-widget color transparent-black rounded-top-corners">
                        <div class="block-menu-filter menu-start">
                            <div class="btn-group btn-w100">
                                <button type="button" id="type-acq" class="btn btn-custom filter-menu" onclick="javascript:acquisizioni()">{{ 'Acquisition'|trans }}</button>                                
                                <button type="button" id="type-Items" class="btn btn-custom filter-menu btn-select-type" onclick="javascript:items()">{{ 'Items'|trans }}</button>                                
                                <input type="text" class="form-control" id="id-search" style="width: 20vw;float: left;background-color: #d3d3d369;margin-right: 6px;">                                
                                <button style="height: 38px;" onclick="javascript:search();" type="button" class="btn btn-blue margin-left-20"><i class="fa fa-search fa-2x"></i></button>
                            </div>
                        </div>
                        <div class="block-menu-filter menu-center">
                            <div class="btn-group btn-w100">
                                <input autocomplete="off" type="text" class="form-control datepicker" id="datepicker" style="width: 14vw; float: left; background-color: #d3d3d369; margin-right: 6px;" placeholder="{{ "Select date"|trans }}"/>
                                <label for="datepicker" class="control-label" style="float: left;"><i class="fa fa-calendar fa-2x"></i></label>
                            </div>
                        </div>
                        <div class="block-menu-filter menu-end">
                            <div class="btn-group" style="float: left;">
                            </div>
                            <div class="btn-group" style="float: right;">
                                <i class="fa fa-chevron-down open-search-advance"></i>
                                <button type="button" id="type-D30" class="btn btn-custom filter-menu {% if data == 'D30' %}filter-selected{% endif %}" onclick="javascript:searchByDate('D30', true, true)">{{ 'Last 30 days'|trans }}</button>
                                <button type="button" id="type-D60" class="btn btn-custom filter-menu {% if data == 'D60' %}filter-selected{% endif %}" onclick="javascript:searchByDate('D60', true, true)">{{ 'Last 60 days'|trans }}</button>
                                <button type="button" id="type-D180" class="btn btn-custom filter-menu {% if data == 'D180' %}filter-selected{% endif %}" onclick="javascript:searchByDate('D180', true, true)">{{ 'Last 180 days'|trans }}</button>
                                <button type="button" id="type-CY" class="btn btn-custom filter-menu {% if data == 'CY' %}filter-selected{% endif %}" onclick="javascript:searchByDate('CY', true, true)">{{ 'Current year'|trans }}</button>
                                <button type="button" id="type-LY" class="btn btn-custom filter-menu {% if data == 'LY' %}filter-selected{% endif %}" onclick="javascript:searchByDate('LY', true, true)">{{ 'Last year'|trans }}</button>
                                <!--<button type="button" id="type-A" class="btn btn-custom filter-menu {% if data == 'A' %}filter-selected{% endif %}" onclick="javascript:searchByDate('A', true, true)">{{ 'All'|trans }}</button> -->
                            </div>

                        </div>
                    </div>
                    <div class="detail-search"></div>
            </section>



            <section id="search-result" class="tile transparent">   
                <div id="id-error-msg" class="error-red"></div>
                <table id="searchresult" class="display search-result table-datatable" style="width:100%">
                    <thead>
                        <tr>
                            <th>{{ 'Tot.'|trans }}</th>
                            <th>&nbsp;</th>
                            <th class="tot-liste">&nbsp;</th>
                            <th class="tot-liste">&nbsp;</th>
                            <th class="tot-liste">&nbsp;</th>
                            <th class="tot-liste">&nbsp;</th>
                            <th class="tot-liste">&nbsp;</th>
                            <th class="tot-liste">&nbsp;</th>
                            <th>&nbsp;</th>
                        </tr>
                        <tr>
                            <th>{{ "Date"|trans }}</th>
                            <th>{{ "Vector"|trans }}</th>
                            <th>{{ "Acquisition"|trans }}</th>
                            <th>{{ "N. Acquisizioni"|trans }}</th>
                            <th>{{ "N. Items"|trans }}</th>
                            <th>{{ "N. Boxes"|trans }}</th>
                            <th>{{ "Weight"|trans }}</th>
                            <th>{{ "Volume"|trans }}</th>
                            <th style="text-align: center;">{{ "Congruity"|trans }}</th>
                        </tr>
                    </thead>
                </table>            
            </section>     

            <br />

            <br /><br /><br /><br /><br /><br /><br /><br />
            <!-- /tile -->








        </div>
        <!-- Page content end -->
    {% endblock %}
    {% block javascripts %}
        {{ parent() }}
        <script type="text/javascript" src="{{ asset('static/js/base64.js') }}"></script>

        <script type="text/javascript" src="{{ asset('static/c4rg0_themes/assets/js/vendor/datatables/jquery.dataTables.min.js') }}"></script>
        <script type="text/javascript" src="{{ asset('static/c4rg0_themes/assets/js/vendor/datatables/ColReorderWithResize.js') }}"></script>
        <script type="text/javascript" src="{{ asset('static/c4rg0_themes/assets/js/vendor/datatables/colvis/dataTables.colVis.min.js') }}"></script>
        <script type="text/javascript" src="{{ asset('static/c4rg0_themes/assets/js/vendor/datatables/tabletools/ZeroClipboard.js') }}"></script>
        <script type="text/javascript" src="{{ asset('static/c4rg0_themes/assets/js/vendor/datatables/tabletools/dataTables.tableTools.min.js') }}"></script>
        <script type="text/javascript" src="{{ asset('static/c4rg0_themes/assets/js/vendor/datatables/dataTables.bootstrap.js') }}"></script>
        <script type="text/javascript" src="{{ asset('static/c4rg0_themes/assets/js/vendor/chosen/chosen.jquery.min.js') }}"></script>        
        <script type="text/javascript" src="{{ asset('static/js/moment/moment.min.js') }}"></script>
        <script type="text/javascript" src="{{ asset('static/DataTables/DataTables-1.10.20/js/jquery.dataTables.min.js') }}"></script>


        <script type="text/javascript" src="{{ asset('static/c4rg0_themes/assets/js/vendor/momentjs/moment-with-langs.min.js') }}"></script>

        <script type="text/javascript" src="{{ asset('static/c4rg0_themes/assets/js/vendor/datepicker/bootstrap-datetimepicker.min.js') }}"></script>
        <script type="text/javascript" src="{{ asset('static/js/jquery-dateformat.min.js') }}"></script>
        {{ encore_entry_script_tags('search') }}
        <script>
            var table = null;
            var tipo = '{{ tipo }}';
            var tot = 0;
            var totawb = 0;
            var totobj = 0;
            var totitems = 0;
            var totweight = 0.0;
            var totvolume = 0.0;
            function searchByDate(date, cleardate, clearsearch) {
                table.clear();
                $('.block-menu-filter.menu-end .filter-menu').removeClass('filter-selected');
                if (cleardate) {
                    $("#datepicker").val('');
                }
                if (clearsearch) {
                    $('#id-search').val('');
                }
                if (!date.startsWith('R')) {
                    $('.filter-menu#type-' + date).addClass('filter-selected'); 
                    $('#id-search').val('');
                }
                else {
                } 
                table.ajax.url("{{ path('app_listresult', {'data':':::VALORE','p':':::TIPO'}) }}".replace(':::VALORE', date).replace(':::TIPO', tipo)).load().draw();
                $('.dataTables_empty').html('<div id="page-wrapper"><div class="loading">Loading...</div></div>');
            }
            function search() {
                var searchval = 'R' + Base64.encode($('#id-search').val()); 
                 searchByDate(searchval, true, false);
            }
            function acquisizioni() {

                 location.href = '{{ path('search_page') }}';
            }
            function items() {
                 location.href = '{{ path('searchitems_page') }}';
            }
          
            $(function () {
                /* Get the rows which are currently selected */
            //initialize datepicker
                $('.open-search-advance').on('click', function(ev) {
                    if ($(this).hasClass('fa-chevron-down')) {
                        $(this).removeClass('fa-chevron-down')
                        $(this).addClass('fa-chevron-up')
                        $('#id-search-block').animate({height: '+=200'}, 100, function() { $(".detail-search").fadeIn(500); });
                    }
                    else {
                        $(this).removeClass('fa-chevron-up')
                        $(this).addClass('fa-chevron-down')
                        $(".detail-search").fadeOut(500);
                        $('#id-search-block').animate({height: '-=200'});
                    }
                });            
                jQuery.extend( jQuery.fn.dataTableExt.oSort, {
                    "alt-string-pre": function ( a ) {
                        var valore = a.match(/alt="(.*?)"/);
                        if (valore !== null && valore.length > 1) {
                            return a.match(/alt="(.*?)"/)[1].toLowerCase();
                        }
                        else {
                            return '';
                        }
                    },
                    "alt-string-asc": function( a, b ) {
                        return ((a < b) ? -1 : ((a > b) ? 1 : 0));
                    },
                    "alt-string-desc": function(a,b) {
                        return ((a < b) ? 1 : ((a > b) ? -1 : 0));
                    },
                    "items-pre": function ( a ) {
                        var valore = a.match(/data-value="(.*?)"/);
                        if (valore !== null && valore.length > 1) {
                            var sv = a.match(/data-value="(.*?)"/)[1].toLowerCase();
                            var v = parseInt(sv)
                            if (isNaN(v)) {
                                return 0;
                            }
                            else {
                                return v;
                            }
                        }
                        else {
                            return '';
                        }
                    },
                    "items-asc": function( a, b ) {
                        return ((a < b) ? -1 : ((a > b) ? 1 : 0));
                    },
                    "items-desc": function(a,b) {
                        return ((a < b) ? 1 : ((a > b) ? -1 : 0));
                    }                    
                } );            
            
				var today = new Date();
				var dd = today.getDate();

				var mm = today.getMonth()+1; 
				var yyyy = today.getFullYear();
				if(dd<10) 
				{
					dd='0'+dd;
				} 

				if(mm<10) 
				{
					mm='0'+mm;
				} 

				today = mm+'/'+dd+'/'+yyyy; 			
                $('#datepicker').datetimepicker({
                    format: "DD/MM/YYYY",
					defaultDate: today,
                    icons: {
                    time: "fa fa-clock-o",
                    date: "fa fa-calendar",
                    up: "fa fa-arrow-up",
                    down: "fa fa-arrow-down"
                  }
                });

                $("#datepicker").on("dp.show",function (e) {
                  var newtop = $('.bootstrap-datetimepicker-widget').position().top - 45;      
                  $('.bootstrap-datetimepicker-widget').css('top', newtop + 'px');
                });
                
                $("#datepicker").on("dp.change", function (e) {
                    var mese = (e.date.month() + 1);
                    var datasel = e.date.year().toString() + '-' + mese.toString().padStart(2,'0') + '-' + e.date.date().toString().padStart(2,'0');
                    $(this).blur();
                    searchByDate(datasel, false, true);
                //    location.href="{{ path('stat_page', {'id':2,'data':'DATASELEZIONATA'}) }}".replace('DATASELEZIONATA', datasel);
                   // alert();
                });                

                $('.block-menu-filter.menu-end .filter-menu').removeClass('filter-selected');
                if ('{{ data }}'.startsWith('R')) {
                    var searchval = Base64.decode('{{ data }}'.substring(1)); 
                    $('#id-search').val(searchval);
                }
                else {
                    $('.filter-menu#type-{{ data }}').addClass('filter-selected');
                }
                table = $('#searchresult').DataTable({
                    "ajax": {
                        "type":"GET",
                        "url":"{{ path('app_listresult', {'data':data,'p':tipo,'filtri':filtri}) }}",
                        "dataSrc": function (json) {
                            $('#search #search-result .error-red').html('');
                            $('#search #search-result .error-red').hide();
                            if (json.err === 0) {
                                tot = json.tot; 
                                totawb = json.totawb; 
                                totobj = json.totobj; 
                                totitems = json.totitems; 
                                totweight = json.totweight; 
                                totvolume = json.totvolume; 
                                return json.data;
                            }
                            else {
                                tot = 0;
                                $('#search #search-result .error-red').html(json.errmsg);
                                $('#search #search-result .error-red').show();
                                return new Array();
                            }
                        }                         
                    },
                    "language": {
                        "search": "{{ 'Filter records'|trans }}:"
                    },
                    "lengthMenu": [25, 50, 100, 200, 500],                            
                    "deferRender": true,
                    "order": {% if tipo == 'S' %} [[0, "asc"]] {% else %} [[0, "desc"]] {% endif %},
                    "columns": [
                        {"data": "Date"},
                        {"data": "LogoVettore"},
                        {"data": "AWB"},
                        {"data": "NAWB"},
                        {"data": "NObj"},
                        {"data": "NItem"},
                        {"data": "Weight"},
                        {"data": "Volume"},
                        {"data": "CongruitaIcon"}
                    ]
                    , "columnDefs": [
                        {
                            "render": function (data, type, row) {
                                var d1 = new Date(data);
                                var d2 = new Date();
                                var diff = d2 - d1;
                                var diffDay = Math.floor(diff / (1000*60*60*24))
                                var alertDay = {{ AlertSospesiMaxGiorni }};
                                if (data !== null && data != "") {
                                    if (diffDay > alertDay) {
                                        return '<span class="hide-column">' + data + '</span><span style="color: red;">' + window.moment(data, 'YYYY-MM-DD HH:mm:ss', 'it', true ).format('DD/MM/YYYY HH:mm') + '</span>';
                                    }
                                    else {
                                        return '<span class="hide-column">' + data + '</span><span>' + window.moment(data, 'YYYY-MM-DD HH:mm:ss', 'it', true ).format('DD/MM/YYYY HH:mm') + '</span>';
                                    }                                        
                                } else {                                    
                                    return data;
                                }
                            },
                            "width": "12%",
                            "targets": 0
                        },
                        {
                            "render": function (data, type, row) {
                                if (data !== null && data != "") {
                                    return '<div searchvalue="' + row['Vettore'] + '" class="table-vector-logo-length"><img src="{{ asset('static/images/CompagnieAereeFLAG/') }}' + data + '" style="width: 100px;" alt="' + row['Vettore'] + '"/></div>';
                                } else {
                                   // return '<div class="table-vector-logo-length"><span alt="' + row['Vettore'] + '">' + row['Vettore'] + '</span></div>';
                                   return '';
                                }

                            },
                            "type": "alt-string",
                            "width": "150px",
                            "targets": 1,
                            "searchable": true,
                            "visible": false,
                            "orderable": true
                        },
                        {
                            "render": function (data, type, row) {
                                var customclass = '';
                                if (parseInt(row['stato']) === 2) {
                                    customclass = ' class="standby-font-color" ';
                                }
                                return '<a href="' + row['awburl'] + '" ' + customclass + '>' + data + '</a>';
                            },
                            "targets": 2
                        },
                        {
                            "width": "10%",
                            "targets": 3
                        },
                        {
                            "width": "10%",
                            "targets": 4
                        },
                        {
                            "width": "10%",
                            "targets": 5
                        },
                        {
                            "width": "10%",
                            "targets": 6
                        },
                        {
                            "width": "10%",
                            "targets": 7
                        },
                        {
                            "render": function (data, type, row) {
                                return '<div class="text-center stato-' + row['Congruita'] + '"><img src="' + data + '" alt="' + row['Congruita'] + '"/></div>';
                            },
                            "type": "alt-string",
                            "width": "10%",
                            "targets": 8
                        }
                    ],
                    "headerCallback": function( thead, data, start, end, display ) {
                        //var api = this.api(), data;
                        var start = 1;
                        $(thead).find('th').eq(start).html("<div>" + String(tot) + "</div>");
                        $(thead).find('th').eq(start + 1).html("<div>" + String(totawb) + "</div>");
                        $(thead).find('th').eq(start + 2).html("<div>" + String(totobj) + "</div>");
                        $(thead).find('th').eq(start + 3).html("<div>" + String(totitems) + "</div>");
                        $(thead).find('th').eq(start + 4).html("<div>" + String(totweight) + "</div>");
                        $(thead).find('th').eq(start + 5).html("<div>" + String(totvolume) + "</div>");
                     /*   $( api.column( 2 ).header() ).html(
                          caption
                        );*/
                      
                    }                    
                });
                $('.dataTables_empty').html('<div id="page-wrapper"><div class="loading">Loading...</div></div>');
            })

        </script>
    {% endblock %}

    {% block footer %}
    {% endblock %}