@extends('user.layouts.v_template')

@section('style')
    <style>
        .history-card {
            border-radius: 22px;
            padding: 28px;
            color: white;
            position: relative;
            overflow: hidden;
            height: 100%;
            transition: 0.25s;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
        }

        .history-card:hover {
            transform: translateY(-6px);
        }

        .bg-sangat-tinggi {
            background: linear-gradient(135deg, #16a34a, #22c55e);
        }

        .bg-tinggi {
            background: linear-gradient(135deg, #2563eb, #3b82f6);
        }

        .bg-sedang {
            background: linear-gradient(135deg, #d97706, #f59e0b);
        }

        .bg-rendah {
            background: linear-gradient(135deg, #dc2626, #ef4444);
        }

        .score-watermark {
            position: absolute;
            right: -10px;
            top: -15px;
            font-size: 110px;
            font-weight: bold;
            opacity: 0.12;
            line-height: 1;
        }

        .score-number {
            font-size: 55px;
            font-weight: bold;
            line-height: 1;
            margin-top: 15px;
        }

        .kategori-badge {
            display: inline-block;
            margin-top: 12px;
            padding: 8px 14px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.18);
            backdrop-filter: blur(4px);
            font-size: 13px;
            font-weight: 600;
        }

        .detail-btn {
            display: inline-block;
            margin-top: 22px;
            padding: 11px 18px;
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.18);
            color: white;
            text-decoration: none;
            font-weight: 600;
            transition: 0.2s;
        }

        .detail-btn:hover {
            background: rgba(255, 255, 255, 0.28);
            color: white;
        }

        .meta-info {
            margin-top: 22px;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 10px;
            font-size: 13px;
            opacity: 0.92;
        }

        @media(max-width:576px) {

            .history-card {
                padding: 22px;
            }

            .score-number {
                font-size: 42px;
            }

            .score-watermark {
                font-size: 80px;
            }
        }
    </style>
@endsection

@section('content')

    <!-- START SECTION TOP -->
    <section class="section-top"
        style="background-image:url(assets/img/bg/section-top.png); background-size:cover; background-position:center;">

        <div class="container">

            <div class="row">

                <div class="col-12 text-center">

                    <div class="section-top-title">

                        <h1>Riwayat Hasil Evaluasi</h1>

                    </div>

                </div>

            </div>

        </div>

    </section>

    <!-- CONTENT -->
    <section class="portfolio_area section-padding">

        <div class="container">

            <div class="row g-4">

                @foreach($results as $item)

                    @php

                        /*
                        |--------------------------------------------------------------------------
                        | KATEGORI
                        |--------------------------------------------------------------------------
                        */

                        if($item->skor >= 85){

                            $kategori = 'Sangat Tinggi';
                            $bg = 'bg-sangat-tinggi';

                        }elseif($item->skor >= 70){

                            $kategori = 'Tinggi';
                            $bg = 'bg-tinggi';

                        }elseif($item->skor >= 55){

                            $kategori = 'Sedang';
                            $bg = 'bg-sedang';

                        }else{

                            $kategori = 'Rendah';
                            $bg = 'bg-rendah';

                        }

                    @endphp

                    <div class="col-lg-4 col-md-6">

                        <div class="history-card {{ $bg }}">

                            <!-- WATERMARK -->
                            <div class="score-watermark">
                                {{ round($item->skor) }}
                            </div>

                            <!-- TITLE -->
                            <div style="
                                font-size:13px;
                                opacity:0.9;
                                letter-spacing:1px;
                                text-transform:uppercase;
                            ">
                                Hasil Evaluasi
                            </div>

                            <h4 style="
                                margin-top:12px;
                                margin-bottom:0;
                                line-height:1.5;
                                font-weight:700;
                            ">
                                {{ $item->caseStudy->title }}
                            </h4>

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

                                {{ number_format($item->skor,1) }}

                            </div>

                            <!-- CATEGORY -->
                            <div class="kategori-badge">

                                {{ $kategori }}

                            </div>

                            <!-- META -->
                            <div class="meta-info">

                                <div>
                                    Sesi #{{ $item->sesi }}
                                </div>

                                <div>
                                    {{ \Carbon\Carbon::parse($item->created_at)->format('d M Y') }}
                                </div>

                            </div>

                            <!-- BUTTON -->
                            <a href="{{ URL::to('/quiz/result/' . $item->case_study_id.'?sesi='. $item->sesi) }}"
                                class="detail-btn">

                                Lihat Detail

                            </a>

                        </div>

                    </div>

                @endforeach

            </div>

        </div>

    </section>

@endsection