285 lines
9.4 KiB
PHP
285 lines
9.4 KiB
PHP
@extends('admin.layouts.app')
|
|
|
|
@section('title', 'History Materi')
|
|
|
|
@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;
|
|
}
|
|
|
|
.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; }
|
|
|
|
.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 MATERI</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.materi.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 materi..."
|
|
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.materi.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>{{ $materiList->total() }}</strong> materi
|
|
</span>
|
|
</form>
|
|
|
|
@if($materiList->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 materi">
|
|
</div>
|
|
<p>Tidak ada materi 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 Materi</th>
|
|
<th>Guru</th>
|
|
<th>Mata Pelajaran</th>
|
|
<th>Kelas</th>
|
|
<th>Tgl Upload</th>
|
|
<th>File</th>
|
|
<th>Aksi</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach($materiList as $i => $materi)
|
|
<tr>
|
|
<td class="text-center">{{ $materiList->firstItem() + $i }}</td>
|
|
<td>
|
|
<div style="font-weight:600;color:#1e293b">{{ $materi->judul_materi }}</div>
|
|
@if($materi->deskripsi)
|
|
<div style="font-size:12px;color:#94a3b8;margin-top:2px">
|
|
{{ Str::limit($materi->deskripsi, 55) }}
|
|
</div>
|
|
@endif
|
|
</td>
|
|
<td class="text-center">
|
|
<span class="guru-badge">
|
|
{{ optional(optional($materi->mengajar)->guru)->nama ?? '-' }}
|
|
</span>
|
|
</td>
|
|
<td class="text-center">
|
|
<span class="mapel-badge">
|
|
{{ optional(optional($materi->mengajar)->mapel)->nama_mapel ?? '-' }}
|
|
</span>
|
|
</td>
|
|
<td class="text-center">
|
|
<span class="kelas-badge">
|
|
{{ optional(optional($materi->mengajar)->kelas)->tingkat }}
|
|
{{ optional(optional($materi->mengajar)->kelas)->nama_kelas ?? '-' }}
|
|
</span>
|
|
</td>
|
|
<td class="text-center" style="font-size:13px;color:#64748b">
|
|
{{ \Carbon\Carbon::parse($materi->tanggal_upload ?? $materi->created_at)->format('d M Y') }}
|
|
<div style="font-size:11px">
|
|
{{ \Carbon\Carbon::parse($materi->tanggal_upload ?? $materi->created_at)->format('H:i') }}
|
|
</div>
|
|
</td>
|
|
<td class="text-center">
|
|
@if($materi->lampiran_materi)
|
|
@php
|
|
$ext = strtolower(pathinfo($materi->lampiran_materi, 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, ['ppt','pptx']) => asset('images/icon/gurud/lb.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, ['ppt','pptx']) => 'File PowerPoint',
|
|
in_array($ext, ['jpg','jpeg','png']) => 'File Gambar',
|
|
default => 'File Lampiran',
|
|
};
|
|
@endphp
|
|
<a href="{{ asset('storage/' . $materi->lampiran_materi) }}"
|
|
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">Tidak ada</span>
|
|
@endif
|
|
</td>
|
|
<td class="text-center">
|
|
<form action="{{ route('admin.materi.destroy', $materi->id_materi) }}"
|
|
method="POST"
|
|
onsubmit="return confirm('Yakin hapus materi ini?')">
|
|
@csrf
|
|
@method('DELETE')
|
|
<button type="submit" class="btn-hapus">
|
|
<img src="{{ asset('images/icon/gurud/bin.png') }}" class="icon-sm topbar-waving" alt="Hapus">
|
|
Hapus
|
|
</button>
|
|
</form>
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-end mt-3">
|
|
{{ $materiList->links() }}
|
|
</div>
|
|
@endif
|
|
|
|
</div>
|
|
|
|
@endsection |