@php
    $scaleItems = $scaleItems ?? [
        ['score' => 1, 'label' => 'Sangat Tidak Setuju'],
        ['score' => 2, 'label' => 'Tidak Setuju'],
        ['score' => 3, 'label' => 'Netral'],
        ['score' => 4, 'label' => 'Setuju'],
        ['score' => 5, 'label' => 'Sangat Setuju'],
    ];
@endphp

<div class="overflow-hidden rounded-lg border border-slate-200 bg-white shadow-sm">
    <div class="border-b border-slate-200 bg-slate-50 p-4 sm:p-6">
        <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
            <div>
                <span class="inline-flex rounded-full px-3 py-1 text-xs font-semibold ring-1 {{ $badgeClass ?? 'bg-slate-100 text-slate-700 ring-slate-200' }}">
                    {{ $eyebrow ?? 'Bagian kuesioner' }}
                </span>
                <h2 class="mt-2 text-lg font-semibold text-slate-950 sm:mt-3 sm:text-xl">{{ $title }}</h2>
                <p class="mt-1 text-sm leading-6 text-slate-600 sm:mt-2">{{ $description }}</p>
            </div>
            <div class="hidden rounded-lg bg-white px-4 py-3 text-center ring-1 ring-slate-200 sm:block">
                <p class="text-2xl font-bold text-slate-950">{{ $questions->count() }}</p>
                <p class="text-xs font-medium text-slate-500">Pernyataan</p>
            </div>
        </div>

        <div class="mt-5 hidden gap-2 sm:grid sm:grid-cols-5">
            @foreach ($scaleItems as $item)
                <div class="rounded-lg bg-white p-3 ring-1 ring-slate-200">
                    <p class="text-sm font-bold text-slate-950">{{ $item['score'] }}</p>
                    <p class="mt-1 text-xs leading-4 text-slate-600">{{ $item['label'] }}</p>
                </div>
            @endforeach
        </div>
    </div>

    <div class="divide-y divide-slate-100">
        @forelse ($questions as $index => $question)
            <fieldset class="p-4 sm:p-5">
                <legend class="w-full">
                    <span class="flex gap-2.5 sm:gap-3">
                        <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-slate-900 text-sm font-bold text-white sm:h-9 sm:w-9">
                            {{ ($startNumber ?? 1) + $index }}
                        </span>
                        <span class="pt-0.5 text-sm font-semibold leading-6 text-slate-950 sm:pt-1">
                            {{ $question->question_text }}
                        </span>
                    </span>
                </legend>

                <div class="mt-4 grid grid-cols-5 gap-1.5 sm:gap-2">
                    @foreach ($scaleItems as $item)
                        <label class="flex min-h-14 cursor-pointer flex-col items-center justify-center gap-1 rounded-lg border border-slate-200 bg-white px-1.5 py-2 text-center transition hover:border-blue-300 hover:bg-blue-50/40 focus-within:border-blue-600 focus-within:ring-2 focus-within:ring-blue-100 has-[:checked]:border-blue-600 has-[:checked]:bg-blue-50 sm:min-h-[4.75rem] sm:gap-2 sm:p-3">
                            <input type="radio" name="answers[{{ $question->id }}]" value="{{ $item['score'] }}" @checked((string) old("answers.{$question->id}") === (string) $item['score']) required class="peer sr-only">
                            <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-slate-100 text-sm font-bold text-slate-950 ring-1 ring-slate-200 transition peer-checked:bg-blue-600 peer-checked:text-white peer-checked:ring-blue-600 sm:h-9 sm:w-9">
                                {{ $item['score'] }}
                            </span>
                            <span class="min-w-0">
                                <span class="block text-[9px] font-semibold leading-tight text-slate-900 sm:text-xs">{{ $item['label'] }}</span>
                            </span>
                        </label>
                    @endforeach
                </div>
            </fieldset>
        @empty
            <div class="p-5 text-sm text-slate-600">
                Pertanyaan belum tersedia.
            </div>
        @endforelse
    </div>
</div>