@extends('frontend.layouts.app')
<style>
    .notification-list--read{
        background: background: #f6f6f6;
    }
    .notification-list--read {
  border-left: 2px solid #000;
  box-shadow: 6px 2px 8px -4px #000 !important;
}
.unreadbtn{
    margin: 20px 0px;
}
.unreadbtn a{
    padding: 8px 34px;
  border-radius: 8px;
  border: 1px solid #000;
  color: #000;
  transition: .2 ease all;
}
.unreadbtn a:hover{
    color: #fff;
    background: #000;
}
.notification-list_detail{
    padding: 10px 40px 0px 0px ;
}
</style>
@section('title', 'Digital Blood Hub - Notification')
@section('content')
<section class="section-50">
    <div class="container">
        <div class="notification-header">
            <h3 class="heading-line">Notifications <i class="fa fa-bell"></i></h3>
        </div>
        
        <div class="notification-ui_dd-content">
            <!-- Unread Notifications -->
            @foreach(auth()->user()->unreadnotifications as $notification)
                <div class="notification-list notification-list--unread">
                    <div class="notification-list_content">
                        <div class="notification-list_img">
                            <img src="{{ asset('frontend/assets/img/blood_request.png') }}" alt="user">
                        </div>
                        <div class="notification-list_detail">
                            <b>{{ isset($notification->data['name']) ? $notification->data['name'] : 'No name available' }}</b>
                            <p>{{ isset($notification->data['message']) ? $notification->data['message'] : 'No message available' }}</p>
                            <p class="text-muted"><small>{{ $notification->created_at->diffForHumans() }}</small></p>
                        </div>
                    </div>
                    <div class="notification-list_feature-img">
                        <div class="readbtn">
                            <a href="{{ route('detailPage', ['id' => $notification->blood_request_id]) }}">Detail</a>
                        </div>
                    </div>
                </div>
            @endforeach
            
            <!-- Read Notifications -->
            @foreach(auth()->user()->readnotifications as $notification)
                <div class="notification-list notification-list--read" >
                    <div class="notification-list_content">
                        <div class="notification-list_img">
                            <img src="{{ asset('frontend/assets/img/blood_request.png') }}" alt="user">
                        </div>
                        <div class="notification-list_detail">
                            <b>{{ isset($notification->data['name']) ? $notification->data['name'] : 'No name available' }}</b>
                            <p>{{ isset($notification->data['message']) ? $notification->data['message'] : 'No message available' }}</p>
                            <p class="text-muted"><small>{{ $notification->created_at->diffForHumans() }}</small></p>
                        </div>
                        <div class="unreadbtn">
                            <a href="{{ route('detailPage', ['id' => $notification->blood_request_id]) }}">Detail</a>
                        </div>

                    </div>
                </div>
            @endforeach
        </div>
        
    </div>
</section>
@endsection
@section('customJs')
<script>
    $(document).ready(function() {
        $.ajax({
            url: '{{ route("notifications.markAllAsRead") }}',
            type: 'POST',
            success: function(response) {
                console.log('All notifications marked as read');
            },
            error: function(xhr, status, error) {
                console.error('Error marking notifications as read:', error);
            }
        });
    });
</script>
@endsection