@props([
    'name' => null,
    'label' => 'Choose an Icon',
    'value' => 'ri-arrow-down-fill'
])

<div x-data="dropdownIconPicker('{{ $value }}', '{{ $name }}')" class="z-10">
    @if ($label)
        <label class="block mb-2 font-semibold text-sm text-gray-700">{{ $label }}</label>
    @endif

    <!-- Dropdown Trigger -->
    <button
        @click="open = !open"
        type="button"
        class="w-full flex items-center justify-between border p-2 rounded shadow-sm bg-white"
    >
        <div class="flex items-center gap-2">
            <i :class="`${selected} text-xl`"></i>
            {{-- <span class="text-sm text-gray-700 capitalize" x-text="selected"></span> --}}
        </div>
        <svg class="w-4 h-4 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M19 9l-7 7-7-7" />
        </svg>
    </button>

    <!-- Dropdown Panel -->
    <div
        x-show="open"
        @click.away="open = false"
        x-transition
        class="absolute w-[80%] h-60 overflow-y-auto sm:w-[500px] z-10 mt-2 border bg-white rounded shadow p-3"
    >
        <!-- Search -->
        <input
            x-model="search"
            type="text"
            placeholder="Search icons..."
            class="mb-3 w-full p-2 border rounded text-sm"
        />

        <!-- Icons Grid -->
        <div class="flex items-start justify-start flex-wrap gap-2">
            <template x-for="icon in filteredIcons" :key="icon">
                <div
                    @click="select(icon)"
                    class="cursor-pointer p-1 border rounded text-center hover:bg-gray-100"
                    :class="selected === icon ? 'ring-2 ring-blue-500' : ''"
                >
                    <i :class="`${icon} text-xl`"></i>
                </div>
            </template>
        </div>
    </div>

    <!-- Hidden Input -->
    <input type="hidden" class="icon" name="name" :value="selected" />
</div>

<script>
    
    function dropdownIconPicker(initial = 'ri-arrow-down-fill', name) {
        return {
            open: false,
            search: '',
            selected: initial,
            icons: [
                'ri-star-line', 'ri-mental-health-line', 'ri-user-settings-line', 'ri-star-fill', 'ri-heart-line', 'ri-heart-fill', 'ri-user-line', 'ri-user-fill',
                'ri-settings-3-line', 'ri-settings-3-fill', 'ri-mail-line', 'ri-mail-fill', 'ri-home-4-line', 'ri-home-4-fill', 'ri-code-s-slash-line', 'ri-layout-grid-line',
                'ri-camera-line', 'ri-camera-fill', 'ri-calendar-line', 'ri-calendar-fill', 'ri-lock-line', 'ri-lock-fill',
                'ri-upload-line', 'ri-database-2-line', 'ri-upload-fill', 'ri-delete-bin-line', 'ri-delete-bin-fill', 'ri-edit-line', 'ri-edit-fill',
                'ri-search-line', 'ri-search-fill', 'ri-phone-line', 'ri-phone-fill', 'ri-notification-line', 'ri-notification-fill',
                'ri-file-line', 'ri-file-fill', 'ri-map-pin-line', 'ri-map-pin-fill', 'ri-gift-line', 'ri-gift-fill',
                'ri-shopping-cart-line', 'ri-shopping-cart-fill', 'ri-bookmark-line', 'ri-bookmark-fill', 'ri-chat-3-line', 'ri-chat-3-fill',
                'ri-dashboard-line', 'ri-dashboard-fill', 'ri-folder-line', 'ri-folder-fill', 'ri-image-line', 'ri-image-fill',
                'ri-key-line', 'ri-key-fill', 'ri-add-line', 'ri-add-fill', 'ri-subtract-line', 'ri-subtract-fill',
                'ri-close-line', 'ri-close-fill', 'ri-check-line', 'ri-check-fill', 'ri-arrow-right-line', 'ri-arrow-right-fill',
                'ri-arrow-left-line', 'ri-arrow-left-fill', 'ri-arrow-up-line', 'ri-arrow-up-fill', 'ri-arrow-down-line', 'ri-arrow-down-fill',
                'ri-menu-line', 'ri-more-line', 'ri-more-fill', 'ri-eye-line', 'ri-eye-fill', 'ri-eye-off-line', 'ri-eye-off-fill',
                'ri-download-line', 'ri-download-fill', 'ri-share-line', 'ri-share-fill', 'ri-link-line', 'ri-link-fill',
                'ri-information-line', 'ri-information-fill', 'ri-question-line', 'ri-question-fill', 'ri-error-warning-line', 'ri-error-warning-fill',
                'ri-lightbulb-line', 'ri-lightbulb-fill', 'ri-bar-chart-box-line', 'ri-bar-chart-box-fill', 'ri-pie-chart-line', 'ri-pie-chart-fill',
                'ri-cloud-line', 'ri-cloud-fill', 'ri-wifi-line', 'ri-wifi-fill', 'ri-bluetooth-line', 'ri-bluetooth-fill',
                'ri-volume-up-line', 'ri-volume-up-fill', 'ri-volume-mute-line', 'ri-volume-mute-fill', 'ri-time-line', 'ri-time-fill',
                'ri-compass-line', 'ri-compass-fill', 'ri-globe-line', 'ri-globe-fill', 'ri-send-plane-line', 'ri-send-plane-fill',
                'ri-coupon-line', 'ri-coupon-fill', 'ri-ticket-line', 'ri-ticket-fill', 'ri-wallet-line', 'ri-wallet-fill',
                'ri-bank-card-line', 'ri-bank-card-fill', 'ri-bill-line', 'ri-bill-fill', 'ri-money-dollar-box-line', 'ri-money-dollar-box-fill',
                'ri-briefcase-line', 'ri-briefcase-fill', 'ri-group-line', 'ri-group-fill', 'ri-building-line', 'ri-building-fill',
                'ri-plant-line', 'ri-plant-fill', 'ri-leaf-line', 'ri-leaf-fill', 'ri-fire-line', 'ri-fire-fill',
                'ri-dvd-line', 'ri-dvd-fill', 'ri-headphone-line', 'ri-headphone-fill', 'ri-tv-line', 'ri-tv-fill',
                'ri-printer-line', 'ri-printer-fill', 'ri-mouse-line', 'ri-mouse-fill', 'ri-keyboard-line', 'ri-keyboard-fill',
                'ri-computer-line', 'ri-computer-fill', 'ri-tablet-line', 'ri-tablet-fill', 'ri-smartphone-line', 'ri-smartphone-fill',
                'ri-gamepad-line', 'ri-gamepad-fill', 'ri-controller-line', 'ri-controller-fill', 'ri-robot-line', 'ri-robot-fill',
                'ri-flask-line', 'ri-flask-fill', 'ri-test-tube-line', 'ri-test-tube-fill', 'ri-microscope-line', 'ri-microscope-fill',
                'ri-dna-line', 'ri-dna-fill', 'ri-bone-line', 'ri-bone-fill', 'ri-brain-line', 'ri-brain-fill', 'ri-heart-pulse-line',
                'ri-bank-line', 'ri-book-open-line', 'ri-truck-line',
            ],
            get filteredIcons() {
                if (!this.search.trim()) return this.icons;
                return this.icons.filter(icon =>
                    icon.toLowerCase().includes(this.search.toLowerCase())
                );
            },
            select(icon) {
                this.selected = icon;
                this.open = false;
                this.$wire.set(name, icon);
            }
        };
    }
</script>