@extends('user.layouts.v_template')

@section('style')
    <style>
        .result-wrapper {
            max-width: 900px;
            margin: auto;
        }

        .result-card {
            background: white;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
        }

        /*
                                                                                            |--------------------------------------------------------------------------
                                                                                            | HEADER
                                                                                            |--------------------------------------------------------------------------
                                                                                            */

        .result-header {
            padding: 50px 30px;
            text-align: center;
            color: white;
            background: linear-gradient(135deg, #2563eb, #1e40af);
        }

        .result-header h1 {
            margin: 0;
            font-size: 38px;
            font-weight: bold;
        }

        .result-header p {
            margin-top: 10px;
            opacity: 0.9;
            font-size: 16px;
        }

        /*
                                                                                            |--------------------------------------------------------------------------
                                                                                            | SCORE
                                                                                            |--------------------------------------------------------------------------
                                                                                            */

        .score-section {
            padding: 40px 30px;
            text-align: center;
        }

        .score-circle {
            width: 180px;
            height: 180px;
            margin: auto;
            border-radius: 50%;
            background: linear-gradient(135deg, #22c55e, #15803d);

            display: flex;
            align-items: center;
            justify-content: center;

            color: white;

            box-shadow:
                0 10px 25px rgba(34, 197, 94, 0.3);
        }

        .score-circle h2 {
            margin: 0;
            font-size: 55px;
            font-weight: bold;
        }

        .score-label {
            margin-top: 25px;
            font-size: 30px;
            font-weight: bold;
            color: #111827;
        }

        .score-description {
            margin-top: 10px;
            color: #6b7280;
            font-size: 15px;
            line-height: 1.7;
        }

        /*
                                                                                            |--------------------------------------------------------------------------
                                                                                            | DETAIL
                                                                                            |--------------------------------------------------------------------------
                                                                                            */

        .detail-section {
            padding: 0 30px 40px;
        }

        .detail-box {
            background: #f9fafb;
            border-radius: 15px;
            padding: 25px;
        }

        .detail-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 20px;
            color: #111827;
        }

        .detail-item {
            display: flex;
            justify-content: space-between;
            padding: 12px 0;
            border-bottom: 1px solid #e5e7eb;
        }

        .detail-item:last-child {
            border-bottom: none;
        }

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

        .result-actions {
            padding: 0 30px 40px;
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
        }

        .btn-result {
            flex: 1;
            border: none;
            padding: 15px;
            border-radius: 12px;
            cursor: pointer;
            font-size: 15px;
            font-weight: bold;
            transition: 0.2s;
            text-align: center;
            text-decoration: none;
        }

        .btn-primary-result {
            background: #2563eb;
            color: white;
        }

        .btn-primary-result:hover {
            background: #1d4ed8;
        }

        .btn-secondary-result {
            background: #e5e7eb;
            color: #111827;
        }

        .btn-secondary-result:hover {
            background: #d1d5db;
        }

        .option-review {
            border-radius: 14px;
            padding: 18px 20px;
            margin-top: 15px;
            border: 2px solid #e5e7eb;
            background: white;
            transition: 0.2s;
        }

        /*
                                                                                |--------------------------------------------------------------------------
                                                                                | USER SALAH
                                                                                |--------------------------------------------------------------------------
                                                                                */

        .option-user {
            background: #dbeafe;
            border-color: #2563eb;
        }

        /*
                                                                                |--------------------------------------------------------------------------
                                                                                | JAWABAN BENAR
                                                                                |--------------------------------------------------------------------------
                                                                                */

        .option-correct {
            background: #dcfce7;
            border-color: #16a34a;
        }

        /*
                                                                                |--------------------------------------------------------------------------
                                                                                | LABEL
                                                                                |--------------------------------------------------------------------------
                                                                                */

        .option-badge {
            display: inline-block;
            padding: 5px 12px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: bold;
            margin-top: 12px;
        }

        .badge-user {
            background: #2563eb;
            color: white;
        }

        .badge-correct {
            background: #16a34a;
            color: white;
        }

        .option-title {
            font-size: 17px;
            font-weight: bold;
            color: #111827;
        }

        .option-desc {
            margin-top: 8px;
            color: #4b5563;
            line-height: 1.7;
        }

        .puzzle-review-card {
            background: white;
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
            margin-top: 40px;
        }

        .review-title {
            font-size: 24px;
            font-weight: bold;
            color: #111827;
            margin-bottom: 10px;
        }

        .review-subtitle {
            color: #6b7280;
            margin-bottom: 30px;
        }

        /*
                                                                        |--------------------------------------------------------------------------
                                                                        | GRID
                                                                        |--------------------------------------------------------------------------
                                                                        */

        .review-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 25px;
        }

        /*
                                                                        |--------------------------------------------------------------------------
                                                                        | BOX
                                                                        |--------------------------------------------------------------------------
                                                                        */

        .review-box {
            background: #f9fafb;
            border-radius: 16px;
            padding: 20px;
            border: 1px solid #e5e7eb;
        }

        .review-box h4 {
            margin-top: 0;
            margin-bottom: 20px;
            color: #111827;
        }

        /*
                                                                        |--------------------------------------------------------------------------
                                                                        | STEP
                                                                        |--------------------------------------------------------------------------
                                                                        */

        .review-step {
            display: flex;
            gap: 15px;
            align-items: flex-start;
            padding: 14px;
            border-radius: 12px;
            margin-bottom: 12px;
        }

        /*
                                                                        |--------------------------------------------------------------------------
                                                                        | BENAR
                                                                        |--------------------------------------------------------------------------
                                                                        */

        .step-correct {
            background: #dcfce7;
            border: 1px solid #16a34a;
        }

        /*
                                                                        |--------------------------------------------------------------------------
                                                                        | SALAH
                                                                        |--------------------------------------------------------------------------
                                                                        */

        .step-wrong {
            background: #fee2e2;
            border: 1px solid #dc2626;
        }

        /*
                                                                        |--------------------------------------------------------------------------
                                                                        | NUMBER
                                                                        |--------------------------------------------------------------------------
                                                                        */

        .step-number {
            min-width: 34px;
            height: 34px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            color: white;
            font-size: 14px;
        }

        .number-correct {
            background: #16a34a;
        }

        .number-wrong {
            background: #dc2626;
        }

        /*
                                                                        |--------------------------------------------------------------------------
                                                                        | TEXT
                                                                        |--------------------------------------------------------------------------
                                                                        */

        .step-text {
            flex: 1;
            color: #111827;
            line-height: 1.6;
            font-size: 14px;
        }

        |-------------------------------------------------------------------------- | RESPONSIVE |-------------------------------------------------------------------------- */ @media(max-width:768px) {

            .result-header h1 {
                font-size: 28px;
            }

            .score-circle {
                width: 140px;
                height: 140px;
            }

            .score-circle h2 {
                font-size: 42px;
            }

            .score-label {
                font-size: 24px;
            }

            .result-actions {
                flex-direction: column;
            }

            .review-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
@endsection

@section('content')

    @php

        /*
        |--------------------------------------------------------------------------
        | EXAMPLE SCORE
        |--------------------------------------------------------------------------
        */

        /*
        |--------------------------------------------------------------------------
        | CATEGORY
        |--------------------------------------------------------------------------
        */

        if ($score >= 85) {

            $kategori = 'Sangat Tinggi';

            $deskripsi =
                'Anda menunjukkan kemampuan analisis dan pengambilan keputusan yang sangat baik berdasarkan data diagnosis yang tersedia.';

        } elseif ($score >= 70) {

            $kategori = 'Tinggi';

            $deskripsi =
                'Kemampuan diagnosis Anda sudah baik dan sebagian besar keputusan diambil berdasarkan analisis yang tepat.';

        } elseif ($score >= 55) {

            $kategori = 'Sedang';

            $deskripsi =
                'Anda mampu melakukan diagnosis dasar, namun masih terdapat beberapa keputusan yang kurang tepat.';

        } else {

            $kategori = 'Rendah';

            $deskripsi =
                'Masih diperlukan peningkatan dalam analisis data dan pengambilan keputusan diagnosis.';
        }

    @endphp
    <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>
    <section class="section-padding">

        <div class="container">

            <div class="result-wrapper">

                <div class="result-card">

                    <!-- HEADER -->
                    <div class="result-header">

                        <h1 style="color: white">
                            Hasil Evaluasi Akhir
                        </h1>

                        <p>
                            {{ $case_title }}
                        </p>

                    </div>

                    <!-- SCORE -->
                    <div class="score-section">

                        <div class="score-circle">

                            <h2 style="color: white">
                                {{ $score }}
                            </h2>

                        </div>

                        <div class="score-label">

                            {{ $kategori }}

                        </div>

                        <div class="score-description">

                            {{ $deskripsi }}

                        </div>

                    </div>

                    <!-- DETAIL -->
                    <div class="detail-section">

                        <div class="detail-box">

                            <div class="detail-title">

                                Detail Penilaian

                            </div>

                            <div class="detail-item">

                                <span>
                                    Skor Akhir
                                </span>

                                <strong>
                                    {{ $score }}
                                </strong>

                            </div>

                            <div class="detail-item">

                                <span>
                                    Kategori
                                </span>

                                <strong>
                                    {{ $kategori }}
                                </strong>

                            </div>


                        </div>

                    </div>

                    <!-- ACTION -->
                    <div class="result-actions">

                        <a href="{{ URL::to('/kasus') }}" class="
                                                                                                                        btn-result
                                                                                                                        btn-primary-result
                                                                                                                    ">
                            Kembali ke Bank Kasus
                        </a>

                        <a href="{{ URL::to('/quiz/' . $case_id) }}" class="
                                                                                                                        btn-result
                                                                                                                        btn-primary-result
                                                                                                                    ">
                            Kerjakan Ulang Kasus
                        </a>
                        <a href="{{ URL::to('/hasil/' . $case_id) }}" class="
                                                                                                                        btn-result
                                                                                                                        btn-primary-result
                                                                                                                    ">
                            Lihat Semua Hasil
                        </a>

                    </div>

                </div>

            </div>

        </div>

    </section>
    <section>
        <!-- REKAP JAWABAN -->
        <div style="
                                                                                            padding: 0 30px 40px;
                                                                                        ">

            <div style="
                                                                                                background:#ffffff;
                                                                                                border-radius:18px;
                                                                                                border:1px solid #e5e7eb;
                                                                                                overflow:hidden;
                                                                                            ">

                <!-- HEADER -->
                <div style="
                                                                                                    padding:20px 25px;
                                                                                                    background:linear-gradient(135deg,#eff6ff,#dbeafe);
                                                                                                    border-bottom:1px solid #dbeafe;
                                                                                                ">

                    <h3 style="
                                                                                                        margin:0;
                                                                                                        color:#1e3a8a;
                                                                                                        font-size:22px;
                                                                                                    ">
                        Rekapan Jawaban
                    </h3>

                    <p style="
                                                                                                        margin-top:8px;
                                                                                                        color:#475569;
                                                                                                        font-size:14px;
                                                                                                    ">
                        Berikut adalah alur diagnosis dan keputusan yang telah Anda pilih selama proses evaluasi.
                    </p>

                </div>

                <!-- TIMELINE -->
                <div style="padding:25px;">

                    @php

                        $rekap = [];

                        foreach ($quiz as $index => $item) {

                            /*
                            |--------------------------------------------------------------------------
                            | WARNA STATUS
                            |--------------------------------------------------------------------------
                            */

                            $color = '#6b7280';

                            if ($item->choice->status == 'Tepat') {

                                $color = '#16a34a';

                            } elseif ($item->choice->status == 'Cukup Tepat') {

                                $color = '#2563eb';

                            } elseif ($item->choice->status == 'Kurang Tepat') {

                                $color = '#f59e0b';

                            } elseif ($item->choice->status == 'Tidak Tepat') {

                                $color = '#ef4444';

                            } elseif ($item->choice->status == 'Tindakan Salah') {

                                $color = '#dc2626';

                            } elseif ($item->choice->status == 'Tindakan Fatal') {

                                $color = '#7f1d1d';

                            }

                            /*
                            |--------------------------------------------------------------------------
                            | TITLE STEP
                            |--------------------------------------------------------------------------
                            */

                            $title = 'Langkah Diagnosis';

                            if ($index == 0) {

                                $title = 'Diagnosis Awal';

                            } elseif ($index > 0 && $index < count($quiz) - 1) {

                                $title = 'Pemeriksaan Lanjutan';

                            } elseif ($index == count($quiz) - 1) {

                                $title = 'Kesimpulan';

                            }

                            $rekap[] = [

                                'step' => $index + 1,

                                'title' => $title,

                                'choice' => $item->choice->text,

                                'status' => $item->choice->status,

                                'color' => $color

                            ];
                        }

                    @endphp

                    @foreach($rekap as $item)

                        <div style="
                                                                                                                    display:flex;
                                                                                                                    gap:20px;
                                                                                                                    margin-bottom:25px;
                                                                                                                    position:relative;
                                                                                                                ">

                            <!-- LINE -->
                            @if(!$loop->last)

                                <div
                                    style="
                                                                                                                                                                            position:absolute;
                                                                                                                                                                            left:19px;
                                                                                                                                                                            top:45px;
                                                                                                                                                                            width:2px;
                                                                                                                                                                            height:100%;
                                                                                                                                                                            background:#dbeafe;
                                                                                                                                                                        ">
                                </div>

                            @endif

                            <!-- NUMBER -->
                            <div style="
                                                                                                                        min-width:40px;
                                                                                                                        height:40px;
                                                                                                                        border-radius:50%;
                                                                                                                        background:{{ $item['color'] }};
                                                                                                                        color:white;
                                                                                                                        display:flex;
                                                                                                                        align-items:center;
                                                                                                                        justify-content:center;
                                                                                                                        font-weight:bold;
                                                                                                                        z-index:2;
                                                                                                                    ">
                                {{ $item['step'] }}
                            </div>

                            <!-- CONTENT -->
                            <div style="
                                                                                                                        flex:1;
                                                                                                                        background:#f9fafb;
                                                                                                                        border-radius:14px;
                                                                                                                        padding:18px;
                                                                                                                    ">

                                <div style="
                                                                                                                            display:flex;
                                                                                                                            justify-content:space-between;
                                                                                                                            align-items:center;
                                                                                                                            flex-wrap:wrap;
                                                                                                                            gap:10px;
                                                                                                                        ">

                                    <h5 style="
                                                                                                                                margin:0;
                                                                                                                                color:#111827;
                                                                                                                                font-size:17px;
                                                                                                                            ">
                                        {{ $item['title'] }}
                                    </h5>

                                    <span style="
                                                                                                                                background:{{ $item['color'] }};
                                                                                                                                color:white;
                                                                                                                                padding:6px 12px;
                                                                                                                                border-radius:999px;
                                                                                                                                font-size:12px;
                                                                                                                                font-weight:bold;
                                                                                                                            ">
                                        {{ $item['status'] }}
                                    </span>

                                </div>

                                <div style="
                                                                                                                            margin-top:12px;
                                                                                                                            color:#374151;
                                                                                                                            line-height:1.7;
                                                                                                                        ">

                                    {{ $item['choice'] }}

                                </div>

                            </div>

                        </div>

                    @endforeach

                </div>

            </div>

        </div>
    </section>
    <section>

        @php

            /*
            |--------------------------------------------------------------------------
            | JAWABAN USER
            |--------------------------------------------------------------------------
            */

            $userAnswer = $alternatif->jawaban;

            /*
            |--------------------------------------------------------------------------
            | CARI JAWABAN DENGAN SKOR TERTINGGI
            |--------------------------------------------------------------------------
            */

            $scores = [

                'A' => $alternatif_question->score_a,
                'B' => $alternatif_question->score_b,
                'C' => $alternatif_question->score_c,
                'D' => $alternatif_question->score_d,

            ];

            $correctAnswer =
                array_search(
                    max($scores),
                    $scores
                );

            /*
            |--------------------------------------------------------------------------
            | OPTIONS
            |--------------------------------------------------------------------------
            */

            $options = [

                'A' => $alternatif_question->pertanyaan_a,

                'B' => $alternatif_question->pertanyaan_b,

                'C' => $alternatif_question->pertanyaan_c,

                'D' => $alternatif_question->pertanyaan_d

            ];

        @endphp

        <div style="
                                                        margin-top:40px;
                                                        background:white;
                                                        border-radius:20px;
                                                        padding:30px;
                                                        box-shadow:0 4px 12px rgba(0,0,0,0.08);
                                                                ">

            <h3 style="
                                                            margin-top:0;
                                                            color:#111827;
                                                        ">
                Evaluasi Alternatif Jawaban
            </h3>

            <p style="
                                                            color:#6b7280;
                                                            margin-bottom:25px;
                                                        ">
                Sistem membandingkan jawaban Anda dengan diagnosis yang paling sesuai berdasarkan data kasus.
            </p>

            @foreach($options as $key => $text)

                @php

                    $class = '';

                    /*
                    |--------------------------------------------------------------------------
                    | JAWABAN BENAR
                    |--------------------------------------------------------------------------
                    */

                    if ($key == $correctAnswer) {

                        $class = 'option-correct';
                    }

                    /*
                    |--------------------------------------------------------------------------
                    | PILIHAN USER SALAH
                    |--------------------------------------------------------------------------
                    */

                    if (
                        $key == $userAnswer &&
                        $userAnswer != $correctAnswer
                    ) {

                        $class = 'option-user';
                    }

                @endphp

                <div class="option-review {{ $class }}">

                    <div class="option-title">

                        {{ $key }}.
                        {{ $text }}

                    </div>

                    <div class="option-desc">

                        @if($key == $correctAnswer)

                            {{ $alternatif_question->feedback_benar }}

                        @elseif($key == $userAnswer && $userAnswer != $correctAnswer)
                            {{ $alternatif_question->feedback_salah }}
                        @else
                            Pilihan ini bukan diagnosis utama berdasarkan data yang ditemukan.
                        @endif
                    </div>
                    @if($key == $correctAnswer)
                        <div class="option-badge badge-correct ">
                            ✔ Jawaban Benar
                        </div>
                    @endif
                    @if(
                            $key == $userAnswer &&
                            $userAnswer != $correctAnswer
                        ) <div class="option-badge badge-user">
                            Pilihan Anda
                        </div>
                    @endif
                </div>
            @endforeach
        </div>

    </section>
    <section>
        @php

            /*
            |--------------------------------------------------------------------------
            | USER ORDER
            |--------------------------------------------------------------------------
            |
            | dari db:
            | 4,2,1,5,6,3
            |
            */

            $userIds =
                explode(
                    ',',
                    $puzzle->jawaban
                );

            /*
            |--------------------------------------------------------------------------
            | CORRECT ORDER
            |--------------------------------------------------------------------------
            |
            | dari db:
            | 1,2,3,4,5,6
            |
            */
            $correctOrder = [

                $puzzle_question->opsi1,
                $puzzle_question->opsi2,
                $puzzle_question->opsi3,
                $puzzle_question->opsi4,
                $puzzle_question->opsi5,
                $puzzle_question->opsi6,

            ];

            /*
            |--------------------------------------------------------------------------
            | SEMUA OPSI
            |--------------------------------------------------------------------------
            */

            $allOptions = [

                '1' => $puzzle_question->opsi1,
                '2' => $puzzle_question->opsi2,
                '3' => $puzzle_question->opsi3,
                '4' => $puzzle_question->opsi4,
                '5' => $puzzle_question->opsi5,
                '6' => $puzzle_question->opsi6,

            ];

            /*
            |--------------------------------------------------------------------------
            | USER ORDER TEXT
            |--------------------------------------------------------------------------
            */

            $userOrder = [];

            foreach ($userIds as $id) {

                $userOrder[] =
                    $allOptions[$id] ?? '-';
            }


        @endphp

        <div class="puzzle-review-card">

            <div class="review-title">
                Evaluasi Urutan Puzzle
            </div>

            <div class="review-subtitle">
                Sistem membandingkan urutan yang Anda susun dengan prosedur diagnosis yang benar.
            </div>

            <div class="row g-4">

                <!-- USER -->
                <div class="col-lg-6">
                    <div class="review-box">

                        <h4>
                            Urutan Jawaban Anda
                        </h4>
                        @foreach($userOrder as $index => $step)
                            @php

                                $isCorrect =
                                    isset($correctOrder[$index]) &&
                                    $correctOrder[$index] == $step;

                            @endphp

                            <div class="
                                                                                                        review-step
                                                                                                    {{ $isCorrect ? 'step-correct' : 'step-wrong' }}
                                                                                                    ">

                                <div class="
                                                                                                            step-number
                                                                                                        {{ $isCorrect ? 'number-correct' : 'number-wrong' }}
                                                                                                        ">
                                    {{ $index + 1 }}
                                </div>
                                <div class="step-text">
                                    {{ $step }}
                                </div>

                            </div>

                        @endforeach

                    </div>
                </div>
                <!-- CORRECT -->
                <div class="col-lg-6">
                    <div class="review-box">

                        <h4>
                            Urutan Yang Benar
                        </h4>
                        @foreach($correctOrder as $index => $step)

                            <div class="
                                                                                                    review-step
                                                                                                step-correct
                                                                                                ">

                                <div class="
                                                                                                        step-number
                                                                                                    number-correct
                                                                                                    ">
                                    {{ $index + 1 }}
                                </div>

                                <div class="step-text">

                                    {{ $step }}

                                </div>

                            </div>

                        @endforeach

                    </div>
                </div>
            </div>

            {{-- FEEDBACK --}}
            <div style="
                                margin-top:30px;
                                background:#f9fafb;
                                padding:20px;
                                border-radius:14px;
                                line-height:1.8;
                                color:#374151;
                            ">

                @php

                    if ($puzzle->skor == 4) {

                        $feedback =
                            $puzzle_question->feedback4;

                    } elseif ($puzzle->skor == 3) {

                        $feedback =
                            $puzzle_question->feedback3;

                    } elseif ($puzzle->skor == 2) {

                        $feedback =
                            $puzzle_question->feedback2;

                    } elseif ($puzzle->skor == 1) {

                        $feedback =
                            $puzzle_question->feedback1;

                    } else {

                        $feedback =
                            $puzzle_question->feedback0;

                    }

                @endphp

                {!! nl2br(
        str_replace(

            [
                'Ringkasan:',
                'Dampak:',
                'Pertanyaan Refleksi:'
            ],

            [
                '<strong>Ringkasan:</strong><br>',
                '<br><br><strong>Dampak:</strong><br>',
                '<br><br><strong>Pertanyaan Refleksi:</strong><br>'
            ],

            $feedback
        )
    ) !!}

            </div>

        </div>

    </section>

@endsection