@extends('layouts.v_template')
@section('script')
    <style>
        .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')
    <div class="container-fluid">
        <!-- ========== title-wrapper start ========== -->
        <div class="title-wrapper pt-30">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <div class="title">
                        <h2>Detail</h2>
                    </div>
                </div>
                <!-- end col -->
                <div class="col-md-6">
                    <div class="breadcrumb-wrapper">
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item">
                                    <a href="{{ URL::to('/admin-hasil') }}">Hasil</a>
                                </li>
                                <li class="breadcrumb-item" aria-current="page">
                                    <a href="{{ URL::to('/admin-hasil') }}">Dashboard</a>
                                </li>
                                <li class="breadcrumb-item active" aria-current="page">
                                    Detail
                                </li>
                            </ol>
                        </nav>
                    </div>
                </div>
                <!-- end col -->
            </div>
            <!-- end row -->
        </div>
        <!-- ========== title-wrapper end ========== -->
        <div class="tables-wrapper">
            <div class="row">
                <div class="col-lg-12">
                    <div class="card-style mb-30">
                        <div>
                            <div class="d-flex justify-content-end">
                                <a class="btn btn-sm btn-primary" href="{{ URL::to('/admin-hasil/jawaban/' . Crypt::encrypt($jawaban->category_id) . '/' . $jawaban->user_id) }}">Kembali</a>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Nama</label>
                                <input type="text" class="form-control border-0 border-bottom rounded-0"
                                    value="{{ $jawaban->user->name }}" readonly>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Email</label>
                                <input type="text" class="form-control border-0 border-bottom rounded-0"
                                    value="{{ $jawaban->user->email }}" readonly>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Case</label>
                                <input type="text" class="form-control border-0 border-bottom rounded-0"
                                    value="{{ $jawaban->caseStudy->title }}" readonly>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Nilai Akhir</label>
                                <input type="text" class="form-control border-0 border-bottom rounded-0"
                                    value="{{ $jawaban->skor }}" readonly>
                            </div>
                        </div>
                    </div>
                    <!-- end card -->
                </div>
                <!-- end col -->
            </div>
            <!-- end row -->
        </div>
        <section>
            <!-- REKAP JAWABAN -->
            <div>
                <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 User 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>

        </section>
    </div>
@endsection

@section('script')
    <script>

    </script>
@endsection

<!-- ========== section end ========== -->

<!-- ========== footer start =========== -->