@push('css')
    <link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet"/>
    <link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet"/>
    <link href="//cdn.datatables.net/buttons/1.6.2/css/buttons.bootstrap4.min.css" rel="stylesheet"/>
    <link href="https://cdn.datatables.net/select/1.3.0/css/select.bootstrap4.min.css" rel="stylesheet"/>
@endpush
@php( $name=config('app.name') )
@push('js')

    <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js"></script>

    <script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
    <script src="//cdn.datatables.net/buttons/1.6.2/js/buttons.bootstrap4.min.js"></script>
    <script src="https://cdn.datatables.net/select/1.3.0/js/select.bootstrap4.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.flash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.colVis.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.print.min.js"></script>
    <!--
    	initComplete: function () {
					this.api().columns().every( function () {
						var column = this;
						var select = $('<select class="form-control"><option value=""></option></select>')
						.appendTo( $(column.footer()).empty() )
						.on( 'change', function () {
							var val = $.fn.dataTable.util.escapeRegex(
								$(this).val()
								);

							column
							.search( val ? '^'+val+'$' : '', true, false )
							.draw();
						} );

						column.data().unique().sort().each( function ( d, j ) {
							select.append( '<option value="'+d+'">'+d+'</option>' )
						} );
					} );
				}
    -->
    <script>
        let languages = {
            'en': '{{asset('js/lang/en.json')}}',
            'ar': '{{asset('js/lang/ar.json')}}',
            'fr': '{{asset('js/lang/fr.json')}}',
        };
        $.extend(true, $.fn.dataTable.Buttons.defaults.dom.button, {className: 'btn btn-sm btn-danger'});
        $.extend(true, $.fn.dataTable.defaults, {
            language: {
                url: languages['{{ app()->getLocale() }}']
            },
            responsive: true,
            initComplete: function () {
                this.api().columns().every( function () {
                    var column = this;
                    var select = $('<select class="form-control"><option value=""></option></select>')
                        .appendTo( $(column.footer()).empty() )
                        .on( 'change', function () {
                            var val = $.fn.dataTable.util.escapeRegex(
                                $(this).val()
                            );

                            column
                                .search( val ? '^'+val+'$' : '', true, false )
                                .draw();
                        } );

                    column.data().unique().sort().each( function ( d, j ) {
                        select.append( '<option value="'+d+'">'+d+'</option>' )
                    } );
                } );
            },
            columnDefs: [
                //     {
                //         orderable: false,
                //         className: 'select-checkbox',
                //         targets: 0
                //     },
                {
                    orderable: false,
                    searchable: false,
                    targets: -1
                }
            ],
            lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
            // select: {
            //     style:    'multi+shift',
            //     selector: 'td:first-child'
            // },
            order: [],
            scrollX: true,
            pageLength: parseInt('{{request('pageLength',10)}}'),
            search: {
                "smart": true
            },
            dom: 'Bfrtlip',
            // dom: '<"top"Bf><"bottom"tpli><"clear"r>',
            pagingType: "full_numbers",
            // scrollY: 150,
            buttons: [
                {
                    extend: "collection",
                    text: "Export",
                    buttons: [
                        {
                            extend: 'print',
                            text: "<i class='fa fa-print'></i> Print",
                            className: 'col-md-12 my-1',
                            filename: '{{((!$name || empty($name))?config('app.name'):$name).'_'.time()}}',
                            exportOptions: {
                                modifier: {
                                    page: 'current'
                                },
                                columns: ':visible'
                            },
                            customize: function (win) {
                                $(win.document.body).find('table').addClass('display').css('font-size', '9px');
                                $(win.document.body).find('tr:nth-child(odd) td').each(function (index) {
                                    $(this).css('background-color', '#D0D0D0');
                                });
                                $(win.document.body).find('h1').css('text-align', 'center');
                            }
                        },
                        {
                            extend: 'copyHtml5',
                            text: '<i class="fa fa-clone"></i> Copy',
                            className: 'col-md-12 my-1',
                            exportOptions: {
                                modifier: {
                                    page: 'current'
                                },
                                columns: ':visible'
                            }
                        },
                        {
                            extend: 'csvHtml5',
                            text: '<i class="fa fa-file"></i> CSV',
                            className: 'col-md-12 my-1',
                            filename: '{{((!$name || empty($name))?config('app.name'):$name).'_'.time()}}',
                            exportOptions: {
                                modifier: {
                                    search: 'none'
                                },
                                columns: ':visible'
                            }
                        },
                        {
                            extend: 'excelHtml5',
                            text: '<i class="fa fa-file-excel"></i> excel',
                            className: 'col-md-12 my-1',
                            filename: '{{((!$name || empty($name))?config('app.name'):$name).'_'.time()}}',
                            exportOptions: {
                                modifier: {
                                    search: 'none'
                                },
                                columns: ':visible'
                            }
                        },

                        {
                            extend: 'pdfHtml5',
                            text: '<i class="fa fa-file-pdf"></i> PDF',
                            className: 'col-md-12 my-1',
                            filename: '{{((!$name || empty($name))?config('app.name'):$name).'_'.time()}}',
                            download: 'open',
                            exportOptions: {
                                modifier: {
                                    page: 'current'
                                },
                                columns: ':visible'
                            }
                        }
                    ]
                },
                {
                    extend: 'collection',
                    text: "Visibility ",
                    buttons: [
                        'columnsToggle',
                        'colvisRestore',
                    ]
                }

            ],
        });
    </script>
@endpush