<!DOCTYPE html>
<html>

<head>

    <title>Alternatif Solusi</title>

    <style>
        body {
            font-family: Arial;
            background: #f4f4f4;
            padding: 40px;
        }

        .card {
            background: white;
            padding: 25px;
            border-radius: 10px;
            max-width: 700px;
            margin: auto;
        }

        .option {
            width: 100%;
            margin-top: 10px;
            padding: 14px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            background: #2563eb;
            color: white;
            text-align: left;
            font-size: 15px;
        }

        .option:hover {
            background: #1d4ed8;
        }
    </style>

</head>

<body>

    <div class="card">

        <h2>
            {{ $case->title }}
        </h2>
        <hr>
        <h4>Data yang Terkumpul</h4>
        {{ $alur }}
        <hr>
        <button class="option" onclick="jawab('A', {{ $alternatif->score_a }} )">
            A.
            {{ $alternatif->pertanyaan_a }}
        </button>

        <button class="option" onclick="jawab('B', {{ $alternatif->score_b }} )">
            B.
            {{ $alternatif->pertanyaan_b }}
        </button>

        <button class="option" onclick="jawab('C', {{ $alternatif->score_c }} )">
            C.
            {{ $alternatif->pertanyaan_c }}
        </button>

        <button class="option" onclick="jawab('D', {{ $alternatif->score_d }} )">
            D.
            {{ $alternatif->pertanyaan_d }}
        </button>
        <input type="hidden" id="caseId" value="{{ $case->id }}">
        <input type="hidden" id="sesi" value="{{ $sesi }}">

    </div>

    <script>

        function jawab(answer, score) {

            const caseId = document.getElementById('caseId').value;
            const sesi = document.getElementById('sesi').value;
            fetch('/quiz/alternatif-submit', {

                method: 'POST',

                headers: {

                    'Content-Type': 'application/json',

                    'X-CSRF-TOKEN':
                        '{{ csrf_token() }}'
                },

                body: JSON.stringify({
                    alternatif_id: {{$alternatif->id}},
                    jawaban: answer,
                    score: score,
                    caseId: caseId,
                    sesi: sesi
                })

            })
                .then(res => res.json())
                .then(data => {

                    Swal.fire({
                        text: data.respon,
                        confirmButtonText: "Lanjutkan",
                    }).then((result) => {
                        /* Read more about isConfirmed, isDenied below */
                        if (result.isConfirmed) Swal.fire("Saved!", "", "success");
                    });

                });
        }

    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert2/11.23.0/sweetalert2.all.js"
        integrity="sha512-kEG1e68iTZ6mp4hawzUG6LqyzSdDY+wXV2OJ2OjU5tfg6daEbVUYKMxYutmnUN7iwKO2BPICXNE7yh2qtS5YHw=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>

</body>

</html>