249 lines
6.1 KiB
PHP
249 lines
6.1 KiB
PHP
@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;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.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; }
|
|
|
|
/* Icon kecil inline (di dalam teks / badge / label) */
|
|
.inline-icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
vertical-align: middle;
|
|
display: inline-block;
|
|
}
|
|
|
|
.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-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.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;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
</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">
|
|
<img src="{{ asset('images/icon/gurud/piala.png') }}" class="inline-icon" alt="Piala">
|
|
{{ $challenge->judul_challenge }}
|
|
</h2>
|
|
|
|
<div class="d-flex flex-wrap gap-2 mb-3">
|
|
<span class="meta-chip purple">
|
|
<img src="{{ asset('images/icon/gurud/star.png') }}" class="inline-icon" alt="EXP">
|
|
{{ $challenge->exp }} EXP
|
|
</span>
|
|
<span class="meta-chip {{ $isLewat ? 'red' : 'green' }}">
|
|
<img src="{{ asset('images/icon/gurud/alarm.png') }}" class="inline-icon" alt="Tenggat">
|
|
{{ \Carbon\Carbon::parse($challenge->tenggat_waktu)->format('d M Y, H:i') }}
|
|
— {{ $isLewat ? 'Sudah lewat' : 'Masih aktif' }}
|
|
</span>
|
|
<span class="meta-chip">
|
|
<img src="{{ asset('images/icon/gurud/buku1.png') }}" class="inline-icon" alt="Soal">
|
|
{{ $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">
|
|
<img src="{{ asset('images/icon/gurud/buku2.png') }}" class="inline-icon" alt="Daftar Soal">
|
|
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;display:inline-flex;align-items:center">
|
|
<img src="{{ asset('images/icon/gurud/v.png') }}" class="inline-icon" alt="Jawaban Benar">
|
|
</span>
|
|
@endif
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
|
|
<span class="exp-badge">
|
|
<img src="{{ asset('images/icon/gurud/star.png') }}" class="inline-icon" alt="EXP">
|
|
{{ $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 |