309 lines
11 KiB
PHP
309 lines
11 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: 20px; 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.green { background: #dcfce7; color: #16a34a; }
|
|
.meta-chip.red { background: #fee2e2; color: #dc2626; }
|
|
.meta-chip.purple { background: #ede9fe; color: #6d28d9; }
|
|
.meta-chip.yellow { background: #fef9c3; color: #854d0e; }
|
|
.kelas-chip {
|
|
display: inline-block; background: #e6f0ff; color: #1d4ed8;
|
|
font-size: 12px; font-weight: 600;
|
|
padding: 3px 10px; border-radius: 99px; margin: 2px;
|
|
}
|
|
.inline-icon { width: 16px; height: 16px; vertical-align: middle; display: inline-block; }
|
|
.icon-sm { width: 16px; height: 16px; vertical-align: middle; }
|
|
|
|
.stat-row { display: flex; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
|
|
.stat-box {
|
|
flex: 1; min-width: 100px;
|
|
background: white; border-radius: 16px;
|
|
padding: 18px 20px; text-align: center;
|
|
border: 2px solid #e5e5e5;
|
|
}
|
|
.stat-num { font-size: 28px; font-weight: 800; margin: 0; }
|
|
.stat-label { font-size: 12px; color: #94a3b8; margin: 4px 0 0; font-weight: 500; }
|
|
|
|
.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;
|
|
}
|
|
.table-header { background: #a5e6ba; }
|
|
|
|
.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; }
|
|
|
|
.status-badge {
|
|
font-size: 12px; font-weight: 700;
|
|
padding: 4px 10px; border-radius: 99px;
|
|
display: inline-flex; align-items: center; gap: 4px;
|
|
}
|
|
.status-selesai { background: #dcfce7; color: #16a34a; }
|
|
|
|
.exp-badge {
|
|
background: #fef9c3; color: #b45309;
|
|
font-size: 12px; font-weight: 700;
|
|
padding: 3px 10px; border-radius: 99px;
|
|
display: inline-flex; align-items: center; gap: 4px;
|
|
}
|
|
|
|
.table-search {
|
|
border: 1px solid #cbd5e1; border-radius: 10px;
|
|
padding: 7px 14px; font-size: 14px; width: 220px; outline: none;
|
|
}
|
|
.table-search:focus { border-color: #2b8ef3; }
|
|
|
|
.alert-success-custom {
|
|
background: #dcfce7; color: #166534;
|
|
border-radius: 10px; padding: 10px 14px;
|
|
margin-bottom: 14px; font-weight: 500; font-size: 13px;
|
|
display: flex; align-items: center; gap: 8px;
|
|
}
|
|
</style>
|
|
|
|
@if(session('success'))
|
|
<div class="alert-success-custom">
|
|
<img src="{{ asset('images/icon/gurud/v.png') }}" class="inline-icon" alt="Berhasil">
|
|
{{ session('success') }}
|
|
</div>
|
|
@endif
|
|
|
|
<a href="{{ route('admin.challenge.index') }}" class="back-link">← Kembali ke History Challenge</a>
|
|
|
|
@php $isLewat = \Carbon\Carbon::parse($challenge->tenggat_waktu)->isPast(); @endphp
|
|
|
|
{{-- INFO CHALLENGE --}}
|
|
<div class="info-card">
|
|
<h2 class="info-title">
|
|
<img src="{{ asset('images/icon/gurud/piala.png') }}" class="inline-icon" alt="Challenge">
|
|
{{ $challenge->judul_challenge }}
|
|
</h2>
|
|
|
|
<div class="d-flex flex-wrap gap-2 mb-3">
|
|
<span class="meta-chip yellow">
|
|
<img src="{{ asset('images/icon/gurud/guru.png') }}" class="inline-icon" alt="Guru">
|
|
{{ optional($challenge->guru)->nama ?? 'Admin' }}
|
|
</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>
|
|
@if($challenge->durasi_pengerjaan)
|
|
<span class="meta-chip purple">
|
|
⏱ {{ $challenge->durasi_pengerjaan }} menit
|
|
</span>
|
|
@endif
|
|
</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>
|
|
|
|
{{-- STATISTIK --}}
|
|
@php
|
|
$totalPeserta = $challenge->peserta->count();
|
|
$totalBenar = $challenge->peserta->sum('exp');
|
|
$rataExp = $totalPeserta > 0 ? round($challenge->peserta->avg('exp'), 1) : 0;
|
|
@endphp
|
|
|
|
<div class="stat-row">
|
|
<div class="stat-box">
|
|
<p class="stat-num" style="color:#22c55e">{{ $totalPeserta }}</p>
|
|
<p class="stat-label">Peserta</p>
|
|
</div>
|
|
<div class="stat-box">
|
|
<p class="stat-num" style="color:#f97316">{{ $challenge->soal->count() }}</p>
|
|
<p class="stat-label">Total Soal</p>
|
|
</div>
|
|
<div class="stat-box">
|
|
<p class="stat-num" style="color:#2b8ef3">{{ $rataExp }}</p>
|
|
<p class="stat-label">Rata-rata EXP</p>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- DAFTAR PESERTA --}}
|
|
<div class="custom-card">
|
|
<div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
|
|
<p class="section-title mb-0">
|
|
<img src="{{ asset('images/icon/gurud/pengumpulan.png') }}" class="icon-sm" alt="Peserta">
|
|
Daftar Peserta
|
|
</p>
|
|
<input type="text" class="table-search" id="searchSiswa"
|
|
placeholder="Cari nama / NISN..."
|
|
onkeyup="filterTable()">
|
|
</div>
|
|
|
|
@if($challenge->peserta->isEmpty())
|
|
<div style="text-align:center;padding:40px 20px;color:#94a3b8">
|
|
<div style="margin-bottom:10px">
|
|
<img src="{{ asset('images/icon/gurud/mailbox.png') }}" style="width:56px;height:56px" alt="Kosong">
|
|
</div>
|
|
<p>Belum ada siswa yang mengerjakan challenge ini.</p>
|
|
</div>
|
|
@else
|
|
<div class="table-responsive">
|
|
<table class="table align-middle" id="tableSiswa">
|
|
<thead class="table-header text-center">
|
|
<tr>
|
|
<th>No</th>
|
|
<th>Nama Siswa</th>
|
|
<th>NISN</th>
|
|
<th>Waktu Submit</th>
|
|
<th>EXP / Poin</th>
|
|
<th>Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach($challenge->peserta as $i => $p)
|
|
<tr>
|
|
<td class="text-center">{{ $i + 1 }}</td>
|
|
<td style="font-weight:600;color:#1e293b">
|
|
{{ optional($p->siswa)->nama ?? '-' }}
|
|
</td>
|
|
<td class="text-center" style="font-size:13px;color:#64748b;font-family:monospace">
|
|
{{ optional($p->siswa)->nisn ?? '-' }}
|
|
</td>
|
|
<td class="text-center" style="font-size:13px;color:#64748b">
|
|
{{ \Carbon\Carbon::parse($p->waktu_submit)->format('d M Y') }}
|
|
<div style="font-size:11px">
|
|
{{ \Carbon\Carbon::parse($p->waktu_submit)->format('H:i') }}
|
|
</div>
|
|
</td>
|
|
<td class="text-center">
|
|
<span class="exp-badge">
|
|
<img src="{{ asset('images/icon/gurud/star.png') }}" class="icon-sm" alt="EXP">
|
|
{{ $p->exp }} EXP
|
|
</span>
|
|
</td>
|
|
<td class="text-center">
|
|
<span class="status-badge status-selesai">
|
|
<img src="{{ asset('images/icon/gurud/v.png') }}" class="icon-sm" alt="Selesai">
|
|
Selesai
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</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="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">
|
|
<img src="{{ asset('images/icon/gurud/v.png') }}" class="inline-icon" alt="Jawaban Benar">
|
|
</span>
|
|
@endif
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
@empty
|
|
<p class="text-muted text-center py-3">Belum ada soal.</p>
|
|
@endforelse
|
|
</div>
|
|
|
|
<script>
|
|
function filterTable() {
|
|
const keyword = document.getElementById('searchSiswa').value.toLowerCase();
|
|
const rows = document.querySelectorAll('#tableSiswa tbody tr');
|
|
rows.forEach(row => {
|
|
const nama = row.cells[1]?.textContent.toLowerCase() ?? '';
|
|
const nisn = row.cells[2]?.textContent.toLowerCase() ?? '';
|
|
row.style.display = (nama.includes(keyword) || nisn.includes(keyword)) ? '' : 'none';
|
|
});
|
|
}
|
|
</script>
|
|
|
|
@endsection |