{{--
    Parent Child Selector Component
    Usage: <x-parent-child-selector :children="$children" :activeChild="$activeChild" />
    - If 1 child: auto-selected, selector hidden
    - If multiple: dropdown shown, selection persists via session
--}}
@if(isset($children) && $children->count() > 1)
<div class="mb-4">
    <form method="GET" action="" id="child-selector-form" class="flex items-center gap-3">
        {{-- Preserve all existing query params except child_id --}}
        @foreach(request()->except('child_id') as $key => $value)
            <input type="hidden" name="{{ $key }}" value="{{ $value }}">
        @endforeach

        <label for="child_id" class="text-sm font-medium text-gray-600 dark:text-gray-400 whitespace-nowrap">
            Viewing:
        </label>
        <select
            id="child_id"
            name="child_id"
            onchange="document.getElementById('child-selector-form').submit()"
            class="block w-auto rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-700 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200"
        >
            @foreach($children as $child)
                <option
                    value="{{ $child->id }}"
                    {{ (isset($activeChild) && $activeChild?->id == $child->id) ? 'selected' : '' }}
                >
                    {{ $child->name }}
                </option>
            @endforeach
        </select>
    </form>
</div>
@elseif(isset($children) && $children->count() === 1)
{{-- Single child: auto-selected, no UI needed --}}
@endif