@extends("Admin.template" ,["table"=>true])
@section("content")

    <!-- Page header -->
    <div class="page-header page-header-light">
        <div class="page-header-content header-elements-md-inline">
            <div class="page-title d-flex">
                <h4><i class="icon-arrow-right6 mr-2"></i> <span class="font-weight-semibold">
                  {{__('messages.notifications')}}  </span> - {{__('messages.notifications_index')}}  </h4>
                <a href="#" class="header-elements-toggle text-default d-md-none">
                    <i class="icon-more">
                    </i>
                </a>
            </div>
        </div>
    </div>
    <!-- /page header -->



    <div class="content">
        <div class="card">
            <div class="card-header header-elements-inline">
                <h5 class="card-title"> {{__('messages.notifications_index')}} </h5>
                <div class="header-elements">
                    <div class="list-icons">
                        <a class="list-icons-item" data-action="collapse"></a>
                        <a class="list-icons-item" data-action="reload"></a>
                    </div>
                </div>
            </div>
            <div class="table-responsive">
                <table class=" table datatable-list">
                    <thead>
                    <tr>
                        <th> {{__('messages.en_title')}}  </th>
                        <th> {{__('messages.ar_title')}}  </th>
                        <th> {{__('messages.en_body')}}  </th>
                        <th> {{__('messages.ar_body')}}  </th>


                        <th>  {{__('messages.screen')}}</th>

                        <th>  {{__('messages.target')}}</th>
                        <th>  {{__('messages.device_type')}}</th>
                        <th>{{__('messages.created_at')}}</th>

                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
    <!-- /content area -->
@endsection
@section('scripts')
    <script type="text/javascript">
        var table;
        var DatatableDataSources = function () {

            // Setup module components
            // Basic Datatable examples
            var _componentDatatableDataSources = function () {
                if (!$().DataTable) {
                    console.warn('Warning - datatables.min.js is not loaded.');
                    return;
                }

                // Setting datatable defaults
                $.extend($.fn.dataTable.defaults, {
                    autoWidth: false,
                    dom: '<"datatable-header"fBl><"datatable-scroll-wrap"t><"datatable-footer"ip>',
                    language: {
                        search: '<span>{{__('messages.search')}}:</span> _INPUT_',
                        searchPlaceholder: '{{__('messages.searchPlaceholder')}}',
                        lengthMenu: '<span>{{__('messages.lengthMenu')}}:</span> _MENU_',

                        paginate: {
                            'first': 'First',
                            'last': 'Last',
                            'next': $('html').attr('dir') == 'rtl' ? '&larr;' : '&rarr;',
                            'previous': $('html').attr('dir') == 'rtl' ? '&rarr;' : '&larr;'
                        }
                    }
                });

            };




            return {
                init: function () {
                    _componentDatatableDataSources();
                }
            }
        }();
        // Initialize module
        document.addEventListener('DOMContentLoaded', function () {
            DatatableDataSources.init();
        });



        $(function () {
            table = $('.datatable-list').DataTable({
                buttons: {
                    buttons: [
                        {
                            extend: 'print',
                            text: '<i class="icon-printer mr-2"></i> {!! __('messages.print') !!}',
                            className: 'btn btn-light',
                            exportOptions: {
                                columns: ':visible'
                            }
                        },

                        {
                            extend: 'copyHtml5',
                            text: '<i class="icon-copy mr-2"></i> {!! __('messages.copyHtml5') !!}',
                            className: 'btn btn-light',
                            exportOptions: {
                                columns: [0, ':visible']
                            }
                        },
                        {
                            extend: 'excelHtml5',
                            text: '<i class="icon-file-excel mr-2"></i> {!! __('messages.excelHtml5') !!}',
                            className: 'btn btn-light',
                            exportOptions: {
                                columns: ':visible'
                            }
                        },
                        {
                            extend: 'pdfHtml5',
                            text: '<i class="icon-file-pdf mr-2"></i> {!! __('messages.pdfHtml5') !!}',
                            className: 'btn btn-light',
                            exportOptions: {
                                columns: [0, ':visible']
                            }
                        },
                        {
                            extend: 'colvis',
                            text: '<i class="icon-three-bars"></i>',
                            className: 'btn bg-blue btn-icon dropdown-toggle'
                        }
                    ]
                },
                processing: true,
                serverSide: true,
                responsive: true,
                "scrollX": true,
                fixedColumns: true,
                "deferRender": true,
                scrollY: 500,
                scrollCollapse: false,
                scroller: true,
                stateSave: true,
                ordering: true,
                pageLength: 25,
                //   timeout: 1000000000000,
                "autoWidth": false,
                order: [
                    [7, "desc"]
                ],
                ajax: '{{ route("notifications.index"  ) }}',
                columns: [
                    {data: 'en_title', name: 'en_title'},
                    {data: 'ar_title', name: 'ar_title'},
                    {data: 'en_body', name: 'en_body'},
                    {data: 'ar_body', name: 'ar_body'},
                    {data: 'screen', name: 'screen'},
                    {data: 'target', name: 'target', orderable: false, searchable: false},

                    {data: 'device_type', name: 'device_type'},
                    {data: 'created_at', name: 'created_at'},
                ]
            });
        });
    </script>
@endsection