369 lines
12 KiB
PHP
369 lines
12 KiB
PHP
@extends('admin.layouts.app')
|
|
|
|
@section('title', 'Detail Tugas')
|
|
|
|
@section('content')
|
|
|
|
<style>
|
|
.page-title {
|
|
font-size: 26px;
|
|
font-weight: 800;
|
|
margin-bottom: 6px;
|
|
margin-top: -20px;
|
|
}
|
|
|
|
.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 #f97316;
|
|
}
|
|
|
|
.info-title {
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
color: #1e293b;
|
|
margin: 0 0 12px;
|
|
}
|
|
|
|
.info-meta {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
margin-bottom: 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.orange { background: #fff7ed; color: #ea580c; }
|
|
.meta-chip.green { background: #f0fdf4; color: #16a34a; }
|
|
.meta-chip.red { background: #fef2f2; color: #dc2626; }
|
|
.meta-chip.yellow { background: #fef9c3; color: #854d0e; }
|
|
|
|
.keterangan-box {
|
|
background: #f8fafc;
|
|
border-radius: 10px;
|
|
padding: 14px 16px;
|
|
font-size: 14px;
|
|
color: #475569;
|
|
line-height: 1.7;
|
|
border: 1px solid #e2e8f0;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.stat-row {
|
|
display: flex;
|
|
gap: 16px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.stat-box {
|
|
flex: 1;
|
|
background: white;
|
|
border-radius: 16px;
|
|
padding: 18px 20px;
|
|
text-align: center;
|
|
border: 2px solid #e5e5e5;
|
|
}
|
|
|
|
.stat-num {
|
|
font-size: 30px;
|
|
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;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 17px;
|
|
font-weight: 700;
|
|
color: #1e293b;
|
|
margin-bottom: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.table-header { background: #a5e6ba; }
|
|
|
|
.status-badge {
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
padding: 4px 10px;
|
|
border-radius: 99px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.status-dikumpulkan { background: #dcfce7; color: #16a34a; }
|
|
.status-terlambat { background: #fff7ed; color: #ea580c; }
|
|
.status-belum { background: #f1f5f9; color: #64748b; }
|
|
|
|
.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;
|
|
}
|
|
|
|
.btn-unduh {
|
|
background: #e6f0ff;
|
|
color: #2b8ef3;
|
|
border: none;
|
|
border-radius: 8px;
|
|
padding: 5px 12px;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.btn-unduh:hover { background: #bfdbfe; color: #1d4ed8; }
|
|
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: 40px 20px;
|
|
color: #94a3b8;
|
|
}
|
|
|
|
.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; }
|
|
|
|
/* Icon sizes */
|
|
.icon-sm { width: 16px; height: 16px; vertical-align: middle; }
|
|
.icon-meta { width: 15px; height: 15px; vertical-align: middle; }
|
|
.icon-empty { width: 56px; height: 56px; }
|
|
</style>
|
|
|
|
@php
|
|
$isLewat = \Carbon\Carbon::parse($tugas->deadline)->isPast();
|
|
$tepat = $tugas->pengumpulanTugas->where('status', 'dikumpulkan')->count();
|
|
$terlambat = $tugas->pengumpulanTugas->where('status', 'terlambat')->count();
|
|
$totalKumpul = $tugas->pengumpulanTugas->count();
|
|
@endphp
|
|
|
|
<a href="{{ route('admin.tugas.history') }}" class="back-link">← Kembali ke History Tugas</a>
|
|
|
|
{{-- INFO TUGAS --}}
|
|
<div class="info-card">
|
|
<h2 class="info-title">{{ $tugas->judul_tugas }}</h2>
|
|
|
|
<div class="info-meta">
|
|
<span class="meta-chip yellow">
|
|
<img src="{{ asset('images/icon/gurud/guru.png') }}" class="icon-meta topbar-waving" alt="Guru">
|
|
{{ optional(optional($tugas->mengajar)->guru)->nama ?? '-' }}
|
|
</span>
|
|
<span class="meta-chip">
|
|
<img src="{{ asset('images/icon/gurud/stacked.png') }}" class="icon-meta topbar-waving" alt="Mata Pelajaran">
|
|
{{ optional(optional($tugas->mengajar)->mapel)->nama_mapel ?? '-' }}
|
|
</span>
|
|
<span class="meta-chip">
|
|
<img src="{{ asset('images/icon/gurud/school.png') }}" class="icon-meta topbar-waving" alt="Kelas">
|
|
{{ optional(optional($tugas->mengajar)->kelas)->tingkat }}
|
|
{{ optional(optional($tugas->mengajar)->kelas)->nama_kelas ?? '-' }}
|
|
</span>
|
|
<span class="meta-chip {{ $isLewat ? 'red' : 'green' }}">
|
|
<img src="{{ asset('images/icon/gurud/alarm.png') }}" class="icon-meta topbar-waving" alt="Deadline">
|
|
{{ \Carbon\Carbon::parse($tugas->deadline)->format('d M Y, H:i') }}
|
|
— {{ $isLewat ? 'Sudah lewat' : 'Masih aktif' }}
|
|
</span>
|
|
</div>
|
|
|
|
@if($tugas->keterangan)
|
|
<div class="keterangan-box">
|
|
{!! nl2br(e($tugas->keterangan)) !!}
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
{{-- STATISTIK --}}
|
|
<div class="stat-row">
|
|
<div class="stat-box">
|
|
<p class="stat-num" style="color:#22c55e">{{ $tepat }}</p>
|
|
<p class="stat-label">Tepat Waktu</p>
|
|
</div>
|
|
<div class="stat-box">
|
|
<p class="stat-num" style="color:#f97316">{{ $terlambat }}</p>
|
|
<p class="stat-label">Terlambat</p>
|
|
</div>
|
|
<div class="stat-box">
|
|
<p class="stat-num" style="color:#2b8ef3">{{ $totalKumpul }}</p>
|
|
<p class="stat-label">Total Pengumpulan</p>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- DAFTAR PENGUMPULAN --}}
|
|
<div class="custom-card">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<p class="section-title mb-0">
|
|
<img src="{{ asset('images/icon/gurud/pengumpulan.png') }}" class="icon-sm topbar-waving" alt="Pengumpulan">
|
|
Daftar Pengumpulan Siswa
|
|
</p>
|
|
<input type="text" class="table-search" id="searchSiswa"
|
|
placeholder="Cari nama / NISN..."
|
|
onkeyup="filterTable()">
|
|
</div>
|
|
|
|
@if($tugas->pengumpulanTugas->isEmpty())
|
|
<div class="empty-state">
|
|
<div style="margin-bottom:10px">
|
|
<img src="{{ asset('images/icon/gurud/mailbox.png') }}" class="icon-empty topbar-waving" alt="Belum ada pengumpulan">
|
|
</div>
|
|
<p>Belum ada siswa yang mengumpulkan tugas 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>Status</th>
|
|
<th>EXP / Poin</th>
|
|
<th>File Jawaban</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach($tugas->pengumpulanTugas as $i => $kumpul)
|
|
<tr>
|
|
<td class="text-center">{{ $i + 1 }}</td>
|
|
<td style="font-weight:600;color:#1e293b">
|
|
{{ optional($kumpul->siswa)->nama ?? '-' }}
|
|
</td>
|
|
<td class="text-center" style="font-size:13px;color:#64748b;font-family:monospace">
|
|
{{ optional($kumpul->siswa)->nisn ?? '-' }}
|
|
</td>
|
|
<td class="text-center" style="font-size:13px;color:#64748b">
|
|
{{ \Carbon\Carbon::parse($kumpul->tanggal_submit)->format('d M Y') }}
|
|
<div style="font-size:11px">
|
|
{{ \Carbon\Carbon::parse($kumpul->tanggal_submit)->format('H:i') }}
|
|
</div>
|
|
</td>
|
|
<td class="text-center">
|
|
<span class="status-badge status-{{ $kumpul->status }}">
|
|
@if($kumpul->status === 'dikumpulkan')
|
|
<img src="{{ asset('images/icon/gurud/v.png') }}" class="icon-sm topbar-waving" alt="Tepat waktu">
|
|
Tepat Waktu
|
|
@elseif($kumpul->status === 'terlambat')
|
|
<img src="{{ asset('images/icon/gurud/alarm.png') }}" class="icon-sm topbar-waving" alt="Terlambat">
|
|
Terlambat
|
|
@else
|
|
<img src="{{ asset('images/icon/gurud/x.png') }}" class="icon-sm topbar-waving" alt="Belum dikumpulkan">
|
|
Belum
|
|
@endif
|
|
</span>
|
|
</td>
|
|
<td class="text-center">
|
|
@if($kumpul->exp > 0)
|
|
<span class="exp-badge">
|
|
<img src="{{ asset('images/icon/gurud/star.png') }}" class="icon-sm topbar-waving" alt="EXP">
|
|
{{ $kumpul->exp }} EXP
|
|
</span>
|
|
@else
|
|
<span style="font-size:12px;color:#94a3b8">Belum dinilai</span>
|
|
@endif
|
|
</td>
|
|
<td class="text-center">
|
|
@if($kumpul->lampiran_tugas)
|
|
@php
|
|
$ext = strtolower(pathinfo($kumpul->lampiran_tugas, PATHINFO_EXTENSION));
|
|
$iconSrc = match(true) {
|
|
in_array($ext, ['pdf']) => asset('images/icon/gurud/buku2.png'),
|
|
in_array($ext, ['doc','docx']) => asset('images/icon/gurud/buku1.png'),
|
|
in_array($ext, ['jpg','jpeg','png']) => asset('images/icon/gurud/image.png'),
|
|
default => asset('images/icon/gurud/link.png'),
|
|
};
|
|
$iconAlt = match(true) {
|
|
in_array($ext, ['pdf']) => 'File PDF',
|
|
in_array($ext, ['doc','docx']) => 'File Word',
|
|
in_array($ext, ['jpg','jpeg','png']) => 'File Gambar',
|
|
default => 'File Lampiran',
|
|
};
|
|
@endphp
|
|
<a href="{{ url('storage/app/public/' . $kumpul->lampiran_tugas) }}"
|
|
target="_blank" class="btn-unduh">
|
|
<img src="{{ $iconSrc }}" class="icon-sm topbar-waving" alt="{{ $iconAlt }}">
|
|
Unduh
|
|
</a>
|
|
@else
|
|
<span style="font-size:12px;color:#94a3b8">-</span>
|
|
@endif
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
@endif
|
|
</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 |