461 lines
27 KiB
PHP
461 lines
27 KiB
PHP
{{-- resources/views/admin/kegiatan/riwayat/index.blade.php --}}
|
||
@extends('layouts.app')
|
||
|
||
@section('content')
|
||
<style>
|
||
/* ============================================================
|
||
RIWAYAT KEGIATAN — INDEX (v3)
|
||
============================================================ */
|
||
|
||
.rw-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; flex-wrap:wrap; gap:10px; }
|
||
.rw-header h2 { margin:0; font-size:1.35rem; color:var(--primary-dark); display:flex; align-items:center; gap:9px; }
|
||
.rw-header h2 i { color:var(--primary-color); }
|
||
|
||
/* Filter */
|
||
.rw-filter { background:#fff; border-radius:12px; box-shadow:0 2px 10px rgba(0,0,0,.06); padding:14px 18px; margin-bottom:14px; }
|
||
.rw-mode-tabs { display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap; }
|
||
.rw-tab { padding:7px 18px; border-radius:22px; border:1.5px solid #e2e8f0; background:#fff;
|
||
font-size:0.82rem; font-weight:600; cursor:pointer; text-decoration:none;
|
||
color:#64748b; transition:all .18s; display:inline-flex; align-items:center; gap:6px; }
|
||
.rw-tab:hover { border-color:var(--primary-color); color:var(--primary-color); background:#f0fdf4; }
|
||
.rw-tab.active { background:var(--primary-color); color:#fff; border-color:var(--primary-color); box-shadow:0 2px 8px rgba(16,185,129,.25); }
|
||
.rw-filter-row { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; }
|
||
.rw-fg { display:flex; flex-direction:column; gap:4px; }
|
||
.rw-fg label { font-size:0.78rem; font-weight:600; color:#64748b; }
|
||
.rw-fg .form-control { padding:7px 11px; font-size:0.84rem; border:1.5px solid #e2e8f0; border-radius:8px; }
|
||
.rw-fg .form-control:focus { border-color:var(--primary-color); outline:none; }
|
||
.btn-rw-apply { background:var(--primary-color); color:#fff; border:none; padding:8px 18px; border-radius:8px;
|
||
font-size:0.84rem; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
|
||
align-self:flex-end; white-space:nowrap; }
|
||
.btn-rw-apply:hover { background:#059669; }
|
||
.btn-rw-reset { background:#f1f5f9; color:#64748b; border:1.5px solid #e2e8f0; padding:8px 12px; border-radius:8px;
|
||
font-size:0.84rem; font-weight:600; text-decoration:none;
|
||
display:inline-flex; align-items:center; gap:6px; align-self:flex-end; }
|
||
.btn-rw-reset:hover { background:#e2e8f0; }
|
||
|
||
/* Periode label */
|
||
.rw-periode { background:linear-gradient(90deg,#f0fdf4,#e8f7f2); border-left:3px solid var(--primary-color);
|
||
border-radius:8px; padding:9px 14px; margin-bottom:14px; font-size:0.84rem; color:#374151;
|
||
display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
|
||
.rw-periode i { color:var(--primary-color); }
|
||
|
||
/* KPI strip */
|
||
.rw-kpi-strip { display:grid; grid-template-columns:repeat(auto-fit,minmax(105px,1fr)); gap:8px; margin-bottom:14px; }
|
||
.rw-kpi { background:#fff; border-radius:10px; padding:11px 14px; box-shadow:0 2px 8px rgba(0,0,0,.05); text-align:center; }
|
||
.rw-kpi-val { font-size:1.45rem; font-weight:800; line-height:1; }
|
||
.rw-kpi-lbl { font-size:0.73rem; color:#94a3b8; margin-top:4px; font-weight:500; }
|
||
.rw-kpi-sub { font-size:0.68rem; color:#cbd5e1; margin-top:2px; }
|
||
|
||
/* Per-date block */
|
||
.rw-date-block { margin-bottom:20px; }
|
||
.rw-date-header { display:flex; align-items:center; gap:10px; padding:10px 16px; flex-wrap:wrap;
|
||
background:linear-gradient(90deg,var(--primary-color),#0ea574);
|
||
border-radius:10px 10px 0 0; color:#fff; }
|
||
.rw-date-today { background:linear-gradient(90deg,#0ea574,#059669); }
|
||
.dh-date { font-size:1rem; font-weight:700; }
|
||
.dh-hari { background:rgba(255,255,255,.22); padding:2px 10px; border-radius:12px; font-size:0.78rem; font-weight:600; }
|
||
.dh-count { margin-left:auto; font-size:0.78rem; background:rgba(255,255,255,.2); padding:3px 10px; border-radius:12px; }
|
||
|
||
/* Table */
|
||
.rw-tbl-wrap { background:#fff; border-radius:0 0 10px 10px; box-shadow:0 3px 12px rgba(0,0,0,.07); overflow-x:auto; }
|
||
.rw-table { width:100%; border-collapse:collapse; min-width:680px; }
|
||
.rw-table thead th { padding:9px 13px; text-align:left; font-size:0.78rem; font-weight:700;
|
||
color:#475569; background:#f8fafc; border-bottom:1.5px solid #e2e8f0; white-space:nowrap; }
|
||
.rw-table tbody td { padding:9px 13px; font-size:0.83rem; border-bottom:1px solid #f8fafc; vertical-align:middle; }
|
||
.rw-table tbody tr:last-child td { border-bottom:none; }
|
||
.rw-table tbody tr:hover { background:#f8fafc; }
|
||
.rw-table tfoot td { padding:8px 13px; }
|
||
|
||
/* Tags */
|
||
.rw-kelas-tag { background:#e8f7f2; color:var(--primary-dark); padding:2px 7px; border-radius:6px; font-size:.72rem; font-weight:600; margin-right:2px; display:inline-block; }
|
||
.rw-umum-tag { background:#f1f5f9; color:#64748b; padding:2px 7px; border-radius:6px; font-size:.72rem; font-weight:600; display:inline-block; }
|
||
.rw-kat-tag { background:#dbeafe; color:#1e40af; padding:2px 7px; border-radius:6px; font-size:.72rem; font-weight:600; display:inline-block; }
|
||
|
||
/* Mini progress */
|
||
.rw-mini-prog { height:6px; background:#f1f5f9; border-radius:3px; overflow:hidden; display:flex; min-width:70px; }
|
||
|
||
/* Button table */
|
||
.btn-tbl-detail { padding:5px 11px; background:var(--primary-color); color:#fff; border:none; border-radius:6px;
|
||
font-size:0.76rem; font-weight:600; text-decoration:none; display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
|
||
.btn-tbl-detail:hover { background:#059669; color:#fff; }
|
||
|
||
/* Cards (hari_ini) */
|
||
.rw-card { background:#fff; border-radius:12px; box-shadow:0 2px 10px rgba(0,0,0,.06); border:1px solid #f0f0f0; overflow:hidden; margin-bottom:10px; }
|
||
.rw-card:hover { box-shadow:0 4px 18px rgba(0,0,0,.1); }
|
||
.rw-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:14px 18px 10px; border-bottom:1px solid #f1f5f9; flex-wrap:wrap; }
|
||
.rw-card-title { font-size:1rem; font-weight:700; color:var(--primary-dark); margin:0 0 5px; display:flex; align-items:center; gap:8px; }
|
||
.rw-card-meta { display:flex; gap:10px; flex-wrap:wrap; font-size:.8rem; color:#64748b; align-items:center; }
|
||
.rw-card-meta span{ display:inline-flex; align-items:center; gap:4px; }
|
||
.rw-status { padding:4px 12px; border-radius:20px; font-size:.76rem; font-weight:700; white-space:nowrap; flex-shrink:0; display:inline-flex; align-items:center; gap:5px; }
|
||
.rw-status.belum { background:#f1f5f9; color:#64748b; }
|
||
.rw-status.selesai{ background:#d1fae5; color:#065f46; }
|
||
.rw-status.brlgs { background:#fef9c3; color:#854d0e; }
|
||
.rw-card-body { padding:10px 18px 14px; }
|
||
.rw-stats-row { display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-bottom:10px; }
|
||
.rw-chip { padding:4px 10px; border-radius:10px; font-size:.76rem; font-weight:700; display:inline-flex; align-items:center; gap:4px; }
|
||
.rw-chip.hadir { background:#d1fae5; color:#065f46; }
|
||
.rw-chip.terlambat{ background:#fff3e0; color:#e65100; }
|
||
.rw-chip.izin { background:#fef3c7; color:#92400e; }
|
||
.rw-chip.sakit { background:#dbeafe; color:#1e40af; }
|
||
.rw-chip.alpa { background:#fee2e2; color:#991b1b; }
|
||
.rw-chip.pulang { background:#f3e8ff; color:#6b21a8; }
|
||
.rw-chip.none { background:#f1f5f9; color:#94a3b8; }
|
||
.rw-progress-wrap { height:8px; background:#f1f5f9; border-radius:4px; overflow:hidden; display:flex; margin-bottom:6px; }
|
||
.rw-prog-hadir { background:#22c55e; }
|
||
.rw-prog-terlambat{ background:#FF9800; }
|
||
.rw-prog-izin { background:#f59e0b; }
|
||
.rw-prog-sakit { background:#3b82f6; }
|
||
.rw-prog-alpa { background:#ef4444; }
|
||
.rw-prog-pulang { background:#a855f7; }
|
||
.rw-prog-belum { background:#e2e8f0; }
|
||
.rw-card-foot { display:flex; align-items:center; justify-content:space-between; padding:8px 18px; background:#fafafa; border-top:1px solid #f1f5f9; flex-wrap:wrap; gap:8px; }
|
||
.rw-total-txt { font-size:.78rem; color:#94a3b8; }
|
||
.rw-total-txt strong { color:#374151; }
|
||
.btn-rw-detail { padding:6px 16px; background:var(--primary-color); color:#fff; border:none; border-radius:7px; font-size:.82rem; font-weight:600; text-decoration:none; display:inline-flex; align-items:center; gap:5px; }
|
||
.btn-rw-detail:hover { background:#059669; color:#fff; }
|
||
|
||
/* Empty */
|
||
.rw-empty { text-align:center; padding:48px 20px; background:#fff; border-radius:12px; box-shadow:0 2px 10px rgba(0,0,0,.06); }
|
||
.rw-empty i { font-size:3rem; color:#cbd5e1; display:block; margin-bottom:12px; }
|
||
.rw-empty h3 { margin:0 0 6px; color:var(--primary-dark); }
|
||
.rw-empty p { margin:0; color:var(--text-light); font-size:.88rem; }
|
||
|
||
@media(max-width:640px) {
|
||
.rw-filter-row { flex-direction:column; }
|
||
.rw-fg { width:100%; }
|
||
.rw-fg .form-control { width:100%; }
|
||
.btn-rw-apply,.btn-rw-reset { width:100%; justify-content:center; }
|
||
.rw-kpi-strip { grid-template-columns:repeat(3,1fr); }
|
||
.dh-count { display:none; }
|
||
}
|
||
</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');
|
||
$kategoriId = $kategoriId ?? '';
|
||
$passParams = ['mode' => $mode, 'dari' => $dari, 'sampai' => $sampai, 'tanggal' => $tanggal];
|
||
|
||
$totalAbsensi = $summary['total_absensi'] ?? 0;
|
||
$totalHadir = $summary['hadir'] ?? 0;
|
||
$pctHadirGlbl = $totalAbsensi > 0 ? round($totalHadir / $totalAbsensi * 100, 1) : 0;
|
||
@endphp
|
||
|
||
{{-- PAGE HEADER --}}
|
||
<div class="rw-header">
|
||
<h2><i class="fas fa-history"></i> Riwayat Kegiatan & Absensi</h2>
|
||
</div>
|
||
|
||
{{-- FILTER --}}
|
||
<div class="rw-filter">
|
||
<div class="rw-mode-tabs">
|
||
<a href="{{ route('admin.riwayat-kegiatan.index', ['mode'=>'hari_ini','tanggal'=>$tanggal]) }}"
|
||
class="rw-tab {{ $mode==='hari_ini'?'active':'' }}">
|
||
<i class="fas fa-calendar-day"></i> Hari Ini
|
||
</a>
|
||
<a href="{{ route('admin.riwayat-kegiatan.index', ['mode'=>'minggu_ini']) }}"
|
||
class="rw-tab {{ $mode==='minggu_ini'?'active':'' }}">
|
||
<i class="fas fa-calendar-week"></i> Minggu Ini
|
||
</a>
|
||
<a href="{{ route('admin.riwayat-kegiatan.index', ['mode'=>'custom','dari'=>$dari,'sampai'=>$sampai]) }}"
|
||
class="rw-tab {{ $mode==='custom'?'active':'' }}">
|
||
<i class="fas fa-sliders-h"></i> Rentang Tanggal
|
||
</a>
|
||
</div>
|
||
|
||
<form method="GET" action="{{ route('admin.riwayat-kegiatan.index') }}">
|
||
|
||
@if($mode === 'hari_ini')
|
||
<input type="hidden" name="mode" value="hari_ini">
|
||
<div class="rw-filter-row">
|
||
<div class="rw-fg">
|
||
<label><i class="fas fa-calendar-alt"></i> Tanggal</label>
|
||
<input type="date" name="tanggal" class="form-control" value="{{ $tanggal }}" style="max-width:180px;">
|
||
</div>
|
||
<div class="rw-fg">
|
||
<label><i class="fas fa-tag"></i> Kategori</label>
|
||
<select name="kategori_id" class="form-control" style="max-width:200px;">
|
||
<option value="">Semua Kategori</option>
|
||
@foreach($kategoris as $k)
|
||
<option value="{{ $k->kategori_id }}" {{ $kategoriId==$k->kategori_id?'selected':'' }}>{{ $k->nama_kategori }}</option>
|
||
@endforeach
|
||
</select>
|
||
</div>
|
||
<button type="submit" class="btn-rw-apply"><i class="fas fa-search"></i> Tampilkan</button>
|
||
<a href="{{ route('admin.riwayat-kegiatan.index') }}" class="btn-rw-reset"><i class="fas fa-undo"></i> Reset</a>
|
||
</div>
|
||
|
||
@elseif($mode === 'minggu_ini')
|
||
<input type="hidden" name="mode" value="minggu_ini">
|
||
<div class="rw-filter-row">
|
||
<div class="rw-fg">
|
||
<label><i class="fas fa-tag"></i> Kategori</label>
|
||
<select name="kategori_id" class="form-control" style="max-width:200px;">
|
||
<option value="">Semua Kategori</option>
|
||
@foreach($kategoris as $k)
|
||
<option value="{{ $k->kategori_id }}" {{ $kategoriId==$k->kategori_id?'selected':'' }}>{{ $k->nama_kategori }}</option>
|
||
@endforeach
|
||
</select>
|
||
</div>
|
||
<button type="submit" class="btn-rw-apply"><i class="fas fa-search"></i> Tampilkan</button>
|
||
<a href="{{ route('admin.riwayat-kegiatan.index', ['mode'=>'minggu_ini']) }}" class="btn-rw-reset"><i class="fas fa-undo"></i> Reset</a>
|
||
</div>
|
||
|
||
@else
|
||
<input type="hidden" name="mode" value="custom">
|
||
<div class="rw-filter-row">
|
||
<div class="rw-fg">
|
||
<label><i class="fas fa-calendar-alt"></i> Dari Tanggal</label>
|
||
<input type="date" name="dari" class="form-control" value="{{ $dari }}" style="max-width:180px;" required>
|
||
</div>
|
||
<div class="rw-fg">
|
||
<label><i class="fas fa-calendar-alt"></i> Sampai Tanggal</label>
|
||
<input type="date" name="sampai" class="form-control" value="{{ $sampai }}" style="max-width:180px;" required>
|
||
</div>
|
||
<div class="rw-fg">
|
||
<label><i class="fas fa-tag"></i> Kategori</label>
|
||
<select name="kategori_id" class="form-control" style="max-width:200px;">
|
||
<option value="">Semua Kategori</option>
|
||
@foreach($kategoris as $k)
|
||
<option value="{{ $k->kategori_id }}" {{ $kategoriId==$k->kategori_id?'selected':'' }}>{{ $k->nama_kategori }}</option>
|
||
@endforeach
|
||
</select>
|
||
</div>
|
||
<button type="submit" class="btn-rw-apply"><i class="fas fa-search"></i> Tampilkan</button>
|
||
<a href="{{ route('admin.riwayat-kegiatan.index', ['mode'=>'custom']) }}" class="btn-rw-reset"><i class="fas fa-undo"></i> Reset</a>
|
||
</div>
|
||
@endif
|
||
|
||
</form>
|
||
</div>
|
||
|
||
{{-- PERIODE LABEL --}}
|
||
<div class="rw-periode">
|
||
<i class="fas fa-calendar-check"></i>
|
||
Menampilkan: <strong>{{ $periodeLabel }}</strong>
|
||
@if($mode !== 'hari_ini' && ($summary['jumlah_hari'] ?? 0) > 0)
|
||
<span style="color:#94a3b8;">·</span>
|
||
<strong style="color:var(--primary-color);">{{ $summary['jumlah_hari'] }}</strong> hari aktif
|
||
<span style="color:#94a3b8;">·</span>
|
||
<strong style="color:var(--primary-color);">{{ $summary['jumlah_kegiatan'] }}</strong> sesi
|
||
@endif
|
||
</div>
|
||
|
||
{{-- KPI STRIP --}}
|
||
@if($totalAbsensi > 0)
|
||
<div class="rw-kpi-strip">
|
||
<div class="rw-kpi">
|
||
<div class="rw-kpi-val" style="color:#065f46;">{{ $summary['hadir'] }}</div>
|
||
<div class="rw-kpi-lbl"><i class="fas fa-check" style="color:#22c55e;"></i> Hadir Efektif</div>
|
||
@if($summary['terlambat'] > 0)
|
||
<div class="rw-kpi-sub">+{{ $summary['terlambat'] }} terlambat</div>
|
||
@endif
|
||
</div>
|
||
<div class="rw-kpi">
|
||
<div class="rw-kpi-val" style="color:#e65100;">{{ $summary['terlambat'] }}</div>
|
||
<div class="rw-kpi-lbl"><i class="fas fa-clock" style="color:#FF9800;"></i> Terlambat</div>
|
||
</div>
|
||
<div class="rw-kpi">
|
||
<div class="rw-kpi-val" style="color:#92400e;">{{ $summary['izin'] }}</div>
|
||
<div class="rw-kpi-lbl"><i class="fas fa-envelope" style="color:#f59e0b;"></i> Izin</div>
|
||
</div>
|
||
<div class="rw-kpi">
|
||
<div class="rw-kpi-val" style="color:#1e40af;">{{ $summary['sakit'] }}</div>
|
||
<div class="rw-kpi-lbl"><i class="fas fa-heartbeat" style="color:#3b82f6;"></i> Sakit</div>
|
||
</div>
|
||
<div class="rw-kpi">
|
||
<div class="rw-kpi-val" style="color:#991b1b;">{{ $summary['alpa'] }}</div>
|
||
<div class="rw-kpi-lbl"><i class="fas fa-times-circle" style="color:#ef4444;"></i> Alpa</div>
|
||
</div>
|
||
<div class="rw-kpi" style="border-top:2px solid var(--primary-color);">
|
||
<div class="rw-kpi-val" style="color:{{ $pctHadirGlbl>=85?'#059669':($pctHadirGlbl>=70?'#d97706':'#dc2626') }};">{{ $pctHadirGlbl }}%</div>
|
||
<div class="rw-kpi-lbl"><i class="fas fa-chart-pie" style="color:var(--primary-color);"></i> Rata-rata</div>
|
||
<div class="rw-kpi-sub">dari {{ $totalAbsensi }} tercatat
|
||
@if($mode !== 'hari_ini' && ($summary['jumlah_kegiatan']??0) > 0)
|
||
· {{ $summary['jumlah_kegiatan'] }} sesi
|
||
@endif
|
||
</div>
|
||
</div>
|
||
</div>
|
||
@endif
|
||
|
||
{{-- ════════════════════════════════════════════════════
|
||
MODE HARI INI → Cards
|
||
════════════════════════════════════════════════════ --}}
|
||
@if($mode === 'hari_ini')
|
||
|
||
@if($kegiatans && $kegiatans->count() > 0)
|
||
@foreach($kegiatans as $kegiatan)
|
||
@include('admin.kegiatan.riwayat._card', ['kegiatan' => $kegiatan, 'passParams' => $passParams])
|
||
@endforeach
|
||
<div style="margin-top:16px;">{!! $kegiatans->appends(request()->query())->links('pagination::simple-bootstrap-4') !!}</div>
|
||
@else
|
||
<div class="rw-empty">
|
||
<i class="fas fa-calendar-times"></i>
|
||
<h3>Tidak Ada Kegiatan</h3>
|
||
<p>Tidak ada kegiatan pada <strong>{{ $periodeLabel }}</strong>.</p>
|
||
<p style="margin-top:8px; font-size:.82rem;">
|
||
Coba tanggal lain atau lihat <a href="{{ route('admin.riwayat-kegiatan.index', ['mode'=>'minggu_ini']) }}" style="color:var(--primary-color);">riwayat minggu ini</a>.
|
||
</p>
|
||
</div>
|
||
@endif
|
||
|
||
{{-- ════════════════════════════════════════════════════
|
||
MODE MULTI-HARI → Tabel per Tanggal
|
||
════════════════════════════════════════════════════ --}}
|
||
@else
|
||
|
||
@if($kegiatanPerTanggal && $kegiatanPerTanggal->count() > 0)
|
||
|
||
@foreach($kegiatanPerTanggal as $tgl => $items)
|
||
@php
|
||
$tglCarbon = \Carbon\Carbon::parse($tgl);
|
||
$isHariIni = ($tgl === now()->format('Y-m-d'));
|
||
$hariLabel = $tglCarbon->locale('id')->isoFormat('dddd');
|
||
$tglLabel = $tglCarbon->locale('id')->isoFormat('D MMMM Y');
|
||
$tglHadir = $items->sum('hadir') + $items->sum('terlambat');
|
||
$tglTotal = $items->sum('total_absensi');
|
||
$tglPct = $tglTotal > 0 ? round($tglHadir / $tglTotal * 100) : 0;
|
||
@endphp
|
||
|
||
<div class="rw-date-block">
|
||
<div class="rw-date-header {{ $isHariIni ? 'rw-date-today' : '' }}">
|
||
<span class="dh-date">{{ $tglLabel }}</span>
|
||
<span class="dh-hari">{{ $hariLabel }}{{ $isHariIni ? ' · Hari Ini' : '' }}</span>
|
||
<span class="dh-count">
|
||
{{ $items->count() }} kegiatan
|
||
·
|
||
<strong>{{ $tglHadir }}</strong>/{{ $tglTotal }} hadir
|
||
@if($tglTotal > 0)
|
||
<span style="background:rgba(255,255,255,.15); padding:1px 7px; border-radius:8px; margin-left:4px;">{{ $tglPct }}%</span>
|
||
@endif
|
||
</span>
|
||
</div>
|
||
|
||
<div class="rw-tbl-wrap">
|
||
<table class="rw-table">
|
||
<thead>
|
||
<tr>
|
||
<th style="width:36px; text-align:center;">No</th>
|
||
<th>Nama Kegiatan</th>
|
||
<th style="width:95px;">Waktu</th>
|
||
<th style="width:110px;">Kategori</th>
|
||
<th style="width:140px;">Kelas</th>
|
||
<th style="width:58px; text-align:center; color:#22c55e;" title="Hadir efektif (termasuk terlambat)">Hadir</th>
|
||
<th style="width:52px; text-align:center; color:#FF9800;" title="Terlambat">Tlbt</th>
|
||
<th style="width:48px; text-align:center; color:#f59e0b;" title="Izin">Izin</th>
|
||
<th style="width:48px; text-align:center; color:#3b82f6;" title="Sakit">Skt</th>
|
||
<th style="width:48px; text-align:center; color:#ef4444;" title="Alpa">Alpa</th>
|
||
<th style="width:90px;">Progress</th>
|
||
<th style="width:88px; text-align:center;">Aksi</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
@foreach($items as $idx => $kegiatan)
|
||
@php
|
||
$hadirEfektif = $kegiatan->hadir + $kegiatan->terlambat;
|
||
$totalKeg = $kegiatan->total_absensi;
|
||
$kelasNames = $kegiatan->kelasKegiatan->pluck('nama_kelas');
|
||
$isUmum = $kelasNames->isEmpty();
|
||
@endphp
|
||
<tr>
|
||
<td style="color:#94a3b8; font-size:.76rem; text-align:center;">{{ $idx + 1 }}</td>
|
||
<td>
|
||
<div style="font-weight:700; font-size:.87rem; color:var(--primary-dark);">{{ $kegiatan->nama_kegiatan }}</div>
|
||
</td>
|
||
<td style="font-size:.79rem; color:#64748b; white-space:nowrap;">
|
||
{{ date('H:i', strtotime($kegiatan->waktu_mulai)) }}<br>
|
||
<span style="color:#94a3b8; font-size:.7rem;">s/d {{ date('H:i', strtotime($kegiatan->waktu_selesai)) }}</span>
|
||
</td>
|
||
<td>
|
||
@if($kegiatan->kategori)
|
||
<span class="rw-kat-tag">{{ $kegiatan->kategori->nama_kategori }}</span>
|
||
@endif
|
||
</td>
|
||
<td>
|
||
@if($isUmum)
|
||
<span class="rw-umum-tag"><i class="fas fa-globe-asia"></i> Umum</span>
|
||
@else
|
||
@foreach($kelasNames->take(2) as $kn)
|
||
<span class="rw-kelas-tag">{{ $kn }}</span>
|
||
@endforeach
|
||
@if($kelasNames->count() > 2)
|
||
<span class="rw-umum-tag">+{{ $kelasNames->count()-2 }}</span>
|
||
@endif
|
||
@endif
|
||
</td>
|
||
<td style="text-align:center; font-weight:700; color:#065f46;">{{ $hadirEfektif ?: '–' }}</td>
|
||
<td style="text-align:center; color:#e65100;">{{ $kegiatan->terlambat ?: '–' }}</td>
|
||
<td style="text-align:center; color:#92400e;">{{ $kegiatan->izin ?: '–' }}</td>
|
||
<td style="text-align:center; color:#1e40af;">{{ $kegiatan->sakit ?: '–' }}</td>
|
||
<td style="text-align:center; color:#991b1b; font-weight:700;">{{ $kegiatan->alpa ?: '–' }}</td>
|
||
<td>
|
||
@if($totalKeg > 0)
|
||
@php
|
||
$segs = [
|
||
['w'=>round($kegiatan->hadir/$totalKeg*100), 'c'=>'#22c55e'],
|
||
['w'=>round($kegiatan->terlambat/$totalKeg*100), 'c'=>'#FF9800'],
|
||
['w'=>round($kegiatan->izin/$totalKeg*100), 'c'=>'#f59e0b'],
|
||
['w'=>round($kegiatan->sakit/$totalKeg*100), 'c'=>'#3b82f6'],
|
||
['w'=>round($kegiatan->alpa/$totalKeg*100), 'c'=>'#ef4444'],
|
||
];
|
||
@endphp
|
||
<div class="rw-mini-prog">
|
||
@foreach($segs as $s)
|
||
@if($s['w'] > 0)<div style="width:{{ $s['w'] }}%;background:{{ $s['c'] }};"></div>@endif
|
||
@endforeach
|
||
</div>
|
||
<div style="font-size:.67rem; color:#94a3b8; margin-top:2px;">{{ $hadirEfektif }}/{{ $totalKeg }}</div>
|
||
@else
|
||
<span style="color:#cbd5e1; font-size:.76rem;">–</span>
|
||
@endif
|
||
</td>
|
||
<td style="text-align:center;">
|
||
<a href="{{ route('admin.riwayat-kegiatan.show', $kegiatan->id) }}?mode=hari_ini&tanggal={{ $tgl }}&dari={{ $tgl }}&sampai={{ $tgl }}"
|
||
class="btn-tbl-detail">
|
||
<i class="fas fa-users"></i> Santri
|
||
</a>
|
||
</td>
|
||
</tr>
|
||
@endforeach
|
||
</tbody>
|
||
@if($items->count() > 1)
|
||
<tfoot>
|
||
<tr style="background:#f0fdf4; border-top:1.5px solid #bbf7d0;">
|
||
<td colspan="5" style="font-size:.78rem; font-weight:700; color:#065f46; padding:8px 13px;">
|
||
<i class="fas fa-layer-group"></i> Total {{ $tglLabel }}
|
||
</td>
|
||
<td style="text-align:center; font-weight:800; color:#065f46;">{{ $tglHadir }}</td>
|
||
<td style="text-align:center; font-weight:700; color:#e65100;">{{ $items->sum('terlambat') }}</td>
|
||
<td style="text-align:center; font-weight:700; color:#92400e;">{{ $items->sum('izin') }}</td>
|
||
<td style="text-align:center; font-weight:700; color:#1e40af;">{{ $items->sum('sakit') }}</td>
|
||
<td style="text-align:center; font-weight:700; color:#991b1b;">{{ $items->sum('alpa') }}</td>
|
||
<td colspan="2" style="font-size:.75rem; color:#94a3b8; padding:8px 13px;">
|
||
{{ $tglTotal }} tercatat · {{ $tglPct }}% hadir
|
||
</td>
|
||
</tr>
|
||
</tfoot>
|
||
@endif
|
||
</table>
|
||
</div>
|
||
</div>
|
||
@endforeach
|
||
|
||
@else
|
||
<div class="rw-empty">
|
||
<i class="fas fa-calendar-times"></i>
|
||
<h3>Tidak Ada Data Absensi</h3>
|
||
<p>Tidak ada absensi yang tercatat pada periode <strong>{{ $periodeLabel }}</strong>.</p>
|
||
@if($mode === 'custom')
|
||
<p style="margin-top:8px; font-size:.82rem; color:#6b7280;">
|
||
Pastikan rentang tanggal sudah benar dan ada data absensi di periode tersebut.
|
||
</p>
|
||
@endif
|
||
</div>
|
||
@endif
|
||
|
||
@endif
|
||
|
||
@endsection |