@extends('layouts.app')
@section('content')
<section class="content">
    <div class="container-fluid">

        <div class="px-sm-4">
           
            <div class="row mt-2 mt-sm-3 align-items-end">
                <div class="col-md-7 col-10 mb-sm-0 mb-3">
                    <div class="top-head">
                        <h1>Notifications</h1>
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb mb-0">
                                <li class="breadcrumb-item"><a href="#">Home</a></li>
                                <li class="breadcrumb-item active" aria-current="page">Notifications</li>
                            </ol>
                        </nav>
                    </div>
                </div>
                @if($unreadCount > 0)
                <div class="col-md-5 text-sm-right text-left">
                    <h6 class="mark-readtext cursor-pointer" id="mark-all-read">Mark all as read</h6>
                </div>
                @endif
            </div>

            <div class="row mt-sm-4 mt-3 pb-sm-5">
                <div class="col-md-12">
                    @if($notifications)
                        @foreach($notifications as $notif)
                            @php
                                $createdAt = Carbon\Carbon::parse($notif->created_at);
                                $formattedDate = $createdAt->format('l, g:i A');
                                $redirectRoute = App\Helpers\CommonHelper::notificationRedirectRoute($notif->route, $notif->route_id);
                            @endphp
                            @if($notif->read_status == 'unread')
                            
                            <div class="yellow-notificationbox cursor-pointer" onclick="markAsRead({{$notif->id}},'{{$redirectRoute}}', true)">
                                <div class="row">
                                    <div class="col-md-10 col-10">
                                        <h5>{{$notif->body}}</h5>
                                        <h6>{{$formattedDate}} <i class="fa fa-circle" aria-hidden="true"></i> {{$notif->user ? $notif->user->user_type : ''}} </h6>
                                    </div>
                                    <div class="col-md-2 col-2">
                                        <div class="bell-boxnew">
                                            <i class="fa fa-bell" aria-hidden="true"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            @else
                            <a href="{{$redirectRoute}}">
                                <div class="yellow-notificationbox gray mt-sm-3 mt-2">
                                    <div class="row">
                                        <div class="col-md-12 col-12">
                                            <h5>{{$notif->body}}</h5>
                                            <h6>{{$formattedDate}}<i class="fa fa-circle" aria-hidden="true"></i> {{$notif->user ? $notif->user->user_type : ''}} </h6>
                                        </div>
                                    </div>
                                </div>
                            </a>
                            @endif
                        @endforeach
                    @endif
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@section('scripts')
<script>
    // Mark All Notification as Read
    var btn = document.querySelector('#mark-all-read');
        btn.addEventListener('click', function(e){
            $.ajax({
                url  : "{{url('api/notification/read-all')}}",
                type : "GET",
                
                success	: function(response){
                    console.log("response:",response);
                    if(response.status == 200){
                        Swal.fire({
                            title: 'Success',
                            text: response.message,
                            type: 'success',
                        }).then(function(){
                                location.reload();
                        });
				    }
                }
            })
        })
</script>
@endsection