@extends('user.layouts.v_template')
@section('style')
    <style>
        .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>
@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">

            <h5>
                {{ $case->title }}
            </h5>
            <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>
    </section>
@endsection
@section('script')
    <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,
                        icon: data.icon,
                        confirmButtonText: "Lanjutkan",
                    }).then((result) => {
                        /* Read more about isConfirmed, isDenied below */
                        window.location.href = "/quiz/puzzle/" + caseId + "?sesi=" + sesi;
                    });

                });
        }

    </script>
@endsection