@extends('layouts.template')

@section('title', 'Kuesioner Soal')

@section('custom_css')
<style>
    .question-card {
        border: 1px solid #dee2e6;
        border-radius: 12px;
        padding: 1.25rem;
        background: #fff;
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
    }

    .question-layout .question-text-col {
        border-right: 1px solid #f1f3f5;
    }

    .question-layout .answer-section {
        padding-left: 1.5rem;
    }

    @media (max-width: 767.98px) {
        .question-layout .question-text-col {
        border-right: 0;
        border-bottom: 1px dashed #e9ecef;
        padding-bottom: 1rem;
        margin-bottom: 1rem;
        }

        .question-layout .answer-section {
        padding-left: 0;
        }
    }

    .option-scroll {
        max-height: 220px;
        overflow-y: auto;
        border: 1px dashed #ced4da;
        border-radius: 0.65rem;
        padding: 0.75rem 1rem;
        background-color: #f8f9fa;
    }

    .option-scroll::-webkit-scrollbar {
        width: 6px;
    }

    .option-scroll::-webkit-scrollbar-thumb {
        background-color: rgba(13, 110, 253, 0.4);
        border-radius: 3px;
    }

    .option-search {
        position: relative;
    }

    .option-search .search-icon {
        position: absolute;
        top: 50%;
        left: 0.85rem;
        transform: translateY(-50%);
        color: #adb5bd;
        pointer-events: none;
    }

    .option-search .search-icon svg {
        width: 14px;
        height: 14px;
        display: block;
    }

    .option-search input {
        padding-left: 2.4rem;
    }

    .lainnya-input {
        display: none;
    }

    .lainnya-input.show {
        display: block;
        margin-top: 0.85rem;
    }

    .dual-form-wrapper .form-label {
        font-weight: 600;
    }
 /* Skala di atas slider */
    .range-scale {
        position: relative;
        height: 45px;
        margin-top: 0px;
        border-top: 2px solid #495057;
        padding-top: 2px;
    }

    .range-track-colored {
        position: relative;
        margin-top: 0px;
    }

    .range-track-colored .range-colored {
        width: 100%;
        -webkit-appearance: none;
        background: #ffffff;
        height: 10px;
        border-radius: 5px;
        border: 1px solid #dee2e6;
    }

    /* hilangkan track default browser */
    .range-colored::-webkit-slider-runnable-track {
        background: transparent;
        height: 10px;
    }
    .range-colored::-moz-range-track {
        background: transparent;
        height: 10px;
    }

    /* thumb */
    .range-colored::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #0d6efd;
        cursor: pointer;
        position: relative;
        z-index: 2;
        border: 2px solid #fff;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    .range-colored::-moz-range-thumb {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #0d6efd;
        cursor: pointer;
        position: relative;
        z-index: 2;
        border: 2px solid #fff;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    .range-scale-item {
        position: absolute;
        top: 0;
        transform: translateX(-50%);
        text-align: center;
        font-size: 11px;
        color: #495057;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .range-scale-label {
        display: block;
        margin-bottom: 4px;
        font-weight: 500;
    }

    .range-scale-mark {
        display: block;
        width: 1px;
        height: 8px;
        background-color: #495057;
    }

    /* Tick besar untuk angka 1 dan kelipatan 10 */
    .range-scale-item-major .range-scale-mark {
        height: 12px;
        width: 2px;
        background-color: #212529;
    }

    .range-scale-item-major .range-scale-label {
        font-weight: 600;
        color: #212529;
        font-size: 12px;
    }

    /* Tick khusus angka 1 */
    .range-scale-item-one .range-scale-mark {
        height: 12px;
        background-color: #212529;
        width: 2px;
    }

    .range-scale-item-one .range-scale-label {
        color: #212529;
        font-weight: 600;
        font-size: 12px;
    }
</style>
@endsection

@section('content')
@php
  $listHal = $daftarHal ?? collect([$hal]);
  $posisiAktif = $listHal->search($hal);
  if ($posisiAktif === false) {
      $posisiAktif = 0;
  }
  $totalHalaman = $totalHal ?? $listHal->count();
  $progressPercentage = $totalHalaman > 0 ? round((($posisiAktif + 1) / max($totalHalaman, 1)) * 100) : 100;
  $halSebelumnya = $posisiAktif > 0 ? $listHal[$posisiAktif - 1] : null;
  $halBerikut = ($posisiAktif < $listHal->count() - 1) ? $listHal[$posisiAktif + 1] : null;
  $isHalTerakhir = $halBerikut === null;
  $formLocked = $formLocked ?? false;
  $prefillJawaban = $prefillJawaban ?? [];
  $existingJawaban = $existingJawaban ?? [];
@endphp

