  @forelse($notifications as $key => $notification)
      @php
          $route = null;

          $notificationId = encrypt($notification->id);
          $targetId = encrypt($notification->target_id);

          // STUDENT ROUTES
          if ($notification->role == 'student' && (!isset($notification->admin_notification) || $notification->admin_notification == 0)) {
              if ($notification->notification_type == 'booking_request') {
                  $route = route('student.bookingRequest.detail', [$targetId, 'notificationId' => $notificationId]);
              } elseif (
                  in_array($notification->notification_type, ['session_reminder', 'session_reschedule_response','sessions'])
              ) {
                  $route = route('student.sessions', [$targetId, 'notificationId' => $notificationId]);
              } elseif ($notification->notification_type == 'dispute') {
                  $route = route('student.supportAndDispute', [$targetId, 'notificationId' => $notificationId]);
              }
          }

          // TUTOR ROUTES
          elseif ($notification->role == 'tutor' && (!isset($notification->admin_notification) || $notification->admin_notification == 0)) {
              if ($notification->notification_type == 'booking_request') {
                  $route = route('tutor.booking.booking-detail', [$targetId, 'notificationId' => $notificationId]);
              } elseif ($notification->notification_type == 'session_reminder') {
                  $route = route('tutor.sessions', [$targetId, 'notificationId' => $notificationId]);
              } elseif ($notification->notification_type == 'session_reschedule_request') {
                  $route = route('tutor.session.reschedule.request', [$targetId, 'notificationId' => $notificationId]);
              } elseif ($notification->notification_type == 'dispute') {
                  $route = route('tutor.supportAndDispute', [$targetId, 'notificationId' => $notificationId]);
              }
               elseif ($notification->notification_type == 'payout_request') {
                  $route = route('tutor.earningsAndPayout', [$targetId, 'notificationId' => $notificationId]);
              }
          } elseif ($notification->role == 'admin' && (!isset($notification->admin_notification) || $notification->admin_notification == 0)) {
              if ($notification->notification_type == 'dispute') {
                  $route = route('admin.disputeDetail', [$targetId, 'notificationId' => $notificationId]);
              }
              if ($notification->notification_type == 'payout_request') {
                  $route = route('admin.payoutManagement', [$targetId, 'notificationId' => $notificationId]);
              }
          } elseif ($notification->admin_notification == 1) {
              $route = '#';
          }
          if (isset($notification->participants)) {
              $participant = $notification->participants->first(); // current user participant
              $isRead = $participant ? $participant->is_read : 0; // from database
          } else {
              $isRead = false; // from socket
          }
      @endphp
          <div onclick="window.location.href='{{ $route }}'"
              class="rounded-lg hover:bg-gray-50 transition cursor-pointer border border-gray-100 {{ $isRead ? 'read' : 'unread' }} transition ">

              <div class="flex items-start gap-3 p-4">

                  <div
                      class="flex-shrink-0 w-10 h-10 bg-indigo-100 text-[#1CD8C4] rounded-full flex items-center justify-center">
                      <i class="fa-solid fa-bell"></i>
                  </div>

                  <div class="flex-1">
                      <p class="font-medium text-[#133754]">
                          {{ $notification->notification_title }}
                      </p>

                      <p class="text-sm text-[#3B3B3B] font-normal">
                          {!! $notification->notification_body !!}
                          
                      </p>

                      <p class="text-xs text-gray-400 mt-1">
                          {{-- {{ $notification->created_at->diffForHumans() }} --}}
                          {{ \Carbon\Carbon::parse($notification->created_at)->diffForHumans() }}
                      </p>
                  </div>

              </div>

          </div>
  





  @empty
      <p class="text-center text-gray-400">No notifications</p>
  @endforelse
