{{--
    Rendu d'un champ dynamique selon son FieldType.
    Variables attendues : $field (SourceTypeField), $value (valeur courante ou null)
--}}
@php
    use App\Enums\FieldType;
    $name     = "data[{$field->name}]";
    $inputId  = "field_{$field->name}";
    $oldValue = old("data.{$field->name}", $value);

    // Pour le type place : $value est soit null, soit ['id'=>…,'nom_long'=>…]
    $placeId      = $field->type === FieldType::Place ? ($value['id']      ?? null) : null;
    $placeNomLong = $field->type === FieldType::Place ? ($value['nom_long'] ?? '')  : '';
@endphp

<div class="space-y-1">
    <label for="{{ $inputId }}" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
        {{ $field->label }}
        @if($field->required) <span class="text-red-500">*</span> @endif
    </label>

    @switch($field->type)

        @case(FieldType::Text)
            <input type="text" id="{{ $inputId }}" name="{{ $name }}"
                   value="{{ $oldValue }}"
                   {{ $field->required ? 'required' : '' }}
                   class="block w-full rounded-md border-gray-300 dark:border-gray-600 shadow-sm text-sm focus:border-indigo-500 focus:ring-indigo-500 @error("data.{$field->name}") border-red-500 @enderror">
            @break

        @case(FieldType::Textarea)
            <textarea id="{{ $inputId }}" name="{{ $name }}" rows="3"
                      {{ $field->required ? 'required' : '' }}
                      class="block w-full rounded-md border-gray-300 dark:border-gray-600 shadow-sm text-sm focus:border-indigo-500 focus:ring-indigo-500 @error("data.{$field->name}") border-red-500 @enderror">{{ $oldValue }}</textarea>
            @break

        @case(FieldType::Number)
            <input type="number" id="{{ $inputId }}" name="{{ $name }}"
                   value="{{ $oldValue }}" step="any"
                   {{ $field->required ? 'required' : '' }}
                   class="block w-full rounded-md border-gray-300 dark:border-gray-600 shadow-sm text-sm focus:border-indigo-500 focus:ring-indigo-500 @error("data.{$field->name}") border-red-500 @enderror">
            @break

        @case(FieldType::Boolean)
            @php $checked = old("data.{$field->name}", $value) ? true : false; @endphp
            <div class="flex items-center gap-2 mt-1">
                <input type="hidden" name="{{ $name }}" value="0">
                <input type="checkbox" id="{{ $inputId }}" name="{{ $name }}" value="1"
                       {{ $checked ? 'checked' : '' }}
                       class="rounded border-gray-300 dark:border-gray-600 text-indigo-600 focus:ring-indigo-500">
                <span class="text-sm text-gray-600 dark:text-gray-400">{{ $field->label }}</span>
            </div>
            @break

        @case(FieldType::Select)
            <select id="{{ $inputId }}" name="{{ $name }}"
                    {{ $field->required ? 'required' : '' }}
                    class="block w-full rounded-md border-gray-300 dark:border-gray-600 shadow-sm text-sm focus:border-indigo-500 focus:ring-indigo-500 @error("data.{$field->name}") border-red-500 @enderror">
                @if(!$field->required) <option value="">— Choisir —</option> @endif
                @foreach($field->options ?? [] as $opt)
                    <option value="{{ $opt }}" {{ $oldValue === $opt ? 'selected' : '' }}>{{ $opt }}</option>
                @endforeach
            </select>
            @break

        @case(FieldType::Date)
            @php
                $dateVal  = is_array($oldValue) ? ($oldValue['valeur'] ?? '') : '';
                $dateCal  = is_array($oldValue) ? ($oldValue['calendrier'] ?? 'gregorien') : old("data.{$field->name}.calendrier", 'gregorien');
            @endphp
            <div x-data="{ cal: '{{ $dateCal }}' }" class="flex gap-2">
                {{-- Sélecteur de calendrier --}}
                <select name="{{ $name }}[calendrier]" x-model="cal"
                        class="w-40 rounded-md border-gray-300 dark:border-gray-600 shadow-sm text-sm focus:border-indigo-500 focus:ring-indigo-500">
                    <option value="gregorien">Grégorien</option>
                    <option value="julien">Julien</option>
                    <option value="republicain">Républicain</option>
                </select>

                {{-- Date grégorienne / julienne : input date HTML5 --}}
                <input x-show="cal !== 'republicain'"
                       :disabled="cal === 'republicain'"
                       type="date" name="{{ $name }}[valeur]"
                       value="{{ $dateCal !== 'republicain' ? $dateVal : '' }}"
                       {{ $field->required ? 'required' : '' }}
                       class="flex-1 rounded-md border-gray-300 dark:border-gray-600 shadow-sm text-sm focus:border-indigo-500 focus:ring-indigo-500">

                {{-- Date républicaine : saisie texte libre (ex: "15 Vendémiaire An III") --}}
                <input x-show="cal === 'republicain'" x-cloak
                       :disabled="cal !== 'republicain'"
                       type="text" name="{{ $name }}[valeur]"
                       value="{{ $dateCal === 'republicain' ? $dateVal : '' }}"
                       placeholder="ex : 15 Vendémiaire An III"
                       class="flex-1 rounded-md border-gray-300 dark:border-gray-600 shadow-sm text-sm focus:border-indigo-500 focus:ring-indigo-500">
            </div>
            @error("data.{$field->name}.valeur")
                <p class="text-sm text-red-600">{{ $message }}</p>
            @enderror
            @break

        @case(FieldType::Place)
            <x-lieu-picker
                :name="$name"
                :value="$placeId"
                :display-value="$placeNomLong"
                :required="$field->required"
                label=""
                placeholder="Rechercher un lieu…"
            />
            @break

    @endswitch

    @error("data.{$field->name}")
        <p class="text-sm text-red-600">{{ $message }}</p>
    @enderror
</div>