@php
    /**
     * Render satu field borang.
     *
     * @var \App\Models\Backend\ContentFormField $field
     */
    $code = $field->field_code;
    $isCheckbox = $field->field_type === 'CHECKBOX';
    $name = $isCheckbox ? "fields[{$code}][]" : "fields[{$code}]";
    $oldValue = old("fields.{$code}");
    $hasError = $errors->has("fields.{$code}");
    $invalid = $hasError ? 'is-invalid' : '';
    $req = $field->field_required ? 'required' : '';
@endphp

<div class="cf-field {{ $hasError ? 'cf-field-error' : '' }}" id="cf-{{ $code }}">
    <label class="cf-label" @if (! $isCheckbox) for="cf-input-{{ $code }}" @endif>
        {{ $field->field_label }}
        @if ($field->field_required)
            <span class="cf-req" aria-hidden="true">*</span>
        @endif
    </label>

    @if (filled($field->field_help))
        <div class="cf-help">{{ $field->field_help }}</div>
    @endif

    @switch($field->field_type)

        @case('TEXTAREA')
            <textarea id="cf-input-{{ $code }}" name="{{ $name }}" rows="5"
                class="form-control cf-input {{ $invalid }}" {{ $req }}>{{ $oldValue }}</textarea>
            @break

        @case('SELECT')
            <select id="cf-input-{{ $code }}" name="{{ $name }}"
                class="form-select cf-input {{ $invalid }}" {{ $req }}>
                <option value="">— Sila pilih —</option>
                @foreach ($field->optionList() as $opt)
                    <option value="{{ $opt['value'] }}" @selected((string) $oldValue === (string) $opt['value'])>
                        {{ $opt['label'] }}
                    </option>
                @endforeach
            </select>
            @break

        @case('RADIO')
            <div class="cf-options">
                @foreach ($field->optionList() as $i => $opt)
                    <label class="cf-opt" for="cf-input-{{ $code }}-{{ $i }}">
                        <input type="radio" id="cf-input-{{ $code }}-{{ $i }}" name="{{ $name }}"
                            value="{{ $opt['value'] }}" @checked((string) $oldValue === (string) $opt['value']) {{ $req }}>
                        <span>{{ $opt['label'] }}</span>
                    </label>
                @endforeach
            </div>
            @break

        @case('CHECKBOX')
            <div class="cf-options" role="group" aria-required="{{ $field->field_required ? 'true' : 'false' }}">
                @foreach ($field->optionList() as $i => $opt)
                    <label class="cf-opt" for="cf-input-{{ $code }}-{{ $i }}">
                        <input type="checkbox" id="cf-input-{{ $code }}-{{ $i }}" name="{{ $name }}"
                            value="{{ $opt['value'] }}" @checked(is_array($oldValue) && in_array($opt['value'], $oldValue, true))>
                        <span>{{ $opt['label'] }}</span>
                    </label>
                @endforeach
            </div>
            @break

        @case('SCALE')
            <div class="cf-scale" role="radiogroup" aria-label="{{ $field->field_label }}">
                @foreach ($field->scaleRange() as $value)
                    <label class="cf-scale-opt" for="cf-input-{{ $code }}-{{ (int) $value }}">
                        <input type="radio" id="cf-input-{{ $code }}-{{ (int) $value }}" name="{{ $name }}"
                            value="{{ (int) $value }}" @checked((string) $oldValue === (string) (int) $value) {{ $req }}>
                        <span class="cf-scale-num">{{ (int) $value }}</span>
                        <span class="cf-scale-lbl">{{ $field->scaleLabel($value) ?? 'Skala '.(int) $value }}</span>
                    </label>
                @endforeach
            </div>
            @break

        @case('FILE')
            <input type="file" id="cf-input-{{ $code }}" name="files[{{ $code }}]"
                class="form-control cf-input {{ $invalid }}" {{ $req }}>
            <div class="cf-help mt-1">Saiz maksimum 10 MB. Format: PDF, JPG, PNG, DOCX, XLSX.</div>
            @break

        @case('EMAIL')
            <input type="email" id="cf-input-{{ $code }}" name="{{ $name }}" value="{{ $oldValue }}"
                class="form-control cf-input {{ $invalid }}" autocomplete="email" {{ $req }}>
            @break

        @case('PHONE')
            <input type="tel" id="cf-input-{{ $code }}" name="{{ $name }}" value="{{ $oldValue }}"
                class="form-control cf-input {{ $invalid }}" autocomplete="tel" {{ $req }}>
            @break

        @case('DATE')
            <input type="date" id="cf-input-{{ $code }}" name="{{ $name }}" value="{{ $oldValue }}"
                class="form-control cf-input {{ $invalid }}" {{ $req }}>
            @break

        @default
            <input type="text" id="cf-input-{{ $code }}" name="{{ $name }}" value="{{ $oldValue }}"
                class="form-control cf-input {{ $invalid }}" {{ $req }}>
    @endswitch

    @error("fields.{$code}")
        <div class="cf-error">{{ $message }}</div>
    @enderror
</div>