490 lines
27 KiB
PHP
490 lines
27 KiB
PHP
{{-- resources/views/admin/kegiatan/riwayat/show.blade.php --}}
|
||
@extends('layouts.app')
|
||
|
||
@section('content')
|
||
<style>
|
||
/* ====================================================
|
||
RIWAYAT KEGIATAN — SHOW (detail per kegiatan)
|
||
==================================================== */
|
||
.rv-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px;
|
||
margin-bottom: 18px; flex-wrap: wrap; }
|
||
.rv-header h2 { margin: 0; font-size: 1.3rem; color: var(--primary-dark); display: flex; align-items: center; gap: 9px; }
|
||
.btn-rv-back { padding: 8px 16px; background: #6b7280; color: #fff; border-radius: 8px; font-size: 0.83rem;
|
||
font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
|
||
transition: background 0.18s; white-space: nowrap; }
|
||
.btn-rv-back:hover { background: #4b5563; color: #fff; }
|
||
|
||
/* Info kegiatan banner */
|
||
.rv-banner { background: linear-gradient(135deg, var(--primary-color), #059669); color: #fff;
|
||
border-radius: 12px; padding: 18px 22px; margin-bottom: 14px;
|
||
box-shadow: 0 4px 14px rgba(16,185,129,0.22); }
|
||
.rv-banner h3 { margin: 0 0 8px; font-size: 1.15rem; display: flex; align-items: center; gap: 9px; }
|
||
.rv-banner .meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 0.83rem; opacity: 0.92; }
|
||
.rv-banner .meta span { display: inline-flex; align-items: center; gap: 5px; }
|
||
.rv-periode-pill { background: rgba(255,255,255,0.22); padding: 3px 11px; border-radius: 20px;
|
||
font-size: 0.78rem; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
|
||
|
||
/* Total santri ringkasan */
|
||
.rv-total-box { background: #fff; border-radius: 12px; padding: 14px 18px; margin-bottom: 14px;
|
||
box-shadow: 0 2px 10px rgba(0,0,0,0.06); border-left: 4px solid #2563eb; }
|
||
.rv-total-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
|
||
.rv-total-pct { font-size: 1.6rem; font-weight: 800; line-height: 1; }
|
||
|
||
/* KPI cards (6 status) */
|
||
.rv-kpi-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 14px; }
|
||
@media (max-width: 1000px) { .rv-kpi-grid { grid-template-columns: repeat(3, 1fr); } }
|
||
@media (max-width: 580px) { .rv-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
|
||
|
||
.rv-kpi { background: #fff; border-radius: 10px; padding: 12px 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.06);
|
||
display: flex; align-items: center; gap: 10px; }
|
||
.rv-kpi .ico { width: 36px; height: 36px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
|
||
font-size: 1.1rem; flex-shrink: 0; }
|
||
.rv-kpi.hadir .ico { background: #d1fae5; color: #065f46; }
|
||
.rv-kpi.terlambat .ico { background: #fff3e0; color: #e65100; }
|
||
.rv-kpi.izin .ico { background: #fef3c7; color: #92400e; }
|
||
.rv-kpi.sakit .ico { background: #dbeafe; color: #1e40af; }
|
||
.rv-kpi.alpa .ico { background: #fee2e2; color: #991b1b; }
|
||
.rv-kpi.pulang .ico { background: #f3e8ff; color: #6b21a8; }
|
||
.rv-kpi .cnt { font-size: 1.4rem; font-weight: 800; color: var(--primary-dark); line-height: 1; }
|
||
.rv-kpi .lbl { font-size: 0.75rem; color: #94a3b8; margin-top: 2px; }
|
||
|
||
/* Filter box */
|
||
.rv-filter { background: #fff; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.05);
|
||
padding: 12px 16px; margin-bottom: 14px; }
|
||
.rv-filter-row { display: flex; gap: 9px; align-items: flex-end; flex-wrap: wrap; }
|
||
.rv-fg { display: flex; flex-direction: column; gap: 4px; }
|
||
.rv-fg label { font-size: 0.77rem; font-weight: 600; color: #64748b; }
|
||
.rv-fg select, .rv-fg input { padding: 7px 10px; font-size: 0.83rem; border: 1.5px solid #e2e8f0; border-radius: 7px; }
|
||
.rv-fg select:focus, .rv-fg input:focus { border-color: var(--primary-color); outline: none; }
|
||
.btn-rv-filter { background: var(--primary-color); color: #fff; border: none; padding: 8px 16px; border-radius: 7px;
|
||
font-size: 0.82rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center;
|
||
gap: 5px; align-self: flex-end; transition: background 0.18s; }
|
||
.btn-rv-filter:hover { background: #059669; }
|
||
.btn-rv-clear { background: #f1f5f9; color: #64748b; border: 1.5px solid #e2e8f0; padding: 8px 10px; border-radius: 7px;
|
||
font-size: 0.82rem; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center;
|
||
gap: 5px; align-self: flex-end; transition: all 0.18s; }
|
||
.btn-rv-clear:hover { background: #e2e8f0; color: #374151; }
|
||
|
||
/* Day group */
|
||
.rv-day-group { background: #fff; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.06);
|
||
overflow: hidden; margin-bottom: 16px; border: 1px solid #f0f0f0; }
|
||
.rv-day-head { background: linear-gradient(135deg, #f0fdf4, #e8f7f2); padding: 13px 18px;
|
||
display: flex; justify-content: space-between; align-items: center;
|
||
border-bottom: 2px solid #e8f7f2; cursor: pointer; user-select: none;
|
||
transition: background 0.18s; }
|
||
.rv-day-head:hover{ background: linear-gradient(135deg, #e8f7f2, #d1f2e8); }
|
||
.rv-day-title { font-weight: 700; font-size: 0.95rem; color: var(--primary-dark);
|
||
display: flex; align-items: center; gap: 8px; }
|
||
.rv-day-badges { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
|
||
.rv-mini { padding: 3px 10px; border-radius: 18px; font-size: 0.74rem; font-weight: 700;
|
||
display: inline-flex; align-items: center; gap: 4px; }
|
||
.rv-mini.hadir { background: #d1fae5; color: #065f46; }
|
||
.rv-mini.terlambat{ background: #fff3e0; color: #e65100; }
|
||
.rv-mini.izin { background: #fef3c7; color: #92400e; }
|
||
.rv-mini.sakit { background: #dbeafe; color: #1e40af; }
|
||
.rv-mini.alpa { background: #fee2e2; color: #991b1b; }
|
||
.rv-mini.pulang { background: #f3e8ff; color: #6b21a8; }
|
||
.rv-toggle { color: #94a3b8; transition: transform 0.25s; font-size: 0.82rem; flex-shrink: 0; }
|
||
.rv-toggle.closed { transform: rotate(-90deg); }
|
||
|
||
/* Kelas sub-header */
|
||
.rv-kelas-subhead { background: linear-gradient(90deg, #f0fdf4, #e8f5e9); padding: 8px 16px;
|
||
display: flex; justify-content: space-between; align-items: center;
|
||
border-bottom: 1px solid #e2e8f0; }
|
||
.rv-kelas-subhead .name { font-size: 0.85rem; font-weight: 700; color: #065f46;
|
||
display: flex; align-items: center; gap: 6px; }
|
||
.rv-kelas-subhead .cnt { background: #6fbaa5; color: #fff; padding: 2px 10px; border-radius: 10px;
|
||
font-size: 0.74rem; font-weight: 700; }
|
||
|
||
/* Table santri */
|
||
.rv-table { width: 100%; border-collapse: collapse; }
|
||
.rv-table thead th { padding: 9px 14px; text-align: left; font-size: 0.79rem; font-weight: 600;
|
||
color: #64748b; background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
|
||
.rv-table tbody td { padding: 9px 14px; font-size: 0.84rem; border-bottom: 1px solid #f8fafc;
|
||
vertical-align: middle; }
|
||
.rv-table tbody tr:last-child td { border-bottom: none; }
|
||
.rv-table tbody tr:hover { background: #f8fafc; }
|
||
|
||
/* Santri name link */
|
||
.rv-santri-link { color: var(--primary-color); text-decoration: none; font-weight: 600;
|
||
display: inline-flex; align-items: center; gap: 5px; transition: color 0.15s; }
|
||
.rv-santri-link:hover { color: #059669; text-decoration: underline; }
|
||
.btn-rv-history { padding: 3px 10px; background: #f0fdf4; color: var(--primary-color);
|
||
border: 1px solid #bbf7d0; border-radius: 6px; font-size: 0.74rem; font-weight: 600;
|
||
text-decoration: none; display: inline-flex; align-items: center; gap: 4px;
|
||
transition: all 0.15s; white-space: nowrap; }
|
||
.btn-rv-history:hover { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }
|
||
|
||
/* Metode badges */
|
||
.rv-rfid { background: #dbeafe; color: #1e40af; padding: 3px 9px; border-radius: 9px; font-size: 0.74rem; font-weight: 700; }
|
||
.rv-mesin { background: #ede9fe; color: #6b21a8; padding: 3px 9px; border-radius: 9px; font-size: 0.74rem; font-weight: 700; }
|
||
.rv-manual { background: #f1f5f9; color: #374151; padding: 3px 9px; border-radius: 9px; font-size: 0.74rem; font-weight: 700; }
|
||
|
||
/* Progress bar reuse */
|
||
.rv-prog-wrap { height: 16px; background: #f3f4f6; border-radius: 8px; overflow: hidden; display: flex; }
|
||
|
||
/* Empty */
|
||
.rv-empty { text-align: center; padding: 36px 20px; color: #94a3b8; background: #fff;
|
||
border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
|
||
.rv-empty i { font-size: 2.8rem; margin-bottom: 10px; display: block; opacity: 0.35; }
|
||
</style>
|
||
|
||
@php
|
||
$mode = $mode ?? 'hari_ini';
|
||
$dari = $dari ?? now()->format('Y-m-d');
|
||
$sampai = $sampai ?? now()->format('Y-m-d');
|
||
$tanggal = $tanggal ?? now()->format('Y-m-d');
|
||
|
||
$statsHadir = $stats['Hadir'] ?? 0;
|
||
$statsTerlambat = $stats['Terlambat'] ?? 0;
|
||
$statsIzin = $stats['Izin'] ?? 0;
|
||
$statsSakit = $stats['Sakit'] ?? 0;
|
||
$statsAlpa = $stats['Alpa'] ?? 0;
|
||
$statsPulang = $stats['Pulang'] ?? 0;
|
||
|
||
$backParams = ['mode' => $mode, 'dari' => $dari, 'sampai' => $sampai, 'tanggal' => $tanggal];
|
||
@endphp
|
||
|
||
{{-- ── HEADER ───────────────────────────────────────────────────────────────── --}}
|
||
<div class="rv-header">
|
||
<h2><i class="fas fa-file-alt" style="color:var(--primary-color);"></i>
|
||
{{ $kegiatan->nama_kegiatan }}
|
||
</h2>
|
||
<a href="{{ route('admin.riwayat-kegiatan.index', $backParams) }}" class="btn-rv-back">
|
||
<i class="fas fa-arrow-left"></i> Kembali
|
||
</a>
|
||
</div>
|
||
|
||
{{-- ── BANNER INFO ──────────────────────────────────────────────────────────── --}}
|
||
<div class="rv-banner">
|
||
<h3><i class="fas fa-clipboard-check"></i> {{ $kegiatan->nama_kegiatan }}</h3>
|
||
<div class="meta">
|
||
<span><i class="fas fa-tag"></i> {{ $kegiatan->kategori->nama_kategori }}</span>
|
||
<span><i class="fas fa-clock"></i> {{ date('H:i', strtotime($kegiatan->waktu_mulai)) }} – {{ date('H:i', strtotime($kegiatan->waktu_selesai)) }}</span>
|
||
<span><i class="fas fa-calendar-day"></i> {{ $kegiatan->hari }}</span>
|
||
@if($kegiatan->kelasKegiatan->count() > 0)
|
||
<span><i class="fas fa-users"></i> {{ $kegiatan->kelasKegiatan->pluck('nama_kelas')->implode(', ') }}</span>
|
||
@else
|
||
<span><i class="fas fa-globe"></i> Kegiatan Umum</span>
|
||
@endif
|
||
<span class="rv-periode-pill"><i class="fas fa-calendar-check"></i> {{ $periodeLabel }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- ── TOTAL SANTRI RINGKASAN ───────────────────────────────────────────────── --}}
|
||
@if(isset($totalSantriEligible))
|
||
<div class="rv-total-box">
|
||
<div class="rv-total-head">
|
||
<div>
|
||
<div style="font-size:0.95rem; font-weight:700; color:#1a2332; margin-bottom:4px;">
|
||
<i class="fas fa-users" style="color:#2563eb;"></i>
|
||
Total Santri Seharusnya Hadir: <strong>{{ $totalSantriEligible }}</strong>
|
||
</div>
|
||
<div style="font-size:0.82rem; color:#6b7280;">
|
||
Sudah tercatat: <strong style="color:#059669;">{{ $totalRecorded }}</strong>
|
||
·
|
||
Belum tercatat:
|
||
<strong style="color:{{ ($totalSantriEligible - $totalRecorded) > 0 ? '#dc2626' : '#059669' }};">
|
||
{{ max(0, $totalSantriEligible - $totalRecorded) }}
|
||
</strong>
|
||
</div>
|
||
</div>
|
||
<div style="text-align:right;">
|
||
<div class="rv-total-pct"
|
||
style="color:{{ $persenHadir >= 85 ? '#059669' : ($persenHadir >= 70 ? '#d97706' : '#dc2626') }};">
|
||
{{ $persenHadir }}%
|
||
</div>
|
||
<div style="font-size:0.74rem; color:#6b7280;">Kehadiran</div>
|
||
</div>
|
||
</div>
|
||
@php
|
||
$pctSudah = $totalSantriEligible > 0 ? round($totalRecorded / $totalSantriEligible * 100, 1) : 0;
|
||
$pctBlm = 100 - $pctSudah;
|
||
@endphp
|
||
<div class="rv-prog-wrap">
|
||
@if($pctSudah > 0)
|
||
<div style="width:{{ $pctSudah }}%; background:linear-gradient(90deg,#22c55e,#16a34a);
|
||
display:flex; align-items:center; justify-content:center;
|
||
color:white; font-size:0.72rem; font-weight:700;">
|
||
{{ $totalRecorded > 0 && $pctSudah > 8 ? $totalRecorded : '' }}
|
||
</div>
|
||
@endif
|
||
@if($pctBlm > 0 && ($totalSantriEligible - $totalRecorded) > 0)
|
||
<div style="width:{{ $pctBlm }}%; background:#d1d5db;
|
||
display:flex; align-items:center; justify-content:center;
|
||
color:#6b7280; font-size:0.72rem; font-weight:700;">
|
||
{{ ($totalSantriEligible - $totalRecorded) > 0 && $pctBlm > 8 ? ($totalSantriEligible - $totalRecorded) : '' }}
|
||
</div>
|
||
@endif
|
||
</div>
|
||
</div>
|
||
@endif
|
||
|
||
{{-- ── 6 KPI CARDS ─────────────────────────────────────────────────────────── --}}
|
||
<div class="rv-kpi-grid">
|
||
<div class="rv-kpi hadir">
|
||
<div class="ico"><i class="fas fa-check-circle"></i></div>
|
||
<div><div class="cnt">{{ $statsHadir }}</div><div class="lbl">Hadir</div></div>
|
||
</div>
|
||
<div class="rv-kpi terlambat">
|
||
<div class="ico"><i class="fas fa-clock"></i></div>
|
||
<div><div class="cnt">{{ $statsTerlambat }}</div><div class="lbl">Terlambat</div></div>
|
||
</div>
|
||
<div class="rv-kpi izin">
|
||
<div class="ico"><i class="fas fa-envelope"></i></div>
|
||
<div><div class="cnt">{{ $statsIzin }}</div><div class="lbl">Izin</div></div>
|
||
</div>
|
||
<div class="rv-kpi sakit">
|
||
<div class="ico"><i class="fas fa-heartbeat"></i></div>
|
||
<div><div class="cnt">{{ $statsSakit }}</div><div class="lbl">Sakit</div></div>
|
||
</div>
|
||
<div class="rv-kpi alpa">
|
||
<div class="ico"><i class="fas fa-times-circle"></i></div>
|
||
<div><div class="cnt">{{ $statsAlpa }}</div><div class="lbl">Alpa</div></div>
|
||
</div>
|
||
<div class="rv-kpi pulang">
|
||
<div class="ico"><i class="fas fa-home"></i></div>
|
||
<div><div class="cnt">{{ $statsPulang }}</div><div class="lbl">Pulang</div></div>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- ── FILTER ───────────────────────────────────────────────────────────────── --}}
|
||
<div class="rv-filter">
|
||
<form method="GET">
|
||
{{-- Pertahankan parameter periode --}}
|
||
<input type="hidden" name="mode" value="{{ $mode }}">
|
||
<input type="hidden" name="dari" value="{{ $dari }}">
|
||
<input type="hidden" name="sampai" value="{{ $sampai }}">
|
||
<input type="hidden" name="tanggal" value="{{ $tanggal }}">
|
||
|
||
<div class="rv-filter-row">
|
||
<div class="rv-fg">
|
||
<label><i class="fas fa-user"></i> Cari Santri</label>
|
||
<select name="id_santri" style="min-width:200px;">
|
||
<option value="">Semua Santri</option>
|
||
@foreach($santris as $s)
|
||
<option value="{{ $s->id_santri }}" {{ request('id_santri') == $s->id_santri ? 'selected' : '' }}>
|
||
{{ $s->nama_lengkap }}
|
||
</option>
|
||
@endforeach
|
||
</select>
|
||
</div>
|
||
|
||
<div class="rv-fg">
|
||
<label><i class="fas fa-school"></i> Kelas</label>
|
||
<select name="id_kelas" style="min-width:160px;">
|
||
<option value="">Semua Kelas</option>
|
||
@foreach($kelasList->groupBy('kelompok.nama_kelompok') as $grpNama => $grpKelas)
|
||
<optgroup label="{{ $grpNama }}">
|
||
@foreach($grpKelas as $kelas)
|
||
<option value="{{ $kelas->id }}" {{ request('id_kelas') == $kelas->id ? 'selected' : '' }}>
|
||
{{ $kelas->nama_kelas }}
|
||
</option>
|
||
@endforeach
|
||
</optgroup>
|
||
@endforeach
|
||
</select>
|
||
</div>
|
||
|
||
<div class="rv-fg">
|
||
<label><i class="fas fa-filter"></i> Status</label>
|
||
<select name="status" style="min-width:140px;">
|
||
<option value="">Semua Status</option>
|
||
@foreach(['Hadir','Terlambat','Izin','Sakit','Alpa','Pulang'] as $st)
|
||
<option value="{{ $st }}" {{ request('status') == $st ? 'selected' : '' }}>{{ $st }}</option>
|
||
@endforeach
|
||
</select>
|
||
</div>
|
||
|
||
@if($mode !== 'hari_ini')
|
||
<div class="rv-fg">
|
||
<label><i class="fas fa-calendar"></i> Tanggal Spesifik</label>
|
||
<input type="date" name="tanggal_spesifik"
|
||
value="{{ request('tanggal_spesifik') }}"
|
||
min="{{ $dari }}" max="{{ $sampai }}">
|
||
</div>
|
||
@endif
|
||
|
||
<button type="submit" class="btn-rv-filter">
|
||
<i class="fas fa-filter"></i> Filter
|
||
</button>
|
||
|
||
@if(request()->hasAny(['id_santri','id_kelas','status','tanggal_spesifik']))
|
||
<a href="{{ route('admin.riwayat-kegiatan.show', $kegiatan->id) }}?{{ http_build_query(['mode'=>$mode,'dari'=>$dari,'sampai'=>$sampai,'tanggal'=>$tanggal]) }}"
|
||
class="btn-rv-clear">
|
||
<i class="fas fa-times"></i> Hapus Filter
|
||
</a>
|
||
@endif
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
{{-- ── TABEL RIWAYAT DIKELOMPOK PER TANGGAL ────────────────────────────────── --}}
|
||
@if($riwayats->count() > 0)
|
||
|
||
@php
|
||
$grouped = $riwayats->getCollection()->groupBy(fn($item) => $item->tanggal->format('Y-m-d'))->sortKeysDesc();
|
||
$isUmum = $kegiatan->kelasKegiatan->isEmpty();
|
||
@endphp
|
||
|
||
@foreach($grouped as $tanggal => $records)
|
||
@php
|
||
$tglC = \Carbon\Carbon::parse($tanggal);
|
||
$hariStr = $tglC->locale('id')->isoFormat('dddd');
|
||
$tglStr = $tglC->locale('id')->isoFormat('D MMMM Y');
|
||
|
||
$dHadir = $records->where('status','Hadir')->count();
|
||
$dTerlambat = $records->where('status','Terlambat')->count();
|
||
$dIzin = $records->where('status','Izin')->count();
|
||
$dSakit = $records->where('status','Sakit')->count();
|
||
$dAlpa = $records->where('status','Alpa')->count();
|
||
$dPulang = $records->where('status','Pulang')->count();
|
||
$dTotal = $records->count();
|
||
|
||
// Kelompok per kelas (sama seperti show sebelumnya)
|
||
if ($isUmum) {
|
||
$perKelas = $records->groupBy(fn($r) =>
|
||
optional(optional($r->santri->kelasSantri->first())->kelas)->nama_kelas ?? 'Tanpa Kelas'
|
||
)->sortKeys();
|
||
} else {
|
||
$perKelas = collect();
|
||
$placedIds = [];
|
||
foreach ($kegiatan->kelasKegiatan as $kls) {
|
||
$inKls = $records->filter(function($r) use ($kls, &$placedIds) {
|
||
if (in_array($r->id, $placedIds)) return false;
|
||
return $r->santri->kelasSantri->contains('id_kelas', $kls->id);
|
||
});
|
||
foreach ($inKls as $r) $placedIds[] = $r->id;
|
||
if ($inKls->count() > 0) $perKelas[$kls->nama_kelas] = $inKls;
|
||
}
|
||
$lainnya = $records->filter(fn($r) => !in_array($r->id, $placedIds));
|
||
if ($lainnya->count() > 0) $perKelas['Kelas Lain'] = $lainnya;
|
||
}
|
||
@endphp
|
||
|
||
<div class="rv-day-group">
|
||
|
||
{{-- Day header --}}
|
||
<div class="rv-day-head" onclick="toggleDay(this)">
|
||
<div class="rv-day-title">
|
||
<i class="fas fa-calendar-day" style="color:var(--primary-color);"></i>
|
||
{{ $hariStr }}, {{ $tglStr }}
|
||
<span style="font-weight:400; font-size:0.82rem; color:#94a3b8;">({{ $dTotal }} santri)</span>
|
||
</div>
|
||
<div class="rv-day-badges">
|
||
@if($dHadir > 0) <span class="rv-mini hadir"><i class="fas fa-check"></i> {{ $dHadir }}</span> @endif
|
||
@if($dTerlambat > 0) <span class="rv-mini terlambat"><i class="fas fa-clock"></i> {{ $dTerlambat }}</span> @endif
|
||
@if($dIzin > 0) <span class="rv-mini izin"><i class="fas fa-envelope"></i> {{ $dIzin }}</span> @endif
|
||
@if($dSakit > 0) <span class="rv-mini sakit"><i class="fas fa-heartbeat"></i> {{ $dSakit }}</span> @endif
|
||
@if($dAlpa > 0) <span class="rv-mini alpa"><i class="fas fa-times"></i> {{ $dAlpa }}</span> @endif
|
||
@if($dPulang > 0) <span class="rv-mini pulang"><i class="fas fa-home"></i> {{ $dPulang }}</span> @endif
|
||
<i class="fas fa-chevron-down rv-toggle"></i>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- Day body --}}
|
||
<div class="rv-day-body">
|
||
@foreach($perKelas as $namaKelas => $kelasRecords)
|
||
|
||
{{-- Kelas sub-header --}}
|
||
<div class="rv-kelas-subhead">
|
||
<div class="name">
|
||
<i class="fas fa-school"></i> {{ $namaKelas }}
|
||
</div>
|
||
<span class="cnt">{{ $kelasRecords->count() }} santri</span>
|
||
</div>
|
||
|
||
{{-- Santri table --}}
|
||
<table class="rv-table">
|
||
<thead>
|
||
<tr>
|
||
<th style="width:40px;">No</th>
|
||
<th style="width:90px;">ID</th>
|
||
<th>Nama Santri</th>
|
||
<th style="width:100px; text-align:center;">Status</th>
|
||
<th style="width:75px; text-align:center;">Waktu</th>
|
||
<th style="width:85px;">Metode</th>
|
||
<th style="width:110px; text-align:center;">Riwayat</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
@foreach($kelasRecords->values() as $idx => $riwayat)
|
||
<tr>
|
||
<td style="color:#94a3b8; font-size:0.78rem;">{{ $idx + 1 }}</td>
|
||
<td>
|
||
<span style="font-size:0.78rem; font-weight:700; color:#64748b;">
|
||
{{ $riwayat->id_santri }}
|
||
</span>
|
||
</td>
|
||
<td>
|
||
<a href="{{ route('admin.riwayat-kegiatan.detail-santri', $riwayat->id_santri) }}"
|
||
class="rv-santri-link">
|
||
<i class="fas fa-user" style="font-size:0.75rem; opacity:0.6;"></i>
|
||
{{ $riwayat->santri->nama_lengkap }}
|
||
</a>
|
||
</td>
|
||
<td style="text-align:center;">
|
||
{!! $riwayat->status_badge !!}
|
||
</td>
|
||
<td style="text-align:center; font-size:0.8rem; color:#64748b;">
|
||
{{ $riwayat->waktu_absen ? \Carbon\Carbon::parse($riwayat->waktu_absen)->format('H:i') : '–' }}
|
||
</td>
|
||
<td>
|
||
@if($riwayat->metode_absen === 'RFID')
|
||
<span class="rv-rfid"><i class="fas fa-id-card"></i> RFID</span>
|
||
@elseif($riwayat->metode_absen === 'Import_Mesin')
|
||
<span class="rv-mesin"><i class="fas fa-desktop"></i> Mesin</span>
|
||
@else
|
||
<span class="rv-manual"><i class="fas fa-hand-pointer"></i> Manual</span>
|
||
@endif
|
||
</td>
|
||
<td style="text-align:center;">
|
||
<a href="{{ route('admin.riwayat-kegiatan.detail-santri', $riwayat->id_santri) }}"
|
||
class="btn-rv-history" title="Lihat seluruh riwayat {{ $riwayat->santri->nama_lengkap }}">
|
||
<i class="fas fa-chart-line"></i> Riwayat
|
||
</a>
|
||
</td>
|
||
</tr>
|
||
@endforeach
|
||
</tbody>
|
||
</table>
|
||
|
||
@endforeach
|
||
</div>{{-- end rv-day-body --}}
|
||
</div>{{-- end rv-day-group --}}
|
||
@endforeach
|
||
|
||
<div style="margin-top:14px;">
|
||
{!! $riwayats->appends(request()->query())->links('pagination::simple-bootstrap-4') !!}
|
||
</div>
|
||
|
||
@else
|
||
<div class="rv-empty">
|
||
<i class="fas fa-inbox"></i>
|
||
<h3>Tidak Ada Data</h3>
|
||
<p>Tidak ada riwayat absensi untuk periode <strong>{{ $periodeLabel }}</strong>.</p>
|
||
@if(request()->hasAny(['id_santri','id_kelas','status','tanggal_spesifik']))
|
||
<p style="margin-top:8px; font-size:0.82rem;">
|
||
Coba
|
||
<a href="{{ route('admin.riwayat-kegiatan.show', $kegiatan->id) }}?{{ http_build_query(['mode'=>$mode,'dari'=>$dari,'sampai'=>$sampai,'tanggal'=>$tanggal]) }}"
|
||
style="color:var(--primary-color);">hapus filter</a>
|
||
untuk melihat semua data.
|
||
</p>
|
||
@endif
|
||
</div>
|
||
@endif
|
||
|
||
<script>
|
||
function toggleDay(header) {
|
||
var body = header.nextElementSibling;
|
||
var icon = header.querySelector('.rv-toggle');
|
||
if (body.style.display === 'none') {
|
||
body.style.display = 'block';
|
||
icon.classList.remove('closed');
|
||
} else {
|
||
body.style.display = 'none';
|
||
icon.classList.add('closed');
|
||
}
|
||
}
|
||
</script>
|
||
@endsection |