@extends('layouts/contentNavbarLayout')

@section('title', 'Tables - Placement Tes')

@section('content')

@if ($user->role == "Admin")
    <h4 class="fw-bold py-3 mb-4">
        <span class="text-muted fw-light">Tables Placement Tes</span>
    </h4>
@endif

<!-- Basic Bootstrap Table -->
<div class="card">
    <h5 class="card-header">Placement Tes</h5>
    @if ($user->role == "Admin")
        <div class="mx-3 text-start">
            <a href="{{ route('placement.create') }}">
                <button type="submit" class="btn btn-sm btn-primary">
                    <i class='bx bx-plus'></i>
                    Add
                </button>
            </a>
        </div>
    @endif
    @if (isset($user->kelas))
        <div class="row mb-3 px-3">
            <div class="col-md-6 col-lg-12 mb-3">
                <div class="card text-center">
                    <div class="card-header">
                        Penempatam Kamu
                    </div>
                    <div class="card-body">
                        <h3 class="card-title">{{$user->kelas}}</h3>
                        <p class="card-text">Selamat atas hasil placement test yang kamu dapatkan!</p>
                    </div>
                </div>
            </div>
        </div>
    @else
        @if ($user->role != "Admin")
            <div id="landing">
                <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 class="text-center">
                        <button id="startTest" class="btn btn-primary">Start Test</button>
                    </div>
                </div>
            </div>
            <div class="row" style="display:none" id="test">
                <div class="card-body mx-3">
                    <b>Catatan</b>
                    <ul>
                        <li>Jawab pertanyaan berikut untuk menentukan kelasmu!</li>
                        <li>Jangan mencontek karena ini adalah penentuan kelas, bukan ujian!</li>
                    </ul>
                    <hr class="mt-3">
                </div>
                <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>
        @else
            <div class="table-responsive text-nowrap p-3">
                <table class="table" id="table">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Soal</th>
                            <th>Jawaban</th>
                            <th>Jawaban Benar</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($placement as $record)
                            <tr>
                                <th scope="row">{{$loop->index + 1}}</th>
                                <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('placement.edit', $record->id)}}" class="btn btn-blue"><i
                                                class="bx bx-edit-alt"></i> Edit</a>
                                        <form action="{{route('placement.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>
        @endif
    @endif
</div>
<!--/ Basic Bootstrap Table -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script defer>
    $(document).ready(function () {
        const user = JSON.parse("{{$user}}".replaceAll("&quot;", '"'));
        let placement = <?php echo $placement; ?>;
        let index = 0;
        let timeoutMinute = 30;
        let timeoutSecond = 0;
        let isStart = false;

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

            isStart = true;
        })

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

            sendAnswer();
        });

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

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

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

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

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

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

            for (const q in placement) {
                $(`#questionSelect${q}`).click(function () {
                    index = parseInt(q);
                    loadQuestion(placement[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 == (placement.length - 1)) {
                $('#nextBtn').prop('disabled', true);
            } else if (index == 0) {
                $('#prevBtn').prop('disabled', true);
            }
        }

        loadQuestion(placement[index]);
        updateIndex();

        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