{{-- ===========================================================================
    [컴포넌트 사용 가이드: x-admin.forms.input]
    
    1. 기본 단독 필수 입력창 (현재 표준 디자인 규격):
       <div class="col-md-6">
           <x-admin.forms.input 
               name="name" 
               label="담당자 성명" 
               :value="$user->name" 
               required 
           />
       </div>

    2. 읽기 전용 / 일반 텍스트 입력창:
       <div class="col-md-6">
           <x-admin.forms.input 
               type="email" 
               name="email" 
               label="로그인 이메일" 
               :value="$user->email" 
               readonly 
           />
       </div>

    3. 앞단 아이콘 또는 뒷단 단위 추가 (prepend / append):
       <div class="col-md-6">
           <x-admin.forms.input 
               name="phone" 
               label="담당자 연락처" 
               prepend='<i class="fa-solid fa-phone"></i>' 
               :value="$user->phone" 
               placeholder="010-0000-0000" 
           />
       </div>
=========================================================================== --}}

@props([
    'name',                    // input name 및 id (필수)
    'id' => null,              // 명시적 id
    'type' => 'text',          // text, password, email, number, tel, date 등
    'value' => null,           // 기본값
    'label' => null,           // 상단 라벨 텍스트
    'placeholder' => null,     // 플레이스홀더
    'required' => false,       // 시각적 필수 표시(*) 및 검증 플래그
    'nativeRequired' => false, // 브라우저 기본 required 속성
    'disabled' => false,       // 비활성화 여부
    'readonly' => false,       // 읽기 전용 여부
    'prepend' => null,         // 앞단 아이콘/텍스트
    'append' => null,          // 뒷단 단위/텍스트
    'helpText' => null,        // 하단 안내 텍스트
    'autocomplete' => 'off',
])

@php
    $inputValue = old($name, $value);
    $inputId = $id ?? $name;
@endphp

<div>
    {{-- 1. 상단 라벨 영역 --}}
    @if($label)
        <label for="{{ $inputId }}" class="form-label small fw-bold">
            {{ $label }}
            @if($required)
                <span class="text-danger">*</span>
            @endif
        </label>
    @endif

    {{-- 2. 앞/뒤 결합 요소가 있는 경우 --}}
    @if($prepend || $append)
        <div class="input-group">
            @if($prepend)
                <span class="input-group-text">{!! $prepend !!}</span>
            @endif

            <input 
                type="{{ $type }}" 
                name="{{ $name }}" 
                id="{{ $inputId }}" 
                value="{{ $inputValue }}"
                placeholder="{{ $placeholder }}"
                autocomplete="{{ $autocomplete }}"
                @if($nativeRequired) required @endif
                @if($required) data-required="true" data-label="{{ $label ?? $name }}" @endif
                @disabled($disabled)
                @readonly($readonly)
                {{ $attributes->class(['form-control', 'is-invalid' => $errors->has($name)]) }}
            >

            @if($append)
                <span class="input-group-text">{!! $append !!}</span>
            @endif

            @error($name)
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>
    @else
        {{-- 3. 표준 단독 인풋 영역 --}}
        <input 
            type="{{ $type }}" 
            name="{{ $name }}" 
            id="{{ $inputId }}" 
            value="{{ $inputValue }}"
            placeholder="{{ $placeholder }}"
            autocomplete="{{ $autocomplete }}"
            @if($nativeRequired) required @endif
            @if($required) data-required="true" data-label="{{ $label ?? $name }}" @endif
            @disabled($disabled)
            @readonly($readonly)
            {{ $attributes->class(['form-control', 'is-invalid' => $errors->has($name)]) }}
        >

        {{-- 4. 유효성 검사 에러 피드백 --}}
        @error($name)
            <div class="invalid-feedback">{{ $message }}</div>
        @enderror
    @endif

    {{-- 5. 하단 보조 도움말 --}}
    @if($helpText && !$errors->has($name))
        <div class="form-text text-muted">{{ $helpText }}</div>
    @endif
</div>