Untitled

@php
    $settings = \App\Models\Setting::all();
    $presetNames = [];

    foreach ($settings as $setting) {
        // Directly access the 'value' attribute, which is already an array
        $presetArray = $setting->value;

        // Check if the result is an array before trying to get keys
        if (is_array($presetArray)) {
            // Extract the keys from the array and merge to the presetNames array
            $presetNames = array_merge($presetNames, array_keys($presetArray));
        }
    }

    // Remove duplicate preset names if necessary
    $presetNames = array_unique($presetNames);
@endphp


<div x-cloak
     x-data="{
     open: false,
     }"
>

    <button @click="open = !open"
            class=" text-gray-500 dark:text-gray-300 font-medium rounded-lg text-sm py-2.5 text-center inline-flex items-center">
        <x:dynamic-component :component="'icons.'.($activeRole['icon'] ?? 'research')"
                             class="w-4 h-4 text-gray-500 mr-2 dark:text-gray-300"/>
        Compare

        <x:icons.chevron-down ::class="{'-rotate-90': !open, 'rotate-0': open}"
                              x-cloak
                              class="w-4 h-4 ml-1 transition-transform duration-200 transform"/>
    </button>
    <div x-show="open" @click.away="open = false" id="dropdown"
         class="z-20 bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-800 absolute ring-1 ring-black ring-opacity-5 dark:border dark:border-gray-500 mt-2">
        <ul class="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="multiLevelDropdownButton">
            @foreach($presetNames as $preset)

                <li>
                    <button
                        :class="{'bg-gray-100 dark:bg-gray-600': open1, '': !open1}"
                        class="flex items-center justify-between w-full px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
                        {{$preset}}

                    </button>
                </li>

            @endforeach

        </ul>
    </div>
</div>