@php
  $qid    = $q->id;
  $type   = strtolower($q->input_type ?? 'text');   
  $label  = $q->label ?: 'Question';
  $req    = (bool) $q->is_required;
  $maxlen = $q->total_digits ? (int) $q->total_digits : null;
@endphp

<div class="question-block border rounded p-3" data-qid="{{ $qid }}" data-type="{{ $type }}" data-parent-chain=",">
  <label class="form-label fw-semibold d-block">
    {{ $q->question_text }}
    @if($req)<span class="text-danger">*</span>@endif
  </label>

  @switch($type)
    @case('text')
      <input
        type="text"
        name="q_{{ $qid }}"
        class="form-control"
        @if($req) required @endif
        @if($maxlen) maxlength="{{ $maxlen }}" @endif
      >
      @break

    @case('number')
      <input
        type="number"
        name="q_{{ $qid }}"
        class="form-control"
        inputmode="numeric"
        @if($req) required @endif
        @if($maxlen) maxlength="{{ $maxlen }}" @endif
      >
      @break

    @case('textarea')
      <textarea
        name="q_{{ $qid }}"
        class="form-control"
        rows="3"
        @if($req) required @endif
        @if($maxlen) maxlength="{{ $maxlen }}" @endif
      ></textarea>
      @break

    @case('date')
      <input
        type="date"
        name="q_{{ $qid }}"
        class="form-control"
        @if($req) required @endif
      >
      @break

    @case('select')
      <select name="q_{{ $qid }}" class="form-select" @if($req) required @endif>
        <option value="">-- Select --</option>
        @foreach($q->options as $opt)
          <option value="{{ $opt->id }}">{{ $opt->option_text }}</option>
        @endforeach
      </select>
      @break

    @case('radio')
      <div class="vstack gap-2">
        @foreach($q->options as $opt)
          <label class="d-flex align-items-center gap-2">
            <input type="radio" name="q_{{ $qid }}" value="{{ $opt->id }}" @if($req) required @endif>
            <span>{{ $opt->option_text }}</span>
          </label>
        @endforeach
      </div>
      @break

    @case('checkbox')
      <div class="vstack gap-2">
        @foreach($q->options as $opt)
          <label class="d-flex align-items-center gap-2">
            <input type="checkbox" name="q_{{ $qid }}[]" value="{{ $opt->id }}">
            <span>{{ $opt->option_text }}</span>
          </label>
        @endforeach
      </div>
      @break

    @default
      <input type="text" name="q_{{ $qid }}" class="form-control" @if($req) required @endif>
  @endswitch

  @if($q->label)
    <small class="text-muted d-block mt-1">{{ $q->label }}</small>
  @endif
</div>