@extends('main.layouts.app')

@section('title', 'Kuesioner Learning Style')

@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 Gaya Belajar</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-learning-style') }}">
                            @csrf
                            @for ($i = 1; $i <= 16; $i++)
                            <h5 class="mb-4 text-start" style="font-size: 16px;">{{ $i }}. 
                                @if ($i == 1) Ketika Anda perlu mencari jalan ke toko yang direkomendasikan oleh teman, apa yang Anda lakukan?
                                @elseif ($i == 2) Terdapat video tutorial yang menunjukkan cara membuat diagram, dan pada video tersebut terdapat seseorang yang menjelaskan, dan teks yang menjelaskan apa yang harus dilakukan. Apa yang cenderung Anda lihat?
                                @elseif ($i == 3) Anda ingin mengikuti sebuah tur, apa informasi yang akan Anda cari?
                                @elseif ($i == 4) Ketika Anda memilih pekerjaan, apa bekal yang Anda persiapkan untuk pekerjaan Anda nanti?
                                @elseif ($i == 5) Saat Anda belajar, apa yang sering Anda lakukan?
                                @elseif ($i == 6) Ketika Anda berhemat demi suatu barang yang Anda cari, apa yang Anda lakukan untuk menggapainya?
                                @elseif ($i == 7) Ketika Anda ingin belajar bermain catur, apa yang akan Anda lakukan?
                                @elseif ($i == 8) Anda mendadak terkena masalah penyakit jantung. Anda pergi dan berkonsultasi dengan dokter. Apa yang Anda harapkan dari dokter?
                                @elseif ($i == 9) Ketika Anda ingin belajar aplikasi baru di komputer atau ponsel, apa yang akan Anda lakukan?
                                @elseif ($i == 10) Ketika Anda belajar sesuatu dari internet, apa bentuk konten yang Anda sukai?
                                @elseif ($i == 11) Ketika Anda ingin bergabung dengan sebuah proyek, apa yang Anda inginkan?
                                @elseif ($i == 12) Anda ingin mengetahui bagaimana cara mengambil foto yang bagus! Apa yang Anda lakukan?
                                @elseif ($i == 13) Anda lebih menyukai seorang narasumber atau guru yang menggunakan:
                                @elseif ($i == 14) Ketika Anda telah selesai mengikuti kompetisi dan Anda menginginkan umpan balik. Bagaimana umpan balik yang Anda harapkan?
                                @elseif ($i == 15) Anda ingin mencari informasi mengenai kost atau rumah. Sebelum mengunjunginya, apa yang sebelumnya Anda lakukan?
                                @elseif ($i == 16) Anda ingin merakit meja kayu yang bagian-bagiannya telah tersedia. Anda akan belajar lebih dari:
                                @endif
                            </h5>
                            <!-- Pilihan Ganda -->
                            @if ($i == 1)
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="soal{{ $i }}" id="option{{ $i }}.1" value="K" required>
                                <label class="form-check-label" for="option{{ $i }}.1">Mencari tahu tokonya apakah ada di suatu tempat yang saya ketahui</label>
                            </div>
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="soal{{ $i }}" id="option{{ $i }}.2" value="A">
                                <label class="form-check-label" for="option{{ $i }}.2">Tanya arah jalan kepada teman</label>
                            </div>
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="soal{{ $i }}" id="option{{ $i }}.3" value="R">
                                <label class="form-check-label" for="option{{ $i }}.3">Menulis petunjuk jalan</label>
                            </div>
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="soal{{ $i }}" id="option{{ $i }}.4" value="V">
                                <label class="form-check-label" for="option{{ $i }}.4">Menggunakan Peta atau Layanan Maps</label>
                            </div>
                            @elseif ($i == 2)
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="soal{{ $i }}" id="option{{ $i }}.1" value="V" required>
                                <label class="form-check-label" for="option{{ $i }}.1">Melihat diagramnya</label>
                            </div>
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="soal{{ $i }}" id="option{{ $i }}.2" value="A">
                                <label class="form-check-label" for="option{{ $i }}.2">Mendengarkan penjelasan orang tersebut</label>
                            </div>
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="soal{{ $i }}" id="option{{ $i }}.3" value="R">
                                <label class="form-check-label" for="option{{ $i }}.3">Membaca kata-kata yang tampil di video</label>
                            </div>
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="soal{{ $i }}" id="option{{ $i }}.4" value="K">
                                <label class="form-check-label" for="option{{ $i }}.4">Melakukan tindakan apa yang dilakukan oleh orang dalam video</label>
                            </div>
                            @elseif ($i == 3)
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="soal{{ $i }}" id="option{{ $i }}.1" value="K" required>
                                <label class="form-check-label" for="option{{ $i }}.1">Melihat hal-hal menarik pada tur tersebut</label>
                            </div>
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="soal{{ $i }}" id="option{{ $i }}.2" value="V">
                                <label class="form-check-label" for="option{{ $i }}.2">Menggunakan peta atau layanan maps dan melihat lokasi yang akan dituju</label>
                            </div>
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="soal{{ $i }}" id="option{{ $i }}.3" value="R">
                                <label class="form-check-label" for="option{{ $i }}.3">Membaca detail tur pada dokumen atau rencana tur</label>
                            </div>
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="soal{{ $i }}" id="option{{ $i }}.4" value="A">
                                <label class="form-check-label" for="option{{ $i }}.4">Berdiskusi dengan teman atau penyelenggara tur yang merencanakan tur tersebut</label>
                            </div>
                            @elseif ($i == 4)
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="soal{{ $i }}" id="option{{ $i }}.1" value="K" required>
                                <label class="form-check-label" for="option{{ $i }}.1">Saya akan menerapkan ilmu yang saya punya pada dunia kerja nanti</label>
                            </div>
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="soal{{ $i }}" id="option{{ $i }}.2" value="A">
                                <label class="form-check-label" for="option{{ $i }}.2">Saya akan bercakap dengan rekan kerja saat berdiskusi</label>
                            </div>
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="soal{{ $i }}" id="option{{ $i }}.3" value="V">
                                <label class="form-check-label" for="option{{ $i }}.3">Saya akan menggunakan gambar atau video untuk menunjukkan pekerjaan saya kepada rekan kerja</label>
                            </div>
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="soal{{ $i }}" id="option{{ $i }}.4" value="R">
                                <label class="form-check-label" for="option{{ $i }}.4">Saya akan menerapkan kata-kata yang baik saat mengirimkan pesan kepada rekan kerja</label>
                            </div>
                            @elseif ($i == 5)
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="soal{{ $i }}" id="option{{ $i }}.1" value="A" required>
                                <label class="form-check-label" for="option{{ $i }}.1">Saya suka berdiskusi</label>
                            </div>
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="soal{{ $i }}" id="option{{ $i }}.2" value="V">
                                <label class="form-check-label" for="option{{ $i }}.2">Saya suka melihat pola dari apa yang saya pelajari</label>
                            </div>
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="soal{{ $i }}" id="option{{ $i }}.3" value="K">
                                <label class="form-check-label" for="option{{ $i }}.3">Saya suka mencari contoh dari apa yang saya pelajari</label>
                            </div>
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="soal{{ $i }}" id="option{{ $i }}.4" value="R">
                                <label class="form-check-label" for="option{{ $i }}.4">Saya suka membaca buku atau artikel</label>
                            </div>
                            @elseif ($i == 6)
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="soal{{ $i }}" id="option{{ $i }}.1" value="K" required>
                                <label class="form-check-label" for="option{{ $i }}.1">Melakukan riset dan perbandingan langsung di lokasi</label>
                            </div>
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="soal{{ $i }}" id="option{{ $i }}.2" value="R">
                                <label class="form-check-label" for="option{{ $i }}.2">Membaca brosur yang berisi daftar barang yang saya cari</label>
                            </div>
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="soal{{ $i }}" id="option{{ $i }}.3" value="V">
                                <label class="form-check-label" for="option{{ $i }}.3">Melihat ulasan di YouTube atau Media Sosial</label>
                            </div>
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="soal{{ $i }}" id="option{{ $i }}.4" value="A">
                                <label class="form-check-label" for="option{{ $i }}.4">Berdiskusi dengan pakar</label>
                            </div>
                            @elseif ($i == 7)
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="soal{{ $i }}" id="option{{ $i }}.1" value="K" required>
                                <label class="form-check-label" for="option{{ $i }}.1">Melihat teman saya bermain catur dan memperhatikannya</label>
                            </div>
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="soal{{ $i }}" id="option{{ $i }}.2" value="A">
                                <label class="form-check-label" for="option{{ $i }}.2">Mendengarkan penjelasan ahli tentang bagaimana aturan permainan</label>
                            </div>
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="soal{{ $i }}" id="option{{ $i }}.3" value="V">
                                <label class="form-check-label" for="option{{ $i }}.3">Melihat tutorial di YouTube</label>
                            </div>
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="soal{{ $i }}" id="option{{ $i }}.4" value="R">
                                <label class="form-check-label" for="option{{ $i }}.4">Membaca instruksi tertulis dari permainan catur</label>
                            </div>
                            @elseif ($i == 8)
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="soal{{ $i }}" id="option{{ $i }}.1" value="R" required>
                                <label class="form-check-label" for="option{{ $i }}.1">Memberi saya buku atau data tentang penyakit jantung yang saya alami</label>
                            </div>
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="soal{{ $i }}" id="option{{ $i }}.2" value="K">
                                <label class="form-check-label" for="option{{ $i }}.2">Menggunakan alat peraga guna menjelaskan apa masalah jantung yang saya alami</label>
                            </div>
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="soal{{ $i }}" id="option{{ $i }}.3" value="A">
                                <label class="form-check-label" for="option{{ $i }}.3">Saya ingin dokter menjelaskan tentang penyakit saya</label>
                            </div>
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="soal{{ $i }}" id="option{{ $i }}.4" value="V">
                                <label class="form-check-label" for="option{{ $i }}.4">Menunjukkan grafik dan statistik dari penyakit jantung yang saya alami</label>
                            </div>
                            @elseif ($i == 9)
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="soal{{ $i }}" id="option{{ $i }}.1" value="R" required>
                                <label class="form-check-label" for="option{{ $i }}.1">Membaca instruksi yang muncul saat saya menjalankan aplikasi tersebut</label>
                            </div>
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="soal{{ $i }}" id="option{{ $i }}.2" value="A">
                                <label class="form-check-label" for="option{{ $i }}.2">Berdiskusi dengan seseorang yang paham fungsi dan kegunaan dari aplikasi tersebut</label>
                            </div>
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="soal{{ $i }}" id="option{{ $i }}.3" value="K">
                                <label class="form-check-label" for="option{{ $i }}.3">Saya langsung mencoba berbagai tombol pada aplikasi tersebut</label>
                            </div>
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="soal{{ $i }}" id="option{{ $i }}.4" value="V">
                                <label class="form-check-label" for="option{{ $i }}.4">Saya melihat gambar atau video yang menjelaskan tentang aplikasi tersebut</label>
                            </div>
                            @elseif ($i == 10)
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="soal{{ $i }}" id="option{{ $i }}.1" value="K" required>
                                <label class="form-check-label" for="option{{ $i }}.1">Video pendek atau video panjang</label>
                            </div>
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="soal{{ $i }}" id="option{{ $i }}.2" value="V">
                                <label class="form-check-label" for="option{{ $i }}.2">Interaksi pada desain yang menarik</label>
                            </div>
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="soal{{ $i }}" id="option{{ $i }}.3" value="R">
                                <label class="form-check-label" for="option{{ $i }}.3">Artikel atau buku digital</label>
                            </div>
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="soal{{ $i }}" id="option{{ $i }}.4" value="A">
                                <label class="form-check-label" for="option{{ $i }}.4">Radio atau Podcast</label>
                            </div>
                            @elseif ($i == 11)
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="soal{{ $i }}" id="option{{ $i }}.1" value="V" required>
                                <label class="form-check-label" for="option{{ $i }}.1">Diagram tahapan proyek</label>
                            </div>
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="soal{{ $i }}" id="option{{ $i }}.2" value="R">
                                <label class="form-check-label" for="option{{ $i }}.2">Laporan proyek yang sedang dikerjakan</label>
                            </div>
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="soal{{ $i }}" id="option{{ $i }}.3" value="A">
                                <label class="form-check-label" for="option{{ $i }}.3">Kesempatan untuk membahas proyek dengan manajer proyek</label>
                            </div>
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="soal{{ $i }}" id="option{{ $i }}.4" value="K">
                                <label class="form-check-label" for="option{{ $i }}.4">Contoh nyata terhadap proyek sejenis yang sukses</label>
                            </div>
                            @elseif ($i == 12)
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="soal{{ $i }}" id="option{{ $i }}.1" value="A" required>
                                <label class="form-check-label" for="option{{ $i }}.1">Bertanya kepada seseorang mengenai fitur dan apa yang bisa kamera tersebut lakukan</label>
                            </div>
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="soal{{ $i }}" id="option{{ $i }}.2" value="R">
                                <label class="form-check-label" for="option{{ $i }}.2">Membaca buku instruksi pada kotak kamera tentang bagaimana penggunaan yang benar</label>
                            </div>
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="soal{{ $i }}" id="option{{ $i }}.3" value="V">
                                <label class="form-check-label" for="option{{ $i }}.3">Melihat ulasan dari seseorang yang membahas mengenai kamera tersebut</label>
                            </div>
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="soal{{ $i }}" id="option{{ $i }}.4" value="K">
                                <label class="form-check-label" for="option{{ $i }}.4">Mengambil langsung beberapa foto dan membandingkannya untuk mendapat hasil terbaik</label>
                            </div>
                            @elseif ($i == 13)
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="soal{{ $i }}" id="option{{ $i }}.1" value="K" required>
                                <label class="form-check-label" for="option{{ $i }}.1">Demonstrasi, model atau praktek langsung</label>
                            </div>
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="soal{{ $i }}" id="option{{ $i }}.2" value="A">
                                <label class="form-check-label" for="option{{ $i }}.2">Tanya jawab dan berdiskusi</label>
                            </div>
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="soal{{ $i }}" id="option{{ $i }}.3" value="R">
                                <label class="form-check-label" for="option{{ $i }}.3">Buku, artikel, novel atau bahan bacaan</label>
                            </div>
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="soal{{ $i }}" id="option{{ $i }}.4" value="V">
                                <label class="form-check-label" for="option{{ $i }}.4">Grafik, diagram, peta atau video</label>
                            </div>
                            @elseif ($i == 14)
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="soal{{ $i }}" id="option{{ $i }}.1" value="K" required>
                                <label class="form-check-label" for="option{{ $i }}.1">Mencontohkan dari apa yang saya lakukan</label>
                            </div>
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="soal{{ $i }}" id="option{{ $i }}.2" value="R">
                                <label class="form-check-label" for="option{{ $i }}.2">Mencatat hasil yang saya peroleh</label>
                            </div>
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="soal{{ $i }}" id="option{{ $i }}.3" value="A">
                                <label class="form-check-label" for="option{{ $i }}.3">Seseorang yang mengatakan umpan balik langsung kepada saya</label>
                            </div>
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="soal{{ $i }}" id="option{{ $i }}.4" value="V">
                                <label class="form-check-label" for="option{{ $i }}.4">Menggunakan diagram atau video hasil dari apa yang saya lakukan</label>
                            </div>
                            @elseif ($i == 15)
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="soal{{ $i }}" id="option{{ $i }}.1" value="K" required>
                                <label class="form-check-label" for="option{{ $i }}.1">Menonton video atau rekaman ulasan dari seseorang yang mengunggahnya</label>
                            </div>
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="soal{{ $i }}" id="option{{ $i }}.2" value="A">
                                <label class="form-check-label" for="option{{ $i }}.2">Berdiskusi dengan pemilik langsung di lokasi</label>
                            </div>
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="soal{{ $i }}" id="option{{ $i }}.3" value="R">
                                <label class="form-check-label" for="option{{ $i }}.3">Membaca deskripsi mengenai fitur dan fasilitas yang diberikan</label>
                            </div>
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="soal{{ $i }}" id="option{{ $i }}.4" value="V">
                                <label class="form-check-label" for="option{{ $i }}.4">Menggunakan layanan maps untuk mencari lokasi</label>
                            </div>
                            @elseif ($i == 16)
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="soal{{ $i }}" id="option{{ $i }}.1" value="V" required>
                                <label class="form-check-label" for="option{{ $i }}.1">Video tutorial yang menunjukkan setiap tahapan perakitan</label>
                            </div>
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="soal{{ $i }}" id="option{{ $i }}.2" value="A">
                                <label class="form-check-label" for="option{{ $i }}.2">Saran dari seseorang yang berhasil melakukannya</label>
                            </div>
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="soal{{ $i }}" id="option{{ $i }}.3" value="R">
                                <label class="form-check-label" for="option{{ $i }}.3">Petunjuk tertulis yang disertakan dalam paket pembelian</label>
                            </div>
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="soal{{ $i }}" id="option{{ $i }}.4" value="K">
                                <label class="form-check-label" for="option{{ $i }}.4">Mencoba merakitnya langsung secara perlahan</label>
                            </div>
                            @endif
                            <!-- Error Handling -->
                            @error('soal' . $i)
                            <div class="alert alert-danger mt-2">
                                Pertanyaan {{ $i }} belum diisi. Harap pilih salah satu jawaban.
                            </div>
                            @enderror
                            <br>
                            @endfor
                            <!-- 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 Kuesiner Gaya Belajar!</h4><p>Aku akan mengajarkanmu cara untuk mengisi kuesioner.</p>",
    "<p>Kuesioner Gaya Belajar memiliki 16 pertanyaan yang wajib kamu isi!</p>",
    "<p>Pada setiap pertanyaan, terdapat 4 opsi jawaban 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