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

{% block body_id 'admin_users_collection' %}

    {#
        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>
        <div class="md-modal md-effect-10 md-hotpink colorize-overlay" id="id-add-user">
            <div class="md-content">
                <h3>{{ 'Add new user'|trans }}</h3>   
                <div id="id-msg-anagrafica" class="tile-body nopadding rounded-corners">
                </div>
                <button class="md-ok btn btn-default">{{ "OK"|trans }}</button>
                <button class="md-close btn btn-default">{{ "Cancel"|trans }}</button>
            </div>
        </div>
        <div class="md-overlay"></div><!-- the overlay element -->        

    {% endblock %}

    {% block body %}
        <!-- Page content -->
        <div id="content" class="col-md-12">

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




            </div>
            <div class="col-md-12">
                <section class="tile transparent" id="id-search-block" style="margin-top: 55px;">
                    <!-- 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">
                                <a href="{{ path('managment_pannel_page') }}">
                                    <h1>
                                        <i class="fa fa-briefcase"></i>
                                        {{ 'Management'|trans }}
                                    </h1>
                                </a>
                            </div>

                        </div>
                        <div class="block-menu-filter menu-center">
                            <div class="btn-group btn-w100">
                            </div>
                        </div>
                        <div class="block-menu-filter menu-end">
                            <div class="btn-group">
                                <a class="on-close-btn" href="javascript:window.history.back();" title="Back"><div class="user-close"><i class="fas fa-chevron-circle-left"></i></div></a>
                            </div>
                        </div>
                    </div>

                </section>
            </div>


            <div class="col-md-12">
            <section class="tile transparent" id="id-search-block" style="margin-top: 55px;">
                <!-- 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">
                                <a class="useradd-btn" href="{{ path('admin_registration') }}" title="{{ 'Add user'|trans }}"><div class="user-add"><i class="fas fa-plus-circle"></i></div></a>
                                <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" 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">
                                <a class="on-close-btn" href="{{ path('managment_pannel_page', {'id_azienda':company}) }}" title="{{ 'Back'|trans }}"><div class="user-close"><i class="fas fa-chevron-circle-left"></i></div></a>
                            </div>
                          </div> #}
                    </div>
                    
            </section>
            </div>


            <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>{{ "User name"|trans }}</th>
                            <th>{{ "Name"|trans }}</th>
                            <th>{{ "Status"|trans }}</th>
                            <th>{{ "Scanner"|trans }}</th>
                            <th>{{ "Cloud"|trans }}</th>
                            <th>{{ "Profile"|trans }}</th>
                            <th>{{ "Member since"|trans }}</th>
                            <th>{{ "Area"|trans }}</th>
                            <th>{{ "Function"|trans }}</th>
                            <th>{{ "Command"|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>
        <script>
            var table = null;
            function deleteUser(id) {
                var r = confirm("{{ 'Confirm the deletion of user!'|trans }}");
                if (r == true) {
                    location.href = "{{ path('users_list_page', {'company':company,'cmd':'del','id':'::ID'}) }}".replace('::ID', id);
                } else {
                }
            }
            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_usersearchresult', {'company':company,'data':'::value'}) }}".replace('::value', date)).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 () {
                var oTable01 = null;
                var oTable02 = null;
                var oTable03 = null;
                var oTable04 = null;

                var nEditing = null;
                var addRowLink = null;
                var anOpen = [];
                /* Get the rows which are currently selected */

            //initialize datepicker
            
                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));
                    }
                } );            
				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');
            searchByDate(datasel, false, true);
        //    location.href="{{ path('stat_page', {'id':2,'data':'DATASELEZIONATA'}) }}".replace('DATASELEZIONATA', datasel);
           // alert();
        });                


                function fnGetSelected(oTable01Local) {
                    return oTable01Local.$('tr.row_selected');
                }
                ;

                /*******************************************************/
                /**************** INLINE EDIT DATATABLE ****************/
                /*******************************************************/

                function restoreRow(oTable02, nRow) {
                    var aData = oTable02.fnGetData(nRow);
                    var jqTds = $('>td', nRow);

                    for (var i = 0, iLen = jqTds.length; i < iLen; i++) {
                        oTable02.fnUpdate(aData[i], nRow, i, false);
                    }

                    oTable02.fnDraw();
                }
                ;

                function editRow(oTable02, nRow) {
                    var aData = oTable02.fnGetData(nRow);
                    var jqTds = $('>td', nRow);
                    jqTds[0].innerHTML = '<input type="text" value="' + aData[0] + '" class="form-control">';
                    jqTds[1].innerHTML = '<input type="text" value="' + aData[1] + '" class="form-control">';
                    jqTds[2].innerHTML = '<input type="text" value="' + aData[2] + '" class="form-control">';
                    jqTds[3].innerHTML = '<input type="text" value="' + aData[3] + '" class="form-control">';
                    jqTds[4].innerHTML = '<input type="text" value="' + aData[4] + '" class="form-control">';
                    jqTds[5].innerHTML = '<a class="edit save" href="#">Save</a><a class="delete" href="#">Delete</a>';
                }
                ;

                function saveRow(oTable02, nRow) {
                    var jqInputs = $('input', nRow);
                    oTable02.fnUpdate(jqInputs[0].value, nRow, 0, false);
                    oTable02.fnUpdate(jqInputs[1].value, nRow, 1, false);
                    oTable02.fnUpdate(jqInputs[2].value, nRow, 2, false);
                    oTable02.fnUpdate(jqInputs[3].value, nRow, 3, false);
                    oTable02.fnUpdate(jqInputs[4].value, nRow, 4, false);
                    oTable02.fnUpdate('<a class="edit" href="#">Edit</a><a class="delete" href="#">Delete</a>', nRow, 5, false);
                    oTable02.fnDraw();
                }
                ;

                function fnFormatDetails(oTable03, nTr) {
                    var oData = oTable03.fnGetData(nTr);
                    var sOut =
                            '<div class="innerDetails">' +
                            '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
                            '<tr><td>Rendering engine:</td><td>' + oData.engine + '</td></tr>' +
                            '<tr><td>Browser:</td><td>' + oData.browser + '</td></tr>' +
                            '<tr><td>Platform:</td><td>' + oData.platform + '</td></tr>' +
                            '<tr><td>Version:</td><td>' + oData.version + '</td></tr>' +
                            '<tr><td>Grade:</td><td>' + oData.grade + '</td></tr>' +
                            '</table>' +
                            '</div>';
                    return sOut;
                }
                ;


                function inittable() {
                    // Add custom class to pagination div
                    $.fn.dataTableExt.oStdClasses.sPaging = 'dataTables_paginate paging_bootstrap paging_custom';

                    $('div.dataTables_filter input').addClass('form-control');
                    $('div.dataTables_length select').addClass('form-control');
                    /*************************************************/
                    /**************** BASIC DATATABLE ****************/
                    /*************************************************/

                    /* Define two custom functions (asc and desc) for string sorting */
                    jQuery.fn.dataTableExt.oSort['string-case-asc'] = function (x, y) {
                        return ((x < y) ? -1 : ((x > y) ? 1 : 0));
                    };

                    jQuery.fn.dataTableExt.oSort['string-case-desc'] = function (x, y) {
                        return ((x < y) ? 1 : ((x > y) ? -1 : 0));
                    };

                    /* Add a click handler to the rows - this could be used as a callback */
                    $("#export-datatable tbody tr").click(function (e) {
                        if ($(this).hasClass('row_selected')) {
                            $(this).removeClass('row_selected');
                        } else {
                            oTable01.$('tr.row_selected').removeClass('row_selected');
                            $(this).addClass('row_selected');
                        }

                        // FadeIn/Out delete rows button
                        /*     if ($('#export-datatable tr.row_selected').length > 0) {
                         $('#deleteRow').stop().fadeIn(300);
                         } else {
                         $('#deleteRow').stop().fadeOut(300);
                         }*/
                    });
                    oTable01 = $('#export-datatable').dataTable({
                        "iDisplayLength": 10,
                        "sDom":
                                "R<'row'<'col-md-6'l><'col-md-6'f>r>" +
                                "t" +
                                "<'row'<'col-md-4 sm-center'i><'col-md-4'><'col-md-4 text-right sm-center'p>>",
                        "oLanguage": {
                            "sSearch": ""
                        },
                        "aaSorting": [[2, 'desc']],
                        "aoColumns": [
                            null,
                            null,
                            null,
                            null,
                            null,
                            null,
                            null
                        ],
                        "fnInitComplete": function (oSettings, json) {
                            $('.dataTables_filter input').attr("placeholder", "Search");
                        }
                    });

                    $('.ColVis_MasterButton').on('click', function () {
                        var newtop = $('.ColVis_collection').position().top - 45;

                        $('.ColVis_collection').addClass('dropdown-menu');
                        $('.ColVis_collection>li>label').addClass('btn btn-default')
                        $('.ColVis_collection').css('top', newtop + 'px');
                    });

                    $('.DTTT_button_collection').on('click', function () {
                        var newtop = $('.DTTT_dropdown').position().top - 45;
                        $('.DTTT_dropdown').css('top', newtop + 'px');
                    });

                    //initialize chosen
                    $('.dataTables_length select').chosen({disable_search_threshold: 10});

                    // Add custom class
                    $('div.dataTables_filter input').addClass('form-control');
                    $('div.dataTables_length select').addClass('form-control');

                }
                $('.block-menu-filter.menu-end .filter-menu').removeClass('filter-selected');
                
                table = $('#searchresult').DataTable({
                    "ajax": {
                        "type":"GET",
                        "url":"{{ path('app_usersearchresult', {'company':company}) }}",
                        "dataSrc": function (json) {
                            $('#search #search-result .error-red').html('');
                            $('#search #search-result .error-red').hide();
                            if (json.err === 0) {
                                return json.data;
                            } else {
                                $('#search #search-result .error-red').html(json.errmsg);
                                $('#search #search-result .error-red').show();
                                return new Array();
                            }
                        }                         
                    },
                    "language": {
                        "search": "{{ 'Filter records'|trans }}:"
                    },
                    "deferRender": true,
                    "columns": [
                        {"data": "username"},
                        {"data": "fullname"},
                        {"data": "status"},
                        {"data": "userscanner"},
                        {"data": "usercloud"},
                        {"data": "profile"},
                        {"data": "membersince"},
                        {"data": "area"},
                        {"data": "function"},
                        {"data": "id"}
                    ]
                    , "columnDefs": [

                        {
                            "render": function (data, type, row) {
                                return '<a href="' + row['userurl'] + '">' + data + '</a>';
                            },
                            "width": "200px",
                            "targets": 0
                        },
                        {
                            "render": function (data, type, row) {
                                return '<div class="text-center">' + data + '</div>';
                            },
                            
                            "targets": 1,
                        },
                        {
                            "render": function (data, type, row) {
                                if (parseInt(data) === 0) {
                                    return '<div class="text-center"><i class="fa fa-check"></i></div>';
                                } else {
                                    return '<div class="text-center"><i class="fa fa-times"></i></div>';
                                }                                
                            },
                            "width": "130px",
                            "targets": 2
                        },
                        {
                            "render": function (data, type, row) {
                                if (parseInt(data) === 1) {
                                    return '<div class="text-center"><i class="fa fa-check"></i></div>';
                                } else {
                                    return '<div class="text-center"><i class="fa fa-times"></i></div>';
                                }                                
                            },
                            "width": "160px",
                            "targets": 3
                        },
                        {
                            "render": function (data, type, row) {
                                if (parseInt(data) === 1) {
                                    return '<div class="text-center"><i class="fa fa-check"></i></div>';
                                } else {
                                    return '<div class="text-center"><i class="fa fa-times"></i></div>';
                                }                                
                            },
                            "width": "130px",
                            "targets": 4
                        },
                        
                        {
                            "render": function (data, type, row) {
                                return '<div class="text-center">' + data + '</div>';
/*                                if (type == 'display' && data !== null && data != "") {
                                    return window.moment(data, 'YYYY-MM-DD HH:mm:ss', 'it', true ).format('DD/MM/YYYY HH:mm:ss');;
                                } else {
                                    return data;
                                }*/
                            },
                            "width": "200px",
                            "targets": 5
                        },
                        {
                            "render": function (data, type, row) {
                                if (type === 'display' && data !== null && data !== "") {
                                    return window.moment(data, 'YYYY-MM-DD HH:mm:ss', 'it', true).format('DD/MM/YYYY HH:mm:ss');
                                    ;
                                } else {
                                    return data;
                                }
                            },
                            "width": "10%",
                            "targets": 6
                        },
                        {
                            "render": function (data, type, row) {
//                                return '<a href="#" onclick="javascript:deleteUser(' + data + ')"<div style="width: 100%;"><i class="fa fa-trash fa-2x" style="color: red;"></i></div></a>';
                                return '<a href="' + row['userurl'] + '"><span class="text-info glyphicon glyphicon-pencil"></span> <span class="sr-only">Edit</span></a><a href="#" onclick="javascript:deleteUser(' + data + ')" data-toggle="confirmation" data-btnoklabel="Delete" data-title="Confirm Deletion" data-original-title="" title=""><span class="text-danger glyphicon glyphicon-trash"></span> <span class="sr-only">Delete</span></a>';
                            },
                            "orderable": false,
                            "width": "200px",
                            "targets": 9
                            },
                        // , { "visible": false,  "targets": [ 4 ] }
                        /*

                        */
                        
                    ]
                });
                $('.dataTables_empty').html('<div id="page-wrapper"><div class="loading">Loading...</div></div>');
            })

        </script>
    {% endblock %}

    {% block footer %}
    {% endblock %}