@extends('layouts.master')

@section('mainContent')
    <div class="page-wrapper">
        <div class="content">
            <div class="row">
                <div class="col-12">
                    <div class="page-header">
                        <h3>All Notification List</h3>
                        <ul>
                            <li class="text-primary">Notification Management </li>
                            <li><a href="javascript:;">Notification</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12 d-flex widget-path widget-service">
                    <div class="card">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-12">
                                    @if ($notification->isNotEmpty())
                                        <ul class="list-group">
                                            @foreach ($notification as $notify)
                                                @php
                                                    $nameParts = explode(' ', $notify->user_name);
                                                    $initials = '';
                                                    // Get the first letter of the first two words
                                                    if (!empty($nameParts[0])) {
                                                        $initials .= strtoupper($nameParts[0][0]);
                                                    }
                                                    if (!empty($nameParts[1])) {
                                                        $initials .= strtoupper($nameParts[1][0]);
                                                    }
                                                    // If initials are empty, set a default value
                                                    if (empty($initials)) {
                                                        $initials = 'N/A';
                                                    }
                                                    $notifyURL = $notify->link ? $notify->link : 'javascript:;';
                                                @endphp
                                                <li class="notification-message"
                                                    style="border-bottom: double; border-color: grey;">
                                                    <a href="{{ $notify->link }}" class="notify_link" style="color: black">
                                                        <div class="media d-flex mb-3 mt-3">
                                                            <div class="flex-avatar" style="align-items: start;"><span
                                                                    class="avatar-name-blk text-primary">{{ $initials }}</span>
                                                            </div>
                                                            <div class="media-body flex-grow-1" style="padding-left: 10px;">
                                                                <p class="noti-details">
                                                                    <span class="noti-title"
                                                                        style="color:#000000c7">{{ $notify->message }}</span>
                                                                </p>
                                                                <p class="noti-time mt-1">
                                                                    <span
                                                                        class="notification-time text-muted">{{ \Carbon\Carbon::parse($notify->created_at)->format('d M Y h:i A') }}</span>
                                                                </p>
                                                            </div>
                                                        </div>
                                                    </a>
                                                </li>
                                            @endforeach
                                        </ul>

                                        <!-- Pagination Links -->
                                        <div class="mt-5 mb-4">
                                            {{ $notification->links() }}
                                        </div>
                                    @else
                                        <div class="text-center"><b>No notification records found!</b></div>
                                    @endif
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <style>
            .hidden.sm\:flex-1.sm\:flex.sm\:items-center.sm\:justify-between {
                display: none !important
            }
            .flex.justify-between.flex-1.sm\:hidden {
                text-align: center;
            }
        </style>
    @endsection