{{--
    Variables esperadas:
    $pregunta   - Pregunta model
    $tipoSlug   - string (slug del tipo)
    $fieldName  - string (name del input, ej: "resp[1]" o "resp[1][5]")
    $fieldId    - string (id único del input)
--}}

@if($tipoSlug === 'texto_libre')
    <textarea name="{{ $fieldName }}"
              id="{{ $fieldId }}"
              class="form-control"
              rows="4"
              placeholder="Escribe tu respuesta aquí…"
              {{ $pregunta->requerida ? 'required' : '' }}></textarea>

@elseif($tipoSlug === 'opcion_multiple')
    <div>
        @foreach($pregunta->opciones as $opcion)
            <div class="form-check mb-2">
                <input type="radio"
                       name="{{ $fieldName }}"
                       id="{{ $fieldId }}_{{ $opcion->id }}"
                       value="{{ $opcion->id }}"
                       class="form-check-input"
                       {{ $pregunta->requerida ? 'required' : '' }}>
                <label class="form-check-label" for="{{ $fieldId }}_{{ $opcion->id }}">
                    {{ $opcion->texto }}
                </label>
            </div>
        @endforeach
    </div>

@elseif($tipoSlug === 'si_no')
    <div class="d-flex">
        <div class="form-check mr-4">
            <input type="radio"
                   name="{{ $fieldName }}"
                   id="{{ $fieldId }}_si"
                   value="si"
                   class="form-check-input"
                   {{ $pregunta->requerida ? 'required' : '' }}>
            <label class="form-check-label font-weight-bold text-success" for="{{ $fieldId }}_si">
                Sí
            </label>
        </div>
        <div class="form-check">
            <input type="radio"
                   name="{{ $fieldName }}"
                   id="{{ $fieldId }}_no"
                   value="no"
                   class="form-check-input"
                   {{ $pregunta->requerida ? 'required' : '' }}>
            <label class="form-check-label font-weight-bold text-danger" for="{{ $fieldId }}_no">
                No
            </label>
        </div>
    </div>

@elseif($tipoSlug === 'escala_5')
    <div class="d-flex flex-wrap escala-grupo" style="gap:.5rem;">
        @for($k = 1; $k <= 5; $k++)
            <div class="form-check form-check-inline mr-0">
                <input type="radio"
                       name="{{ $fieldName }}"
                       id="{{ $fieldId }}_{{ $k }}"
                       value="{{ $k }}"
                       class="form-check-input d-none escala-input"
                       {{ $pregunta->requerida ? 'required' : '' }}>
                <label class="btn btn-outline-primary px-3 py-2 escala-label"
                       for="{{ $fieldId }}_{{ $k }}">{{ $k }}</label>
            </div>
        @endfor
        <small class="text-muted align-self-center ml-2">1 = Muy malo &nbsp; 5 = Excelente</small>
    </div>

@elseif($tipoSlug === 'escala_10')
    <div class="d-flex flex-wrap escala-grupo" style="gap:.5rem;">
        @for($k = 1; $k <= 10; $k++)
            <div class="form-check form-check-inline mr-0">
                <input type="radio"
                       name="{{ $fieldName }}"
                       id="{{ $fieldId }}_{{ $k }}"
                       value="{{ $k }}"
                       class="form-check-input d-none escala-input"
                       {{ $pregunta->requerida ? 'required' : '' }}>
                <label class="btn btn-outline-primary px-3 py-2 escala-label"
                       for="{{ $fieldId }}_{{ $k }}">{{ $k }}</label>
            </div>
        @endfor
        <small class="text-muted align-self-center ml-2">1 = Muy malo &nbsp; 10 = Excelente</small>
    </div>
@endif

@once
<style>
    .escala-input:checked + .escala-label {
        background-color: #4e73df;
        border-color: #4e73df;
        color: #fff;
    }
</style>
@endonce