@php
    $notifications = $notifications ?? [];
@endphp
<li class="dropdown-center">
    <a class="position-relative btn-icon btn-ghost-secondary btn rounded-circle" href="#"
        role="button" data-bs-toggle="dropdown" aria-expanded="false">
        <i class="bi bi-bell fs-5"></i>
        <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger mt-2 ms-n2">
            {{ count($notifications) }}
            <span class="visually-hidden">unread messages</span>
        </span>
    </a>
    <div class="dropdown-menu dropdown-menu-end dropdown-menu-lg p-0 border-0">
        <div class="border-bottom p-5 d-flex justify-content-between align-items-center">
            <div>
                <h5 class="mb-1">Notifications</h5>
                <p class="mb-0 small">You have {{ count($notifications) }} unread messages</p>
            </div>
            @if (count($notifications) > 0)
                <a href="#!" class="text-muted">
                    <a href="#" class="btn btn-ghost-secondary btn-icon rounded-circle"
                        id="markAllAsRead"
                        data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Mark all as read">
                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"
                            fill="currentColor" class="bi bi-check2-all text-success" viewBox="0 0 16 16">
                            <path
                                d="M12.354 4.354a.5.5 0 0 0-.708-.708L5 10.293 1.854 7.146a.5.5 0 1 0-.708.708l3.5 3.5a.5.5 0 0 0 .708 0l7-7zm-4.208 7-.896-.897.707-.707.543.543 6.646-6.647a.5.5 0 0 1 .708.708l-7 7a.5.5 0 0 1-.708 0z" />
                            <path d="m5.354 7.146.896.897-.707.707-.897-.896a.5.5 0 1 1 .708-.708z" />
                        </svg>
                    </a>
                </a>
            @endif
        </div>
        <div data-simplebar style="height: 250px;">
            <!-- List group -->
            <ul class="list-group list-group-flush notification-list-scroll fs-6">
                @if (count($notifications) > 0)
                    @foreach($notifications as $notification)
                        <!-- List group item -->
                        <li class="list-group-item px-5 py-4 list-group-item-action">
                            @php
                                $url = $notification->url ?? '#';
                            @endphp
                            <a href="{{ $url }}" class="text-muted">
                                <div class="d-flex">
                                    <img src="{{ asset($notification->avatar) }}" alt="" class="avatar avatar-md rounded-circle ">
                                    <div class="ms-4">
                                        <p class="mb-1">
                                            @if ($notification->type == 'message')
                                                <span class="text-dark">{{ $notification->recepient->name }}</span>
                                            @endif
                                            <span>{{ $notification->message }}</span>
                                        </p>
                                        <span><svg xmlns="http://www.w3.org/2000/svg" width="12"
                                                height="12" fill="currentColor" class="bi bi-clock text-muted" viewBox="0 0 16 16">
                                                <path
                                                    d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z" />
                                                <path
                                                    d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z" />
                                            </svg><small class="ms-2">{{ $notification->created_at->diffForHumans() }}</small></span>
                                    </div>
                                </div>
                            </a>
                        </li>
                    @endforeach
                @else
                    <li class="list-group-item px-5 py-4 list-group-item-action active">
                        <a href="#!" class="text-muted">
                            <div class="d-flex">
                                <div class="ms-4">
                                    <p class="mb-1">
                                        <span class="text-dark">No Notifications</span>
                                    </p>
                                </div>
                            </div>
                        </a>
                    </li>
                @endif
            </ul>
        </div>
        <div class="border-top px-5 py-4 text-center">
            <a href="#!" class=" ">
                View All
            </a>
        </div>
    </div>
</li>

@push('scripts')
<script>
    $(document).ready(function() {
        $('#markAllAsRead').click(function(e) {
            e.preventDefault();
            $.ajax({
                url: "{{ route('front.user.notification.markAllAsRead') }}",
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}"
                },
                success: function(response) {
                    myToast.show('success', response.message);
                    setTimeout(function() {
                        location.reload();
                    }, 1000);
                },
                error: function(error) {
                    myToast.show('error', error.responseJSON.message);
                }
            });
        });
    });
</script>
@endpush