@extends('admin.layout.layout')
@section('title',__('Notifications'))

@section('breadcrumbs')
<li class="breadcrumb-item pe-3 text-muted">{{ __('Notifications') }}</li>
@endsection

@section('content')
    <div class="post d-flex flex-column-fluid mb-8" id="kt_post">
        <!--begin::Container-->
        <div id="kt_content_container" class="container-xxl">
            <!--begin::Products-->
            <div class="card card-flush">
                <!--begin::Card header-->
                <div class="card-header align-items-center py-5 gap-2 gap-md-5">
                    <!--begin::Card title-->
                    <div class="card-title">
                        <!--begin::Search-->
                        <div class="d-flex align-items-center position-relative my-1">
                            @include('admin.data-table-header-ajax')
                        </div>
                        <!--end::Search-->
                    </div>
                    <!--end::Card title-->
                </div>
                <!--end::Card header-->
                <!--begin::Card body-->
                <div class="card-body pt-0">
                    <!--begin::Table-->
                    <div id="kt_ecommerce_sales_table_wrapper" class="dataTables_wrapper dt-bootstrap4 no-footer">
                        <div class="table-responsive">
                            <table class="table align-middle table-row-dashed fs-6 gy-5 dataTable no-footer"
                                id="kt_ecommerce_sales_table">
                                <!--begin::Table head-->
                                <thead>
                                    <!--begin::Table row-->
                                    <tr class="text-gray-400 fw-bolder fs-7 text-uppercase gs-0">
                                        <th class="sorting" style="width:30px;!important" tabindex="0"
                                            aria-controls="kt_ecommerce_sales_table" rowspan="1" colspan="1"
                                            aria-label="Id: activate to sort column ascending">{{ __('Id') }}</th>
                                        <th class="sorting" tabindex="0" style="width:120px;!important"
                                            aria-controls="kt_ecommerce_sales_table" rowspan="1" colspan="1"
                                            aria-label="Title: activate to sort column ascending">{{ __('Title') }}</th>
                                        <th class="sorting" style="width: 220px!important" tabindex="0"
                                            aria-controls="kt_ecommerce_sales_table" rowspan="1" colspan="1"
                                            aria-label="Message: activate to sort column ascending">{{ __('Message') }}</th>
                                        <th class="sorting" style="width:50px;!important" tabindex="0"
                                            aria-controls="kt_ecommerce_sales_table" rowspan="1" colspan="1"
                                            aria-label="Status: activate to sort column ascending">{{ __('Status') }}</th>
                                        <th class="sorting" tabindex="0" style="width:65px;!important"
                                            aria-controls="kt_ecommerce_sales_table" rowspan="1" colspan="1"
                                            aria-label="Date: activate to sort column ascending">{{ __('Date') }}</th>
                                        <th class="sorting text-center" tabindex="0" style="width:65px;!important"
                                            aria-controls="kt_ecommerce_sales_table" rowspan="1" colspan="1"
                                            aria-label="Read: activate to sort column ascending">{{ __('Read') }}</th>
                                    </tr>
                                    <!--end::Table row-->
                                </thead>
                                <!--end::Table head-->
                                <!--begin::Table body-->
                                <tbody class="fw-bold text-gray-600">

                                </tbody>
                                <!--end::Table body-->
                            </table>
                        </div>

                    </div>
                    <!--end::Table-->
                </div>
                <!--end::Card body-->
            </div>
            <!--end::Products-->
        </div>
        <!--end::Container-->
    </div>
@endsection

@push('scripts')
    <script>
        var table1 = $('#kt_ecommerce_sales_table').DataTable({
            serverSide: true,
            fixedHeader: true,
            processing: true,
            order: [[0,"asc"]],
            "columnDefs": [{"orderable": false,"targets": [0]}],
            ajax: {
                url: '{{ route('Admin.notifications-ajax-data-table') }}',
                data: function(d) {
                    d.searchText = $('#searchText').val();
                }
            },
            columns: [
                {data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false},
                {data: 'title', name: 'data', defaultContent: '-'},
                {data: 'message', name: 'data', defaultContent: '-'},
                {data: 'read_at', name: 'read_at', defaultContent: '-'},
                {data: 'created_at', name: 'created_at', defaultContent: '-'},
                {data: 'read', name: 'read_at', defaultContent: '-'},

            ], createdRow: function (row, data, index) {
                $(row).attr('id', 'row-' + data['id']);
            },
            buttons: [
                {extend: 'copyHtml5', className: 'buttons-copy', exportOptions: {columns: ':visible:not()'}},
                {extend: 'excelHtml5', className: 'buttons-excel', exportOptions: {columns: ':visible:not()'}},
                {extend: 'print', className: 'buttons-print', exportOptions: {columns: ':visible:not()'},customize: function(doc) { customizePrint(doc,'{{ app()->getLocale() }}'); }}
            ]
        });

        document.querySelectorAll('.export').forEach(function(el) {
            el.addEventListener('click', function () {
                const type = el.dataset.type;
                table1.button('.buttons-' + type).trigger();
            });
        });
        
        $('#searchText').on('keyup change', function () {
            table1.ajax.reload();
        });

        function changeStatus(notification_id)
        {
            var _token = $('meta[name="csrf-token"]').attr('content');
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
			$.ajax({
				type: 'POST',
                url: "{{ route('Admin.changeNotificationStatus', ':id') }}".replace(':id', notification_id),
				data: {
                    _token: '{{ csrf_token() }}'
                },
				success: function(cities)
				{
                    toastr.success('{{ __('Changed successfully') }}');
                    table1.ajax.reload(null,false);
				}, //end success
				error: function(xhr, ajaxOptions, thrownError) {}
			}); //end AJAX
        }
    </script>
@endpush