@once
@php( $name=setting('app_name') )
@prepend('js')

@endprepend
@push('css')
    <link rel="stylesheet" href="{{asset('vendor/dashboard/vendor/datatables.net-bs4/css/dataTables.bootstrap4.min.css')}}">
    <link rel="stylesheet" href="{{asset('vendor/dashboard/vendor/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css')}}">
    <link rel="stylesheet" href="{{asset('vendor/dashboard/vendor/datatables.net-select-bs4/css/select.bootstrap4.min.css')}}">
    <style>
        .dt-button.dropdown-item.buttons-columnVisibility.active{
            text-decoration: none;
            color: #fff;
            background-color: var(--blue);
        }
        .table th, .table td{
            padding: .5rem;
        }
        table.table-bordered.dataTable tbody th, table.table-bordered.dataTable tbody td{
            max-width: 200px !important;
        }
        table.dataTable tbody > tr.selected, table.dataTable tbody > tr > .selected{
            background-color: var(--secondary);
        }
        table.dataTable tbody tr.selected, table.dataTable tbody th.selected, table.dataTable tbody td.selected{
            color: #0a1421;
        }
        .page-item .page-link, .page-item span{
            width: 50px;
            height: 50px;
        }
        .dataTables_length{
            margin-top: 5px;
        }
    </style>
