<div wire:poll.visible>
    <div class="grid auto-rows-min gap-4 md:grid-cols-3">
        @if(Auth::user()->hasAnyRole('superadmin', 'admin', 'employee'))
            <div class="rounded-xl text-gray-900! dark:text-white">
                <x-mary-stat
                    title="Open Tickets"
                    value="{{ $open_count }}"
                    icon="o-chat-bubble-left-ellipsis"
                    color="text-primary dark:text-white"
                    class="!bg-white border border-neutral-200 rounded-lg shadow-sm p-8 dark:!text-white dark:!bg-gray-900 dark:border-neutral-700" />
            </div>
            <div class="rounded-xl text-gray-900! dark:text-white">
                <x-mary-stat
                    title="High Priority"
                    value="{{ $high_priority }}"
                    icon="o-shield-exclamation"
                    color="text-primary dark:text-white"
                    class="!bg-white border border-neutral-200 rounded-lg shadow-sm p-8 dark:!text-white dark:!bg-gray-900 dark:border-neutral-700" />
            </div>
            <div class="rounded-xl text-gray-900! dark:text-white">
                <x-mary-stat
                    title="Total Tickets"
                    value="{{ $all_count }}"
                    icon="o-envelope"
                    color="text-primary dark:text-white"
                    class="!bg-white border border-neutral-200 rounded-lg shadow-sm p-8 dark:!text-white dark:!bg-gray-900 dark:border-neutral-700" />
            </div>
        @else
            <div class="rounded-xl text-gray-900! dark:text-white">
                <x-mary-stat
                    title="Open"
                    value="{{ $open_count }}"
                    icon="o-chat-bubble-left-ellipsis"
                    color="text-primary dark:text-white"
                    class="!bg-white border border-neutral-200 rounded-lg shadow-sm p-8 dark:!text-white dark:!bg-gray-900 dark:border-neutral-700" />
            </div>
            <div class="rounded-xl text-gray-900! dark:text-white">
                <x-mary-stat
                    title="Closed"
                    value="{{ $all_closed }}"
                    icon="o-chat-bubble-left-right"
                    color="text-primary dark:text-white"
                    class="!bg-white border border-neutral-200 rounded-lg shadow-sm p-8 dark:!text-white dark:!bg-gray-900 dark:border-neutral-700" />
            </div>
            <div class="rounded-xl text-gray-900! dark:text-white">
                <x-mary-stat
                    title="Total Tickets"
                    value="{{ $all_count }}"
                    icon="o-envelope"
                    color="text-primary dark:text-white"
                    class="!bg-white border border-neutral-200 rounded-lg shadow-sm p-8 dark:!text-white dark:!bg-gray-900 dark:border-neutral-700" />
            </div>
        @endif
    </div>
</div>
