MIF_E31230356/resources/views/admin/tugas/history.blade.php

297 lines
9.1 KiB
PHP

@extends('admin.layouts.app')
@section('title', 'History Tugas')
@section('content')
<style>
.page-title {
font-size: 30px;
font-weight: 800;
margin-bottom: 10px;
margin-top: -20px;
}
.custom-card {
background: white;
border-radius: 20px;
border: 2px solid #e5e5e5;
padding: 25px;
}
.table-header { background: #a5e6ba; }
.search-box {
background: #a5e6ba;
border-radius: 30px;
padding: 6px 15px;
display: flex;
align-items: center;
gap: 8px;
}
.search-box input {
border: none;
outline: none;
background: transparent;
width: 160px;
}
.filter-select {
border-radius: 10px;
padding: 6px 12px;
border: 1px solid #cbd5e1;
font-size: 14px;
color: #475569;
}
.mapel-badge {
display: inline-block;
background: #e6f0ff;
color: #1d4ed8;
font-size: 12px;
font-weight: 600;
padding: 3px 10px;
border-radius: 99px;
}
.kelas-badge {
display: inline-block;
background: #f0fdf4;
color: #166534;
font-size: 12px;
font-weight: 600;
padding: 3px 10px;
border-radius: 99px;
}
.guru-badge {
display: inline-block;
background: #fef9c3;
color: #854d0e;
font-size: 12px;
font-weight: 600;
padding: 3px 10px;
border-radius: 99px;
}
.deadline-badge {
font-size: 12px;
font-weight: 600;
padding: 3px 10px;
border-radius: 99px;
display: inline-flex;
align-items: center;
gap: 4px;
}
.deadline-lewat { background: #fee2e2; color: #ef4444; }
.deadline-aktif { background: #dcfce7; color: #16a34a; }
.submit-count {
font-size: 15px;
font-weight: 800;
color: #f97316;
}
.btn-detail {
background: #f97316;
color: white;
border: none;
border-radius: 8px;
padding: 5px 14px;
font-size: 13px;
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 4px;
transition: background 0.2s;
}
.btn-detail:hover { background: #ea6c0a; color: white; }
.btn-hapus {
background: #fee2e2;
color: #ef4444;
border: none;
border-radius: 8px;
padding: 5px 12px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 4px;
transition: background 0.2s;
}
.btn-hapus:hover { background: #fca5a5; }
.alert-success-custom {
background: #dcfce7;
color: #166534;
border-radius: 10px;
padding: 12px 16px;
margin-bottom: 16px;
font-weight: 500;
font-size: 14px;
display: flex;
align-items: center;
gap: 6px;
}
.empty-state {
text-align: center;
padding: 50px 20px;
color: #94a3b8;
}
/* Icon sizes */
.icon-sm { width: 16px; height: 16px; vertical-align: middle; }
.icon-empty { width: 56px; height: 56px; }
</style>
<h3 class="page-title">HISTORY TUGAS</h3>
@if(session('success'))
<div class="alert-success-custom">
<img src="{{ asset('images/icon/gurud/v.png') }}" class="icon-sm topbar-waving" alt="Berhasil">
{{ session('success') }}
</div>
@endif
<div class="custom-card">
{{-- FILTER & SEARCH --}}
<form method="GET" action="{{ route('admin.tugas.history') }}" class="d-flex flex-wrap gap-2 align-items-center mb-4">
<select name="id_guru" class="filter-select" onchange="this.form.submit()">
<option value="">Semua Guru</option>
@foreach($gurus as $guru)
<option value="{{ $guru->id_guru }}" {{ request('id_guru') == $guru->id_guru ? 'selected' : '' }}>
{{ $guru->nama }}
</option>
@endforeach
</select>
<div class="search-box">
<input type="text" name="search" placeholder="Cari judul tugas..."
value="{{ request('search') }}">
<button style="border:none;background:none" type="submit">
<img src="{{ asset('images/icon/main/search.png') }}" class="icon-sm" alt="Cari">
</button>
</div>
@if(request()->hasAny(['id_guru', 'search']))
<a href="{{ route('admin.tugas.history') }}"
style="font-size:13px;color:#64748b;text-decoration:none"> Reset</a>
@endif
<span class="ms-auto" style="font-size:13px;color:#64748b">
Total: <strong>{{ $tugasList->total() }}</strong> tugas
</span>
</form>
@if($tugasList->isEmpty())
<div class="empty-state">
<div style="margin-bottom:12px">
<img src="{{ asset('images/icon/gurud/mailbox.png') }}" class="icon-empty topbar-waving" alt="Tidak ada tugas">
</div>
<p>Tidak ada tugas ditemukan.</p>
</div>
@else
<div class="table-responsive">
<table class="table align-middle">
<thead class="table-header text-center">
<tr>
<th>No</th>
<th>Judul Tugas</th>
<th>Guru</th>
<th>Mata Pelajaran</th>
<th>Kelas</th>
<th>Deadline</th>
<th>Pengumpulan</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
@foreach($tugasList as $i => $tugas)
@php
$isLewat = \Carbon\Carbon::parse($tugas->deadline)->isPast();
$jumlahKumpul = $tugas->pengumpulanTugas->count();
@endphp
<tr>
<td class="text-center">{{ $tugasList->firstItem() + $i }}</td>
<td>
<div style="font-weight:600;color:#1e293b">{{ $tugas->judul_tugas }}</div>
@if($tugas->keterangan)
<div style="font-size:12px;color:#94a3b8;margin-top:2px">
{{ Str::limit($tugas->keterangan, 55) }}
</div>
@endif
</td>
<td class="text-center">
<span class="guru-badge">
{{ optional(optional($tugas->mengajar)->guru)->nama ?? '-' }}
</span>
</td>
<td class="text-center">
<span class="mapel-badge">
{{ optional(optional($tugas->mengajar)->mapel)->nama_mapel ?? '-' }}
</span>
</td>
<td class="text-center">
<span class="kelas-badge">
{{ optional(optional($tugas->mengajar)->kelas)->tingkat }}
{{ optional(optional($tugas->mengajar)->kelas)->nama_kelas ?? '-' }}
</span>
</td>
<td class="text-center">
<span class="deadline-badge {{ $isLewat ? 'deadline-lewat' : 'deadline-aktif' }}">
@if($isLewat)
<img src="{{ asset('images/icon/gurud/alarm.png') }}" class="icon-sm topbar-waving" alt="Deadline lewat">
Lewat
@else
<img src="{{ asset('images/icon/gurud/v.png') }}" class="icon-sm topbar-waving" alt="Deadline aktif">
Aktif
@endif
</span>
<div style="font-size:11px;color:#64748b;margin-top:3px">
{{ \Carbon\Carbon::parse($tugas->deadline)->format('d M Y, H:i') }}
</div>
</td>
<td class="text-center">
<span class="submit-count">{{ $jumlahKumpul }}</span>
<span style="font-size:12px;color:#64748b"> siswa</span>
</td>
<td class="text-center">
<div class="d-flex gap-1 justify-content-center">
<a href="{{ route('admin.tugas.detail', $tugas->id_tugas) }}" class="btn-detail">
<img src="{{ asset('images/icon/gurud/eye.png') }}" class="icon-sm topbar-waving" alt="Lihat detail">
Detail
</a>
<form action="{{ route('admin.tugas.destroy', $tugas->id_tugas) }}"
method="POST"
onsubmit="return confirm('Yakin hapus tugas ini? Semua pengumpulan ikut terhapus.')">
@csrf
@method('DELETE')
<button type="submit" class="btn-hapus">
<img src="{{ asset('images/icon/gurud/bin.png') }}" class="icon-sm topbar-waving" alt="Hapus tugas">
</button>
</form>
</div>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
<div class="d-flex justify-content-end mt-3">
{{ $tugasList->links() }}
</div>
@endif
</div>
@endsection