@once
@php( $name=settings('app_name',config('app.name')) )
@prepend('js')

@endprepend
@push('css')
    @if (app()->getLocale()=="ar")
        <link rel="stylesheet" href="{{asset('backEnd/assets/datatables.net-bs4/css/dataTables.bootstrap4.rtl.min.css')}}">
        <link rel="stylesheet" href="{{asset('backEnd/assets/datatables.net-buttons-bs4/css/buttons.bootstrap4.rtl.min.css')}}">
        <link rel="stylesheet" href="{{asset('backEnd/assets/datatables.net-select-bs4/css/select.bootstrap4.rtl.min.css')}}">
    @else
        <link rel="stylesheet" href="{{asset('backEnd/assets/datatables.net-bs4/css/dataTables.bootstrap4.min.css')}}">
        <link rel="stylesheet" href="{{asset('backEnd/assets/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css')}}">
        <link rel="stylesheet" href="{{asset('backEnd/assets/datatables.net-select-bs4/css/select.bootstrap4.min.css')}}">
    @endif
    <style>
        table{
            margin: 0 auto;
            width: 100%;
            clear: both;
            border-collapse: collapse;
            table-layout: fixed; // ***********add this
            word-wrap:break-word; // ***********and this
        }
        .btn-dimlight.active.focus
        , .btn-dimlight.active:focus
        , .btn-dimlight.active:hover
        , .btn-dimlight:active.focus
        , .btn-dimlight:active:focus
        , .btn-dimlight:active:hover
        , .open > .btn-dimlight.dropdown-toggle.focus
        , .open > .btn-dimlight.dropdown-toggle:focus
        , .open > .btn-dimlight.dropdown-toggle:hover
        ,.btn-dimlight.active
        , .btn-dimlight:active
        , .open > .btn-dimlight.dropdown-toggle
        , .btn-dimlight:hover ,
        .btn-dimlight.focus, .btn-dimlight:focus{
            color: #fff;
            background-color: #3b9da8;
            border-color: #3b9da8;
        }
        .btn-dimlight {
            color: #fff;
            background-color: #40b8c3;
            border-color: #40b8c3;
        }

        .dt-button.dropdown-item.buttons-columnVisibility.active{
            text-decoration: none;
            color: #aaa;
            /*background-color: #40b3be;*/
            background-color: transparent;
            /*background-color: rgba(0
            , 0, 0, .065);*/
        }
        .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: #fafafa;
        }
        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: 70px;
            height: 50px;
        }
        .dataTables_length{
            margin-top: 5px;
        }
    </style>
@endpush
@endonce

