@extends('student.layouts.app')
@section('title', 'Mulai Tes Potensi Karier | Career Development and Consultation (CDC)')
@section('content')
    <div class="mt-5 mb-5 card mb-xl-10">
        <div class="border-0 cursor-pointer card-header">
            <div class="m-0 card-title">
                <h3 class="m-0 fw-bolder">Tes Potensi Karier</h3>
            </div>
        </div>
        <div>
            <div class="card-body border-top p-9">
                <div class="flex-wrap d-flex align-items-center">
                    <div class="flex-row-fluid">
                        <div class="row">
                            <div class="mb-2 col-lg-12 mb-lg-0">
                                <form action="{{ route('student.quisionnare.quest.store') }}" method="POST" class="form"
                                    enctype="multipart/form-data">
                                    @csrf
                                    @if ($hasStatement == 0)
                                        <div class="text-center">
                                            <p class="text-gray-700 fs-4 fw-bold py-7">
                                                Tes potensi karier sedang disiapkan, harap hubungi admin.
                                            </p>
                                        </div>
                                    @endif
                                    @foreach ($quests as $index => $quest)
                                        <div class="mb-8 fv-row question" data-index="{{ $index }}"
                                            style="{{ $index >= 9 ? 'display: none;' : '' }}">
                                            <label class="mb-3 form-label fs-4 fw-bolder">
                                                {{ $quest->statement }}</label>
                                            <div class="d-flex align-items-center">
                                                <label class="form-check form-check-custom form-check-solid me-10">
                                                    <input class="form-check-input h-20px w-20px" type="radio"
                                                        value="{{ $quest->id }}" name="{{ $quest->statement_code }}"
                                                        required />
                                                    <span class="form-check-label fw-bold">Ya</span>
                                                </label>
                                                <label class="form-check form-check-custom form-check-solid">
                                                    <input class="form-check-input h-20px w-20px" type="radio"
                                                        name="{{ $quest->statement_code }}" required />
                                                    <span class="form-check-label fw-bold">Tidak</span>
                                                </label>
                                            </div>
                                        </div>
                                    @endforeach
                                    @if ($hasStatement > 0)
                                        <div class="mt-4 d-flex justify-content-between">
                                            <button type="button" class="btn btn-primary" id="prev"
                                                style="display: none;" onclick="showPrevious()">Kembali</button>
                                            <div class="ms-auto">
                                                <button type="button" class="btn btn-primary" id="next"
                                                    onclick="showNext()">Selanjutnya</button>
                                                <button type="submit" class="btn btn-primary me-2" id="submit"
                                                    style="display: none;">Selesai</button>
                                            </div>
                                        </div>
                                    @endif
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    {{-- <script>
        // Lakukan reset radio button saat halaman dimuat
        window.addEventListener('load', function() {
            const radioButtons = document.querySelectorAll('input[type="radio"]');
            radioButtons.forEach(radioButton => {
                radioButton.checked = false;
            });
        });
    </script> --}}

    <script>
        // Variabel untuk melacak kelompok soal yang sedang ditampilkan
        let currentStart = 0;
        const questionsPerPage = 9;
        const totalQuestions = {{ $quests->count() }};

        // Fungsi untuk menyimpan pilihan ke localStorage
        function saveSelection(id, value) {
            localStorage.setItem(id, value);
        }

        // Fungsi untuk memuat pilihan yang disimpan saat halaman dimuat
        function loadSelections() {
            document.querySelectorAll('input[type="radio"]').forEach(radio => {
                const id = radio.dataset.id;
                const savedValue = localStorage.getItem(id);

                if (savedValue && radio.value === savedValue) {
                    radio.checked = true;
                }
            });
        }

        // Fungsi untuk menampilkan soal berikutnya
        function showNext() {
            // Validasi apakah semua radio button dalam kelompok soal saat ini sudah terisi
            if (!validateCurrentGroup()) {
                return;
            }

            const questions = document.querySelectorAll('.question');
            const nextStart = currentStart + questionsPerPage;
            if (nextStart < totalQuestions) {
                for (let i = currentStart; i < currentStart + questionsPerPage; i++) {
                    if (questions[i]) {
                        questions[i].style.display = 'none';
                    }
                }
                for (let i = nextStart; i < nextStart + questionsPerPage; i++) {
                    if (questions[i]) {
                        questions[i].style.display = 'block';
                    }
                }
                currentStart = nextStart;
                document.getElementById('prev').style.display = 'block';
                if (currentStart + questionsPerPage >= totalQuestions) {
                    document.getElementById('next').style.display = 'none';
                    document.getElementById('submit').style.display = 'block';
                }
            }
        }

        // Fungsi untuk menampilkan soal sebelumnya
        function showPrevious() {
            const questions = document.querySelectorAll('.question');
            const prevStart = currentStart - questionsPerPage;
            if (prevStart >= 0) {
                for (let i = currentStart; i < currentStart + questionsPerPage; i++) {
                    if (questions[i]) {
                        questions[i].style.display = 'none';
                    }
                }
                for (let i = prevStart; i < prevStart + questionsPerPage; i++) {
                    if (questions[i]) {
                        questions[i].style.display = 'block';
                    }
                }
                currentStart = prevStart;
                document.getElementById('next').style.display = 'block';
                document.getElementById('submit').style.display = 'none';
                if (currentStart === 0) {
                    document.getElementById('prev').style.display = 'none';
                }
            }
        }

        // Fungsi untuk memvalidasi apakah semua pertanyaan dalam kelompok saat ini sudah dijawab
        function validateCurrentGroup() {
            const questions = document.querySelectorAll('.question');
            for (let i = currentStart; i < currentStart + questionsPerPage; i++) {
                if (questions[i]) {
                    const radios = questions[i].querySelectorAll('input[type="radio"]');
                    const isAnswered = Array.from(radios).some(radio => radio.checked);
                    if (!isAnswered) {
                        questions[i].scrollIntoView({
                            behavior: 'smooth',
                            block: 'center'
                        });
                        return false;
                    }
                }
            }
            return true;
        }

        // Panggil fungsi loadSelections saat halaman dimuat
        document.addEventListener('DOMContentLoaded', loadSelections);
    </script>
@endpush