@extends('layouts.student')
{{-- @section('student-style')
@endsection --}}

@section('content')
    <!--App-Content-->
    <div class="app-content my-3 my-md-5">
        <div class="side-app">
            <x-page.header>All Notifications</x-page.header>
            <div class="mb-2 float-right">
                <a href="javascript:void(0)" id="mark-all" class="me-2 btn btn-primary mt-1"><i class="fa fa-right me-2"></i>Mark All As Read</a>
            </div>
            <div class="row">
                <div class="col-lg-12" id="external-events-list">
                    <div class="card">

                        <div class="card-body">
                            @forelse (auth()->user()->unreadNotifications->take(10) as $item)
                            <div class="media  mt-2 p-5 border br-7 mark-as-read">
                                <div class="d-flex me-3">
                                    @if ($item->type == 'App\Notifications\MeetingNotification')
                                    <div class="notify-img">
                                        <i class="fa fa-camera"></i>
                                    </div>
                                    @elseif ($item->type == 'App\Notifications\WalletTransactions')
                                    <div class="notify-img">
                                     <i class="fa fa-money"></i>
                                    </div>
                                    @endif
                                </div>
                                <div class="media-body">
                                    <h4 class="mt-0 mb-1 font-weight-semibold">{{$item->data['title']}}</h4>
                                    <small class="text-muted fs-14">
                                        <i class="fa fa-clock-o"></i>
                                        {{$item->created_at->diffForHumans()}}
                                    </small>
                                    <p class="font-13 fs-15 mb-2 mt-2">
                                        {{$item->data['body']}}
                                    </p>
                                </div>
                            </div>
                            @empty
                            <p class="text-center">There are no notifications</p>
                            @endforelse
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('student-js')
<script>
    function sendMarkRequest(id = null) {
        return $.ajax("{{ route('student.markNotifications') }}", {
            method: 'POST',
            headers: {
               'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: {

                id
            }
        });
    }

    // $('.mark-as-read').click(function() {
    //     let request = sendMarkRequest($(this).data('id'));
    //     request.done(() => {
    //                 notif({
    //                 type: "success",
    //                 msg: "Notification marked as read",
    //                 position: "center",
    //                 opacity: 0.8,
    //                 autohide: true,
    //                 multiline:true,
    //                 fade:true,
    //                 });
    //                 $(this).remove()
    //                 // $('.notification-count').html(parseInt($('.notification-count').html(), 10)-1)

    //     });
    // });

    $('#mark-all').click(function() {
            let request = sendMarkRequest();
            request.done(() => {
                notif({
                        type: "success",
                        msg: "All Notifications Marked As Read",
                        position: "center",
                        opacity: 0.8,
                        autohide: true,
                        multiline:true,
                        fade:true,
                        });
                $('.media').remove()
                $('.notification-count').text('0')
                $(this).remove()
            })
        });
</script>
@endsection