<div class="py-4">
  <div class="row justify-content-center">
    <div class="col-xl-8 col-lg-10">
      <div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between gap-2 mb-3">
        <div>
          <p class="text-muted mb-1">Kuesioner</p>
          <h3 class="fw-semibold mb-0">{{ $soal->judul_soal ?? 'Daftar Soal' }}</h3>
        </div>
        <div class="d-flex align-items-center gap-2">
          <a href="{{ route('soal.index') }}" class="btn btn-outline-secondary btn-sm">
            &larr; Daftar Judul
          </a>
          <span class="badge bg-label-primary fs-6 px-3 py-2" id="badge-hal">Halaman {{ $hal }}</span>
        </div>
      </div>



      <div class="card border-0 shadow-sm mb-4">
        <div class="card-body">
          <div class="d-flex justify-content-between small text-muted mb-1">
            <span>Progres Halaman</span>
            <span id="progress-text">{{ $progressPercentage }}%</span>
          </div>
          <div class="progress" style="height: 8px;">
            <div class="progress-bar" id="progress-bar" role="progressbar" style="width: {{ $progressPercentage }}%;" aria-valuenow="{{ $progressPercentage }}" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
        </div>
      </div>

      @if ($hal === $halPertama)
        <div class="card border-0 shadow-sm mb-4" id="head_soal">
          <div class="card-body">
            <h5 class="mb-3 text-primary">{{ $soal->judul_soal ?? '-' }}</h5>
            <div class="border rounded p-3 bg-light text-body">
              {!! $soal->keterangan_soal !!}
            </div>
          </div>
        </div>
      @endif



      @if ($errors->any())
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
          <strong>Terjadi kesalahan.</strong> Silakan periksa kembali jawaban Anda.
          <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
      @endif
      @if ($formLocked)
        <div class="alert alert-info">
          Anda sudah mengisi kuesioner ini. Jawaban di bawah ditampilkan dalam mode baca.
        </div>
      @endif

      <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
        <h5 class="mb-0">Daftar Pertanyaan</h5>
        <small class="text-muted" id="summary-hal">Halaman {{ $hal }} dari {{ $listHal->count() }}</small>
      </div>

      <form id="form-soal" method="POST" action="{{ route('soal.store') }}" data-hal-list='@json($listHal->values())' data-form-locked="{{ $formLocked ? '1' : '0' }}">
        @csrf
        <input type="hidden" name="lms_mutu_soal_id" value="{{ $soal->id }}">
        <input type="hidden" name="hal" id="input-hal" value="{{ $hal }}">

        @php
          $questionCounter = 0;
        @endphp
        @forelse ($soal->soalDetail as $detail)
          @php
            $detailConfig = json_decode($detail->soal, true) ?? [];
            $pertanyaan = $detailConfig['soal'] ?? 'Pertanyaan tidak tersedia';
            $type = $detailConfig['type'] ?? 'option';
            $optionsRaw = $detailConfig['options'] ?? [];
            if (is_array($optionsRaw)) {
                $options = $optionsRaw;
            } elseif ($type === 'option_with_range' && is_string($optionsRaw)) {
                $options = [$optionsRaw];
            } else {
                $options = [];
            }
            $autoSelect = ($type === 'option' && count($options) == 1) ? true : false;
            if (!is_array($options)) {
                $options = [];
            }
            $optionValues = collect($options)->map(function ($value) {
                return is_scalar($value) ? (string) $value : '';
            })->all();
            $existingAnswer = $existingJawaban[$detail->id] ?? null;
            $prefillAnswer = $prefillJawaban[$detail->id] ?? null;
            $hasDefaultAnswer = array_key_exists('default', $detailConfig);
            $defaultAnswer = $hasDefaultAnswer ? $detailConfig['default'] : null;
            $currentAnswer = old('jawaban.' . $detail->id, $existingAnswer ?? $prefillAnswer);
            if (($currentAnswer === null || $currentAnswer === '') && $hasDefaultAnswer) {
                $currentAnswer = $defaultAnswer;
            }
            $existingOtherAnswer = $existingAnswer && !in_array($existingAnswer, $optionValues, true) ? $existingAnswer : null;
            $prefillOtherAnswer = $prefillAnswer && !in_array($prefillAnswer, $optionValues, true) ? $prefillAnswer : null;
            $oldOtherAnswer = old('jawaban_lainnya.' . $detail->id, $existingOtherAnswer ?? $prefillOtherAnswer);
            $hasCurrentAnswer = $currentAnswer !== null && $currentAnswer !== '';
            $isCustomCurrentAnswer = $hasCurrentAnswer && !in_array($currentAnswer, $optionValues, true);
            if (!$oldOtherAnswer && $isCustomCurrentAnswer) {
                $oldOtherAnswer = $currentAnswer;
            }
            $showLainnya = $isCustomCurrentAnswer
                || (is_string($currentAnswer) && stripos($currentAnswer, 'lainnya') !== false)
                || (!empty($oldOtherAnswer));
            $detailHal = $detail->hal ?? $listHal->first();
            $isVisible = $detailHal == $hal;
            $optionsCount = is_array($options) ? count($options) : 0;
            $hasLainnyaOption = collect($options)->contains(function ($optionItem) {
                return is_string($optionItem) && stripos($optionItem, 'lainnya') !== false;
            });
            if (!$hasLainnyaOption && $type === 'option_with_other') {
                $options[] = 'Lainnya';
                $optionsCount = count($options);
                $hasLainnyaOption = true;
            }
            $isConsentQuestion = !empty($detailConfig['persetujuan_form']);
            $shouldForceLainnyaSelection = $hasLainnyaOption && $showLainnya;
            $dualFormConfig = $detailConfig['dual_form'] ?? null;
            $useDualForm = $type === 'dual_form' || (!empty($dualFormConfig) && $dualFormConfig !== false);
            $dualYearOld = null;
            $dualMonthOld = null;
            $questionNumber = $detailConfig['no'] ?? '';
            $rangeMin = null;
            $rangeMax = null;
            $rangeStep = 1;
            $rangeDefault = null;
            $rangeTicks = [];
            if ($useDualForm && $currentAnswer) {
                if (preg_match('/([0-9]+)\\s*\\(Tahun\\)/i', $currentAnswer, $matchYear)) {
                    $dualYearOld = $matchYear[1];
                }
                if (preg_match('/([0-9]+)\\s*\\(Bulan\\)/i', $currentAnswer, $matchMonth)) {
                    $dualMonthOld = $matchMonth[1];
                }
            }
            if ($type === 'option_with_range' && !empty($options)) {
                $rangeSource = $options[0];
                if (is_array($rangeSource)) {
                    $rangeSource = $rangeSource['range'] ?? (isset($rangeSource['min'], $rangeSource['max']) ? $rangeSource['min'] . '-' . $rangeSource['max'] : null);
                }
                if (is_string($rangeSource) && preg_match('/(-?[0-9]+(?:[\\.,][0-9]+)?)\\s*-\\s*(-?[0-9]+(?:[\\.,][0-9]+)?)/', $rangeSource, $rangeMatch)) {
                    $rangeMin = (float) str_replace(',', '.', $rangeMatch[1]);
                    $rangeMax = (float) str_replace(',', '.', $rangeMatch[2]);
                    if ($rangeMin > $rangeMax) {
                        [$rangeMin, $rangeMax] = [$rangeMax, $rangeMin];
                    }
                    $rangeUsesDecimal = (fmod($rangeMin, 1) !== 0.0) || (fmod($rangeMax, 1) !== 0.0);
                    $rangeStep = $rangeUsesDecimal ? 0.1 : 1;
                    if (is_numeric($currentAnswer)) {
                        $numericAnswer = (float) $currentAnswer;
                        $rangeDefault = min(max($numericAnswer, $rangeMin), $rangeMax);
                    } else {
                        $rangeDefault = $rangeMin;
                    }
                    if ($rangeDefault === null) {
                        $rangeDefault = $rangeMin;
                    }
                    $rangeSpan = max($rangeMax - $rangeMin, 1);

                    $startTick = (int) ceil($rangeMin);
                    $endTick   = (int) floor($rangeMax);

                    for ($v = $startTick; $v <= $endTick; $v++) {
                        $position = (($v - $rangeMin) / $rangeSpan) * 100;

                        $rangeTicks[] = [
                            'value'    => $v,                                            // nilai asli
                            'label'    => ($v === 1 || $v % 10 === 0) ? $v : null,       // label hanya 1 & kelipatan 10
                            'position' => max(0, min(100, $position)),
                        ];
                    }
                }
            }
            $rangeMinDisplay = ($rangeMin !== null && floor($rangeMin) == $rangeMin) ? (int) $rangeMin : $rangeMin;
            $rangeMaxDisplay = ($rangeMax !== null && floor($rangeMax) == $rangeMax) ? (int) $rangeMax : $rangeMax;
            $rangeDefaultDisplay = ($rangeDefault !== null && floor($rangeDefault) == $rangeDefault) ? (int) $rangeDefault : $rangeDefault;
          @endphp
          <div class="question-card mb-4"
            data-hal-card="{{ $detailHal }}"
            data-detail-id="{{ $detail->id }}"
            data-consent-question="{{ $isConsentQuestion ? '1' : '0' }}"
            data-question-type="{{ $type }}"
            style="{{ $isVisible ? '' : 'display: none;' }}">
            <div class="row g-3 align-items-start question-layout">
              <div class="col-md-6 question-text-col">
                <div class="d-flex align-items-center gap-3 mb-1">
                  @if ($questionNumber !== null)
                  <span class="badge rounded-pill bg-label-primary fs-6">{{ $questionNumber }}</span>
                  @endif
                  <h5 class="fw-semibold mb-0">{{ $pertanyaan }}</h5>
                </div>
                @if ($isConsentQuestion)
                  <p class="text-muted small mb-0">Pertanyaan persetujuan</p>
                @endif
              </div>

              <div class="col-md-6 answer-section">
                @if ($useDualForm)
                  <div class="dual-form-wrapper" data-dual-wrapper="{{ $detail->id }}">
                    <div class="row g-3">
                      <div class="col-sm-6">
                        <label class="form-label small text-muted mb-1">Tahun</label>
                        <input type="number" min="0" class="form-control"
                          data-dual-input="tahun"
                          value="{{ $dualYearOld }}"
                          data-field-hal="{{ $detailHal }}"
                          @if($formLocked) disabled @endif
                          placeholder="Masukkan tahun">
                      </div>
                      <div class="col-sm-6">
                        <label class="form-label small text-muted mb-1">Bulan</label>
                        <input type="number" min="0" class="form-control"
                          data-dual-input="bulan"
                          value="{{ $dualMonthOld }}"
                          data-field-hal="{{ $detailHal }}"
                          @if($formLocked) disabled @endif
                          placeholder="Masukkan bulan">
                      </div>
                    </div>
                    <input type="hidden"
                      class="@error('jawaban.' . $detail->id) is-invalid @enderror"
                      name="jawaban[{{ $detail->id }}]"
                      value="{{ $currentAnswer }}"
                      data-dual-hidden="{{ $detail->id }}"
                      data-field-hal="{{ $detailHal }}"
                      @if ($isConsentQuestion) data-consent-input="1" required @endif
                      @if($formLocked) disabled @endif>
                  </div>
                @elseif ($type === 'textarea')
                  <textarea class="form-control @error('jawaban.' . $detail->id) is-invalid @enderror"
                    name="jawaban[{{ $detail->id }}]" rows="4"
                    data-field-hal="{{ $detailHal }}"
                    @if ($isConsentQuestion) data-consent-input="1" required @endif
                    @if($formLocked) disabled @endif
                    placeholder="Tulis jawaban Anda di sini">{{ $currentAnswer }}</textarea>
                @elseif ($type === 'text')
                  <input type="text" class="form-control @error('jawaban.' . $detail->id) is-invalid @enderror"
                    name="jawaban[{{ $detail->id }}]" value="{{ $currentAnswer }}"
                    data-field-hal="{{ $detailHal }}"
                    @if ($isConsentQuestion) data-consent-input="1" required @endif
                    @if($formLocked) disabled @endif
                    placeholder="Masukkan jawaban Anda">
                @elseif ($type === 'option_with_range')
                  @if ($rangeMin !== null && $rangeMax !== null)
                    <div class="range-slider-wrapper" data-range-wrapper="{{ $detail->id }}">
                        {{-- Track warna + slider --}}
                        <div class="range-track-colored">
                            <input type="range"
                                class="form-range range-colored border"
                                name="jawaban[{{ $detail->id }}]"
                                min="{{ $rangeMin }}"
                                max="{{ $rangeMax }}"
                                step="{{ $rangeStep }}"
                                value="{{ $rangeDefault ?? $rangeMin }}"
                                data-range-input="{{ $detail->id }}"
                                data-range-min-value="{{ $rangeMin }}"
                                data-range-max-value="{{ $rangeMax }}"
                                data-field-hal="{{ $detailHal }}"
                                @if ($isConsentQuestion) data-consent-input="1" required @endif
                                @if($formLocked) disabled @endif>
                        </div>
                        <div class="range-scale" aria-hidden="true">
                            @foreach ($rangeTicks as $tick)
                                @php
                                $value      = (int) $tick['value'];
                                $label      = $tick['label']; // bisa null
                                $isMajor    = ($value === 1) || ($value % 10 === 0);
                                $isOneTick  = ($value === 1);
                                @endphp

                                <div class="range-scale-item
                                            {{ $isMajor ? 'range-scale-item-major' : '' }}
                                            {{ $isOneTick ? 'range-scale-item-one' : '' }}"
                                    style="left: {{ $tick['position'] }}%;">
                                <span class="range-scale-mark"></span>

                                @if(!is_null($label))
                                    <span class="range-scale-label">{{ $label }}</span>
                                @endif
                                </div>
                            @endforeach
                        </div>
                        <div class="text-center mt-2 fw-semibold">
                            Nilai saat ini:
                            <span data-range-output="{{ $detail->id }}">{{ $rangeDefaultDisplay ?? $rangeMinDisplay }}</span>
                        </div>
                        <div class="input-group input-group-sm mt-3 range-manual-input">
                            <span class="input-group-text">Atau isi manual</span>
                            <input type="number"
                                class="form-control"
                                min="{{ $rangeMin }}"
                                max="{{ $rangeMax }}"
                                step="{{ $rangeStep }}"
                                value="{{ $rangeDefault ?? $rangeMin }}"
                                data-range-manual="{{ $detail->id }}"
                                data-field-hal="{{ $detailHal }}"
                                @if ($isConsentQuestion) data-consent-input="1" @endif
                                @if($formLocked) disabled @endif>
                        </div>
                    </div>
                  @else
                    <input type="text" class="form-control @error('jawaban.' . $detail->id) is-invalid @enderror"
                      name="jawaban[{{ $detail->id }}]" value="{{ $currentAnswer }}"
                      data-field-hal="{{ $detailHal }}"
                      @if ($isConsentQuestion) data-consent-input="1" required @endif
                      @if($formLocked) disabled @endif
                      placeholder="Masukkan jawaban Anda">
                  @endif
                @else
                  @if (!empty($options))
                    @php
                      $lainnyaWrapperRendered = false;
                    @endphp
                    <div class="option-search mb-3">
                     @if(count($options) > 6)
                      <input type="text"
                        class="form-control form-control-sm option-search-input"
                        placeholder="Cari jawaban"
                        data-option-search="{{ $detail->id }}"
                        autocomplete="off">
                    @endif
                    </div>
                    <div class="option-scroll" data-option-list="{{ $detail->id }}">
                      @foreach ($options as $optionIndex => $option)
                        @php
                          $optionId = 'jawaban-' . $detail->id . '-' . $optionIndex;
                          $optionLabel = is_scalar($option) ? (string) $option : '';
                          $isLainnya = stripos($optionLabel, 'lainnya') !== false;
                          $optionValue = $isLainnya && $oldOtherAnswer ? $oldOtherAnswer : $optionLabel;
                          $shouldCheck = $currentAnswer === $optionValue || ($isLainnya && $shouldForceLainnyaSelection);
                        @endphp
                        <div class="form-check mb-2" data-option-item>
                          <input class="form-check-input @error('jawaban.' . $detail->id) is-invalid @enderror"
                            type="radio"
                            name="jawaban[{{ $detail->id }}]"
                            id="{{ $optionId }}"
                            value="{{ $optionValue }}"
                            data-original-value="{{ $optionLabel }}"
                            data-lainnya-radio="{{ $isLainnya ? $detail->id : '' }}"
                            data-field-hal="{{ $detailHal }}"
                            @if ($isConsentQuestion) data-consent-input="1" required @endif
                            @if($formLocked) disabled @endif
                            {{ $shouldCheck || $autoSelect ? 'checked' : '' }}>
                          <label class="form-check-label" for="{{ $optionId }}">
                            {{ $optionLabel }}
                          </label>
                        </div>

                        @if ($isLainnya)
                          @php
                            $lainnyaWrapperRendered = true;
                          @endphp
                          <div class="lainnya-input {{ $showLainnya ? 'show' : '' }}" data-lainnya-wrapper="{{ $detail->id }}">
                            <input type="text" class="form-control form-control-sm mt-2"
                              name="jawaban_lainnya[{{ $detail->id }}]"
                              value="{{ $oldOtherAnswer }}"
                              data-lainnya-input="{{ $detail->id }}"
                              data-field-hal="{{ $detailHal }}"
                              @if ($isConsentQuestion) data-consent-input="1" @endif
                              @if($formLocked) disabled @endif
                              placeholder="Tuliskan jawaban lainnya">
                          </div>
                        @endif
                      @endforeach
                    </div>
                    @if ($hasLainnyaOption || $type === 'option_with_other')
                      <small class="form-text text-muted">
                        Jika jawaban yang Anda cari tidak ada di daftar, pilih opsi <strong>"Lainnya"</strong> lalu isi sesuai kebutuhan.
                      </small>
                    @endif
                    <div class="text-muted small mt-2" data-option-empty="{{ $detail->id }}" style="display: none;">
                      Tidak ada jawaban yang cocok.
                    </div>
                    @if (!$lainnyaWrapperRendered && $type === 'option_with_other')
                      <div class="lainnya-input {{ $showLainnya ? 'show' : '' }}" data-lainnya-wrapper="{{ $detail->id }}">
                        <input type="text" class="form-control form-control-sm mt-2"
                          name="jawaban_lainnya[{{ $detail->id }}]"
                          value="{{ $oldOtherAnswer }}"
                          data-lainnya-input="{{ $detail->id }}"
                          data-field-hal="{{ $detailHal }}"
                          @if ($isConsentQuestion) data-consent-input="1" @endif
                          @if($formLocked) disabled @endif
                          placeholder="Tuliskan jawaban lainnya">
                      </div>
                    @endif
                  @else
                    <input type="text" class="form-control @error('jawaban.' . $detail->id) is-invalid @enderror"
                      name="jawaban[{{ $detail->id }}]" value="{{ $currentAnswer }}"
                      data-field-hal="{{ $detailHal }}"
                      @if ($isConsentQuestion) data-consent-input="1" @endif
                      @if($formLocked) disabled @endif
                      placeholder="Masukkan jawaban Anda">
                  @endif
                @endif

                @error('jawaban.' . $detail->id)
                  <div class="invalid-feedback d-block">{{ $message }}</div>
                @enderror
                @error('jawaban_lainnya.' . $detail->id)
                  <div class="text-danger small mt-1">{{ $message }}</div>
                @enderror
              </div>
            </div>
          </div>
        @empty
          <div class="alert alert-info">
            Belum ada pertanyaan pada halaman ini.
          </div>
        @endforelse

        @error('lms_mutu_soal_id')
          <p class="text-danger mb-0">{{ $message }}</p>
        @enderror
        @error('jawaban')
          <p class="text-danger mb-0">{{ $message }}</p>
        @enderror

        <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center mt-4 gap-3">
          <div class="d-flex gap-2">
            <button type="button"
              class="btn btn-outline-secondary btn-prev-hal"
              data-nav-control="prev"
              {{ $halSebelumnya ? '' : 'disabled' }}>
              &larr; Halaman Sebelumnya
            </button>
            <button type="button"
              class="btn btn-outline-secondary btn-next-hal"
              data-nav-control="next"
              {{ $halBerikut ? '' : 'disabled' }}>
              Halaman Berikutnya &rarr;
            </button>
          </div>
          <button type="submit" class="btn btn-primary ms-md-auto"
            data-final-submit="true"
            style="{{ (!$isHalTerakhir || $formLocked) ? 'display: none;' : '' }}"
            {{ $soal->soalDetail->isEmpty() || $formLocked ? 'disabled' : '' }}>
            Simpan Jawaban
          </button>
        </div>
      </form>
    </div>
  </div>