@endpush
@push('js')
    <script src="{{asset('vendor/dashboard/vendor/datatables.net/js/jquery.dataTables.min.js')}}"></script>
    <script src="{{asset('vendor/dashboard/vendor/datatables.net-bs4/js/dataTables.bootstrap4.min.js')}}"></script>
    <script src="{{asset('vendor/dashboard/vendor/datatables.net-buttons/js/dataTables.buttons.min.js')}}"></script>
    <script src="{{asset('vendor/dashboard/vendor/datatables.net-buttons-bs4/js/buttons.bootstrap4.min.js')}}"></script>
    <script src="{{asset('vendor/dashboard/vendor/datatables.net-buttons/js/buttons.flash.min.js')}}"></script>
    <script src="{{asset('vendor/dashboard/vendor/datatables.net-buttons/js/buttons.print.min.js')}}"></script>
    <script src="{{asset('vendor/dashboard/vendor/datatables.net-buttons/js/buttons.colVis.min.js')}}"></script>
    <script src="{{url('https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.63/pdfmake.min.js')}}"></script>
    <script src="{{url('https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.63/vfs_fonts.js')}}"></script>
    <script src="{{url('https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js')}}"></script>
    <script src="{{asset('vendor/dashboard/vendor/datatables.net-buttons/js/buttons.html5.min.js')}}"></script>
    <script src="{{asset('vendor/dashboard/vendor/datatables.net-select/js/dataTables.select.min.js')}}"></script>
    @if($attributes->get('deleteRoute'))
    <script src="{{asset('vendor/sweetalert/sweetalert.all.js')}}"></script>
    @endif
    <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-primary' });
        $.fn.dataTable.ext.buttons.reload = {
            text: 'Reload',
            action: function ( e, dt, node, config ) {
                dt.ajax.reload();
            }
        };
        $.extend(true, $.fn.dataTable.defaults, {
            language: {
                "decimal": ",",
                "thousands": ".",
                "sEmptyTable":     "@lang('pagination.sEmptyTable')",
                "sInfo":           "@lang('pagination.sInfo')",
                "sInfoEmpty":      "@lang('pagination.sInfoEmpty')",
                "sInfoFiltered":   "@lang('pagination.sInfoFiltered')",
                "sInfoPostFix":    "",
                "sInfoThousands":  ",",
                "sLengthMenu":     "@lang('pagination.sLengthMenu')",
                "sLoadingRecords": "@lang('pagination.sLoadingRecords')...",
                "sProcessing":     "@lang('pagination.sProcessing')...",
                "sSearch":         "@lang('pagination.sSearch'):",
                "sZeroRecords":    "@lang('pagination.sZeroRecords')",
                "oPaginate": {
                    "sFirst":    "@lang('pagination.sFirst')",
                    "sLast":     "@lang('pagination.sLast')",
                    "sNext":     "@lang('pagination.sNext')",
                    "sPrevious": "@lang('pagination.sPrevious')"
                },
                "oAria": {
                    "sSortAscending":  ": @lang('pagination.sSortAscending')",
                    "sSortDescending": ": @lang('pagination.sSortDescending')"
                }
            },
            responsive: true,
            lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
            order: [],
            scrollX: true,
            pageLength: parseInt('{{request('pageLength',10)}}'),
            search: {
                "smart": true
            },
            dom: 'Bfrtlip',
            // dom: '<"top"Bf><"bottom"tpli><"clear"r>',
            pagingType: "full_numbers",
            buttons: [
                {
                    extend:"collection",
                    text:"@lang('main.export')",
                    buttons:[
                        {
                            extend: 'print',
                            text:"<i class='fa fa-print'></i> @lang('main.print')",
                            className:'col-md-12',
                            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-files-o"></i> @lang('main.copy')',
                            className:'col-md-12',
                            exportOptions: {
                                modifier: {
                                    page: 'current'
                                },
                                columns: ':visible'
                            }
                        },
                        {
                            extend: 'csvHtml5',
                            text: '<i class="fa fa-text-o"></i> @lang('main.csv')',
                            className:'col-md-12',
                            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> @lang('main.excel')',
                            className:'col-md-12',
                            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> @lang('main.pdf')',
                            className:'col-md-12',
                            filename: '{{((!$name || empty($name))?config('app.name'):$name).'_'.time()}}',
                            download: 'open',
                            exportOptions: {
                                modifier: {
                                    page: 'current'
                                },
                                columns: ':visible'
                            }
                        },
                        {
                            text: 'JSON',
                            action: function ( e, dt, button, config ) {
                                var data = dt.buttons.exportData();

                                $.fn.dataTable.fileSave(
                                    new Blob( [ JSON.stringify( data ) ] ),
                                    '{{((!$name || empty($name))?config('app.name'):$name).'_'.time()}}.json'
                                );
                            }
                        },
                    ]
                },
                {
                    extend: 'collection',
                    text:"@lang('main.visibility')",
                    buttons:[
                        'columnsToggle',
                        {
                            extend: 'colvisRestore',
                            text:" @lang('main.restore') "
                        },
                    ]
                },
                @if($attributes->get('deleteRoute'))
                {
                    text: '@lang('main.delete')',
                    action: function ( e, dt, node, config ) {
                        let ids =[];
                        dt.rows('.selected').data().map((data)=>ids.push(data.id))
                        if (ids.length && confirm(` Are you sure delete (${ids.length}) ? `)){
                            $.ajax({
                                url:'{{$attributes->get('deleteRoute')}}',
                                method:'POST',
                                data:{ids},
                                success:function (res) {
                                    Swal.fire('@lang('main.manger')',res,'success');
                                    dt.row('.selected').remove().draw(true);
                                    dt.ajax.reload();
                                    console.log(res);
                                },
                                error:function (error) {

                                    console.log(error);
                                }
                            })

                        }else{
                            alert(' no rows ')
                        }
                    }
                },

                @endif
                {
                    extend: 'reload',
                    text: '@lang('main.reload')',
                },

            ],
        });

    </script>

    <script type="text/javascript">


        (function(window,$){

            // Setup - add a text input to each footer cell
            $('#{{$id}} thead tr').clone(true).appendTo( '#{{$id}} thead' );
            $('#{{$id}} thead tr:eq(1) th').each( function (i) {
                var title = $(this).text();
                $(this).html( '<input type="text" placeholder="@lang('main.search') '+title+'" />' );

                $( 'input', this ).on( 'keyup change', function () {
                    if ( window.LaravelDataTables["{{$id}}"].column(i).search() !== this.value ) {
                        window.LaravelDataTables["{{$id}}"]
                            .column(i)
                            .search( this.value )
                            .draw();
                    }
                } );
            } );


            window.LaravelDataTables = window.LaravelDataTables||{};

            $.fn.dataTable.ext.classes.sPageButton = 'page-item';
            $.fn.dataTable.ext.errMode = 'throw';


            window.LaravelDataTables["{{$id}}"]=$("#{{$id}}").DataTable({
                serverSide:true,
                processing:true,
                ajax: { url:"{{$route}}","type":"GET", },
                columns:[
                    @foreach ($columns as $column)
                        {"data":"{{$column}}","name":"{{$column}}","title":"{{__('main.'.$column)}}","orderable":true,"searchable":true},
                    @endforeach
                ],
                deferRender: true,
                searching: true,
                ordering: true,
                stateSave: true,
                order:[[0,"desc"]],
                autoWidth: true,
                orderCellsTop: true,
                fixedHeader: true,
            });
            $('#{{$id}} tbody').on( 'click', 'tr', function () {
                $(this).toggleClass('selected');
            } );

        })
        (window,jQuery);

        function toggleActiveStatus (e) {
            var element =$(e);
            var url =element.data('route');
            $.ajax({
                url,
                method:"POST"
            })
        }
    </script>

@endpush
@endonce
<div>
    <table class="table table-bordered w-100 data-table" id="{{$id}}">
        <thead>
        <tr>
            @foreach ($columns as $column)
                <th>{{__('main.'.$column)}}</th>
            @endforeach
        </tr>
        </thead>
    </table>
</div>