@if ($items->isNotEmpty())
    <div class="filter-element flex flex-col justify-center lg:flex-row lg:justify-start lg:items-center gap-x-2 gap-y-1">
        <div class="filter-title">
            <h3 class="text-md text-gray-900 font-medium after:content-[':']">{{ $title }}</h3>
        </div>
        <div class="filter-body {{ $name }}">
            <ul class="flex flex-wrap gap-x-1 gap-y-1">
                @foreach ($items as $item)
                    <li>
                        <label for="{{ $name . '_' . $item->id }}" class="transition ease-in duration-200 bg-white border border-gray-200 shadow-md shadow-gray-200/60 rounded-md px-2.5 py-1.5 inline-block cursor-pointer text-xs text-center font-medium text-gray-600 hover:bg-gray-50 has-[:checked]:bg-main has-[:checked]:text-white">
                            <input class="hidden" type="radio" name="{{ $name }}" id="{{ $name . '_' . $item->id }}" value="{{ $item->id }}" @checked($item->id == $selected || $item->name == $selected)>
                            <span>{{ $item->title ?? $item->name }}</span>
                            @if($name == 'month')
                                <i class="bx bx-check text-white bg-green-500 w-4 h-4 rounded-md paid-check" id="{{ $item->id }}" style="{{ isset($paidmonths) && in_array($item->id, $paidmonths) ? '' : 'display: none' }}"></i>
                            @endif
                        </label>
                    </li>
                @endforeach
            </ul>
        </div>
    </div>
@endif