@props(['data'])
<div class="notify-container mt-2">
    <div class="notify-btn-container position-relative">
        <a href="#" class="notify-btn">
            <i class="fa-regular fa-bell"></i>
        </a>
        <p class="notify-count {{ $data->count() > 0 ? 'd-flex': 'd-none' }}">{{ $data->count() }}</p>
    </div>

    <div class="notification-dropdown">
        <div class="notification-header">
            <h3>Notifications</h3>
            <span class="notification-count">{{ $data->count() }}</span>
        </div>
        @if ($data->isNotEmpty())

        <div class="notification-list">
            @foreach ($data as $item)
            <a href="{{route($item->redirect_url)}}" data-notification-id="{{$item->id}}">
                <div class="notification-item {{ $item->color == 'red' ? 'alert' : 'success' }} ">
                    <div class=" notification-icon">
                        <i class="fa-regular fa-bell"></i>
                    </div>
                    <div class="notification-content">
                        <p class="notification-title"> {{ $item->type }}</p>
                        <p class="notification-text mb-0">{{ $item->text }}</p>
                    </div>
                </div>
            </a>
            @endforeach

        </div>
        @endif

    </div>
</div>