@extends('master.layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">{{ __('Dashboard') }}</div>
                @forelse($notifications as $notification)
                <div class="alert alert-success" role="alert">
                    [{{ $notification->created_at }}] User {{ $notification->data['first_name'] ?? '' }}
                    ({{ $notification->data['email'] ?? '' }}) has just registered.
                    <a href="#" class="float-right mark-as-read" data-id="{{ $notification->id }}">
                        Mark as read
                    </a>
                </div>

                @if($loop->last)
                <a href="#" id="mark-all">
                    Mark all as read
                </a>
                @endif
                @empty
                There are no new notifications
                @endforelse
                <div class="card-body">
                    @if (session('status'))
                    <div class="alert alert-success" role="alert">
                        {{ session('status') }}
                    </div>
                    @endif

                    {{ __('You are logged in as Admin!') }}
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('script')
<script>
function sendMarkRequest(id = null) {

    return $.ajax("{{ route('admin.markNotification') }}", {
        method: 'POST',
        data: {
            "_token": "{{ csrf_token() }}",
            "id": id
        }
    });
}
$(document).ready(function() {
    $('.mark-as-read').click(function() {
        let request = sendMarkRequest($(this).data('id'));
        request.done(() => {
            $(this).parents('div.alert').remove();
        });
    });
    $('#mark-all').click(function() {
        let request = sendMarkRequest();
        request.done(() => {
            $('div.alert').remove();
        })
    });
});
</script>
@endsection