@extends('main.layouts.app')

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

@section('content')
<div class="content-wrapper">
    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="row d-flex justify-content-center">
            <!-- Kolom 2 -->
            <div class="col-lg-10 mb-4">
                <div class="card text-center">
                    <div class="card-body">
                        <!-- Soal -->
                        <h3 class="card-title text-primary">Kuesioner Metakognitif</h3>
                        <p class="mb-4" style="font-size: 18px;">
                            Pilih salah satu jawaban yang menurut Anda paling benar.
                        </p>
                        <!-- Form -->
                        <form method="POST" action="{{ route('send-kuesioner-metacognitive') }}">
                            @csrf
                            @foreach ($questions as $index => $question)
                            <h5 class="mb-4 text-start" style="font-size: 16px;">{{ $index + 1 }}. {{ $question }}</h5>
                            <!-- Pilihan Ganda -->
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="soal{{ $index + 1 }}" id="option{{ $index + 1 }}.1" value="0" required>
                                <label class="form-check-label" for="option{{ $index + 1 }}.1">0</label>
                            </div>
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="soal{{ $index + 1 }}" id="option{{ $index + 1 }}.2" value="1">
                                <label class="form-check-label" for="option{{ $index + 1 }}.2">1</label>
                            </div>
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="soal{{ $index + 1 }}" id="option{{ $index + 1 }}.3" value="2">
                                <label class="form-check-label" for="option{{ $index + 1 }}.3">2</label>
                            </div>
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="soal{{ $index + 1 }}" id="option{{ $index + 1 }}.4" value="3">
                                <label class="form-check-label" for="option{{ $index + 1 }}.4">3</label>
                            </div>
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="soal{{ $index + 1 }}" id="option{{ $index + 1 }}.5" value="4">
                                <label class="form-check-label" for="option{{ $index + 1 }}.5">4</label>
                            </div>
                            <br>
                            @endforeach

                            <!-- Error Handling -->
                            @if ($errors->any())
                            <div class="alert alert-danger">
                                <ul>
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                            @endif
                            <!-- Tombol Kirim Jawaban -->
                            <div class="mt-4">
                                <button type="submit" class="btn btn-primary w-25">Simpan Jawaban</button>
                            </div>
                            <br>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@section('helpInstructions')
[
    "<h4>Selamat datang di Kuesioner Metakognitif!</h4><p>Aku akan mengajarkanmu cara untuk mengisi kuesioner.</p>",
    "<p>Kuesioner Metakognitif memiliki 52 pertanyaan yang wajib kamu isi!</p>",
    "<p>Pada setiap pertanyaan, terdapat 5 opsi jawaban (0, 1, 2, 3, 4) yang akan menentukan gaya belajar kamu.</p>",
    "<p>Harap dibaca dengan cermat ya setiap pertanyaan yang muncul! Setelah itu kamu bisa klik salah satu lingkaran disamping setiap jawaban.</p>",
    "<p>Kamu hanya bisa memilih 1 jawaban pada setiap pertanyaan.</p>",
    "<p>Setelah mengisi semua pertanyaan, kamu bisa klik tombol 'Simpan Jawaban' dibawah.</p>",
    "<p>Akan muncul pemberitahuan konfirmasi. Klik 'Simpan Jawaban' untuk mengirimkan jawaban kamu ke kami, dan klik 'Kembali' untuk menutup pemberitahuan.</p>"
]
@endsection
@endsection