@extends('layouts/contentNavbarLayout')

@section('title', 'Tables - Quiz')

@section('content')
<h4 class="fw-bold py-3 mb-4">
    <span class="text-muted fw-light">Tables Quiz</span>
</h4>

<!-- Basic Bootstrap Table -->
<div class="card">
    <h5 class="card-header">Quiz</h5>
    @if ($user->role == "Admin")
        <div class="mx-3 text-start">
            <a href="{{ route('quiz.create') }}">
                <button type="submit" class="btn btn-sm btn-primary">
                    <i class='bx bx-plus'></i>
                    Add
                </button>
            </a>
        </div>
        <div class="table-responsive text-nowrap p-3">
            <table class="table" id="table">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>Jenjang</th>
                        <th>Jenis</th>
                        <th>Soal</th>
                        <th>Jawaban</th>
                        <th>Jawaban Benar</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody class="table-border-bottom-0">
                    @foreach ($quiz as $record)
                        <tr>
                            <th scope="row">{{$loop->index + 1}}</th>
                            <td>{{$record->jenjang}}</td>
                            <td>{{$record->jenis}}</td>
                            <td>{{$record->soal}}</td>
                            <td>{{$record->jawaban}}</td>
                            <td>{{$record->jawaban_benar}}</td>
                            <td>
                                <div class="btn-group" role="group" aria-label="Actions">
                                    <a href="{{route('quiz.edit', $record->id)}}" class="btn btn-blue"><i
                                            class="bx bx-edit-alt"></i> Edit</a>
                                    <form action="{{route('quiz.delete', $record->id)}}" method="POST">
                                        @csrf
                                        @method("DELETE")
                                        <button type="submit" class="btn btn-white"
                                            onclick="return confirm('Apakah Kamu Yakin?')">
                                            <i class="bx bx-trash"></i> Delete
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @else
        <div class="row mb-3 px-3">
            <div id="landing" class="row">
                <div class="card-body">
                    <ol>
                        <li><strong>Waktu Pengerjaan:</strong> Anda memiliki 30 menit untuk menyelesaikan seluruh tes.
                            Pastikan
                            Anda menggunakan waktu dengan efisien untuk menjawab semua pertanyaan.</li>
                        <li><strong>Ketersediaan Akses:</strong> Pastikan koneksi internet Anda stabil sepanjang ujian. Jika
                            terjadi gangguan, Anda mungkin kehilangan waktu berharga. Jika memungkinkan, gunakan koneksi
                            yang
                            baik dan stabil.</li>
                        <li><strong>Konsentrasi:</strong> Agar dapat menjawab dengan baik, pastikan Anda berada di
                            lingkungan
                            yang tenang dan bebas gangguan. Tutup aplikasi atau pemberitahuan yang dapat mengganggu
                            perhatian
                            Anda selama tes berlangsung.</li>
                        <li><strong>Kerja Individual:</strong> Tes ini harus diselesaikan secara individu. Tidak
                            diperbolehkan
                            bekerjasama atau menggunakan bantuan dari orang lain.</li>
                        <li><strong>Penyelidikan:</strong> Segala bentuk kecurangan, termasuk mencontek atau menggunakan
                            bahan
                            referensi selama ujian, tidak diperbolehkan. Pelanggaran akan mengakibatkan hasil penilaian
                            tidak
                            akurat.</li>
                        <li><strong>Pengiriman Jawaban:</strong> Pastikan Anda mengirimkan jawaban Anda sebelum waktu habis.
                            Jawaban Anda akan dikirimkan secara otomatis apabila waktu habis.</li>
                    </ol>
                    <p>Dengan menyelesaikan ujian ini, Anda membantu kami menilai kemampuan Anda secara akurat. Selamat
                        mengerjakan dan semoga berhasil!</p>
                </div>
                <div class="col-md-6 col-lg-6 mb-3">
                    <div class="card text-center">
                        <div class="card-header">
                            <div>
                                <h1>Reading</h1>
                                <h3>Your Score : <b>{{$nilai->reading}}</b></h3>
                            </div>
                            @if ($nilai->reading || (!isset($kartuKendali) || $kartuKendali->jumlah < 40))
                                <button class="btn btn-primary" disabled>Quiz Belum Tersedia</button>
                            @else
                                <button id="startQuizReading" class="btn btn-primary">Start Quiz!</button>
                            @endif
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-6 mb-3">
                    <div class="card text-center">
                        <div class="card-header">
                            <div>
                                <h1>Writing</h1>
                                <h3>Your Score : <b>{{$nilai->writing}}</b></h3>
                            </div>
                            @if ($nilai->writing || (!isset($kartuKendali) || $kartuKendali->jumlah < 40))
                                <button class="btn btn-primary" disabled>Quiz Belum Tersedia</button>
                            @else
                                <button id="startQuizWriting" class="btn btn-primary">Start Quiz!</button>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
            <div class="row" style="display:none" id="test">
                <div class="col-lg-1"></div>
                <div class="col-lg-6">
                    <div class="card-body">
                        <div>
                            <div>
                                <span class="badge bg-primary rounded-pill" id="timer">30 mnt</span><br>
                                <span><b>Question <span id="index"></span></b></span>
                                <br>
                                <div class="my-3">
                                    <textarea class="form-control" id="question" rows="6" readonly></textarea>
                                </div>
                                <div>
                                    <span id="answers"></span>
                                </div>
                            </div>
                            <div class="mt-3">
                                <button id="prevBtn" class="btn btn-primary">Prev</button>
                                <button id="submit" class="btn btn-warning">Submit</button>
                                <button id="nextBtn" class="btn btn-primary">Next</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="card-body">
                        <div class="text-center">
                            <span><b>Question List</b></span>
                            <br>
                            <div class="d-flex align-content-between justify-content-between flex-wrap" id="questionIndex">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif
