326 lines
8.9 KiB
PHP
326 lines
8.9 KiB
PHP
@extends('layouts.siswa.app')
|
|
|
|
@section('title', 'Tugas')
|
|
|
|
@push('styles')
|
|
<style>
|
|
.page-title {
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
color: #1e293b;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
/* TABS */
|
|
.tab-nav {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-bottom: 24px;
|
|
border-bottom: 2px solid #e2e8f0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.tab-btn {
|
|
background: none;
|
|
border: none;
|
|
padding: 10px 20px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: #94a3b8;
|
|
cursor: pointer;
|
|
border-bottom: 3px solid transparent;
|
|
margin-bottom: -2px;
|
|
transition: all 0.2s;
|
|
border-radius: 8px 8px 0 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.tab-btn.active {
|
|
color: #2b8ef3;
|
|
border-bottom-color: #2b8ef3;
|
|
}
|
|
|
|
.tab-btn:hover:not(.active) { color: #475569; }
|
|
|
|
.tab-count {
|
|
background: #e6f0ff;
|
|
color: #2b8ef3;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
padding: 2px 8px;
|
|
border-radius: 99px;
|
|
}
|
|
|
|
.tab-btn.active .tab-count {
|
|
background: #2b8ef3;
|
|
color: white;
|
|
}
|
|
|
|
/* TAB PANELS */
|
|
.tab-panel { display: none; }
|
|
.tab-panel.active { display: block; }
|
|
|
|
/* TUGAS CARD */
|
|
.tugas-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 14px;
|
|
}
|
|
|
|
.tugas-card {
|
|
background: #fff;
|
|
border-radius: 16px;
|
|
padding: 20px 24px;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
transition: box-shadow 0.2s, transform 0.2s;
|
|
border-left: 4px solid #e2e8f0;
|
|
}
|
|
|
|
.tugas-card:hover {
|
|
box-shadow: 0 4px 20px rgba(43,142,243,0.12);
|
|
transform: translateX(4px);
|
|
color: inherit;
|
|
}
|
|
|
|
.tugas-card.status-belum { border-left-color: #2b8ef3; }
|
|
.tugas-card.status-terlambat { border-left-color: #ef4444; }
|
|
.tugas-card.status-selesai { border-left-color: #22c55e; }
|
|
|
|
.tugas-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 22px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.status-belum .tugas-icon { background: #e6f0ff; }
|
|
.status-terlambat .tugas-icon { background: #fee2e2; }
|
|
.status-selesai .tugas-icon { background: #dcfce7; }
|
|
|
|
.tugas-info { flex: 1; }
|
|
|
|
.tugas-judul {
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
color: #1e293b;
|
|
margin: 0 0 4px;
|
|
}
|
|
|
|
.tugas-meta {
|
|
font-size: 12px;
|
|
color: #94a3b8;
|
|
margin: 0;
|
|
}
|
|
|
|
.tugas-right {
|
|
text-align: right;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.deadline-label {
|
|
font-size: 12px;
|
|
color: #94a3b8;
|
|
margin: 0 0 4px;
|
|
}
|
|
|
|
.deadline-val {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: #475569;
|
|
margin: 0;
|
|
}
|
|
|
|
.status-badge {
|
|
display: inline-block;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
padding: 3px 10px;
|
|
border-radius: 99px;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.badge-belum { background: #e6f0ff; color: #2b8ef3; }
|
|
.badge-terlambat { background: #fee2e2; color: #ef4444; }
|
|
.badge-selesai { background: #dcfce7; color: #16a34a; }
|
|
|
|
.exp-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
background: #fef9c3;
|
|
color: #b45309;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
padding: 3px 10px;
|
|
border-radius: 99px;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: 60px 20px;
|
|
color: #94a3b8;
|
|
}
|
|
|
|
.empty-icon { font-size: 48px; margin-bottom: 12px; }
|
|
|
|
/* ALERT */
|
|
.alert-success {
|
|
background: #dcfce7;
|
|
color: #166534;
|
|
border-radius: 12px;
|
|
padding: 14px 18px;
|
|
margin-bottom: 20px;
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.alert-error {
|
|
background: #fee2e2;
|
|
color: #991b1b;
|
|
border-radius: 12px;
|
|
padding: 14px 18px;
|
|
margin-bottom: 20px;
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
}
|
|
</style>
|
|
@endpush
|
|
|
|
@section('content')
|
|
|
|
<h1 class="page-title">📋 Tugas</h1>
|
|
|
|
@if(session('success'))
|
|
<div class="alert-success">✅ {{ session('success') }}</div>
|
|
@endif
|
|
|
|
@if(session('error'))
|
|
<div class="alert-error">❌ {{ session('error') }}</div>
|
|
@endif
|
|
|
|
{{-- TABS --}}
|
|
<div class="tab-nav">
|
|
<button class="tab-btn active" onclick="switchTab('belum', this)">
|
|
Belum Dikerjakan
|
|
<span class="tab-count">{{ $tugasBelum->count() }}</span>
|
|
</button>
|
|
<button class="tab-btn" onclick="switchTab('terlambat', this)">
|
|
Terlambat
|
|
<span class="tab-count">{{ $tugasTerlambat->count() }}</span>
|
|
</button>
|
|
<button class="tab-btn" onclick="switchTab('selesai', this)">
|
|
Sudah Dikumpulkan
|
|
<span class="tab-count">{{ $tugasSelesai->count() }}</span>
|
|
</button>
|
|
</div>
|
|
|
|
{{-- TAB: BELUM --}}
|
|
<div id="tab-belum" class="tab-panel active">
|
|
@if($tugasBelum->isEmpty())
|
|
<div class="empty-state">
|
|
<div class="empty-icon">🎉</div>
|
|
<p>Semua tugas sudah dikerjakan!</p>
|
|
</div>
|
|
@else
|
|
<div class="tugas-list">
|
|
@foreach($tugasBelum as $tugas)
|
|
<a href="{{ route('siswa.tugas.show', $tugas['id_tugas']) }}"
|
|
class="tugas-card status-belum">
|
|
<div class="tugas-icon">📋</div>
|
|
<div class="tugas-info">
|
|
<p class="tugas-judul">{{ $tugas['judul'] }}</p>
|
|
<p class="tugas-meta">{{ $tugas['nama_mapel'] }} • {{ $tugas['nama_guru'] }}</p>
|
|
</div>
|
|
<div class="tugas-right">
|
|
<p class="deadline-label">Deadline</p>
|
|
<p class="deadline-val">{{ $tugas['deadline']->format('d M Y H:i') }}</p>
|
|
<span class="status-badge badge-belum">Belum</span>
|
|
</div>
|
|
</a>
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
{{-- TAB: TERLAMBAT --}}
|
|
<div id="tab-terlambat" class="tab-panel">
|
|
@if($tugasTerlambat->isEmpty())
|
|
<div class="empty-state">
|
|
<div class="empty-icon">✅</div>
|
|
<p>Tidak ada tugas terlambat!</p>
|
|
</div>
|
|
@else
|
|
<div class="tugas-list">
|
|
@foreach($tugasTerlambat as $tugas)
|
|
<a href="{{ route('siswa.tugas.show', $tugas['id_tugas']) }}"
|
|
class="tugas-card status-terlambat">
|
|
<div class="tugas-icon">⏰</div>
|
|
<div class="tugas-info">
|
|
<p class="tugas-judul">{{ $tugas['judul'] }}</p>
|
|
<p class="tugas-meta">{{ $tugas['nama_mapel'] }} • {{ $tugas['nama_guru'] }}</p>
|
|
</div>
|
|
<div class="tugas-right">
|
|
<p class="deadline-label">Deadline lewat</p>
|
|
<p class="deadline-val">{{ $tugas['deadline']->format('d M Y H:i') }}</p>
|
|
<span class="status-badge badge-terlambat">Terlambat</span>
|
|
</div>
|
|
</a>
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
{{-- TAB: SELESAI --}}
|
|
<div id="tab-selesai" class="tab-panel">
|
|
@if($tugasSelesai->isEmpty())
|
|
<div class="empty-state">
|
|
<div class="empty-icon">📭</div>
|
|
<p>Belum ada tugas yang dikumpulkan.</p>
|
|
</div>
|
|
@else
|
|
<div class="tugas-list">
|
|
@foreach($tugasSelesai as $tugas)
|
|
<a href="{{ route('siswa.tugas.show', $tugas['id_tugas']) }}"
|
|
class="tugas-card status-selesai">
|
|
<div class="tugas-icon">✅</div>
|
|
<div class="tugas-info">
|
|
<p class="tugas-judul">{{ $tugas['judul'] }}</p>
|
|
<p class="tugas-meta">{{ $tugas['nama_mapel'] }} • {{ $tugas['nama_guru'] }}</p>
|
|
</div>
|
|
<div class="tugas-right">
|
|
<span class="status-badge badge-selesai">Dikumpulkan</span>
|
|
@if($tugas['exp'] > 0)
|
|
<br>
|
|
<span class="exp-badge">⭐ {{ $tugas['exp'] }} EXP</span>
|
|
@endif
|
|
</div>
|
|
</a>
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script>
|
|
function switchTab(name, btn) {
|
|
document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
|
|
document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
|
|
document.getElementById('tab-' + name).classList.add('active');
|
|
btn.classList.add('active');
|
|
}
|
|
</script>
|
|
@endpush |