298 lines
18 KiB
PHP
298 lines
18 KiB
PHP
<?php $__env->startSection('content'); ?>
|
||
<style>
|
||
.day-group { margin-bottom: 18px; background: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); overflow: hidden; }
|
||
.day-header { background: linear-gradient(135deg, #f0fdf4 0%, #E8F7F2 100%); padding: 13px 18px; display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #E8F7F2; cursor: pointer; transition: background 0.2s; user-select: none; }
|
||
.day-header:hover{ background: linear-gradient(135deg, #E8F7F2 0%, #d1f2e8 100%); }
|
||
.day-title { font-weight: 700; font-size: 1rem; color: var(--primary-dark); display: flex; align-items: center; gap: 8px; }
|
||
.day-title i { color: var(--primary-color); }
|
||
.day-meta { display: flex; gap: 10px; align-items: center; }
|
||
.day-count { background: var(--primary-color); color: #fff; padding: 3px 10px; border-radius: 20px; font-size: 0.78rem; font-weight: 600; }
|
||
.toggle-icon { transition: transform 0.3s; font-size: 0.85rem; color: #94a3b8; }
|
||
.toggle-icon.collapsed { transform: rotate(-90deg); }
|
||
.day-body { overflow: hidden; }
|
||
.day-body table { width: 100%; border-collapse: collapse; }
|
||
.day-body thead { background: #f8fafc; }
|
||
.day-body th { padding: 9px 14px; text-align: left; font-weight: 600; font-size: 0.8rem; color: #64748b; border-bottom: 1px solid #e2e8f0; }
|
||
.day-body td { padding: 10px 14px; font-size: 0.85rem; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
|
||
.day-body tbody tr:last-child td { border-bottom: none; }
|
||
.day-body tbody tr:hover { background: #f8fafc; }
|
||
|
||
.stat-chips { display: flex; gap: 5px; flex-wrap: wrap; }
|
||
.chip { padding: 2px 8px; border-radius: 10px; font-size: 0.74rem; font-weight: 600; display: inline-flex; align-items: center; gap: 3px; }
|
||
.chip-hadir { background: #D1FAE5; color: #065F46; }
|
||
.chip-terlambat { background: #FFF3E0; color: #E65100; }
|
||
.chip-izin { background: #FEF3C7; color: #92400E; }
|
||
.chip-sakit { background: #DBEAFE; color: #1E40AF; }
|
||
.chip-alpa { background: #FEE2E2; color: #991B1B; }
|
||
.chip-pulang { background: #F3E8FF; color: #6B21A8; }
|
||
.chip-none { background: #F1F5F9; color: #94a3b8; }
|
||
.kelas-tag { display: inline-block; background: #E8F7F2; color: var(--primary-dark); padding: 2px 7px; border-radius: 8px; font-size: 0.74rem; margin: 2px 2px 0 0; }
|
||
.umum-tag { display: inline-block; background: #F1F5F9; color: #64748b; padding: 2px 7px; border-radius: 8px; font-size: 0.74rem; }
|
||
.btn-detail { padding: 5px 12px; background: var(--primary-color); color: #fff; border: none; border-radius: 6px; font-size: 0.8rem; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; transition: all 0.2s; }
|
||
.btn-detail:hover { background: #059669; color: #fff; transform: translateY(-1px); }
|
||
|
||
.filter-box { background: #fff; padding: 14px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); margin-bottom: 14px; }
|
||
.filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 11px; }
|
||
.form-group { margin: 0; }
|
||
.form-group label { display: block; font-size: 0.85rem; margin-bottom: 5px; color: var(--text-light); font-weight: 500; }
|
||
.form-control { width: 100%; padding: 8px 12px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 0.85rem; }
|
||
.btn-filter { background: var(--primary-color); color: #fff; border: none; padding: 9px 16px; border-radius: 8px; cursor: pointer; font-size: 0.85rem; display: inline-flex; align-items: center; gap: 6px; transition: all 0.2s; }
|
||
.btn-filter:hover { background: #059669; transform: translateY(-1px); }
|
||
.btn-reset { background: #6B7280; color: #fff; border: none; padding: 9px 12px; border-radius: 8px; cursor: pointer; font-size: 0.85rem; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
|
||
.btn-reset:hover { background: #4B5563; }
|
||
|
||
.period-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
|
||
.period-tab { padding: 5px 14px; border-radius: 20px; border: 1px solid #e2e8f0; background: #fff; font-size: 0.82rem; cursor: pointer; text-decoration: none; color: var(--text-dark); transition: all 0.2s; display: inline-flex; align-items: center; gap: 5px; }
|
||
.period-tab:hover, .period-tab.active { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }
|
||
|
||
.periode-info { font-size: 0.82rem; color: var(--text-light); margin-bottom: 12px; padding: 8px 12px; background: #f0fdf4; border-radius: 8px; border-left: 3px solid var(--primary-color); }
|
||
.periode-info strong { color: var(--primary-color); }
|
||
|
||
.empty-state { text-align: center; padding: 44px 14px; color: var(--text-light); background: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
|
||
.empty-state i { font-size: 3.5rem; margin-bottom: 14px; opacity: 0.3; display: block; }
|
||
.empty-state h3 { margin: 0 0 6px; }
|
||
|
||
@media (max-width: 768px) {
|
||
.day-header { flex-direction: column; align-items: flex-start; gap: 6px; }
|
||
.day-body th:nth-child(3), .day-body td:nth-child(3),
|
||
.day-body th:nth-child(4), .day-body td:nth-child(4) { display: none; }
|
||
}
|
||
</style>
|
||
|
||
<?php
|
||
// Default: minggu ini
|
||
$defaultDari = now()->startOfWeek(\Carbon\Carbon::MONDAY)->format('Y-m-d');
|
||
$defaultSampai = now()->endOfWeek(\Carbon\Carbon::SUNDAY)->format('Y-m-d');
|
||
|
||
$activeDari = request('tanggal_dari', $defaultDari);
|
||
$activeSampai = request('tanggal_sampai', $defaultSampai);
|
||
$activeKategori = request('kategori_id', '');
|
||
$activeBulan = request('bulan', '');
|
||
|
||
// Label periode
|
||
if ($activeBulan) {
|
||
$periodeLabel = 'Bulan ' . \Carbon\Carbon::parse($activeBulan . '-01')->locale('id')->isoFormat('MMMM Y');
|
||
} else {
|
||
$periodeLabel = \Carbon\Carbon::parse($activeDari)->locale('id')->isoFormat('D MMM Y')
|
||
. ' – '
|
||
. \Carbon\Carbon::parse($activeSampai)->locale('id')->isoFormat('D MMM Y');
|
||
}
|
||
|
||
// Cek shortcut aktif
|
||
$isMingguIni = !$activeBulan
|
||
&& $activeDari == $defaultDari
|
||
&& $activeSampai == $defaultSampai;
|
||
|
||
$isBulanIni = !$activeBulan
|
||
&& $activeDari == now()->startOfMonth()->format('Y-m-d')
|
||
&& $activeSampai == now()->endOfMonth()->format('Y-m-d');
|
||
?>
|
||
|
||
<div class="page-header">
|
||
<h2><i class="fas fa-history"></i> Riwayat Kegiatan & Absensi</h2>
|
||
</div>
|
||
|
||
<?php if(session('success')): ?>
|
||
<div class="alert alert-success">
|
||
<i class="fas fa-check-circle"></i> <?php echo e(session('success')); ?>
|
||
|
||
</div>
|
||
<?php endif; ?>
|
||
|
||
|
||
<div class="filter-box">
|
||
|
||
|
||
<div class="period-tabs">
|
||
<a href="<?php echo e(route('admin.riwayat-kegiatan.index', ['tanggal_dari' => $defaultDari, 'tanggal_sampai' => $defaultSampai, 'kategori_id' => $activeKategori])); ?>"
|
||
class="period-tab <?php echo e($isMingguIni ? 'active' : ''); ?>">
|
||
<i class="fas fa-calendar-week"></i> Minggu Ini
|
||
</a>
|
||
<a href="<?php echo e(route('admin.riwayat-kegiatan.index', ['tanggal_dari' => now()->startOfMonth()->format('Y-m-d'), 'tanggal_sampai' => now()->endOfMonth()->format('Y-m-d'), 'kategori_id' => $activeKategori])); ?>"
|
||
class="period-tab <?php echo e($isBulanIni ? 'active' : ''); ?>">
|
||
<i class="fas fa-calendar-alt"></i> Bulan Ini
|
||
</a>
|
||
<a href="<?php echo e(route('admin.riwayat-kegiatan.index')); ?>"
|
||
class="period-tab <?php echo e(!$isMingguIni && !$isBulanIni ? 'active' : ''); ?>"
|
||
style="<?php echo e(!$isMingguIni && !$isBulanIni ? '' : 'display:none'); ?>">
|
||
<i class="fas fa-filter"></i> Custom
|
||
</a>
|
||
</div>
|
||
|
||
<form method="GET">
|
||
<div class="filter-grid">
|
||
<div class="form-group">
|
||
<label for="kategori_id">Kategori</label>
|
||
<select name="kategori_id" id="kategori_id" class="form-control">
|
||
<option value="">-- Semua Kategori --</option>
|
||
<?php $__currentLoopData = $kategoris; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $k): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
|
||
<option value="<?php echo e($k->kategori_id); ?>" <?php echo e($activeKategori == $k->kategori_id ? 'selected' : ''); ?>>
|
||
<?php echo e($k->nama_kategori); ?>
|
||
|
||
</option>
|
||
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="tanggal_dari">Tanggal Dari</label>
|
||
<input type="date" name="tanggal_dari" id="tanggal_dari" class="form-control" value="<?php echo e($activeDari); ?>">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="tanggal_sampai">Tanggal Sampai</label>
|
||
<input type="date" name="tanggal_sampai" id="tanggal_sampai" class="form-control" value="<?php echo e($activeSampai); ?>">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="bulan">Atau Pilih Bulan</label>
|
||
<input type="month" name="bulan" id="bulan" class="form-control" value="<?php echo e($activeBulan); ?>">
|
||
</div>
|
||
<div style="display: flex; align-items: flex-end; gap: 10px;">
|
||
<button type="submit" class="btn-filter" style="flex: 1;">
|
||
<i class="fas fa-filter"></i> Filter
|
||
</button>
|
||
<a href="<?php echo e(route('admin.riwayat-kegiatan.index')); ?>" class="btn-reset" title="Reset ke minggu ini">
|
||
<i class="fas fa-undo"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
|
||
<p class="periode-info">
|
||
<i class="fas fa-calendar-check"></i> Menampilkan kegiatan periode: <strong><?php echo e($periodeLabel); ?></strong>
|
||
</p>
|
||
|
||
<?php if($kegiatans->count() > 0): ?>
|
||
|
||
<?php
|
||
$hariOrder = ['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu', 'Ahad'];
|
||
$grouped = $kegiatans->getCollection()->groupBy('hari');
|
||
?>
|
||
|
||
<?php $__currentLoopData = $hariOrder; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $hari): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
|
||
<?php if($grouped->has($hari)): ?>
|
||
<?php $items = $grouped[$hari]; ?>
|
||
<div class="day-group">
|
||
<div class="day-header" onclick="toggleDay(this)">
|
||
<div class="day-title">
|
||
<i class="fas fa-calendar-day"></i> <?php echo e($hari); ?>
|
||
|
||
</div>
|
||
<div class="day-meta">
|
||
<span class="day-count"><?php echo e($items->count()); ?> kegiatan</span>
|
||
<i class="fas fa-chevron-down toggle-icon"></i>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="day-body">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th style="width: 40px;">No</th>
|
||
<th>Nama Kegiatan</th>
|
||
<th style="width: 110px;">Waktu</th>
|
||
<th>Kelas</th>
|
||
<th style="width: 130px;">Kategori</th>
|
||
<th style="width: 250px; text-align: center;">Statistik Absensi</th>
|
||
<th style="width: 90px; text-align: center;">Aksi</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<?php $__currentLoopData = $items; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $i => $kegiatan): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
|
||
<tr>
|
||
<td><?php echo e($i + 1); ?></td>
|
||
<td><strong><?php echo e($kegiatan->nama_kegiatan); ?></strong></td>
|
||
<td style="white-space: nowrap; color: #64748b; font-size: 0.82rem;">
|
||
<i class="fas fa-clock" style="color: var(--primary-color);"></i>
|
||
<?php echo e(date('H:i', strtotime($kegiatan->waktu_mulai))); ?>–<?php echo e(date('H:i', strtotime($kegiatan->waktu_selesai))); ?>
|
||
|
||
</td>
|
||
<td>
|
||
<?php if($kegiatan->kelasKegiatan->isEmpty()): ?>
|
||
<span class="umum-tag"><i class="fas fa-globe"></i> Umum</span>
|
||
<?php else: ?>
|
||
<?php $__currentLoopData = $kegiatan->kelasKegiatan->take(3); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $kls): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
|
||
<span class="kelas-tag"><?php echo e($kls->nama_kelas); ?></span>
|
||
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
|
||
<?php if($kegiatan->kelasKegiatan->count() > 3): ?>
|
||
<span class="umum-tag">+<?php echo e($kegiatan->kelasKegiatan->count() - 3); ?></span>
|
||
<?php endif; ?>
|
||
<?php endif; ?>
|
||
</td>
|
||
<td>
|
||
<span class="badge badge-success"><?php echo e($kegiatan->kategori->nama_kategori); ?></span>
|
||
</td>
|
||
<td style="text-align: center;">
|
||
<?php if($kegiatan->total_absensi > 0): ?>
|
||
<div class="stat-chips" style="justify-content: center;">
|
||
<?php if($kegiatan->hadir > 0): ?>
|
||
<span class="chip chip-hadir"><i class="fas fa-check"></i> <?php echo e($kegiatan->hadir); ?></span>
|
||
<?php endif; ?>
|
||
<?php if(($kegiatan->terlambat ?? 0) > 0): ?>
|
||
<span class="chip chip-terlambat"><i class="fas fa-clock"></i> <?php echo e($kegiatan->terlambat); ?></span>
|
||
<?php endif; ?>
|
||
<?php if($kegiatan->izin > 0): ?>
|
||
<span class="chip chip-izin"><i class="fas fa-envelope"></i> <?php echo e($kegiatan->izin); ?></span>
|
||
<?php endif; ?>
|
||
<?php if($kegiatan->sakit > 0): ?>
|
||
<span class="chip chip-sakit"><i class="fas fa-heartbeat"></i> <?php echo e($kegiatan->sakit); ?></span>
|
||
<?php endif; ?>
|
||
<?php if($kegiatan->alpa > 0): ?>
|
||
<span class="chip chip-alpa"><i class="fas fa-times"></i> <?php echo e($kegiatan->alpa); ?></span>
|
||
<?php endif; ?>
|
||
<?php if(($kegiatan->pulang ?? 0) > 0): ?>
|
||
<span class="chip chip-pulang"><i class="fas fa-home"></i> <?php echo e($kegiatan->pulang); ?></span>
|
||
<?php endif; ?>
|
||
</div>
|
||
<div style="font-size: 0.74rem; color: #94a3b8; margin-top: 3px;">
|
||
Total: <?php echo e($kegiatan->total_absensi); ?>
|
||
|
||
</div>
|
||
<?php else: ?>
|
||
<span class="chip chip-none">Belum ada data</span>
|
||
<?php endif; ?>
|
||
</td>
|
||
<td style="text-align: center;">
|
||
|
||
<a href="<?php echo e(route('admin.riwayat-kegiatan.show', $kegiatan->id)); ?>?tanggal_dari=<?php echo e($activeDari); ?>&tanggal_sampai=<?php echo e($activeSampai); ?>"
|
||
class="btn-detail">
|
||
<i class="fas fa-eye"></i> Detail
|
||
</a>
|
||
</td>
|
||
</tr>
|
||
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<?php endif; ?>
|
||
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
|
||
|
||
<div class="pagination" style="margin-top: 16px;">
|
||
<?php echo $kegiatans->appends(request()->query())->links('pagination::simple-bootstrap-4'); ?>
|
||
|
||
</div>
|
||
|
||
<?php else: ?>
|
||
<div class="empty-state">
|
||
<i class="fas fa-inbox"></i>
|
||
<h3>Tidak Ada Data</h3>
|
||
<p>Tidak ada kegiatan pada periode <strong><?php echo e($periodeLabel); ?></strong>.</p>
|
||
</div>
|
||
<?php endif; ?>
|
||
|
||
<script>
|
||
function toggleDay(header) {
|
||
var body = header.nextElementSibling;
|
||
var icon = header.querySelector('.toggle-icon');
|
||
if (body.style.display === 'none') {
|
||
body.style.display = 'block';
|
||
icon.classList.remove('collapsed');
|
||
} else {
|
||
body.style.display = 'none';
|
||
icon.classList.add('collapsed');
|
||
}
|
||
}
|
||
</script>
|
||
<?php $__env->stopSection(); ?>
|
||
<?php echo $__env->make('layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH C:\xampp\htdocs\TugasAkhir\sim-pkpps\resources\views/admin/kegiatan/riwayat/index.blade.php ENDPATH**/ ?>
|