@extends('layouts.questionnaire')

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

@section('content')
    @php
        $totalQuestions = $stressQuestions->count() + $academicQuestions->count();
        $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'],
        ];
        $hasAnswerErrors = collect($errors->getMessages())
            ->keys()
            ->contains(fn (string $key): bool => str_starts_with($key, 'answers'));
        $hasIdentityErrors = collect($errors->getMessages())
            ->keys()
            ->contains(fn (string $key): bool => in_array($key, ['name', 'gender', 'class_name', 'npsn'], true));
        $initialStep = (old('answers') || $hasAnswerErrors) && ! $hasIdentityErrors ? 'questions' : 'identity';
    @endphp

    <section class="border-b border-slate-200 bg-white">
        <div class="mx-auto grid max-w-6xl gap-5 px-4 py-5 sm:px-6 sm:py-8 lg:grid-cols-[1fr_22rem] lg:px-8">
            <div>
                <p class="text-xs font-semibold uppercase tracking-wide text-blue-700 sm:text-sm">Form kuesioner siswa</p>
                <h1 class="mt-2 max-w-3xl text-2xl font-bold leading-tight text-slate-950 sm:mt-3 sm:text-4xl">
                    Isi kuesioner dengan jujur sesuai kondisi kamu.
                </h1>
                <p class="mt-3 max-w-2xl text-sm leading-6 text-slate-600 sm:mt-4 sm:text-base">
                    Mulai dari biodata, lalu lanjut ke kuesioner. Tidak ada jawaban benar atau salah.
                </p>
            </div>

            <div class="hidden grid-cols-3 gap-3 self-end sm:grid">
                <div class="rounded-lg border border-slate-200 bg-slate-50 p-3">
                    <p class="text-2xl font-bold text-slate-950">{{ $totalQuestions }}</p>
                    <p class="mt-1 text-xs font-medium text-slate-600">Pernyataan</p>
                </div>
                <div class="rounded-lg border border-slate-200 bg-slate-50 p-3">
                    <p class="text-2xl font-bold text-slate-950">5</p>
                    <p class="mt-1 text-xs font-medium text-slate-600">Skala</p>
                </div>
                <div class="rounded-lg border border-slate-200 bg-slate-50 p-3">
                    <p class="text-2xl font-bold text-slate-950">2</p>
                    <p class="mt-1 text-xs font-medium text-slate-600">Bagian</p>
                </div>
            </div>
        </div>
    </section>

    <section class="mx-auto max-w-6xl px-4 py-5 sm:px-6 sm:py-8 lg:px-8">
        <div class="grid gap-4 sm:gap-6 lg:grid-cols-[minmax(0,1fr)_20rem] lg:items-start">
            <form method="POST" action="{{ route('questionnaire.store') }}" class="space-y-4 sm:space-y-6" data-questionnaire-form data-total-questions="{{ $totalQuestions }}" data-initial-step="{{ $initialStep }}">
                @csrf

                @if ($errors->any())
                    <div class="rounded-lg border border-red-200 bg-red-50 p-4 text-sm text-red-700">
                        <p class="font-semibold">Periksa kembali isian kuesioner.</p>
                        <ul class="mt-2 list-inside list-disc space-y-1">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <div class="grid grid-cols-2 gap-2 rounded-lg border border-slate-200 bg-white p-2 shadow-sm" aria-label="Tahapan pengisian">
                    <div class="rounded-lg border border-slate-200 px-3 py-2 data-[active=true]:border-blue-600 data-[active=true]:bg-blue-50" data-step-tab="identity" data-active="{{ $initialStep === 'identity' ? 'true' : 'false' }}">
                        <p class="text-xs font-semibold text-slate-500 data-[active=true]:text-blue-700">Langkah 1</p>
                        <p class="mt-0.5 text-sm font-bold text-slate-950">Biodata</p>
                    </div>
                    <div class="rounded-lg border border-slate-200 px-3 py-2 data-[active=true]:border-blue-600 data-[active=true]:bg-blue-50" data-step-tab="questions" data-active="{{ $initialStep === 'questions' ? 'true' : 'false' }}">
                        <p class="text-xs font-semibold text-slate-500 data-[active=true]:text-blue-700">Langkah 2</p>
                        <p class="mt-0.5 text-sm font-bold text-slate-950">Kuesioner</p>
                    </div>
                </div>

                <div class="rounded-lg border border-slate-200 bg-white p-4 shadow-sm sm:p-6" data-step-panel="identity" @if ($initialStep === 'questions') hidden @endif>
                    <div class="flex flex-col gap-2 border-b border-slate-100 pb-4 sm:flex-row sm:items-end sm:justify-between sm:pb-5">
                        <div>
                            <p class="text-xs font-semibold uppercase tracking-wide text-emerald-700">Langkah 1</p>
                            <h2 class="mt-1 text-lg font-semibold text-slate-950 sm:mt-2 sm:text-xl">Identitas siswa</h2>
                        </div>
                        <p class="text-sm text-slate-500">Isi data diri, lalu tekan lanjut.</p>
                    </div>

                    <div class="mt-4 grid gap-4 sm:mt-5 sm:grid-cols-2" data-identity-fields>
                        <div>
                            <label for="name" class="block text-sm font-semibold text-slate-800">Nama lengkap</label>
                            <input id="name" name="name" value="{{ old('name') }}" type="text" autocomplete="name" placeholder="Contoh: Andi Pratama" required class="mt-2 block w-full rounded-lg border border-slate-300 bg-white px-3 py-3 text-sm text-slate-900 shadow-sm outline-none transition placeholder:text-slate-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-100">
                        </div>

                        <div>
                            <label for="gender" class="block text-sm font-semibold text-slate-800">Jenis kelamin</label>
                            <select id="gender" name="gender" required class="mt-2 block w-full rounded-lg border border-slate-300 bg-white px-3 py-3 text-sm text-slate-900 shadow-sm outline-none transition focus:border-blue-500 focus:ring-2 focus:ring-blue-100">
                                <option value="">Pilih jenis kelamin</option>
                                <option value="Laki-laki" @selected(old('gender') === 'Laki-laki')>Laki-laki</option>
                                <option value="Perempuan" @selected(old('gender') === 'Perempuan')>Perempuan</option>
                            </select>
                        </div>

                        <div>
                            <label for="class_name" class="block text-sm font-semibold text-slate-800">Kelas</label>
                            <input id="class_name" name="class_name" value="{{ old('class_name') }}" type="text" placeholder="Contoh: XI IPA 2" required class="mt-2 block w-full rounded-lg border border-slate-300 bg-white px-3 py-3 text-sm text-slate-900 shadow-sm outline-none transition placeholder:text-slate-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-100">
                        </div>

                        <div>
                            <label for="npsn" class="block text-sm font-semibold text-slate-800">NPSN sekolah</label>
                            <input id="npsn" name="npsn" value="{{ old('npsn') }}" type="text" inputmode="numeric" placeholder="Masukkan NPSN sekolah" required class="mt-2 block w-full rounded-lg border border-slate-300 bg-white px-3 py-3 text-sm text-slate-900 shadow-sm outline-none transition placeholder:text-slate-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-100">
                        </div>
                    </div>

                    <div class="mt-5">
                        <button type="button" class="inline-flex w-full items-center justify-center rounded-lg bg-blue-600 px-6 py-3 text-sm font-semibold text-white shadow-sm transition hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 sm:w-auto" data-next-step>
                            Lanjut ke Kuesioner
                        </button>
                    </div>
                </div>

                <div class="space-y-4 sm:space-y-6" data-step-panel="questions" @if ($initialStep === 'identity') hidden @endif>
                    @include('questionnaire.partials.questions', [
                        'title' => 'Tingkat stres siswa',
                        'eyebrow' => 'Bagian 1',
                        'description' => 'Jawab sesuai tekanan atau rasa khawatir yang kamu rasakan saat belajar.',
                        'questions' => $stressQuestions,
                        'startNumber' => 1,
                        'scaleItems' => $scaleItems,
                        'badgeClass' => 'bg-rose-50 text-rose-700 ring-rose-200',
                    ])

                    @include('questionnaire.partials.questions', [
                        'title' => 'Kualitas akademik siswa',
                        'eyebrow' => 'Bagian 2',
                        'description' => 'Jawab sesuai kebiasaan belajar dan hasil akademik yang kamu alami.',
                        'questions' => $academicQuestions,
                        'startNumber' => $stressQuestions->count() + 1,
                        'scaleItems' => $scaleItems,
                        'badgeClass' => 'bg-blue-50 text-blue-700 ring-blue-200',
                    ])

                    <div class="sticky bottom-0 -mx-4 border-t border-slate-200 bg-white/95 px-4 py-3 backdrop-blur sm:static sm:mx-0 sm:rounded-lg sm:border sm:bg-white sm:p-5 sm:shadow-sm">
                        <div class="flex gap-2 sm:items-center sm:justify-between">
                            <button type="button" class="inline-flex w-28 items-center justify-center rounded-lg border border-slate-300 bg-white px-4 py-3 text-sm font-semibold text-slate-700 transition hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 sm:w-auto" data-prev-step>
                                Kembali
                            </button>
                            <button type="submit" class="inline-flex flex-1 items-center justify-center rounded-lg bg-blue-600 px-6 py-3 text-sm font-semibold text-white shadow-sm transition hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 sm:flex-none">
                                Kirim Jawaban
                            </button>
                        </div>
                    </div>
                </div>
            </form>

            <aside class="order-first space-y-4 lg:sticky lg:top-24 lg:order-last" data-step-helper @if ($initialStep === 'identity') hidden @endif>
                <div class="rounded-lg border border-slate-200 bg-white p-4 shadow-sm sm:p-5">
                    <div class="flex items-start justify-between gap-4">
                        <div>
                            <p class="text-sm font-semibold text-slate-950">Progres jawaban</p>
                            <p class="mt-1 text-sm text-slate-600">
                                <span data-answered-count>0</span> dari {{ $totalQuestions }} pernyataan
                            </p>
                        </div>
                        <span class="rounded-lg bg-slate-900 px-2.5 py-1 text-xs font-semibold text-white" data-progress-percent>0%</span>
                    </div>
                    <div class="mt-4 h-3 overflow-hidden rounded-full bg-slate-100">
                        <div class="h-full rounded-full bg-blue-600 transition-all duration-300" style="width: 0%" data-progress-fill></div>
                    </div>
                    <p class="mt-3 text-sm font-semibold text-slate-950 sm:hidden">Skala jawaban</p>
                    <div class="mt-2 grid gap-1.5 sm:hidden">
                        @foreach ($scaleItems as $item)
                            <div class="flex items-center gap-2 rounded-lg bg-slate-50 px-2.5 py-2 ring-1 ring-slate-200">
                                <span class="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-white text-sm font-bold text-slate-950 ring-1 ring-slate-200">{{ $item['score'] }}</span>
                                <p class="text-xs font-semibold leading-4 text-slate-700">{{ $item['label'] }}</p>
                            </div>
                        @endforeach
                    </div>
                    <p class="mt-3 hidden text-sm leading-6 text-slate-600 sm:block" data-progress-text>
                        Jawab setiap pernyataan sesuai kondisimu.
                    </p>
                </div>

                <div class="hidden rounded-lg border border-slate-200 bg-white p-5 shadow-sm sm:block">
                    <p class="text-sm font-semibold text-slate-950">Skala jawaban</p>
                    <div class="mt-4 space-y-2">
                        @foreach ($scaleItems as $item)
                            <div class="flex items-center gap-3 rounded-lg bg-slate-50 px-3 py-2">
                                <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-white text-sm font-bold text-slate-950 ring-1 ring-slate-200">{{ $item['score'] }}</span>
                                <p class="text-sm font-semibold text-slate-900">{{ $item['label'] }}</p>
                            </div>
                        @endforeach
                    </div>
                </div>
            </aside>
        </div>
    </section>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const form = document.querySelector('[data-questionnaire-form]');

            if (!form) {
                return;
            }

            const totalQuestions = Number(form.dataset.totalQuestions || 0);
            const answeredCount = document.querySelector('[data-answered-count]');
            const progressPercent = document.querySelector('[data-progress-percent]');
            const progressFill = document.querySelector('[data-progress-fill]');
            const progressText = document.querySelector('[data-progress-text]');
            const stepPanels = document.querySelectorAll('[data-step-panel]');
            const stepTabs = document.querySelectorAll('[data-step-tab]');
            const stepHelper = document.querySelector('[data-step-helper]');
            const identityFields = form.querySelector('[data-identity-fields]');
            const nextStepButton = form.querySelector('[data-next-step]');
            const prevStepButton = form.querySelector('[data-prev-step]');
            let currentStep = form.dataset.initialStep || 'identity';

            const showStep = (step) => {
                currentStep = step;

                stepPanels.forEach((panel) => {
                    panel.hidden = panel.dataset.stepPanel !== step;
                });

                form.querySelectorAll('[data-step-panel="questions"] input, [data-step-panel="questions"] select, [data-step-panel="questions"] textarea').forEach((field) => {
                    field.disabled = step !== 'questions';
                });

                stepTabs.forEach((tab) => {
                    tab.dataset.active = tab.dataset.stepTab === step ? 'true' : 'false';
                });

                if (stepHelper) {
                    stepHelper.hidden = step !== 'questions';
                }

                window.scrollTo({ top: 0, behavior: 'smooth' });
            };

            const identityIsValid = () => {
                const fields = identityFields
                    ? Array.from(identityFields.querySelectorAll('input, select, textarea'))
                    : [];

                for (const field of fields) {
                    if (!field.checkValidity()) {
                        field.reportValidity();
                        return false;
                    }
                }

                return true;
            };

            if (nextStepButton) {
                nextStepButton.addEventListener('click', () => {
                    if (identityIsValid()) {
                        showStep('questions');
                    }
                });
            }

            if (prevStepButton) {
                prevStepButton.addEventListener('click', () => {
                    showStep('identity');
                });
            }

            form.addEventListener('submit', (event) => {
                if (currentStep !== 'questions') {
                    event.preventDefault();

                    if (identityIsValid()) {
                        showStep('questions');
                    }
                }
            });

            const updateProgress = () => {
                const answeredNames = new Set();

                form.querySelectorAll('input[type="radio"]:checked').forEach((input) => {
                    answeredNames.add(input.name);
                });

                const answered = answeredNames.size;
                const percent = totalQuestions > 0 ? Math.round((answered / totalQuestions) * 100) : 0;

                if (answeredCount) {
                    answeredCount.textContent = answered;
                }

                if (progressPercent) {
                    progressPercent.textContent = `${percent}%`;
                }

                if (progressFill) {
                    progressFill.style.width = `${percent}%`;
                }

                if (progressText) {
                    progressText.textContent = answered === totalQuestions
                        ? 'Semua pernyataan sudah dijawab. Kamu bisa mengirim jawaban.'
                        : `${totalQuestions - answered} pernyataan belum dijawab.`;
                }
            };

            form.addEventListener('change', updateProgress);
            showStep(form.dataset.initialStep || 'identity');
            updateProgress();
        });
    </script>
@endpush