</div>
@endsection

@section('custom_js')
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const form = document.getElementById('form-soal');
    if (!form) {
      return;
    }

    let halList;
    try {
      halList = JSON.parse(form.dataset.halList || '[]');
    } catch (error) {
      halList = [];
    }
    if (!Array.isArray(halList) || !halList.length) {
      halList = [parseInt(document.getElementById('input-hal')?.value || '1', 10) || 1];
    }
    halList = halList.map(function (value) {
      return parseInt(value, 10);
    });

    const hiddenHalInput = document.getElementById('input-hal');
    let currentHal = parseInt(hiddenHalInput?.value || halList[0], 10);
    const formLocked = form.dataset.formLocked === '1';
    const navHalButtons = document.querySelectorAll('.nav-hal-btn');
    const questionCards = document.querySelectorAll('[data-hal-card]');
    const halInputs = document.querySelectorAll('[data-field-hal]');
    const prevButton = document.querySelector('.btn-prev-hal');
    const nextButton = document.querySelector('.btn-next-hal');
    const finalSubmitButton = document.querySelector('[data-final-submit="true"]');
    const badgeHal = document.getElementById('badge-hal');
    const progressBar = document.getElementById('progress-bar');
    const progressText = document.getElementById('progress-text');
    const summaryHal = document.getElementById('summary-hal');
    const totalHal = halList.length || 1;
    const nonConsentFields = document.querySelectorAll('[data-field-hal]:not([data-consent-input="1"])');
    const consentFields = document.querySelectorAll('[data-consent-input="1"]');
    const headSoalCard = document.getElementById('head_soal');
    const consentNegativeKeywords = ['tidak', 'tidak setuju'];
    let immediateSubmitActive = false;

    function normalizeOtherValue(value) {
      return (value || '').toString().trim().toLowerCase();
    }

    function isOtherChoice(value) {
      const normalized = normalizeOtherValue(value);
      if (!normalized) {
        return false;
      }
      return normalized === 'lainnya'
        || normalized === 'lainnya (sebutkan)'
        || normalized === 'lainnya/other'
        || normalized === 'lainnya / other'
        || normalized === 'other'
        || normalized === 'others'
        || normalized.includes('lainnya')
        || normalized.includes('other');
    }

    function getLabelTextByInput(input) {
      if (!input || !input.id) {
        return '';
      }
      const label = document.querySelector('label[for="' + input.id + '"]');
      return label ? (label.textContent || '') : '';
    }

    halInputs.forEach(function (field) {
      if (field.dataset && field.dataset.lainnyaInput) {
        field.dataset.originalRequired = '0';
        field.dataset.dynamicRequired = field.required ? '1' : '0';
      } else {
        field.dataset.originalRequired = field.required ? '1' : '0';
        field.dataset.dynamicRequired = field.dataset.dynamicRequired || '0';
      }
    });

    setupLainnyaInputs();
    setupOptionSearch();
    setupRangeInputs();
    setupDualFormInputs();
    setupConsentWatcher();
    updateQuestionVisibility();
    updateNavigationUI();

    navHalButtons.forEach(function (button) {
      button.addEventListener('click', function () {
        const targetHal = parseInt(button.dataset.navHal, 10);
        changeHal(targetHal);
      });
    });

    if (prevButton) {
      prevButton.addEventListener('click', function () {
        navigateRelative(-1);
      });
    }

    if (nextButton) {
      nextButton.addEventListener('click', function () {
        navigateRelative(1);
      });
    }

    form.addEventListener('submit', function (event) {
      if (formLocked) {
        event.preventDefault();
        return false;
      }
      if (!immediateSubmitActive) {
        return;
      }
      nonConsentFields.forEach(function (field) {
        if (shouldDisableFieldForImmediate(field)) {
          field.disabled = true;
        }
      });
    });

    function navigateRelative(step) {
      if (immediateSubmitActive) {
        return;
      }
      const currentIndex = halList.indexOf(currentHal);
      const targetHal = halList[currentIndex + step];
      if (typeof targetHal === 'undefined') {
        return;
      }
      if (headSoalCard) {
        if (targetHal === 1) {
          headSoalCard.classList.remove('d-none');
        } else {
          headSoalCard.classList.add('d-none');
        }
      }
      changeHal(targetHal);
    }

    function changeHal(targetHal) {
      if (immediateSubmitActive) {
        return;
      }
      if (targetHal === currentHal || halList.indexOf(targetHal) === -1) {
        return;
      }
      const currentIndex = halList.indexOf(currentHal);
      const targetIndex = halList.indexOf(targetHal);
      const movingForward = targetIndex > currentIndex;

      if (movingForward && !validateHal(currentHal)) {
        return;
      }

      currentHal = targetHal;
      if (hiddenHalInput) {
        hiddenHalInput.value = currentHal;
      }
      updateQuestionVisibility();
      updateNavigationUI();
    }

    function validateHal(halValue) {
      const fieldsToDisable = [];
      halInputs.forEach(function (field) {
        const fieldHal = parseInt(field.dataset.fieldHal, 10);
        if (fieldHal !== halValue && field.required) {
          field.dataset.tmpRequired = '1';
          field.required = false;
          fieldsToDisable.push(field);
        }
      });

      const isValid = form.checkValidity();
      if (!isValid) {
        form.reportValidity();
      }

      fieldsToDisable.forEach(function (field) {
        field.required = true;
        delete field.dataset.tmpRequired;
      });

      return isValid;
    }

    function updateQuestionVisibility() {
      questionCards.forEach(function (card) {
        const halValue = parseInt(card.dataset.halCard, 10);
        card.style.display = halValue === currentHal ? '' : 'none';
      });
    }

    function updateNavigationUI() {
      const currentIndex = halList.indexOf(currentHal);
      const isFirst = currentIndex <= 0;
      const isLast = currentIndex === halList.length - 1;

      if (prevButton) {
        prevButton.disabled = immediateSubmitActive ? true : isFirst;
      }
      if (nextButton) {
        if (immediateSubmitActive) {
          nextButton.style.display = 'none';
        } else {
          nextButton.style.display = '';
          nextButton.disabled = isLast;
        }
      }

      navHalButtons.forEach(function (button) {
        const isActive = parseInt(button.dataset.navHal, 10) === currentHal;
        button.classList.toggle('btn-primary', isActive);
        button.classList.toggle('btn-outline-primary', !isActive);
        button.disabled = immediateSubmitActive;
      });

      const progress = totalHal > 0 ? Math.round(((currentIndex + 1) / totalHal) * 100) : 100;
      if (badgeHal) {
        badgeHal.textContent = 'Halaman ' + currentHal;
      }
      if (progressBar) {
        progressBar.style.width = progress + '%';
        progressBar.setAttribute('aria-valuenow', progress);
      }
      if (progressText) {
        progressText.textContent = progress + '%';
      }
      if (summaryHal) {
        summaryHal.textContent = 'Halaman ' + (currentIndex + 1) + ' dari ' + totalHal;
      }
      if (finalSubmitButton) {
        const canShowFinalButton = !formLocked && (isLast || immediateSubmitActive);
        finalSubmitButton.style.display = canShowFinalButton ? '' : 'none';
        finalSubmitButton.disabled = !canShowFinalButton;
      }
    }

    function setupLainnyaInputs() {
      const radios = form.querySelectorAll('input[type="radio"][name^="jawaban["]');
      radios.forEach(function (radio) {
        radio.addEventListener('change', function (event) {
          const customDetailId = event.target.getAttribute('data-lainnya-radio');
          const detailId = customDetailId || event.target.name.replace('jawaban[', '').replace(']', '');
          const targetWrapper = detailId ? form.querySelector('[data-lainnya-wrapper="' + detailId + '"]') : null;
          const labelText = getLabelTextByInput(event.target);
          const shouldShow = !!customDetailId
            || isOtherChoice(event.target.value)
            || isOtherChoice(event.target.dataset.originalValue)
            || isOtherChoice(labelText);

          if (targetWrapper) {
            if (shouldShow) {
              handleLainnyaInput(targetWrapper, true);
            } else {
              handleLainnyaInput(targetWrapper, false, true);
            }
          }
        });
      });

      form.querySelectorAll('[data-lainnya-input]').forEach(function (input) {
        input.addEventListener('input', function (event) {
          const detailId = input.getAttribute('data-lainnya-input');
          syncCustomOptionValue(detailId, event.target.value);
        });
      });

      form.querySelectorAll('[data-lainnya-wrapper].show').forEach(function (wrapper) {
        handleLainnyaInput(wrapper, true);
      });
    }

    function handleLainnyaInput(wrapper, show, clearValue = false) {
      if (!wrapper) {
        return;
      }
      wrapper.classList.toggle('show', show);
      const input = wrapper.querySelector('input');
      const detailId = wrapper.getAttribute('data-lainnya-wrapper');
      if (input) {
        input.required = show;
        input.dataset.dynamicRequired = show ? '1' : '0';
        if (show) {
          input.focus();
          syncCustomOptionValue(detailId, input.value);
        } else {
          if (clearValue) {
            input.value = '';
          }
          resetCustomOptionValue(detailId);
        }
      } else if (!show) {
        resetCustomOptionValue(detailId);
      }
    }

    function syncCustomOptionValue(detailId, customValue) {
      if (!detailId) {
        return;
      }
      const trimmedValue = (customValue || '').toString().trim();
      const radio = form.querySelector('input[data-lainnya-radio="' + detailId + '"]');
      if (radio) {
        const originalValue = radio.dataset.originalValue || 'lainnya';
        radio.value = trimmedValue || originalValue;
      }
    }

    function resetCustomOptionValue(detailId) {
      if (!detailId) {
        return;
      }
      const radio = form.querySelector('input[data-lainnya-radio="' + detailId + '"]');
      if (radio && radio.dataset.originalValue) {
        radio.value = radio.dataset.originalValue;
      }
    }

    function setupOptionSearch() {
      const searchInputs = form.querySelectorAll('[data-option-search]');
      searchInputs.forEach(function (input) {
        const detailId = input.getAttribute('data-option-search');
        const listContainer = detailId ? form.querySelector('[data-option-list="' + detailId + '"]') : null;
        if (!listContainer) {
          return;
        }
        const emptyState = detailId ? form.querySelector('[data-option-empty="' + detailId + '"]') : null;
        const handler = function () {
          filterOptionList(listContainer, input.value, emptyState);
        };
        input.addEventListener('input', handler);
        handler();
      });
    }

    function filterOptionList(container, query, emptyState) {
      const normalized = (query || '').toString().trim().toLowerCase();
      let visibleCount = 0;
      container.querySelectorAll('[data-option-item]').forEach(function (item) {
        const label = item.querySelector('.form-check-label');
        const text = (label ? label.textContent : item.textContent || '').toString().trim().toLowerCase();
        const shouldShow = !normalized || text.indexOf(normalized) !== -1;
        item.style.display = shouldShow ? '' : 'none';
        if (shouldShow) {
          visibleCount++;
        }
      });
      if (emptyState) {
        emptyState.style.display = visibleCount ? 'none' : '';
      }
    }

