<!-- Form group -->
<div class="flex flex-col gap-y-1.5">
    <!-- Input label -->
    <label for="subject" class="font-semibold text-xs">موضوع:</label>
    <!-- Select Menu -->
    <div class="relative w-full" x-data="{ isOpen: false, placeholder: '', subject: '' }">
        <!-- Hidden input for form submission -->
        <input type="hidden" name="subject" id="subject" class="peer" x-model="subject" />

        <!-- Trigger -->
        <button type="button"
            class="flex items-center w-full h-12 bg-background border border-input rounded-md shadow-xs cursor-pointer outline-hidden peer-disabled:pointer-events-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50 transition-[color,box-shadow] focus:border-ring focus:ring-2 focus:ring-ring/50 px-3 py-1"
            x-on:click="isOpen = !isOpen">
            <span class="font-medium text-sm" x-text="placeholder || 'انتخاب کنید'"></span>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-4 ms-auto">
                <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="m7 15l5 5l5-5M7 9l5-5l5 5" />
            </svg>
        </button>

        <div class="absolute z-10 mt-2 w-full bg-background border rounded-md shadow-lg" x-cloak x-show="isOpen"
            x-on:click.outside="isOpen = false" x-transition>
            <!-- Options -->
            <ul class="max-h-40 overflow-auto">
                <!-- form:select option -->
                <template x-for="option in [
                        {id: 1, name: 'افزودن ویژگی'},
                        {id: 2, name: 'گزارش خطا'},
                        {id: 3, name: 'حسابداری و امورمالی'},
                        {id: 4, name: 'سایر موضوعات'},
                        // می‌توانید بقیه موضوعات را اینجا اضافه کنید
                    ]">
                    <li class="cursor-pointer px-4 py-2 text-sm"
                        x-bind:class="subject !== option.id.toString() ? 'text-muted-foreground hover:bg-muted hover:text-foreground' : 'bg-primary text-primary-foreground hover:bg-primary'"
                        x-on:click="placeholder=option.name;subject=option.id.toString();isOpen=false;"
                        x-text="option.name">
                    </li>
                </template>
            </ul>
        </div>
    </div>
    <!-- end Select Menu -->
</div>
<!-- end Form group -->

<!-- Form group -->
<div class="flex flex-col gap-y-1.5">
    <!-- Input label -->
    <label for="subject" class="font-semibold text-xs">موضوع:</label>
    <!-- Select Menu -->
    <div class="relative w-full" x-data="{ isOpen: false, placeholder: '', subject: '', filterText: '' }">
        <!-- Hidden input for form submission -->
        <input type="hidden" name="subject" id="subject" class="peer" x-model="subject" />

        <!-- Trigger -->
        <button type="button"
            class="flex items-center w-full h-12 bg-background border border-input rounded-md shadow-xs cursor-pointer outline-hidden peer-disabled:pointer-events-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50 transition-[color,box-shadow] focus:border-ring focus:ring-2 focus:ring-ring/50 px-3 py-1"
            x-on:click="isOpen = !isOpen">
            <span class="font-medium text-sm" x-text="placeholder || 'انتخاب کنید'"></span>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-4 ms-auto">
                <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="m7 15l5 5l5-5M7 9l5-5l5 5" />
            </svg>
        </button>

        <div class="absolute z-10 mt-2 w-full bg-background border rounded-md shadow-lg" x-cloak x-show="isOpen"
            x-on:click.outside="isOpen = false" x-transition>
            <!-- Search -->
            <div class="border-b p-2.5">
                <input type="text" x-model="filterText"
                    class="block w-full h-10 bg-muted border border-input rounded-lg outline-hidden font-medium text-xs px-3.5"
                    placeholder="جستجو..." />
            </div>

            <!-- Options -->
            <ul class="max-h-40 overflow-auto">
                <!-- form:select option -->
                <template x-for="option in [
                        {id: 1, name: 'افزودن ویژگی'},
                        {id: 2, name: 'گزارش خطا'},
                        {id: 3, name: 'حسابداری و امورمالی'},
                        {id: 4, name: 'پیگیری سفارش'},
                        {id: 5, name: 'خدمات پس از فروش'},
                        {id: 6, name: 'باشگاه مشتریان'},
                        {id: 7, name: 'سایر موضوعات'},
                        // می‌توانید بقیه موضوعات را اینجا اضافه کنید
                    ]">
                    <li class="cursor-pointer px-4 py-2 text-sm"
                        x-bind:class="subject !== option.id.toString() ? 'text-muted-foreground hover:bg-muted hover:text-foreground' : 'bg-primary text-primary-foreground hover:bg-primary'"
                        x-show="option.name.includes(filterText)"
                        x-on:click="placeholder=option.name;subject=option.id.toString();filterText = '';isOpen=false;"
                        x-text="option.name">
                    </li>
                </template>
            </ul>
        </div>
    </div>
    <!-- end Select Menu -->
</div>
<!-- end Form group -->