{{-- A good traveler has no fixed plans and is not intent upon arriving. --}}

<div
    class="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white dark:bg-slate-800 shadow-lg rounded-sm border border-slate-200 dark:border-slate-700">
    <div class="px-5 pt-5">
        <header class="flex justify-between items-start mb-2">
            <!-- Icon -->
            <img src="{{ asset('images/icon-01.svg') }}" width="32" height="32" alt="Icon 01" />
            <!-- Menu button -->
            <div class="relative inline-flex" x-data="{ open: false }">
                <button class="rounded-full"
                    :class="open ? 'bg-slate-100 dark:bg-slate-700 text-slate-500 dark:text-slate-400' :
                        'text-slate-400 hover:text-slate-500 dark:text-slate-500 dark:hover:text-slate-400'"
                    aria-haspopup="true" @click.prevent="open = !open" :aria-expanded="open">
                    <span class="sr-only">Menu</span>
                    <svg class="w-8 h-8 fill-current" viewBox="0 0 32 32">
                        <circle cx="16" cy="16" r="2" />
                        <circle cx="10" cy="16" r="2" />
                        <circle cx="22" cy="16" r="2" />
                    </svg>
                </button>
                <div class="origin-top-right z-10 absolute top-full right-0 min-w-36 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 py-1.5 rounded shadow-lg overflow-hidden mt-1"
                    @click.outside="open = false" @keydown.escape.window="open = false" x-show="open"
                    x-transition:enter="transition ease-out duration-200 transform"
                    x-transition:enter-start="opacity-0 -translate-y-2"
                    x-transition:enter-end="opacity-100 translate-y-0"
                    x-transition:leave="transition ease-out duration-200" x-transition:leave-start="opacity-100"
                    x-transition:leave-end="opacity-0" x-cloak>
                    <ul>
                        <li
                            class="font-medium text-sm text-slate-600 dark:text-slate-300 hover:text-slate-800 dark:hover:text-slate-200 flex py-1 px-3">
                            <span class="" wire:click="switchDisplay(4)" @click="open = false"
                                @focus="open = true" @focusout="open = false">Male</span>
                        </li>
                        <li
                            class="font-medium text-sm text-slate-600 dark:text-slate-300 hover:text-slate-800 dark:hover:text-slate-200 flex py-1 px-3">
                            <span class="" wire:click="switchDisplay(3)" @click="open = false"
                                @focus="open = true" @focusout="open = false">Female</span>
                        </li>
                        <li
                            class="font-medium text-sm text-slate-600 dark:text-slate-300 hover:text-slate-800 dark:hover:text-slate-200 flex py-1 px-3">
                            <span class="" wire:click="switchDisplay(2)" @click="open = false"
                                @focus="open = true" @focusout="open = false">Alumni</span>
                        </li>
                        <li
                            class="font-medium text-sm text-slate-600 dark:text-slate-300 hover:text-slate-800 dark:hover:text-slate-200 flex py-1 px-3">
                            <span class="" wire:click="switchDisplay(1)" @click="open = false"
                                @focus="open = true" @focusout="open = false">Active</span>
                        </li>
                    </ul>
                </div>
            </div>
        </header>



        @switch($display)
            @case(1)
                @livewire('dashboard.active-beneficiaries-card', key('active-beneficiaries-card-' . uniqid()))
            @break

            @case(2)
                @livewire('dashboard.in-active-beneficiaries-card', key('in-active-beneficiaries-card-' . uniqid()))
            @break

            @case(3)
                {{-- females --}}
                @livewire('dashboard.inactive-staff-members-card', key('inactive-staff-members-card-' . uniqid()))
            @break

            @case(4)
                {{-- males --}}
                @livewire('dashboard.staff-members-card', key('staff-members-card-' . uniqid()))
            @break
        @endswitch


    </div>
</div>