258 lines
8.5 KiB
PHP
258 lines
8.5 KiB
PHP
@extends('admin.layouts.app')
|
|
|
|
@section('title', 'History Challenge')
|
|
|
|
@section('content')
|
|
|
|
<style>
|
|
.page-title {
|
|
font-size: 22px;
|
|
font-weight: 800;
|
|
margin-bottom: 12px;
|
|
margin-top: -10px;
|
|
}
|
|
@media (min-width: 769px) {
|
|
.page-title { font-size: 30px; margin-top: -20px; margin-bottom: 10px; }
|
|
}
|
|
|
|
.custom-card {
|
|
background: white;
|
|
border-radius: 16px;
|
|
border: 2px solid #e5e5e5;
|
|
padding: 14px;
|
|
}
|
|
@media (min-width: 769px) { .custom-card { border-radius: 20px; padding: 25px; } }
|
|
|
|
.table-header { background: #a5e6ba; }
|
|
|
|
/* Top bar */
|
|
.top-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-bottom: 18px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* Dropdown filter guru */
|
|
.filter-guru-select {
|
|
border: 1.5px solid #d1d5db;
|
|
border-radius: 8px;
|
|
padding: 7px 12px;
|
|
font-family: 'Poppins', sans-serif;
|
|
font-size: 13px;
|
|
color: #374151;
|
|
background: white;
|
|
outline: none;
|
|
cursor: pointer;
|
|
min-width: 160px;
|
|
}
|
|
.filter-guru-select:focus { border-color: #a5e6ba; }
|
|
|
|
/* Search box */
|
|
.search-box {
|
|
background: #a5e6ba;
|
|
border-radius: 30px;
|
|
padding: 7px 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex: 1;
|
|
max-width: 280px;
|
|
}
|
|
.search-box input {
|
|
border: none;
|
|
outline: none;
|
|
background: transparent;
|
|
width: 100%;
|
|
font-family: 'Poppins', sans-serif;
|
|
font-size: 13px;
|
|
}
|
|
.search-box button { border: none; background: none; padding: 0; cursor: pointer; }
|
|
|
|
/* Total badge */
|
|
.total-text {
|
|
margin-left: auto;
|
|
font-size: 12px;
|
|
}
|
|
|
|
/* Reset link */
|
|
.btn-reset {
|
|
color: #ef4444;
|
|
border: none;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
transition: background 0.2s;
|
|
}
|
|
.btn-reset:hover { background: #fecaca; color: #dc2626; }
|
|
|
|
.action-icon { width: 20px; cursor: pointer; margin: 0 3px; }
|
|
.inline-icon { width: 16px; height: 16px; vertical-align: middle; display: inline-block; }
|
|
|
|
.deadline-badge {
|
|
font-size: 11px; font-weight: 700;
|
|
padding: 3px 8px; border-radius: 99px;
|
|
display: inline-flex; align-items: center; gap: 4px;
|
|
white-space: nowrap;
|
|
}
|
|
.deadline-aktif { background: #dcfce7; color: #16a34a; }
|
|
.deadline-lewat { background: #fee2e2; color: #ef4444; }
|
|
|
|
.kelas-chip {
|
|
display: inline-block; background: #e6f0ff; color: #1d4ed8;
|
|
font-size: 11px; font-weight: 600; padding: 2px 7px;
|
|
border-radius: 99px; margin: 1px;
|
|
}
|
|
.soal-count {
|
|
background: #f0fdf4; color: #16a34a;
|
|
font-size: 12px; font-weight: 700;
|
|
padding: 3px 10px; border-radius: 99px;
|
|
white-space: nowrap;
|
|
}
|
|
.durasi-badge {
|
|
background: #ede9fe; color: #5b21b6;
|
|
font-size: 11px; font-weight: 700;
|
|
padding: 3px 10px; border-radius: 99px;
|
|
display: inline-flex; align-items: center; gap: 4px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.table-responsive-custom { overflow-x: auto; -webkit-overflow-scrolling: touch; }
|
|
.table { min-width: 700px; }
|
|
</style>
|
|
|
|
<h3 class="page-title">HISTORY CHALLENGE</h3>
|
|
|
|
@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
|
|
|
|
<div class="custom-card">
|
|
|
|
{{-- TOP BAR: dropdown | search | total --}}
|
|
<form method="GET">
|
|
<div class="top-bar">
|
|
|
|
{{-- Dropdown Filter Guru --}}
|
|
<select name="id_guru" class="filter-guru-select" onchange="this.form.submit()">
|
|
<option value="">Semua Guru</option>
|
|
@foreach($guruList as $guru)
|
|
<option value="{{ $guru->id_guru }}"
|
|
{{ request('id_guru') == $guru->id_guru ? 'selected' : '' }}>
|
|
{{ $guru->nama }}
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
|
|
{{-- Search Judul Challenge --}}
|
|
<div class="search-box">
|
|
<input type="text" name="search"
|
|
placeholder="Cari judul challenge..."
|
|
value="{{ request('search') }}">
|
|
<button type="submit">
|
|
<img src="{{ asset('images/icon/main/search.png') }}" class="inline-icon" alt="Cari">
|
|
</button>
|
|
</div>
|
|
|
|
{{-- Reset (muncul jika ada filter aktif) --}}
|
|
@if(request('search') || request('guru_id'))
|
|
<a href="{{ route('admin.challenge.index') }}" class="btn-reset">✕ Reset</a>
|
|
@endif
|
|
|
|
{{-- Total di kanan --}}
|
|
<span class="total-text">Total: {{ $challenges->total() }} challenge</span>
|
|
|
|
</div>
|
|
</form>
|
|
|
|
{{-- TABEL --}}
|
|
<div class="table-responsive-custom">
|
|
<table class="table text-center align-middle">
|
|
<thead class="table-header">
|
|
<tr>
|
|
<th>No</th>
|
|
<th>Pembuat</th>
|
|
<th>Judul Challenge</th>
|
|
<th>Kelas</th>
|
|
<th>Soal</th>
|
|
<th>Durasi</th>
|
|
<th>Tenggat</th>
|
|
<th>Aksi</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@forelse($challenges as $i => $ch)
|
|
@php $isLewat = \Carbon\Carbon::parse($ch->tenggat_waktu)->isPast(); @endphp
|
|
<tr>
|
|
<td>{{ $challenges->firstItem() + $i }}</td>
|
|
<td style="text-align:left;min-width:140px">
|
|
{{ optional($ch->guru)->nama ?? 'Admin' }}
|
|
</td>
|
|
<td style="text-align:left;min-width:160px">
|
|
<div style="font-weight:600;color:#1e293b">{{ $ch->judul_challenge }}</div>
|
|
@if($ch->deskripsi)
|
|
<div style="font-size:11px;color:#94a3b8">{{ Str::limit($ch->deskripsi, 40) }}</div>
|
|
@endif
|
|
</td>
|
|
<td style="min-width:100px">
|
|
@foreach($ch->kelas as $k)
|
|
<span class="kelas-chip">{{ $k->tingkat }} {{ $k->nama_kelas }}</span>
|
|
@endforeach
|
|
</td>
|
|
<td><span class="soal-count">{{ $ch->soal_count }} soal</span></td>
|
|
<td>
|
|
@if($ch->durasi_pengerjaan)
|
|
<span class="durasi-badge">⏱ {{ $ch->durasi_pengerjaan }} mnt</span>
|
|
@else
|
|
<span style="font-size:12px;color:#94a3b8">—</span>
|
|
@endif
|
|
</td>
|
|
<td style="min-width:120px">
|
|
<span class="deadline-badge {{ $isLewat ? 'deadline-lewat' : 'deadline-aktif' }}">
|
|
{{ $isLewat ? 'Lewat' : 'Aktif' }}
|
|
</span>
|
|
<div style="font-size:11px;color:#64748b;margin-top:3px;white-space:nowrap">
|
|
{{ \Carbon\Carbon::parse($ch->tenggat_waktu)->format('d M Y, H:i') }}
|
|
</div>
|
|
</td>
|
|
<td style="white-space:nowrap">
|
|
<a href="{{ route('admin.challenge.show', $ch->id_challenge) }}"
|
|
style="border:none;background:none;display:inline">
|
|
<img src="{{ asset('images/icon/main/search.png') }}" class="action-icon" alt="Lihat">
|
|
</a>
|
|
<form action="{{ route('admin.challenge.destroy', $ch->id_challenge) }}"
|
|
method="POST" class="d-inline"
|
|
onsubmit="return confirm('Yakin hapus challenge ini?')">
|
|
@csrf @method('DELETE')
|
|
<button type="submit" style="border:none;background:none">
|
|
<img src="{{ asset('images/icon/main/del.png') }}" class="action-icon" alt="Hapus">
|
|
</button>
|
|
</form>
|
|
</td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="8" class="text-muted py-4">Belum ada challenge.</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-end mt-2">
|
|
{{ $challenges->links() }}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
@endsection |