@php
    $parentGroups  = $formData['parentFolderGroups'] ?? [];
    $parentInitial = $formData['parentInitialFolder'] ?? ['id' => '', 'name' => '', 'label' => '', 'bgClass' => 'bg-surface-100', 'dotClass' => 'bg-surface-400', 'textClass' => 'text-surface-500', 'folderBackClass' => 'fill-surface-300', 'folderFrontClass' => 'fill-surface-200'];
@endphp

<div class="relative"
     x-data="documentFolderPicker(@js($parentInitial), @js($parentGroups))"
     @click.outside="closePicker(false)"
     @focusin.window="if (open && !$el.contains($event.target)) closePicker(false)">

    <label class="form-label">Parent Folder</label>
    <input type="hidden" name="parent_id" x-model="selId" />

    <button type="button"
            x-ref="fstrigger"
            role="combobox"
            aria-haspopup="listbox"
            :aria-expanded="open.toString()"
            @keydown.escape.prevent="closePicker(false)"
            @keydown.arrow-down.prevent="moveActive(1)"
            @keydown.arrow-up.prevent="moveActive(-1)"
            @keydown.enter.prevent="open ? selectActive() : openPicker()"
            @keydown.space.prevent="open ? selectActive() : openPicker()"
            @keydown.tab="closePicker(false)"
            @click="open ? closePicker(false) : openPicker()"
            class="flex min-h-11 w-full items-center gap-3 rounded-xl border border-surface-200 bg-white px-3 py-2 text-left shadow-sm transition-all duration-150 focus:outline-none focus-visible:ring-4 focus-visible:ring-primary-500/10"
            :class="open ? 'border-primary-500' : 'hover:border-surface-300 hover:shadow-md'">

        <span class="w-9 h-[30px] shrink-0">
            <svg viewBox="0 0 72 60" fill="none" class="h-full w-full">
                <path d="M2 10C2 7.239 4.239 5 7 5H27L35 13H65C67.761 13 70 15.239 70 18V50C70 52.761 67.761 55 65 55H7C4.239 55 2 52.761 2 50V10Z"
                      class="transition-colors duration-150" :class="selId ? selFolderBack : 'fill-surface-200'"/>
                <path d="M2 18C2 15.239 4.239 13 7 13H65C67.761 13 70 15.239 70 18V50C70 52.761 67.761 55 65 55H7C4.239 55 2 52.761 2 50V18Z"
                      class="transition-colors duration-150" :class="selId ? selFolderFront : 'fill-surface-100'"/>
            </svg>
        </span>

        <span class="block min-w-0 flex-1">
            <span x-show="!selId" class="block text-sm text-surface-400">Root level (no parent)</span>
            <span x-show="selId" class="flex min-w-0 items-center gap-2">
                <span x-text="selName" class="truncate text-sm font-semibold text-surface-900"></span>
                <span x-text="selLabel" class="shrink-0 rounded-full px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wide" :class="[selBgClass, selTextClass]"></span>
            </span>
        </span>

        <span x-show="selId"
              @click.stop="selId=''; selName=''; selLabel=''; selDotClass='bg-surface-300'; selTextClass='text-surface-400'; selBgClass='bg-surface-100'; selFolderBack='fill-surface-300'; selFolderFront='fill-surface-200'; open=false;"
              class="inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-surface-200 text-[10px] text-surface-400 hover:bg-surface-300 cursor-pointer"
              aria-hidden="true">&times;</span>

        <svg class="h-4 w-4 shrink-0 text-surface-400 transition-transform duration-200"
             :class="open ? 'rotate-180' : ''"
             fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
        </svg>
    </button>

    <div x-show="open"
         x-transition:enter="transition ease-out duration-100"
         x-transition:enter-start="opacity-0 -translate-y-1"
         x-transition:enter-end="opacity-100 translate-y-0"
         class="absolute left-0 right-0 z-50 mt-1 overflow-hidden rounded-2xl border border-surface-200 bg-white shadow-2xl"
         style="display:none;">

        <div class="border-b border-surface-50 p-3">
            <div class="flex items-center gap-2.5 rounded-xl border border-surface-200 bg-surface-50 px-3.5 py-2">
                <svg class="h-3.5 w-3.5 shrink-0 text-surface-400" fill="none" viewBox="0 0 24 24"
                     stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                    <circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
                </svg>
                <input type="text"
                       x-ref="fsearch"
                       x-model="query"
                       @input="onQueryChange()"
                       placeholder="Search folders..."
                       @keydown.escape.prevent="closePicker(true)"
                       @keydown.arrow-down.prevent="moveActive(1)"
                       @keydown.arrow-up.prevent="moveActive(-1)"
                       @keydown.enter.prevent="selectActive()"
                       @keydown.tab="closePicker(false)"
                       class="flex-1 bg-transparent text-sm text-surface-900 outline-none placeholder:text-surface-400" />
                <button x-show="query" type="button" @click.stop="query=''"
                        class="flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-full bg-surface-200 text-[10px] font-bold text-surface-500 hover:bg-surface-300">&times;</button>
            </div>
        </div>

        <div class="max-h-80 space-y-1 overflow-y-auto p-2.5" role="listbox">

            
            <div x-show="!query">
                <button type="button"
                        data-folder-option
                        data-folder-id=""
                        role="option"
                        :aria-selected="!selId ? 'true' : 'false'"
                        @click="selId=''; selName=''; selLabel=''; selDotClass='bg-surface-300'; selTextClass='text-surface-400'; selBgClass='bg-surface-100'; selFolderBack='fill-surface-300'; selFolderFront='fill-surface-200'; open=false; query='';"
                        class="flex w-full cursor-pointer items-center justify-between gap-2.5 rounded-xl border-none px-3 py-2.5 text-left transition-colors duration-100 hover:bg-surface-50 mb-1"
                        :class="!selId ? 'bg-surface-50' : ''">
                    <div class="flex min-w-0 items-center gap-2.5">
                        <div class="h-1.5 w-1.5 shrink-0 rounded-full bg-surface-300"></div>
                        <span class="text-sm text-surface-500">Root level (no parent)</span>
                    </div>
                    <svg x-show="!selId" class="h-4 w-4 shrink-0 text-primary-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                    </svg>
                </button>
            </div>

            @foreach($parentGroups as $group)
                <div x-show="matchesGroup(@js($group))" role="group" aria-label="{{ $group['label'] }}">
                    <div class="mb-1 flex items-center gap-2 rounded-lg px-3 py-1.5 {{ $group['bgClass'] }}">
                        <div class="h-2 w-2 shrink-0 rounded-full {{ $group['dotClass'] }}"></div>
                        <span class="text-[10px] font-extrabold uppercase tracking-wider {{ $group['textClass'] }}">{{ $group['label'] }}</span>
                        <span class="ml-auto text-[10px] font-semibold opacity-60 {{ $group['textClass'] }}">{{ count($group['folders']) }}</span>
                    </div>

                    @foreach($group['folders'] as $folder)
                        <div x-show="matchesFolder(@js($folder))">
                            <button type="button"
                                    data-folder-option
                                    data-folder-id="{{ $folder['id'] }}"
                                    :id="'pf-option-' + {{ $loop->parent->index * 1000 + $loop->index }}"
                                    role="option"
                                    :aria-selected="String(selId) === String(@js($folder['id']))"
                                    @click="pick(@js($folder), @js($group))"
                                    class="flex w-full cursor-pointer items-center justify-between gap-2.5 rounded-xl border-none px-3 py-2.5 text-left transition-colors duration-100 hover:bg-surface-50"
                                    :class="[
                                        String(selId) === String(@js($folder['id'])) ? 'bg-primary-50/60' : '',
                                        activeIndex >= 0 && visibleOptions[activeIndex] === $el ? 'ring-2 ring-inset ring-primary-200' : ''
                                    ]">
                                <div class="flex min-w-0 items-center gap-2.5">
                                    <div class="h-1.5 w-1.5 shrink-0 rounded-full opacity-40 {{ $group['dotClass'] }}"></div>
                                    <span class="truncate text-sm font-medium text-surface-900">{{ $folder['name'] }}</span>
                                </div>
                                <svg x-show="String(selId) === String(@js($folder['id']))" class="h-4 w-4 shrink-0 text-primary-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5" aria-hidden="true">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                                </svg>
                            </button>
                        </div>
                    @endforeach
                </div>
            @endforeach

            <div x-show="query && !hasMatches" class="flex flex-col items-center gap-2 px-3 py-8 text-center">
                <svg class="h-8 w-8 text-surface-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M9.5 9.5l5 5m0-5l-5 5M12 21a9 9 0 100-18 9 9 0 000 18z"/>
                </svg>
                <p class="text-xs text-surface-400">No folders match "<span x-text="query" class="font-medium text-surface-500"></span>"</p>
            </div>
        </div>
    </div>

    @error('parent_id')
        <p class="mt-1.5 text-xs text-red-600">{{ $message }}</p>
    @enderror
</div>