@push('js')
    @once
    <script src="{{asset('backEnd/assets/datatables.net/js/jquery.dataTables.min.js')}}"></script>
    <script src="{{asset('backEnd/assets/datatables.net-bs4/js/dataTables.bootstrap4.min.js')}}"></script>
    <script src="{{asset('backEnd/assets/datatables.net-buttons/js/dataTables.buttons.min.js')}}"></script>
    <script src="{{asset('backEnd/assets/datatables.net-buttons-bs4/js/buttons.bootstrap4.min.js')}}"></script>
    <script src="{{asset('backEnd/assets/datatables.net-buttons/js/buttons.flash.min.js')}}"></script>
    <script src="{{asset('backEnd/assets/datatables.net-buttons/js/buttons.print.min.js')}}"></script>
    <script src="{{asset('backEnd/assets/datatables.net-buttons/js/buttons.colVis.min.js')}}"></script>
    <script src="{{asset('https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.63/pdfmake.min.js')}}"></script>
    <script src="{{asset('https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.63/vfs_fonts.js')}}"></script>
    <script src="{{asset('https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js')}}"></script>
    <script src="{{asset('backEnd/assets/datatables.net-buttons/js/buttons.html5.min.js')}}"></script>
    <script src="{{asset('backEnd/assets/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-dimlight' });
        $.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,action:'delete'},
                                success:function ({ message }) {
                                    if (message){
                                        Swal.fire('@lang('main.admin')',message,'success');
                                    }
                                    dt.row('.selected').remove().draw(true);
                                    dt.ajax.reload();
                                    console.log(res);
                                },
                                error:function (error) {

                                    console.log(error);
                                }
                            })

                        }else{
                            alert(' no rows ')
                        }
                    }
                },
                @endif
                @if($attributes->get('activeRoute'))
                {
                    text: '@lang('main.active')',
                    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 active (${ids.length}) ? `)){
                            $.ajax({
                                url:'{{$attributes->get('activeRoute')}}',
                                method:'POST',
                                data:{ids,action:'activate'},
                                success:function ({ message }) {
                                    if (message){
                                        Swal.fire('@lang('main.admin')',message,'success');
                                    }
                                    dt.row('.selected').remove().draw(true);
                                    dt.ajax.reload();
                                },
                                error:function (error) {

                                    console.log(error);
                                }
                            })

                        }else{
                            alert(' no rows ')
                        }
                    }
                },
                @endif
                @if($attributes->get('inactiveRoute'))
                {
                    text: '@lang('main.inactive')',
                    action: function ( e, dt, node, config ) {
                        var ids =[];
                        dt.rows('.selected').data().map((data)=>ids.push(data.id))
                        console.log(dt.rows('.selected'))
                        console.log(ids)
                        if (ids.length && confirm(` Are you sure Inactive (${ids.length}) ? `)){
                            $.ajax({
                                url:'{{$attributes->get('inactiveRoute')}}',
                                method:'POST',
                                data:{ids,action:'deactivate'},
                                success:function ({ message }) {
                                    if (message){
                                        Swal.fire('@lang('main.admin')',message,'success');
                                    }
                                    dt.row('.selected').remove().draw(true);
                                    dt.ajax.reload();
                                    console.log(res);
                                },
                                error:function (error) {

                                    console.log(error);
                                }
                            })

                        }else{
                            alert(' no rows ')
                        }
                    }
                },
                @endif
                @if($attributes->get('createRoute'))
                {
                    text: '@lang('main.create')',
                    action: function ( e, dt, node, config ) {
                        window.location = "{{ $attributes->get('createRoute') }}";
                    }
                },
                @endif
                {
                    extend: 'selectAll',
                    text: '@lang('main.select_all')',
                },
                {
                    extend: 'selectNone',
                    text: '@lang('main.select_none')',
                },
                {
                    extend: 'reload',
                    text: '@lang('main.reload')',
                },

            ],
        });

    </script>
    @endonce
    <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();
                if ("@lang('main.action')"==title){
                    return title;
                }
                $(this).html( '<input style="width:100%" 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)
                        @json($column->toArray()),
                    @endforeach
                ],
                initComplete: function () {
                    this.api().columns().every( function () {
                        if (!['id','action','image','description','content'].includes($(this.footer()).data('name'))){
                            var column = this;

                            var select = $('<select class="form-control"><option value="">@lang('main.select')</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 ) {
                                let value  = (d == '@lang('main.active')') ?1 : ( ( '@lang('main.inactive')' == d )? 0 :d)
                                select.append( '<option value="'+value+'">'+d+'</option>' )
                            } );
                        }
                    } );
                },
                deferRender: true,
                searching: true,
                ordering: true,
                // stateSave: true,
                order:[[0,"desc"]],
                autoWidth: false,
                orderCellsTop: true,
                fixedHeader: true,
            });
            $('#{{$id}} tbody').on( 'click', 'tr', function () {
                $(this).toggleClass('selected');
            } );

        })
        (window,jQuery);
    </script>

@endpush

<div>
    <table class="table table-sm table-bordered table-responsive  data-table" style="width: 100%;" id="{{$id}}">
        <thead>
        <tr>
            @foreach ($columns as $column)
                <th>{{ $column->getTitle() }}</th>
            @endforeach
        </tr>
        </thead>
        <tfoot>
        <tr>
            @foreach ($columns as $column)
                <th data-name="{{ $column->getName() }}">{{ $column->getTitle() }}</th>
            @endforeach
        </tr>
        </tfoot>
    </table>
</div>