@if($user)
    @include('layout.notification')
@endif
@foreach ($notificationTypes as $type => $id)
    <div class="tab-pane fade show {{ $loop->first ? 'active' : '' }}" id="{{ $id }}" role="tabpanel">
        <div class="scroll-y mh-325px my-5 px-8">
            @if(!empty($notifications[$type]) && count($notifications[$type]) > 0)
                @foreach ($notifications[$type] as $notification)
                    @php
                        $notificationBackground = match($notification->type) {
                            'info' => 'bg-primary',
                            'warning' => 'bg-warning',
                                default => 'bg-danger',
                        };
                    @endphp
                    <div class="d-flex flex-stack py-4 px-2 {{ $notification->is_read == 0 ? 'bg-secondary' : '' }}">
                        <div class="d-flex align-items-center">
                            <div class="symbol symbol-35px me-4">
                                <span class="symbol-label bg-light-primary {{$notificationBackground}}">
                                    <i class="fa-solid fa-circle-info"></i>
                                </span>
                            </div>
                            <div class="mb-0 me-2">
                                <a href="{{ route('user-notifications.show', encryptStr($notification->id)) }}" class="fs-6 text-gray-800 text-hover-primary fw-bold">
                                    {{ Str::limit($notification->title, 50) }}
                                </a>
                                @if($notification->attachment)
                                    <i class="fa fa-paperclip text-dark fs-5"></i>
                                @endif
                                <div class="text-gray-400 fs-7">{{ formatDate($notification->created_at,"dt","default") }}</div>
                            </div>
                        </div>
                        @if($notification->is_read == 0)
                            <i class="fas fa-circle fa-2x fa-primary"></i>
                        @endif
                    </div>
                @endforeach
            @else
                <div class="d-flex flex-stack py-4 px-2">
                    <div class="d-flex align-items-center">No data found.</div>
                </div>
            @endif
        </div>
    </div>
@endforeach
<div class="py-3 text-center border-top">
    <a href="/user-notifications/notification/view-all" class="btn btn-color-gray-600 btn-active-color-primary">View All<i class="fa fa-arrow-right fs-5 fs-5"></i></a>
</div>