@extends('main.layouts.app')

@section('title', 'Kuesioner Hasil')

@section('content')
<style>
    .learning-style-card {
        transition: box-shadow 0.2s;
        border-radius: 18px;
        border: none;
        box-shadow: 0 2px 16px rgba(99,102,241,0.07);
        background: #fff;
    }
    .learning-style-card:hover {
        box-shadow: 0 6px 32px rgba(99,102,241,0.13);
    }
    .learning-style-badge {
        font-size: 15px;
        border-radius: 12px;
        background: #f0f4ff;
        color: #6366f1;
        padding: 6px 18px;
        font-weight: 600;
        transition: background 0.2s;
    }
    .learning-style-badge:hover {
        background: #e0e7ff;
    }
    .main-title {
        font-size: 2.2rem;
        font-weight: 700;
        color: #6366f1;
        margin-bottom: 1.5rem;
        letter-spacing: 1px;
    }
    .score-label {
        font-size: 1.1rem;
        color: #6366f1;
        font-weight: 600;
    }
    .score-value {
        font-size: 2rem;
        font-weight: 700;
        color: #22223b;
    }
    .divider-vertical {
        border-left: 1.5px solid #e0e7ff;
        height: 60px;
        margin: 0 18px;
    }
    .card-gradient {
        background: linear-gradient(90deg, #f0f4ff 0%, #f8f9fa 100%);
        border-radius: 18px;
    }
    .btn-gradient-primary {
        background: linear-gradient(90deg, #6366f1 0%, #00bcd4 100%);
        color: #fff;
        border: none;
        border-radius: 30px;
        font-size: 1.1rem;
        font-weight: 600;
        box-shadow: 0 4px 16px rgba(99,102,241,0.12);
        transition: background 0.3s, box-shadow 0.2s;
    }
    .btn-gradient-primary:hover {
        background: linear-gradient(90deg, #4f46e5 0%, #0097a7 100%);
        box-shadow: 0 8px 24px rgba(99,102,241,0.18);
    }
    .history-table th, .history-table td {
        vertical-align: middle !important;
    }
    .history-table th {
        background: #f0f4ff;
        color: #6366f1;
        font-weight: 700;
    }
    .history-table tr {
        transition: background 0.2s;
    }
    .history-table tr:hover {
        background: #f8fafc !important;
    }
</style>

<div class="container-xxl flex-grow-1 container-p-y">
    <div class="row justify-content-center mb-4">
        <div class="col-lg-10">
            <div class="text-center">
                <h1 class="main-title">Hasil Kuesioner & Pre-test</h1>
            </div>
        </div>
    </div>

    <!-- Learning Style Scores -->
    <div class="row justify-content-center mb-4">
        <div class="col-lg-10">
            <div class="card learning-style-card p-4">
                <div class="row text-center">
                    <div class="col-6 col-md-3 mb-3 mb-md-0">
                        <img src="{{ asset('frontend/assets/img/icon/Visual.png') }}" alt="Visual Icon" style="width: 32px; height: 32px;">
                        <div class="score-label mt-2">Visual</div>
                        <div class="score-value">{{ $kuesionerls->visual ?? '0' }}</div>
                    </div>
                    <div class="col-6 col-md-3 mb-3 mb-md-0">
                        <img src="{{ asset('frontend/assets/img/icon/video.png') }}" alt="Auditory Icon" style="width: 32px; height: 32px;">
                        <div class="score-label mt-2">Auditory</div>
                        <div class="score-value">{{ $kuesionerls->auditory ?? '0' }}</div>
                    </div>
                    <div class="col-6 col-md-3">
                        <img src="{{ asset('frontend/assets/img/icon/read.png') }}" alt="Read/Write Icon" style="width: 32px; height: 32px;">
                        <div class="score-label mt-2">Read/Write</div>
                        <div class="score-value">{{ $kuesionerls->readwrite ?? '0' }}</div>
                    </div>
                    <div class="col-6 col-md-3">
                        <img src="{{ asset('frontend/assets/img/icon/Kinestetik.png') }}" alt="Kinesthetic Icon" style="width: 32px; height: 32px;">
                        <div class="score-label mt-2">Kinesthetic</div>
                        <div class="score-value">{{ $kuesionerls->kinesthetic ?? '0' }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Metacognitive Info -->
    <div class="row justify-content-center mb-4">
        <div class="col-lg-10">
            <div class="card learning-style-card p-4">
                <div class="row text-center">
                    <div class="col-6">
                        <div class="rounded-circle bg-primary d-flex align-items-center justify-content-center mx-auto mb-2" style="width: 48px; height: 48px;">
                            <i class="bx bx-brain text-white" style="font-size: 26px;"></i>
                        </div>
                        <div class="score-label">KM</div>
                        <div class="score-value" style="color: #6366f1;">{{ $kuesionermeta->km_class ?? 'unknown' }}</div>
                        <div class="text-muted" style="font-size: 14px;">Knowledge of Metacognition</div>
                    </div>
                    <div class="col-6">
                        <div class="rounded-circle bg-info d-flex align-items-center justify-content-center mx-auto mb-2" style="width: 48px; height: 48px;">
                            <i class="bx bx-cog text-white" style="font-size: 26px;"></i>
                        </div>
                        <div class="score-label">RM</div>
                        <div class="score-value" style="color: #00bcd4;">{{ $kuesionermeta->rm_class ?? 'unknown' }}</div>
                        <div class="text-muted" style="font-size: 14px;">Regulation of Metacognition</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Result -->
    <div class="row justify-content-center mb-4">
        <div class="col-lg-10">
            <div class="card card-gradient shadow-lg border-0 py-5 px-3">
                <div class="text-center">
                    <p class="mb-3 fw-semibold" style="font-size: 20px; color: #6366f1;">
                        <i class="bx bx-bulb" style="font-size: 24px; vertical-align: middle;"></i>
                        Berdasarkan hasil kuesioner, gaya belajar kamu adalah:
                    </p>
                    <h2 class="fw-bold mb-2" style="font-size: 40px; color: #6366f1; letter-spacing: 1px;">
                        {{ $kuesionerls->result ?? 'Belum Ada Hasil' }}
                    </h2>
                    @if($kuesionerls && $kuesionerls->result)
                        <div class="d-flex justify-content-center align-items-center gap-3 mt-4">
                            <a href="{{ route('materi-' . strtolower($kuesionerls->result)) }}"
                               class="btn btn-gradient-primary px-5 py-3">
                                <i class="bx bx-play-circle" style="font-size: 22px; vertical-align: middle;"></i>
                                Mulai Belajar!
                            </a>
                        </div>
                        <div class="mt-3">
                            <span class="learning-style-badge">
                                Gaya belajar ini akan membantumu memahami materi dengan lebih efektif!
                            </span>
                        </div>
                    @else
                        <div class="alert alert-warning mt-4" style="border-radius: 12px;">
                            Belum ada hasil kuesioner. Silakan isi kuesioner terlebih dahulu.
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- History Table -->
    <div class="row justify-content-center mb-4">
        <div class="col-lg-10">
            <div class="card shadow border-0" style="border-radius: 18px;">
                <div class="card-header bg-white border-0 d-flex align-items-center" style="border-radius: 18px 18px 0 0;">
                    <h5 class="card-title text-primary mb-0" style="font-size: 20px;">
                        <i class="bx bx-list-check" style="font-size: 22px; vertical-align: middle;"></i>
                        Riwayat Pengisian Kuesioner
                    </h5>
                </div>
                <div class="card-body pt-0">
                    <div class="table-responsive px-2 pb-3">
                        <table class="table align-middle table-hover mb-0 history-table" style="border-radius: 12px; overflow: hidden;">
                            <thead>
                                <tr>
                                    <th class="text-center">Hasil MAI</th>
                                    <th class="text-center">Hasil LS</th>
                                    <th class="text-center">Diisi Tanggal</th>
                                    <th class="text-center">Terakhir Diedit</th>
                                    <th class="text-center">Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if($kuesionerls)
                                    <tr>
                                        <td class="text-center">
                                            <span class="badge bg-primary bg-opacity-10 text-primary px-3 py-2" style="border-radius: 8px;">
                                                KM {{ $kuesionermeta->km_class ?? 'unknown' }}, RM {{ $kuesionermeta->rm_class ?? 'unknown' }}
                                            </span>
                                        </td>
                                        <td class="text-center">
                                            <span class="badge bg-info bg-opacity-10 text-info px-3 py-2" style="border-radius: 8px;">
                                                {{ $kuesionerls->result }}
                                            </span>
                                        </td>
                                        <td class="text-center">
                                            <i class="bx bx-calendar"></i>
                                            {{ $kuesionerls->created_at->format('d M Y') }}
                                        </td>
                                        <td class="text-center">
                                            <i class="bx bx-history"></i>
                                            {{ $kuesionerls->updated_at->format('d M Y') }}
                                        </td>
                                        <td class="text-center">
                                            <a href="{{ route('kuesioner-ls') }}"
                                               class="btn btn-outline-primary btn-sm px-3 py-1"
                                               style="border-radius: 20px; font-size: 14px;">
                                                <i class="bx bx-edit"></i> Ubah
                                            </a>
                                        </td>
                                    </tr>
                                @else
                                    <tr>
                                        <td colspan="5" class="text-center text-muted" style="font-size: 15px;">
                                            <i class="bx bx-info-circle"></i> Belum ada data kuesioner gaya belajar.
                                        </td>
                                    </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@section('helpInstructions')
[
    "<h4>Selamat datang di Hasil Kuesioner!</h4><p>Aku akan memberitahu kamu informasi yang ada pada halaman ini.</p>",
    "<p>Hasil Kuesioner merupakan halaman untuk menampilkan seluruh data dari hasil kuesioner yang telah kamu isi.</p>",
    "<p>Data Visual, Auditory, Read/Write dan Kinesthetic adalah skor gaya belajar yang kamu perolah dari hasil pengisian kuesioner gaya belajar.</p>",
    "<p>Jika skor pada salah satu gaya belajar > 7, maka gaya belajar tersebut adalah gaya belajar kamu!</p>",
    "<p>Jika terdapat lebih dari 2 gaya belajar dengan skor > 7, maka gaya belajar kamu termasuk 'Multimodal'. Selain itu juga dikategorikan sebagai 'Multimodal'</p>",
    "<p>Hasil gaya belajar kamu akan ditampilkan dibawah dengan tombol 'Mulai Belajar!' yang dimana jika di klik akan mengarah ke halama materi pembelajaran sesuai dengan gaya belajar kamu.</p>",
    "<p>Hasil Metakognitif kamu juga ditampikan dengan penggolongan tingkat KM dan RM kamu dari hasil kuesioner metakognitif.</p>"
]
@endsection
@endsection