@extends($activeTemplate . 'layouts.master')
@section('content')
    <div class="transaction-section padding-top padding-bottom">
        <div class="container">
            <div class="primary-bg item-rounded">
                <div class="float-end mb-3">
                    <button class="btn btn--base mt-3 me-3" id="markAllAsRead">@lang('Mark All as Read')</button>
                </div>
                <table class="deposite-table">
                    <thead class="custom--table">
                        <tr>
                            <th>@lang('User Name')</th>
                            <th>@lang('Description')</th>
                            <th>@lang('Time')</th>
                            <th>@lang('Action')</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($notifications as $item)
                            <tr>
                                <td>{{ $item->user->username }}</td>
                                <td>{{ __($item->title) }}</td>
                                <td>{{ showDateTime($item->created_at) }}</td>
                                <td>
                                    <button
                                        class="btn @if ($item->is_read == 1) btn--disabled @else btn--base @endif mark-as-read"
                                        data-id="{{ $item->id }}"
                                        @if ($item->is_read == 1) disabled @endif>@lang('Mark as Read')</button>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="100%">{{ __($emptyMessage) }}</td>
                            </tr>
                        @endforelse

                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection
@push('script')
    <script>
        $(document).ready(function() {
            'use strict';
            $('.mark-as-read').on('click', function() {
                var id = $(this).data('id');
                $.ajax({
                    url: "{{ route('user.notification.markAsRead') }}",
                    type: 'POST',
                    data: {
                        _token: "{{ csrf_token() }}",
                        id: id
                    },
                    success: function(response) {
                        if (response.success) {
                            location.reload();
                        }
                    }
                });
            });

            $('#markAllAsRead').on('click', function() {
                $.ajax({
                    url: "{{ route('user.notification.markAllAsRead') }}",
                    type: 'POST',
                    data: {
                        _token: "{{ csrf_token() }}"
                    },
                    success: function(response) {
                        if (response.success) {
                            location.reload();
                        }
                    }
                });
            });
        });
    </script>
@endpush
