@extends('user.layouts.v_template')
@section('style')
    <style>
        .card-quiz {
            background: white;
            padding: 25px;
            border-radius: 10px;
            max-width: 700px;
            margin: auto;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

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

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

        .feedback-quiz {
            margin-top: 20px;
            padding: 15px;
            background: #eef;
            border-radius: 8px;
        }

        .back-btn-quiz {
            margin-top: 20px;
            background: #dc3545;
            color: white;
            border: none;
            padding: 12px 20px;
            border-radius: 8px;
            cursor: pointer;
        }

        .finish-btn-quiz {
            margin-top: 20px;
            background: #16a34a;
            color: white;
            border: none;
            padding: 12px 20px;
            border-radius: 8px;
            cursor: pointer;
            width: 100%;
        }

        .debug-quiz {
            margin-top: 30px;
            background: #111827;
            color: white;
            padding: 15px;
            border-radius: 10px;
            font-size: 13px;
            overflow: auto;
        }
    </style>
@endsection

@section('content')
    @if(session('error'))

        <div class="alert alert-danger">

            {{ session('error') }}

        </div>

    @endif
    <!-- START SECTION TOP -->
    <section class="section-top"
        style="background-image: url(assets/img/bg/section-top.png);background-size:cover; background-position: center center;">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 col-sm-12 col-xs-12 text-center">
                    <div class="section-top-title">
                        <h1>Bank Kasus</h1>
                    </div>
                </div><!--- END COL -->
            </div><!--- END ROW -->
        </div><!--- END CONTAINER -->
    </section>
    <!-- END SECTION TOP -->
    <section id="portfolio" class="portfolio_area section-padding">
        <div class="card-quiz">

            <h1>{{ $case->title }}</h1>
            <input type="hidden" id="case_study_id" value="{{ $case->id }}">

            <div id="quiz-area">

                <div id="node-content">

                    @if($startNode->gambar)

                        <div style="margin-bottom:20px;">

                            <img src="{{ asset('uploads/nodes/' . $startNode->gambar) }}" style="
                            width:100%;
                            border-radius:12px;
                            object-fit:cover;
                        ">

                        </div>

                    @endif

                    {!! nl2br(e($startNode->content)) !!}

                </div>

                <div id="choices">

                    @foreach($startNode->choices as $choice)

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

                    @endforeach

                </div>

            </div>
            <!-- 
                                    <div class="debug">

                                        <h3>TEMP DECISION MEMORY</h3>

                                        <pre id="debug"></pre>

                                    </div> -->

        </div>
    </section>

@endsection
@section('script')
    <script>

        /*
        |--------------------------------------------------------------------------
        | TEMP MEMORY
        |--------------------------------------------------------------------------
        |
        | Refresh browser = reset
        | Back tidak menghapus history pilihan
        |
        */

        let tempAnswers = [];

        let historyStack = [];

        /*
        |--------------------------------------------------------------------------
        | DEBUG
        |--------------------------------------------------------------------------
        */

        // function renderDebug() {
        //     document.getElementById('debug')
        //         .innerHTML =
        //         JSON.stringify(
        //             tempAnswers,
        //             null,
        //             4
        //         );
        // }

        /*
        |--------------------------------------------------------------------------
        | CHOOSE
        |--------------------------------------------------------------------------
        */

        function choose(choiceId) {
            /*
            |--------------------------------------------------------------------------
            | SIMPAN TAMPILAN UI
            |--------------------------------------------------------------------------
            */

            historyStack.push(
                document.getElementById('quiz-area').innerHTML
            );

            /*
            |--------------------------------------------------------------------------
            | SIMPAN PILIHAN KE TEMP MEMORY
            |--------------------------------------------------------------------------
            |
            | Tidak dihapus walaupun back
            |
            */

            tempAnswers.push(choiceId);

            // renderDebug();

            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-quiz">

                    //                     <strong>Status:</strong>
                    //                     ${data.choice.status ?? '-'}

                    //                     <br><br>

                    //                     ${data.choice.feedback ?? '-'}

                    //                 </div>

                    //                 <hr>
                    //             `;

                    /*
                    |--------------------------------------------------------------------------
                    | NODE BERIKUTNYA
                    |--------------------------------------------------------------------------
                    */

                    if (data.node) {

                        html += `

                                            <div id="node-content">

                                        `;

                        /*
                        |--------------------------------------------------------------------------
                        | IMAGE
                        |--------------------------------------------------------------------------
                        */

                        if (data.node.gambar) {

                            html += `

                                            <div style="margin-bottom:20px;">

                                                <img
                                                    src="/uploads/nodes/${data.node.gambar}"
                                                    style="
                                                        width:100%;
                                                        border-radius:12px;
                                                        object-fit:cover;
                                                    "
                                                >

                                            </div>

                                        `;
                        }

                        /*
                        |--------------------------------------------------------------------------
                        | CONTENT
                        |--------------------------------------------------------------------------
                        */

                        html += `

                                                    ${data.node.content}

                                                </div>

                                            `;

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

                        data.choices.forEach(choice => {

                            html += `

                                                    <button
                                                        class="choice-quiz"
                                                        onclick="choose(${choice.id})"
                                                    >

                                                        ${choice.label} -
                                                        ${choice.text}

                                                    </button>

                                                `;
                        });

                        html += `</div>`;
                    }

                    /*
                    |--------------------------------------------------------------------------
                    | BACK BUTTON
                    |--------------------------------------------------------------------------
                    */

                    if (data.choice.status !== 'correct') {

                        html += `

                                        <button
                                            class="back-btn-quiz"
                                            onclick="goBack()"
                                        >
                                            ← Kembali
                                        </button>

                                    `;
                    }

                    /*
                    |--------------------------------------------------------------------------
                    | FINAL BUTTON
                    |--------------------------------------------------------------------------
                    */

                    if (
                        !data.node ||
                        data.choices.length === 0
                    ) {

                        html += `

                                        <button
                                            class="finish-btn-quiz"
                                            onclick="finishQuiz()"
                                        >
                                            Evaluasi Akhir
                                        </button>

                                    `;
                    }

                    document.getElementById('quiz-area')
                        .innerHTML = html;
                        
                        document.querySelector('.card-quiz')
                        .scrollIntoView({
                            behavior: 'smooth',
                            block: 'start'
                        });

                });
        }

        /*
        |--------------------------------------------------------------------------
        | BACK
        |--------------------------------------------------------------------------
        |
        | HANYA UI
        | TIDAK MENGHAPUS tempAnswers
        |
        */

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

                let previous =
                    historyStack.pop();

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

            // renderDebug();
        }

        /*
        |--------------------------------------------------------------------------
        | FINISH QUIZ
        |--------------------------------------------------------------------------
        |
        | Semua pilihan dikirim ke backend
        |
        */

        function finishQuiz() {

            let id = document.getElementById('case_study_id').value;

            fetch('/quiz/final-evaluation', {

                method: 'POST',

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

                body: JSON.stringify({

                    /*
                    |--------------------------------------------------------------------------
                    | KIRIM SEMUA PILIHAN
                    |--------------------------------------------------------------------------
                    */

                    answers: tempAnswers,
                    id: id,

                })

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

                    // console.log(data);s

                    /*
                    |--------------------------------------------------------------------------
                    | NANTI DI SINI TAMPILKAN HASIL
                    |--------------------------------------------------------------------------
                    */

                    if (data.redirect) {

                        window.location.href = data.redirect;
                    }
                });
        }

        /*
        |--------------------------------------------------------------------------
        | START
        |--------------------------------------------------------------------------
        */

        // renderDebug();

    </script>
@endsection