function setupRangeInputs() {
  const rangeInputs = form.querySelectorAll('[data-range-input]');

  rangeInputs.forEach(function (input) {
    const detailId    = input.getAttribute('data-range-input');
    const output      = detailId ? form.querySelector('[data-range-output="' + detailId + '"]') : null;
    const manualInput = detailId ? form.querySelector('[data-range-manual="' + detailId + '"]') : null;

    const minValue  = parseFloat(input.dataset.rangeMinValue || input.min || '0');
    const maxValue  = parseFloat(input.dataset.rangeMaxValue || input.max || '100');
    const stepValue = parseFloat(input.step || '1') || 1;

    function clampAndSnap(rawVal) {
      let v = parseFloat(rawVal);
      if (isNaN(v)) v = minValue;
      if (v < minValue) v = minValue;
      if (v > maxValue) v = maxValue;
      return snapToStep(v, minValue, stepValue);
    }

    function updateBoth(fromManual) {
      const current = fromManual && manualInput ? manualInput.value : input.value;
      const value   = clampAndSnap(current);

      input.value = value;

      if (output) {
        output.textContent = formatRangeDisplay(value);
      }
      if (manualInput && !fromManual) {
        manualInput.value = value;
      }

      updateRangeFill(input, minValue, maxValue);
    }

    input.addEventListener('input', function () {
      updateBoth(false);
    });

    if (manualInput) {
      manualInput.addEventListener('input', function () {
        updateBoth(true);
      });
    }

    // initial
    updateBoth(false);
  });
}



    function formatRangeDisplay(value) {
      if (value === null || value === undefined) {
        return '';
      }
      const numberValue = Number(value);
      if (!isNaN(numberValue) && Number.isFinite(numberValue)) {
        return Number.isInteger(numberValue) ? String(numberValue) : numberValue.toFixed(1);
      }
      return value;
    }

    function updateRangeFill(input, min, max) {
        if (!input || !isFinite(min) || !isFinite(max) || max === min) {
            return;
        }

        const value = parseFloat(input.value || min);
        const ratio = Math.max(0, Math.min(1, (value - min) / (max - min))); // 0–1
        const percent = ratio * 100;

        // hijau dari 0 sampai nilai sekarang, sisanya putih
        input.style.background =
            'linear-gradient(90deg, #00c070 0% ' + percent + '%, #ffffff ' + percent + '% 100%)';
    }


    function snapToStep(value, min, step) {
      if (!isFinite(step) || step <= 0) {
        return value;
      }
      const delta = value - min;
      const steps = Math.round(delta / step);
      const snapped = min + steps * step;
      const decimals = getDecimalPlaces(step);
      return parseFloat(snapped.toFixed(decimals));
    }

    function getDecimalPlaces(number) {
      const value = number.toString();
      if (value.indexOf('.') === -1) {
        return 0;
      }
      return value.length - value.indexOf('.') - 1;
    }

    function shouldDisableFieldForImmediate(field) {
      if (!field || field.dataset.consentInput === '1') {
        return false;
      }
      const tagName = (field.tagName || '').toLowerCase();
      const type = (field.type || '').toLowerCase();
      if (type === 'radio' || type === 'checkbox') {
        return false;
      }
      if (tagName === 'select') {
        const value = field.value;
        return value === null || value === '';
      }
      const value = (field.value || '').toString().trim();
      return value === '';
    }

    function setupDualFormInputs() {
      document.querySelectorAll('[data-dual-wrapper]').forEach(function (wrapper) {
        const detailId = wrapper.getAttribute('data-dual-wrapper');
        const hiddenInput = wrapper.querySelector('[data-dual-hidden]');
        const yearInput = wrapper.querySelector('[data-dual-input="tahun"]');
        const monthInput = wrapper.querySelector('[data-dual-input="bulan"]');
        const inputs = [yearInput, monthInput].filter(Boolean);
        inputs.forEach(function (input) {
          input.addEventListener('input', function () {
            updateDualFormAnswer(detailId);
          });
        });
        updateDualFormAnswer(detailId);
      });
    }

    function updateDualFormAnswer(detailId) {
      if (!detailId) {
        return;
      }
      const wrapper = document.querySelector('[data-dual-wrapper="' + detailId + '"]');
      if (!wrapper) {
        return;
      }
      const hiddenInput = wrapper.querySelector('[data-dual-hidden]');
      if (!hiddenInput) {
        return;
      }
      const yearInput = wrapper.querySelector('[data-dual-input="tahun"]');
      const monthInput = wrapper.querySelector('[data-dual-input="bulan"]');
      const yearValue = (yearInput && yearInput.value ? yearInput.value : '').toString().trim();
      const monthValue = (monthInput && monthInput.value ? monthInput.value : '').toString().trim();
      const parts = [];
      if (yearValue !== '') {
        parts.push(yearValue + ' (Tahun)');
      }
      if (monthValue !== '') {
        parts.push(monthValue + ' (Bulan)');
      }
      const combined = parts.join(' ');
      hiddenInput.value = combined;
      if (hiddenInput.required) {
        hiddenInput.setCustomValidity(combined ? '' : 'Harap isi minimal salah satu kolom (Tahun/Bulan).');
      }
    }

    function setupConsentWatcher() {
      if (!consentFields.length) {
        return;
      }
      consentFields.forEach(function (field) {
        field.addEventListener('change', function (event) {
          if (field.type === 'radio' && !field.checked) {
            return;
          }
          evaluateConsentValue(event.target.value);
        });

        if (
          (field.type === 'radio' && field.checked) ||
          (field.tagName === 'SELECT' && field.value) ||
          (field.type !== 'radio' && field.value)
        ) {
          evaluateConsentValue(field.value);
        }
      });
    }

    function evaluateConsentValue(value) {
      const normalized = (value || '').toString().trim().toLowerCase();
      const shouldStop = consentNegativeKeywords.some(function (keyword) {
        return normalized.startsWith(keyword);
      });
      toggleImmediateSubmit(shouldStop);
    }

    function toggleImmediateSubmit(activate) {
      if (immediateSubmitActive === activate) {
        updateNavigationUI();
        return;
      }
      immediateSubmitActive = activate;
      halInputs.forEach(function (field) {
        const originalRequired = field.dataset.originalRequired === '1';
        const dynamicRequired = field.dataset.dynamicRequired === '1';
        field.required = activate ? false : (originalRequired || dynamicRequired);
        if (!field.required && typeof field.setCustomValidity === 'function') {
          field.setCustomValidity('');
        }
      });
      updateNavigationUI();
    }
  });
</script>

@endsection