</div>
<!--/ Basic Bootstrap Table -->
<script defer>
    $(document).ready(function () {
        const user = JSON.parse("{{$user}}".replaceAll("&quot;", '"'));
        let quiz = <?php echo $quiz; ?>;
        let index = 0;
        let timeoutMinute = 30;
        let timeoutSecond = 0;
        let isStart = false;

        $('#startQuizReading').click(function () {
            $('#landing').hide();
            $('#test').show();

            isStart = true;
            quiz = quiz.filter((item) => (item.jenis).toLowerCase() == "reading");

            loadQuestion(quiz[index]);
            updateIndex();
        })

        $('#startQuizWriting').click(function () {
            $('#landing').hide();
            $('#test').show();

            isStart = true;
            quiz = quiz.filter((item) => (item.jenis).toLowerCase() == "writing");

            loadQuestion(quiz[index]);
            updateIndex();
        })

        $('#submit').click(function () {
            saveAnswer();
            for (const i in quiz) {
                if (!quiz[i].input_jawaban) {
                    alert(`Soal nomor ${parseInt(i) + 1} belum dijawab!`);
                    index = parseInt(i);
                    return loadQuestion(quiz[index]);
                }
            }

            sendAnswer();
        });

        $('#prevBtn').click(function () {
            if (index > 0) {
                saveAnswer();
                index--;
                loadQuestion(quiz[index]);
                updateIndex();
            }
        });

        $('#nextBtn').click(function () {
            if (quiz[index + 1]) {
                saveAnswer();
                index++;
                loadQuestion(quiz[index]);
                updateIndex();
            }
        });

        function sendAnswer() {
            for (const i in quiz) {
                if (!quiz[i].input_jawaban) {
                    quiz[i].input_jawaban = "TIDAK DIJAWAB";
                }
            }

            $.ajax({
                url: '/tables/quiz/calculate',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({
                    "_token": "{{ csrf_token() }}",
                    data: quiz,
                    user: user
                }),
                success: function (data) {
                    // alert(`Hasil klasifikasi: ${data}`);
                    location.reload();
                }
            });
        }

        function saveAnswer() {
            const answer = $('input[name="jawaban"]:checked').val();
            if (answer) {
                quiz[index].input_jawaban = decodeURI(answer);
            }
        }

        function updateIndex() {
            var html = '';
            for (const q in quiz) {
                html += `<button id="questionSelect${q}" class="btn btn-xs m-1 ${q == index ? 'btn-success' : quiz[q].input_jawaban ? 'btn-primary' : 'btn-outline-warning'}">${parseInt(q) + 1}</button>`
            }
            $('#questionIndex').html(html);

            for (const q in quiz) {
                $(`#questionSelect${q}`).click(function () {
                    index = parseInt(q);
                    loadQuestion(quiz[q]);
                    updateIndex();
                })
            }
        }

        function loadQuestion(data) {
            $('#index').html(index + 1);
            $('#question').html(data.soal);
            // Update jawaban
            var answers = data.jawaban.split("|").sort(() => Math.random() - 0.5);;
            var html = '';
            for (const i in answers) {
                const answer = answers[i];
                html += `<input type="radio" class="form-check-input" id="jawaban_${i}" name="jawaban" value="` + encodeURI(answer) + '"' + `${data.input_jawaban == answer ? "checked" : ""}` + '>';
                html += `<label style="margin-left: 5px;" for="jawaban_${i}">` + answer + '</label><br>';
            }

            $('#answers').html(html);

            $('input:radio[name=jawaban]').change(function () {
                saveAnswer();
                updateIndex();
            })

            // Check button
            $('#nextBtn').prop('disabled', false);
            $('#prevBtn').prop('disabled', false);
            if (index == (quiz.length - 1)) {
                $('#nextBtn').prop('disabled', true);
            } else if (index == 0) {
                $('#prevBtn').prop('disabled', true);
            }
        }

        const timer = setInterval(function () {
            if (!isStart) return;

            $("#timer").html(timeoutMinute + "m : " + timeoutSecond-- + "s");

            if (timeoutSecond < 0) {
                timeoutSecond = 60;
                timeoutMinute--;
            }

            if (timeoutMinute < 0) {
                sendAnswer();
                clearInterval(timer);
            }
        }, 1000)
    })
</script>
@endsection