@php
     // as it is possible that we can be redirected with persistent table we save the alerts in a variable
     // and flush them from session, so we will get them later from localStorage.
     $backpack_alerts = \Alert::getMessages();
     \Alert::flush();

     $search_text = trans('backpack::crud.search') . ' ...';
     if (isset($main_search_title)) {
         $search_text = $main_search_title;
     }
 @endphp

 @foreach ($datatables as $settings)
     <script>
         // When ready, make use of @.json
         var dtParams = {
             "path": "{{ $settings->getPath() }}",
             "pathslug": "{{ Str::slug($settings->getPath()) }}",
             "route": "{{ $settings->getRoute() }}",
             "defaultPageLength": "{{ $settings->getDefaultPageLength() }}",
             "totalEntryCount": "{{ $settings->getTotalEntryCount() ?? false }}",
             "pageLength": {{ $settings->getDefaultPageLength() }},
             "lengthMenu": @json($settings->getPageLengthMenu()),
             "showEntryCount": {{ var_export($settings->getShowEntryCount() ?? true) }},
             "pagingType": {{ var_export($settings->getShowEntryCount() === false ? 'simple' : 'simple_numbers') }},
             "searchable": @json($settings->getSearchableTable() ?? true),
             "paginate": {{ var_export($settings->getDefaultPageLength() === -1 ? false : true) }},
             "search_text": "{{ $search_text }}",
             "fixedHeader": {{ var_export($settings->getFixedHeader() ?? true) }},
             "columnDefs": {!! json_encode($settings->getcColumnDefs()) !!},
             "initialSort": {!! json_encode($settings->getInitialSort()) !!},
         };

         // here we will check if the cached dataTables paginator length is conformable with current paginator settings.
         // datatables caches the ajax responses with pageLength in LocalStorage so when changing this
         // settings in controller users get unexpected results. To avoid that we will reset
         // the table cache when both lengths don't match.
         var $dtCachedInfo = JSON.parse(localStorage.getItem('DataTables_{{ $settings->getTableId() }}_/' + dtParams
                 .route)) ?
             JSON.parse(localStorage.getItem('DataTables_{{ $settings->getTableId() }}_/' + dtParams.route)) : [];
         var $dtStoredPageLength = localStorage.getItem('DataTables_{{ $settings->getTableId() }}_/' + dtParams
             .route_pageLength);

         if (!$dtStoredPageLength && $dtCachedInfo.length !== 0 && $dtCachedInfo.length !== dtParams.defaultPageLength) {
             localStorage.removeItem('DataTables_{{ $settings->getTableId() }}_/' + dtParams.route);
         }

         // in this page we allways pass the alerts to localStorage because we can be redirected with
         // persistent table, and this way we guarantee non-duplicate alerts.
         $oldAlerts = JSON.parse(localStorage.getItem('backpack_alerts')) ?
             JSON.parse(localStorage.getItem('backpack_alerts')) : {};

         $newAlerts = @json($backpack_alerts);

         Object.entries($newAlerts).forEach(function(type) {
             if (typeof $oldAlerts[type[0]] !== 'undefined') {
                 type[1].forEach(function(msg) {
                     $oldAlerts[type[0]].push(msg);
                 });
             } else {
                 $oldAlerts[type[0]] = type[1];
             }
         });

         // always store the alerts in localStorage for this page
         localStorage.setItem('backpack_alerts', JSON.stringify($oldAlerts));

         @if ($settings->getIsPersistent())

             var saved_list_url = localStorage.getItem(dtParams.route + '_list_url');

             //check if saved url has any parameter or is empty after clearing filters.
             if (saved_list_url && saved_list_url.indexOf('?') < 1) {
                 var saved_list_url = false;
             } else {
                 var persistentUrl = saved_list_url + '&persistent-table=true';
             }

             var arr = window.location.href.split('?');
             // check if url has parameters.
             if (arr.length > 1 && arr[1] !== '') {
                 // IT HAS! Check if it is our own persistence redirect.
                 if (window.location.search.indexOf('persistent-table=true') < 1) {
                     // IF NOT: we don't want to redirect the user.
                     saved_list_url = false;
                 }
             }

             @if ($settings->getPersistentTableDuration())
                 var saved_list_url_time = localStorage.getItem(dtParams.pathslug + '_list_url_time');

                 if (saved_list_url_time) {
                     var $current_date = new Date();
                     var $saved_time = new Date(parseInt(saved_list_url_time));
                     $saved_time.setMinutes($saved_time.getMinutes() + {{ $crud->getPersistentTableDuration() }});

                     // if the save time is not expired we force the filter redirection.
                     if ($saved_time > $current_date) {
                         if (saved_list_url && persistentUrl != window.location.href) {
                             window.location.href = persistentUrl;
                         }
                     } else {
                         // persistent table expired, let's not redirect the user
                         saved_list_url = false;
                     }
                 }
             @endif
             if (saved_list_url && persistentUrl != window.location.href) {
                 // finally redirect the user.
                 window.location.href = persistentUrl;
             }
         @endif

         if (typeof window.crud == "undefined") {
             window.crud = {};
         }
         if (window.crud.tables == null) {
             window.crud.tables = {};
         }

         var dataTableConfiguration = {
             /* a final dot is added from somewhere to the info string, can't find its source, so we override with the callback */
             "infoCallback": function(settings, start, end, max, total, pre) {
                 var
                     formatter = settings.fnFormatNumber,
                     start = settings._iDisplayStart + 1,
                     len = settings._iDisplayLength,
                     vis = settings.fnRecordsDisplay(),
                     all = len === -1;
                 var str = settings.oLanguage.info;
                 return str.
                 replace(/_START_/g, formatter.call(settings, start)).
                 replace(/_END_/g, formatter.call(settings, settings.fnDisplayEnd())).
                 replace(/_MAX_/g, formatter.call(settings, settings.fnRecordsTotal())).
                 replace(/_TOTAL_/g, formatter.call(settings, vis)).
                 replace(/_PAGE_/g, formatter.call(settings, all ? 1 : Math.ceil(start / len))).
                 replace(/_PAGES_/g, formatter.call(settings, all ? 1 : Math.ceil(vis / len)));
             },
             "headerCallback": function(head, data, start, end, display) {
                 var sortInfo = this.fnSettings().aaSorting[0];
                 if (sortInfo === undefined) {
                     return;
                 }
                 var name = $("#{{ $settings->getTableId() }} thead th").eq(sortInfo[0]).text().trim();
                 var arrow = "&darr;";
                 if (sortInfo[1] == "asc") {
                     arrow = "&uarr;";
                 }
                 $("#info_sort").html("tri par " + name + arrow);
             },
             "formatNumber": function(toFormat) {
                 return toFormat.toString().replace(
                     /\B(?=(\d{3})+(?!\d))/g, " "
                 );
             },
             bInfo: dtParams.showEntryCount,
             fixedHeader: dtParams.fixedHeader,
             autoWidth: false,
             columnDefs: dtParams.columnDefs,
             pageLength: dtParams.pageLength,
             lengthMenu: dtParams.lengthMenu,
             /* Disable initial sort */
             aaSorting: dtParams.initialSort,
             /*https://datatables.net/reference/option/language*/
             language: {
                 "emptyTable": "{{ trans('backpack::crud.emptyTable') }}",
                 "info": "{{ trans('backpack::crud.info') }}",
                 "infoEmpty": "{{ trans('backpack::crud.infoEmpty') }}",
                 "infoFiltered": "{{ trans('backpack::crud.infoFiltered') }}",
                 "infoPostFix": "{{ trans('backpack::crud.infoPostFix') }}",
                 "thousands": "{{ trans('backpack::crud.thousands') }}",
                 "lengthMenu": "{{ trans('backpack::crud.lengthMenu') }}",
                 "loadingRecords": "{{ trans('backpack::crud.loadingRecords') }}",
                 "processing": "<img src='{{ asset('packages/backpack/base/img/spinner.svg') }}' alt='{{ trans('backpack::crud.processing') }}'>",
                 "search": "_INPUT_",
                 "searchPlaceholder": dtParams.search_text,
                 "zeroRecords": "{{ trans('backpack::crud.zeroRecords') }}",
                 "paginate": {
                     "first": "{{ trans('backpack::crud.paginate.first') }}",
                     "last": "{{ trans('backpack::crud.paginate.last') }}",
                     "next": ">",
                     "previous": "<"
                 },
                 "aria": {
                     "sortAscending": "{{ trans('backpack::crud.aria.sortAscending') }}",
                     "sortDescending": "{{ trans('backpack::crud.aria.sortDescending') }}"
                 },
                 "buttons": {
                     "copy": "{{ trans('backpack::crud.export.copy') }}",
                     "excel": "{{ trans('backpack::crud.export.excel') }}",
                     "csv": "{{ trans('backpack::crud.export.csv') }}",
                     "pdf": "{{ trans('backpack::crud.export.pdf') }}",
                     "print": "{{ trans('backpack::crud.export.print') }}",
                     "colvis": "{{ trans('backpack::crud.export.column_visibility') }}"
                 },
             },
             processing: true,
             serverSide: true,
             pagingType: dtParams.pagingType,
             searching: dtParams.searchable,
             ajax: {
                 "url": dtParams.route + '/search?{!! Request::getQueryString() !!}',
                 "type": "POST",
                 "data": {
                     "totalEntryCount": dtParams.totalEntryCount
                 },
                 headers: {
                     'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                 },
             },
             dom: "<'row hidden'<'col-sm-6'i><'col-sm-6 d-print-none'f>>" +
                 "<'row mb-2 '<'col-sm-12'tr>>" +
                 "<'row d-print-none '<'col-sm-12 col-md-4'l><'col-sm-0 col-md-1 text-center'B><'col-sm-12 col-md-7 'p>>",
             bPaginate: dtParams.paginate,
         };




         @if ($settings->getIsResponsive())
             dataTableConfiguration.responsive = {
                 details: {
                     // TODO : change because $.fn.dataTable is undefined
                     /*display: $.fn.dataTable.Responsive.display.modal({
                         header: function(row) {
                             // show the content of the first column
                             // as the modal header
                             // var data = row.data();
                             // return data[0];
                             return '';
                         }
                     }),*/
                     renderer: function(api, rowIdx, columns) {
                         var data = $.map(columns, function(col, i) {
                             var columnHeading = crud.table.columns().header()[col.columnIndex];

                             // hide columns that have VisibleInModal false
                             if ($(columnHeading).attr('data-visible-in-modal') == 'false') {
                                 return '';
                             }

                             return '<tr data-dt-row="' + col.rowIndex + '" data-dt-column="' + col
                                 .columnIndex + '">' +
                                 '<td style="vertical-align:top; border:none;"><strong>' + col.title
                                 .trim() + ':' + '<strong></td> ' +
                                 '<td style="padding-left:10px;padding-bottom:10px; border:none;">' +
                                 col.data + '</td>' +
                                 '</tr>';
                         }).join('');

                         return data ?
                             $('<table class="table table-striped mb-0">').append('<tbody>' + data +
                                 '</tbody>') :
                             false;
                     },
                 }
             };
             dataTableConfiguration.fixedHeader = false;
         @else
             dataTableConfiguration.responsive = false;
             dataTableConfiguration.scrollX = false;
         @endif

         @if ($settings->getIsPersistent())
             dataTableConfiguration.stateSave = true,
                 /*
                     if developer forced field into table 'visibleInTable => true' we make sure when saving datatables state
                     that it reflects the developer decision.
                 */

                 dataTableConfiguration.stateSaveParams = function(settings, data) {

                     localStorage.setItem(dtParams.pathslug + '_list_url_time', data.time);

                     data.columns.forEach(function(item, index) {
                         // TODO : this is disabled. How to get info from Crud Column
                         /*var columnHeading = crud.table.columns().header()[index];
                         if ($(columnHeading).attr('data-visible-in-table') == 'true') {
                             return item.visible = true;
                         }*/
                     });
                 },
                 @if ($settings->getPersistentTableDuration())
                     dataTableConfiguration.stateLoadParams = function(settings, data) {
                             var $saved_time = new Date(data.time);
                             var $current_date = new Date();

                             $saved_time.setMinutes($saved_time.getMinutes() +
                                 {{ $settings->getPersistentTableDuration() }});

                             //if the save time as expired we force datatabled to clear localStorage
                             if ($saved_time < $current_date) {
                                 if (localStorage.getItem(dtParams.pathslug + '_list_url')) {
                                     localStorage.removeItem(dtParams.pathslug + '_list_url');
                                 }
                                 if (localStorage.getItem(dtParams.pathslug + '_list_url_time')) {
                                     localStorage.removeItem(dtParams.pathslug + '_list_url_time');
                                 }
                                 return false;
                             }
                         },
                 @endif
         @endif

         window.crud.tables["{{ $settings->getTableId() }}"] = {
             exportButtons: JSON.parse('null'),
             functionsToRunOnDataTablesDrawEvent: [],
             addFunctionToDataTablesDrawEventQueue: function(functionName) {
                 if (this.functionsToRunOnDataTablesDrawEvent.indexOf(functionName) == -1) {
                     this.functionsToRunOnDataTablesDrawEvent.push(functionName);
                 }
             },
             responsiveToggle: function(dt) {
                 $(dt.table().header()).find('th').toggleClass('all');
                 dt.responsive.rebuild();
                 dt.responsive.recalc();
             },
             executeFunctionByName: function(str, args) {
                 if (typeof args === "undefined") {
                     args = ["{{ $settings->getTableId() }}"];
                 }

                 var arr = str.split('.');
                 var fn = window[arr[0]];

                 for (var i = 1; i < arr.length; i++) {
                     fn = fn[arr[i]];
                 }
                 fn.apply(window, args);
             },
             updateUrl: function(url) {
                 let urlStart = dtParams.route;
                 let urlEnd = url.replace(urlStart, '');
                 urlEnd = urlEnd.replace('/search', '');
                 let newUrl = urlStart + urlEnd;
                 let tmpUrl = newUrl.split("?")[0],
                     params_arr = [],
                     queryString = (newUrl.indexOf("?") !== -1) ? newUrl.split("?")[1] : false;

                 // exclude the persistent-table parameter from url
                 if (queryString !== false) {
                     params_arr = queryString.split("&");
                     for (let i = params_arr.length - 1; i >= 0; i--) {
                         let param = params_arr[i].split("=")[0];
                         if (param === 'persistent-table') {
                             params_arr.splice(i, 1);
                         }
                     }
                     newUrl = params_arr.length ? tmpUrl + "?" + params_arr.join("&") : tmpUrl;
                 }
                 window.history.pushState({}, '', newUrl);
                 localStorage.setItem(dtParams.pathslug + '_list_url', newUrl);
             },
             dataTableConfiguration: dataTableConfiguration,
         };
     </script>
 @endforeach