<!DOCTYPE html>
<html>

<head>
    <title>{{ $case->title }}</title>

    <meta name="csrf-token" content="{{ csrf_token() }}">

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

        .card {
            background: white;
            padding: 25px;
            border-radius: 10px;
            max-width: 700px;
            margin: auto;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .choice {
            display: block;
            width: 100%;
            margin-top: 10px;
            padding: 12px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            background: #3490dc;
            color: white;
            font-size: 16px;
        }

        .choice:hover {
            background: #2779bd;
        }

        .feedback {
            margin-top: 20px;
            padding: 15px;
            background: #eef;
            border-radius: 8px;
        }
    </style>
</head>

<body>

    <div class="card">

        <h1>{{ $case->title }}</h1>

        <div id="quiz-area">

            <div id="node-content">
                {!! nl2br(e($startNode->content)) !!}
            </div>

            <div id="choices">
                @foreach($startNode->choices as $choice)

                <button
                    class="choice"
                    onclick="choose({{ $choice->id }})">
                    {{ $choice->label }} -
                    {{ $choice->text }}
                </button>

                @endforeach
            </div>

        </div>

    </div>

    <script>
        let historyStack = [];

        function choose(choiceId) {
            // simpan tampilan sebelumnya
            historyStack.push(
                document.getElementById('quiz-area').innerHTML
            );

            fetch('/quiz/answer', {

                    method: 'POST',

                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                    },

                    body: JSON.stringify({
                        choice_id: choiceId
                    })

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

                    let html = '';

                    // feedback
                    html += `
            <div class="feedback">
                <strong>Status:</strong>
                ${data.choice.status ?? '-'}
                <br><br>

                ${data.choice.feedback ?? '-'}
            </div>

            <hr>
        `;

                    // node berikutnya
                    if (data.node) {

                        html += `
                <div id="node-content">
                    ${data.node.content}
                </div>
            `;

                        html += `
                <div id="choices" style="margin-top:20px;">
            `;

                        data.choices.forEach(choice => {

                            html += `
                    <button
                        class="choice"
                        onclick="choose(${choice.id})"
                    >
                        ${choice.label} -
                        ${choice.text}
                    </button>
                `;
                        });

                        html += `</div>`;
                    }

                    // jika jawaban salah
                    if (data.choice.status !== 'correct') {

                        html += `
                <button
                    onclick="goBack()"
                    style="
                        margin-top:20px;
                        background:#dc3545;
                        color:white;
                        border:none;
                        padding:12px 20px;
                        border-radius:8px;
                        cursor:pointer;
                    "
                >
                    ← Kembali ke Pertanyaan Sebelumnya
                </button>
            `;
                    }

                    document.getElementById('quiz-area')
                        .innerHTML = html;

                });
        }

        function goBack() {
            if (historyStack.length > 0) {

                let previous =
                    historyStack.pop();

                document.getElementById('quiz-area')
                    .innerHTML = previous;
            }
        }
    </script>

</body>

</html>