{{-- ===========================================================================
    [컴포넌트 사용 가이드: x-admin.forms.select]
    
    1. 등록/수정 폼 본문 (isFilter 기본값 false: form-select 크기, small fw-bold 라벨, 너비 100%):
       <div class="col-md-6">
           <x-admin.forms.select 
               name="status" 
               label="계정 상태" 
               :options="[
                   'active' => '정상 (Active)',
                   'suspended' => '일시중지 (Suspended)',
                   'withdrawn' => '탈퇴 (Withdrawn)',
               ]" 
               :selected="$user->status ?? 'active'" 
               required 
           />
       </div>

    2. 검색/필터바 전용 (isFilter + 선택적 autoSubmit):
       <x-admin.forms.select 
           isFilter
           name="status" 
           label="회원 상태" 
           allLabel="전체 상태" 
           width="140px" 
           autoSubmit 
           :options="['active' => '정상', 'suspended' => '일시중지', 'withdrawn' => '탈퇴']" 
       />

    3. 등록/수정 폼 본문 (너비 100% 자동 채움 + 필수 입력):
       <div class="col-md-6 mb-3">
           <x-admin.forms.select 
               name="role" 
               label="관리자 등급" 
               allLabel="등급을 선택하세요" 
               :options="['manager' => '부관리자', 'admin' => '총괄관리자']" 
               :selected="$admin->role ?? ''" 
               required 
           />
       </div>

    4. 기본 선택 옵션 없이 배열만 바로 바인딩할 때:
       <x-admin.forms.select 
           name="category_id" 
           label="카테고리" 
           :options="$categories" 
           :selected="$product->category_id ?? null" 
           required 
       />
=========================================================================== --}}

@props([
    'name',                    // select name (필수)
    'id' => null,              // 명시적 id (미지정 시: 본문은 name, 필터모드는 name_select)
    'options' => [],           // [ '값' => '라벨' ] 연관 배열
    'selected' => null,        // 현재 선택값 (old() 값을 최우선 반영)
    'width' => '100%',         // 기본 너비 (필터모드 시 140px 등 지정, 본문은 100%)
    'allLabel' => null,        // 빈값("") 옵션 라벨 (예: '전체 선택')
    'label' => null,           // 상단 라벨 텍스트
    'isFilter' => false,       // 핵심 인자: true면 검색 필터 디자인, false면 본문 폼 디자인
    'autoSubmit' => false,     // 선택 시 자동 submit 여부 (필터 모드와 독립 제어 가능)
    'required' => false,       // 시각적 필수 표시(*) 및 SweetAlert/JS 검증 플래그
    'nativeRequired' => false, // true일 때만 네이티브 required 부여 (기본 false)
    'disabled' => false,       // 비활성화 여부
])

@php
    $currentSelected = old($name, $selected ?? request($name));
    
    // 1. ID 결정: 명시적 id 우선, {name}'
    $selectId = $id ?? $name;

    // 2. 검색 필터 모드이면서 실제 특정 옵션(빈값이 아닌 값)이 선택된 상태인지 판별하여 Primary 강조
    $isActiveFilter = $isFilter && !empty($currentSelected);

    // 3. UI 사이즈 분기
    $sizeClass = $isFilter ? 'form-select-sm' : '';
@endphp

<div class="{{ $isFilter ? 'd-flex flex-column gap-1' : '' }}" style="width: {{ $width }}; max-width: 100%;">
    @if($label)
        <label for="{{ $selectId }}" 
               class="form-label text-secondary mb-1 {{ $isFilter ? 'fw-bold' : 'small fw-bold' }}" 
               @if($isFilter) style="font-size: 0.75rem;" @endif>
            {{ $label }}
            @if($required)
                <span class="text-danger">*</span>
            @endif
        </label>
    @endif

    <select 
        name="{{ $name }}" 
        id="{{ $selectId }}" 
        class="form-select {{ $sizeClass }} {{ $isActiveFilter ? 'is-active-filter' : '' }} @error($name) is-invalid @enderror"
        @if($autoSubmit) onchange="this.form.submit()" @endif
        @if($nativeRequired) required @endif
        @if($required) data-required="true" data-label="{{ $label ?? $name }}" @endif
        @disabled($disabled)
        {{ $attributes->merge(['class' => '']) }}
    >
        @if($allLabel)
            <option value="">{{ $allLabel }}</option>
        @endif

        @foreach($options as $value => $optionLabel)
            <option value="{{ $value }}" {{ (string)$currentSelected === (string)$value ? 'selected' : '' }}>
                {{ $optionLabel }}
            </option>
        @endforeach
    </select>

    @error($name)
        <div class="invalid-feedback">{{ $message }}</div>
    @enderror
</div>