@extends('admin.layouts.app')

@section('title', 'Detail Challenge')

@section('content')

<style>
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #2b8ef3;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    margin-bottom: 20px;
}
.back-link:hover { text-decoration: underline; }

.info-card {
    background: white;
    border-radius: 20px;
    border: 2px solid #e5e5e5;
    padding: 24px 28px;
    margin-bottom: 20px;
    border-left: 5px solid #667eea;
}

.info-title { font-size: 22px; font-weight: 800; color: #1e293b; margin: 0 0 12px; }

.meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f1f5f9;
    color: #475569;
    font-size: 13px;
    font-weight: 500;
    padding: 5px 12px;
    border-radius: 99px;
}
.meta-chip.purple { background: #ede9fe; color: #6d28d9; }
.meta-chip.green  { background: #dcfce7; color: #16a34a; }
.meta-chip.red    { background: #fee2e2; color: #dc2626; }

.kelas-chip {
    display: inline-block;
    background: #e6f0ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 99px;
    margin: 2px;
}

.soal-card {
    background: white;
    border-radius: 16px;
    border: 2px solid #e5e5e5;
    padding: 20px;
    margin-bottom: 14px;
}

.soal-number-badge {
    display: inline-block;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 99px;
    margin-bottom: 10px;
}

.soal-pertanyaan {
    font-weight: 600;
    font-size: 15px;
    color: #1e293b;
    margin-bottom: 12px;
    line-height: 1.6;
}

.opsi-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.opsi-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8fafc;
    border-radius: 10px;
    padding: 9px 14px;
    font-size: 14px;
    border: 2px solid transparent;
}

.opsi-item.benar {
    background: #dcfce7;
    border-color: #22c55e;
    font-weight: 700;
    color: #15803d;
}

.opsi-label {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
}

.opsi-item.benar .opsi-label {
    background: #22c55e;
    color: white;
}

.exp-badge {
    background: #fef9c3;
    color: #b45309;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 99px;
    margin-top: 10px;
    display: inline-block;
}

.custom-card {
    background: white;
    border-radius: 20px;
    border: 2px solid #e5e5e5;
    padding: 25px;
    margin-bottom: 20px;
}

.section-title { font-size: 16px; font-weight: 700; color: #1e293b; margin-bottom: 14px; }
</style>

<a href="{{ route('admin.challenge.index') }}" class="back-link">← Kembali ke Daftar Challenge</a>

@php
    $isLewat = \Carbon\Carbon::parse($challenge->tenggat_waktu)->isPast();
@endphp

{{-- INFO --}}
<div class="info-card">
    <h2 class="info-title">🏆 {{ $challenge->judul_challenge }}</h2>

    <div class="d-flex flex-wrap gap-2 mb-3">
        <span class="meta-chip purple">⭐ {{ $challenge->exp }} EXP</span>
        <span class="meta-chip {{ $isLewat ? 'red' : 'green' }}">
            ⏰ {{ \Carbon\Carbon::parse($challenge->tenggat_waktu)->format('d M Y, H:i') }}
            — {{ $isLewat ? 'Sudah lewat' : 'Masih aktif' }}
        </span>
        <span class="meta-chip">📝 {{ $challenge->soal->count() }} soal</span>
    </div>

    <div class="mb-2">
        @foreach($challenge->kelas as $k)
            <span class="kelas-chip">{{ $k->tingkat }} {{ $k->nama_kelas }}</span>
        @endforeach
    </div>

    @if($challenge->deskripsi)
        <div style="background:#f8fafc;border-radius:10px;padding:12px 16px;font-size:14px;color:#475569;margin-top:10px;border:1px solid #e2e8f0">
            {!! nl2br(e($challenge->deskripsi)) !!}
        </div>
    @endif
</div>

{{-- DAFTAR SOAL --}}
<div class="custom-card">
    <p class="section-title">📝 Daftar Soal Challenge</p>

    @forelse($challenge->soal as $i => $soal)
    <div class="soal-card">
        <span class="soal-number-badge">Soal {{ $i + 1 }}</span>
        <p class="soal-pertanyaan">{{ $soal->pertanyaan }}</p>

        <div class="opsi-list">
            @foreach(['A','B','C','D'] as $opsi)
            @php $key = 'opsi_' . strtolower($opsi); @endphp
            <div class="opsi-item {{ $soal->jawaban_benar === $opsi ? 'benar' : '' }}">
                <span class="opsi-label">{{ $opsi }}</span>
                <span>{{ $soal->$key }}</span>
                @if($soal->jawaban_benar === $opsi)
                    <span style="margin-left:auto;font-size:16px">✅</span>
                @endif
            </div>
            @endforeach
        </div>

        <span class="exp-badge">⭐ {{ $soal->exp_per_soal }} EXP per soal</span>
    </div>
    @empty
        <p class="text-muted text-center py-3">Belum ada soal.</p>
    @endforelse
</div>

@endsection