{% 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" style="margin-left: 10px;">
                                <button type="button" id="type-acq" class="btn btn-custom filter-menu btn-select-type" onclick="javascript:acquisizioni()">{{ 'Acquisition'|trans }}</button>
                                <button type="button" id="type-acq" class="btn btn-custom filter-menu btn-select-type {% if archived == 1%}filter-selected{% endif %}" onclick="javascript:archivioitems()">{{ 'Archivio'|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;">
                                <button type="button" id="type-Counter" class="btn btn-custom filter-menu" onclick="javascript:conteggi()">{{ 'Counter'|trans }}</button>
                            </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>&nbsp;</th>
                            <th>&nbsp;</th>
                            <th colspan="5">&nbsp;</th>
                        </tr> -->
                        <tr>
                            <th>{{ "Date"|trans }}</th>
                            <th>{{ "Items Code"|trans }}</th>
                            <th style="text-align: center;">{{ "N. Box"|trans }}</th>
                            <th style="text-align: center;">{{ "Congruity"|trans }}</th>
                            <th>{{ "Status"|trans }}</th>
                            <th>&nbsp;</th>
			    <th>&nbsp;</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/DataTables/dataTables.fixedHeader.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 tot = 0.0;
            var tipo = '{{ tipo }}';
            var filtri = '{{ filtri }}';
            var filtrodata = '{{ data }}';
			var cursearch = "{{ path(path, {'data':data,'p':tipo,'filtri':filtri}) }}";
            function searchByDate(date, cleardate, clearsearch) {
                table.clear();
                $('.block-menu-filter.menu-end .filter-menu').removeClass('filter-selected');
                if (cleardate) {
                    $("#dataDa").val('');
                    $("#dataA").val('');
                }
                if (clearsearch) {
                    $('#id-search').val('');
                }
                if (!date.startsWith('R')) {
                    $('.filter-menu#type-' + date).addClass('filter-selected'); 
                    $('#id-search').val('');
                }
                else {
                } 
                filtrodata = date;
				cursearch = "{{ path(path, {'data':':::VALORE','p':':::TIPO'}) }}".replace(':::VALORE', date).replace(':::TIPO', tipo);
                table.ajax.url(cursearch).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()); 
                filtrodata = searchval;
                searchByDate(searchval, true, false);
            }
            function conteggi() {
                 location.href = '{{ path('list_page') }}';
            }
            function acquisizioni() {
                 location.href = '{{ path('search_page') }}';
            }
            function archivioitems() {
                {% if archived == 0 %}
                    location.href = '{{ path('searchitems_arch_page') }}';
                {% else %}
                    location.href = '{{ path('searchitems_page') }}';
                {% endif %}
            }
            $(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(path, {'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; 
                                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 }}:"
                    },
                    "fixedHeader": true,
                    "lengthMenu": [25, 50, 100, 200, 500],
                    "deferRender": true,
                    "order": [[0, "desc"]],
                    "columns": [
                        {"data": "Date"},
                        {"data": "obj_code"},
                        {"data": "DatoScelto"},
                        {"data": "CongruitaIcon"},
                        {"data": "StatoText"},
                        {"data": "Export"},
			{"data": "Command"}
                    ]
                    , "columnDefs": [
                        {
                            "render": function (data, type, row) {
                                if (data !== null && data != "") {
                                    return '<span class="hide-column">' + data + '</span>' + window.moment(data, 'YYYY-MM-DD HH:mm:ss', 'it', true ).format('DD/MM/YYYY HH:mm');
                                } else {                                    
                                    return data;
                                }
                            },
                            "width": "15%",
                            "targets": 0
                        },                        
                        {
                            "render": function (data, type, row) {
                                if (parseInt(row['nudo_vestito']) === 1) {
                                    return '<a href="' + row['awburl'] + '"><div class="grid-search-icon"><img class="grid-search-icon-img" src="{{ asset('/static/c4rg0_themes/assets/images/icons/ico_packed_p.png') }}"></div>' + data + '</a>';
                                }
                                else {
                                    return '<a href="' + row['awburl'] + '"><div class="grid-search-icon"></div>' + data + '</a>';
                                }
                            },
                            "targets": 1
                        },

                        {
                            "render": function (data, type, row) {
                                var dt = String(data).split(',');
                                if (dt.length === 2) {
                                    return '<div class="text-center" data-value="' + dt[0] + '">' + dt[0] + ' [' + dt[1] + ']</div>';
                                }
                                else {
                                    return '<div class="text-center" data-value="' + data + '">' + data + '</div>';
                                }
                            },
                            "type": "items",                            
                            "width": "10%",
                            "targets": 2
                        },
                        {
                            "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": 3
                        },
                        {
                            "render": function (data, type, row) {
                                var stato = parseInt(row['status']);
                                if (false /*row['Stato'] === 5*/) {
                                        return '<a href="' + row['awburl'] + '">' + '<div class="stato-' + row['Stato'] + '">' + data + '</div>' + '</a>';
                                }
                                else {
                                    return '<div class="label-stato stato-items-' + stato + '">' + data + '</div>';
                                }
                            },
                            "targets": 4
                        }, 
                        {
                            "render": function (data, type, row) {
                                var stato = parseInt(row['status']);
                                var ret = '';
                                switch (stato) {
                                    case 1:
                                        ret = "<div class=\"info stato-items-" + stato+ "\" id=\"spin-id-" + row['conta'] + "\"></div>";
                                        break;
                                    case 2:
                                        ret = "<div class=\"info stato-items-" + stato+ "\" id=\"spin-id-" + row['conta'] + "\">{{ 'Incompleted data'|trans }}</div>";
                                        break;
                                    case 3:
                                        ret = "<div class=\"info stato-items-" + stato+ "\" id=\"spin-id-" + row['conta'] + "\"><img id=\"logo-cloud-" + row['id'] + "\" class=\"logo-delivered-cloud logo-status\" src=\"/static/images/ICO_Cloud_C4RGO.png\"></div>";
                                        break;
                                    case 4:
                                        ret = "<img id=\"logo-oracle-" + row['conta'] + "\" class=\"logo-on-process logo-status\" src=\"{{ asset('/static/images/retry-Oracle_TR_azzurro.png') }}\"></img><div class=\"n-retry\" id=\"n-retry-id-" + row['export_retry'] + "\"></div>";
                                        break;
                                    case 5:
                                        ret = "<div class=\"info stato-items-" + stato+ "\" id=\"spin-id-" + row['conta'] + "\">{{ 'Retry'|trans }}</div>";
                                        break;
                                    case 6:
                                        ret = "<div class=\"info stato-items-" + stato+ "\" id=\"spin-id-" + row['conta'] + "\">" + row['incompleti'] + "</div>";
                                        break;
                                    case 7:
                                        ret = "<div class=\"info stato-items-" + stato+ "\" id=\"spin-id-" + row['conta'] + "\"><img id=\"logo-cloud-" + row['id'] + "\" class=\"logo-delivered-cloud logo-status\" src=\"/static/images/ICO_Cloud_C4RGO.png\"></div>";
                                        break;
                                    case 8:
                                        ret = "<div class=\"info stato-items-" + stato+ "\" id=\"spin-id-" + row['conta'] + "\"><img id=\"logo-oracle-" + row['id'] + "\" class=\"logo-delivered logo-status\" src=\"/static/images/loghi_aziende/Oracle_Corporation_logo.svg\"><img id=\"logo-cloud-" + row['id'] + "\" class=\"logo-delivered-cloud logo-status\" src=\"/static/images/ICO_Cloud_C4RGO.png\"></div>";
                                        break;
                                    case 9:
                                        ret = "<div class=\"info stato-items-" + stato+ "\" id=\"spin-id-" + row['conta'] + "\"><img id=\"logo-cloud-" + row['id'] + "\" class=\"logo-delivered-cloud logo-status\" src=\"/static/images/ICO_Cloud_C4RGO.png\"></div>";  
                                        break;
                                    default:
                                        ret = '';
                                } 
                                return ret;
                            },
                            "width": "300px",
                            "orderable": false,
                            "targets": 5
                        },
                        {
                            "render": function (data, type, row) {
                                var stato = parseInt(row['status']);
                                {% if env_site_online == 'Y' %}
                                    return '<div class="status-' + row['Stato'] + '"></div>';
                                {% else %}
                                if (row['Stato'] === 1 || row['Stato'] === 3 || row['Stato'] === 4 || row['Stato'] === 5) {
                                    return '<div id="send-cmd-' + row['id'] + '" class="status-' + row['Stato'] + '"><a href="#" onclick="javascript:exportToCED(' + row['id'] + ')"><img alt="send to ERP" src="{{ asset('/static/c4rg0_themes/assets/images/icons/Oracle-Upload.png') }}" style="width: 38px;"></a></div><div id="wait-cmd-' + row['id'] + '" class="hidden-element status-' + row['Stato'] + '"><i class="fas fa-spinner fa-spin fa-2x"></i></div>';
                                }
                                else {
                                    return '<div class="status-' + row['Stato'] + '"></div>';
                                }
                                {% endif %}
                            },
			    "orderable": false,
                            "targets": 6
                        }

                        // , { "visible": false,  "targets": [ 4 ] }
                    ],
                    "headerCallback": function( thead, data, start, end, display ) {
                        var api = this.api(), data;
                        var caption = "{{ 'N. Items [Boxes]'|trans }}";
                        var total = "{{ 'Total items'|trans }}";
                        switch (tipo) {
                            case 'S':
                                caption = "{{ 'N. Items [Boxes]'|trans }}";
                                total = "{{ 'Total items'|trans }}";
                                break;
                            case 'OW':
                            case 'CW':
                                caption = "{{ 'Weight'|trans }}";
                                total = "{{ 'Total weight'|trans }}";                                
                                break;
                            case 'CV':
                                caption = "{{ 'Volume'|trans }}";
                                total = "{{ 'Total volume'|trans }}";                                
                                break;
                            case 'W':
                                caption = "{{ 'Weight'|trans }}";                                
                                total = "{{ 'Total weight'|trans }}";                                
                                break;
                            case 'V':
                                caption = "{{ 'Volume'|trans }}";
                                total = "{{ 'Total volume'|trans }}";                                
                                break;
                            case 'A':
                                caption = "{{ 'N. Items [Boxes]'|trans }}";
                                total = "{{ 'Total items'|trans }}";
                                break;
                            case 'O':
                                caption = "{{ 'N. Objects'|trans }}";
                                total = "{{ 'Total objects'|trans }}";
                                break;
                            case 'I':
                                caption = "{{ 'N. Items [Boxes]'|trans }}";
                                total = "{{ 'Total items'|trans }}";
                                break;
                            default:
                                
                        }
                        $(thead).find('th').eq(2).html( total + ': ' + String(tot));
                        $( api.column( 2 ).header() ).html(
                          caption
                        );
                      
                    }
             
                });
                $('.dataTables_empty').html('<div id="page-wrapper"><div class="loading">Loading...</div></div>');
            })
            function exportToCED(id) {
                $('#wait-cmd-' + id).removeClass('hidden-element');
                $('#send-cmd-' + id).addClass('hidden-element');
                $.ajax({
                        type: "GET",
                        url: "{{ path('app_genoracle', {'sid':'--','id':'::ID'}) }}".replace('::ID', id),
                        data: {}
                })
                .done(function (e) {
                        if (e.err === 0) {
                                $('#send-cmd-' + id).html('OK');
                        }
                        else {
                                $('#send-cmd-' + id).html('ERROR');
                        }					
                        if (cursearch !== '') {
                                table.ajax.url(cursearch).load().draw();
                                $('.dataTables_empty').html('<div id="page-wrapper"><div class="loading">Loading...</div></div>');
                        }

                })
                .fail(function (err) {
                        //alert(JSON.stringify(err));
                })
                .always(function () {
                        $('#wait-cmd-' + id).addClass('hidden-element');
                        $('#send-cmd-' + id).removeClass('hidden-element');
                });			

            }
        </script>
    {% endblock %}

    {% block footer %}
    {% endblock %}