815 lines
35 KiB
PHP
815 lines
35 KiB
PHP
@extends('layouts.app')
|
||
|
||
@section('title', 'Detail: ' . $kegiatan->nama_kegiatan)
|
||
|
||
@section('content')
|
||
<style>
|
||
:root {
|
||
--g: #1a7a5e;
|
||
--m: #2bbd8e;
|
||
--sf: #e8f7f2;
|
||
--tx: #0f1923;
|
||
--mu: #64748b;
|
||
--br: #e8edf2;
|
||
--bg: #f4f7f9;
|
||
--wh: #ffffff;
|
||
--sh: 0 2px 12px rgba(0,0,0,0.06);
|
||
--sh2: 0 6px 28px rgba(0,0,0,0.10);
|
||
--ra: 14px;
|
||
}
|
||
|
||
* { box-sizing: border-box; }
|
||
|
||
/* ──────────────────────────────────────────────
|
||
BREADCRUMB / BACK NAV
|
||
────────────────────────────────────────────── */
|
||
.sd-nav {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
margin-bottom: 14px;
|
||
font-size: 0.8rem;
|
||
color: var(--mu);
|
||
flex-wrap: wrap;
|
||
}
|
||
.sd-nav a {
|
||
color: var(--g);
|
||
text-decoration: none;
|
||
font-weight: 600;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
padding: 5px 12px;
|
||
background: var(--wh);
|
||
border: 1.5px solid var(--br);
|
||
border-radius: 8px;
|
||
transition: all 0.15s;
|
||
}
|
||
.sd-nav a:hover { background: var(--sf); border-color: var(--m); }
|
||
.sd-nav-sep { color: var(--br); font-size: 1rem; }
|
||
.sd-nav-cur { font-weight: 700; color: var(--tx); }
|
||
|
||
/* ──────────────────────────────────────────────
|
||
HERO CARD — Info Kegiatan
|
||
────────────────────────────────────────────── */
|
||
.sd-hero {
|
||
background: linear-gradient(135deg, #0b3528 0%, #1a7a5e 60%, #28b585 100%);
|
||
border-radius: var(--ra);
|
||
padding: 24px 26px 20px;
|
||
color: white;
|
||
margin-bottom: 18px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.sd-hero::before {
|
||
content: '';
|
||
position: absolute; top: -60px; right: -60px;
|
||
width: 200px; height: 200px; border-radius: 50%;
|
||
background: rgba(255,255,255,0.05); pointer-events: none;
|
||
}
|
||
.sd-hero-inner { position: relative; z-index: 1; }
|
||
.sd-hero-name {
|
||
font-size: 1.35rem; font-weight: 800;
|
||
margin: 0 0 10px; line-height: 1.2;
|
||
}
|
||
.sd-hero-chips { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 18px; }
|
||
.sd-chip {
|
||
background: rgba(255,255,255,0.14);
|
||
border: 1px solid rgba(255,255,255,0.22);
|
||
padding: 4px 11px; border-radius: 20px;
|
||
font-size: 0.77rem; font-weight: 600;
|
||
display: inline-flex; align-items: center; gap: 5px;
|
||
}
|
||
|
||
/* ── Besar 3 KPI di hero ── */
|
||
.sd-hero-kpi {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 1px;
|
||
background: rgba(255,255,255,0.12);
|
||
border: 1px solid rgba(255,255,255,0.15);
|
||
border-radius: 10px;
|
||
overflow: hidden;
|
||
}
|
||
.sd-hkpi {
|
||
padding: 12px 14px;
|
||
background: rgba(0,0,0,0.08);
|
||
text-align: center;
|
||
}
|
||
.sd-hkpi-val {
|
||
font-size: 2rem; font-weight: 900; line-height: 1;
|
||
margin-bottom: 3px;
|
||
}
|
||
.sd-hkpi-val.clr-great { color: #4ade80; }
|
||
.sd-hkpi-val.clr-ok { color: #fcd34d; }
|
||
.sd-hkpi-val.clr-bad { color: #fca5a5; }
|
||
.sd-hkpi-val.clr-white { color: #ffffff; }
|
||
.sd-hkpi-lbl { font-size: 0.75rem; opacity: 0.75; font-weight: 600; }
|
||
.sd-hkpi-sub { font-size: 0.66rem; opacity: 0.50; margin-top: 2px; }
|
||
|
||
/* ──────────────────────────────────────────────
|
||
FILTER BAR
|
||
────────────────────────────────────────────── */
|
||
.sd-filter {
|
||
background: var(--wh);
|
||
border-radius: 12px;
|
||
padding: 12px 14px;
|
||
margin-bottom: 16px;
|
||
box-shadow: var(--sh);
|
||
display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end;
|
||
}
|
||
.sd-fg { display: flex; flex-direction: column; gap: 3px; }
|
||
.sd-fg label {
|
||
font-size: 0.70rem; font-weight: 700; color: var(--mu);
|
||
text-transform: uppercase; letter-spacing: 0.5px;
|
||
}
|
||
.sd-presets { display: flex; gap: 4px; flex-wrap: wrap; }
|
||
.sd-pbtn {
|
||
padding: 6px 11px; border: 1.5px solid var(--br);
|
||
border-radius: 8px; background: var(--wh);
|
||
font-size: 0.78rem; font-weight: 600; color: var(--mu);
|
||
cursor: pointer; transition: all 0.15s; white-space: nowrap;
|
||
}
|
||
.sd-pbtn:hover { border-color: var(--m); color: var(--g); background: var(--sf); }
|
||
.sd-pbtn.active { border-color: var(--g); background: var(--g); color: white; }
|
||
.sd-drange { display: flex; align-items: center; gap: 5px; }
|
||
.sd-drange input[type=date] {
|
||
padding: 6px 9px; border: 1.5px solid var(--br);
|
||
border-radius: 8px; font-size: 0.79rem; color: var(--tx);
|
||
}
|
||
.sd-drange input[type=date]:focus { outline: none; border-color: var(--m); }
|
||
.sd-drange span { font-size: 0.78rem; font-weight: 600; color: var(--mu); }
|
||
.sd-apply {
|
||
padding: 7px 14px; background: var(--g); color: white;
|
||
border: none; border-radius: 8px;
|
||
font-size: 0.8rem; font-weight: 700; cursor: pointer;
|
||
display: inline-flex; align-items: center; gap: 5px;
|
||
}
|
||
.sd-apply:hover { background: #155c47; }
|
||
.sd-finfo {
|
||
font-size: 0.75rem; color: var(--mu);
|
||
padding: 5px 9px; background: var(--bg);
|
||
border-radius: 8px; border: 1px solid var(--br);
|
||
display: flex; align-items: center; gap: 4px; align-self: center;
|
||
}
|
||
|
||
/* ──────────────────────────────────────────────
|
||
6 STAT PILL CARDS
|
||
────────────────────────────────────────────── */
|
||
.sd-pills {
|
||
display: grid;
|
||
grid-template-columns: repeat(6, 1fr);
|
||
gap: 8px;
|
||
margin-bottom: 18px;
|
||
}
|
||
.sd-pill-card {
|
||
background: var(--wh);
|
||
border-radius: 11px;
|
||
padding: 13px 8px 11px;
|
||
box-shadow: var(--sh);
|
||
text-align: center;
|
||
border-bottom: 3px solid transparent;
|
||
transition: transform 0.15s, box-shadow 0.15s;
|
||
}
|
||
.sd-pill-card:hover { transform: translateY(-2px); box-shadow: var(--sh2); }
|
||
.sd-pill-card.p-green { border-bottom-color: #2bbd8e; }
|
||
.sd-pill-card.p-amber { border-bottom-color: #f59e0b; }
|
||
.sd-pill-card.p-blue { border-bottom-color: #3b82f6; }
|
||
.sd-pill-card.p-purple { border-bottom-color: #8b5cf6; }
|
||
.sd-pill-card.p-red { border-bottom-color: #e53e3e; }
|
||
.sd-pill-card.p-teal { border-bottom-color: #0d9488; }
|
||
.sd-pill-icon {
|
||
width: 32px; height: 32px; border-radius: 8px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 0.85rem; margin: 0 auto 7px;
|
||
}
|
||
.p-green .sd-pill-icon { background: #d1fae5; color: #059669; }
|
||
.p-amber .sd-pill-icon { background: #fef3c7; color: #d97706; }
|
||
.p-blue .sd-pill-icon { background: #dbeafe; color: #2563eb; }
|
||
.p-purple .sd-pill-icon { background: #ede9fe; color: #7c3aed; }
|
||
.p-red .sd-pill-icon { background: #fee2e2; color: #dc2626; }
|
||
.p-teal .sd-pill-icon { background: #ccfbf1; color: #0f766e; }
|
||
.sd-pill-val { font-size: 1.6rem; font-weight: 800; color: var(--tx); line-height: 1; }
|
||
.sd-pill-lbl { font-size: 0.71rem; color: var(--mu); margin-top: 3px; font-weight: 500; }
|
||
|
||
/* ──────────────────────────────────────────────
|
||
INSIGHT BANNER (pesan sederhana untuk santri)
|
||
────────────────────────────────────────────── */
|
||
.sd-insight {
|
||
border-radius: 11px;
|
||
padding: 13px 16px;
|
||
margin-bottom: 18px;
|
||
display: flex; align-items: center; gap: 12px;
|
||
font-size: 0.84rem; font-weight: 600;
|
||
}
|
||
.sd-insight.good { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }
|
||
.sd-insight.warn { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
|
||
.sd-insight.bad { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
|
||
.sd-insight-ic { font-size: 1.4rem; flex-shrink: 0; }
|
||
.sd-insight-text b { display: block; font-size: 0.9rem; margin-bottom: 2px; }
|
||
|
||
/* ──────────────────────────────────────────────
|
||
2 KOLOM — Chart & Distribusi
|
||
────────────────────────────────────────────── */
|
||
.sd-row2 {
|
||
display: grid;
|
||
grid-template-columns: 3fr 2fr;
|
||
gap: 14px;
|
||
margin-bottom: 18px;
|
||
}
|
||
.sd-card {
|
||
background: var(--wh);
|
||
border-radius: 12px;
|
||
padding: 18px;
|
||
box-shadow: var(--sh);
|
||
}
|
||
.sd-card-title {
|
||
font-size: 0.85rem; font-weight: 700; color: var(--tx);
|
||
margin-bottom: 14px;
|
||
display: flex; align-items: center; gap: 7px;
|
||
}
|
||
.sd-card-title .badge {
|
||
margin-left: auto;
|
||
font-size: 0.70rem; color: var(--mu); font-weight: 500;
|
||
background: var(--bg); padding: 3px 8px; border-radius: 6px;
|
||
border: 1px solid var(--br);
|
||
}
|
||
|
||
/* Progress distribusi */
|
||
.sd-dist-list { display: flex; flex-direction: column; gap: 10px; }
|
||
.sd-dist-row { display: flex; align-items: center; gap: 9px; }
|
||
.sd-dist-lbl { font-size: 0.77rem; font-weight: 600; color: var(--tx); min-width: 72px; }
|
||
.sd-dist-track{ flex: 1; height: 9px; background: #f1f5f9; border-radius: 5px; overflow: hidden; }
|
||
.sd-dist-fill { height: 100%; border-radius: 5px; transition: width 0.6s ease; }
|
||
.sd-dist-val { font-size: 0.73rem; font-weight: 700; color: var(--tx); min-width: 46px; text-align: right; }
|
||
.sd-dist-pct { font-size: 0.67rem; color: var(--mu); font-weight: 400; }
|
||
|
||
/* ──────────────────────────────────────────────
|
||
TABEL RIWAYAT
|
||
────────────────────────────────────────────── */
|
||
.sd-table-wrap {
|
||
background: var(--wh);
|
||
border-radius: 12px;
|
||
box-shadow: var(--sh);
|
||
overflow: hidden;
|
||
}
|
||
.sd-table-header {
|
||
padding: 13px 16px;
|
||
border-bottom: 1px solid var(--br);
|
||
display: flex; align-items: center; gap: 8px;
|
||
}
|
||
.sd-table-header-title {
|
||
font-size: 0.86rem; font-weight: 700; color: var(--tx);
|
||
display: flex; align-items: center; gap: 7px;
|
||
}
|
||
.sd-count-badge {
|
||
margin-left: auto;
|
||
background: var(--sf); color: var(--g);
|
||
padding: 3px 10px; border-radius: 8px;
|
||
font-size: 0.72rem; font-weight: 700;
|
||
}
|
||
.sd-table { width: 100%; border-collapse: collapse; }
|
||
.sd-table thead tr { background: var(--bg); }
|
||
.sd-table th {
|
||
padding: 9px 14px;
|
||
text-align: left;
|
||
font-size: 0.72rem; font-weight: 700; color: var(--mu);
|
||
text-transform: uppercase; letter-spacing: 0.5px;
|
||
border-bottom: 1px solid var(--br);
|
||
}
|
||
.sd-table td {
|
||
padding: 10px 14px;
|
||
font-size: 0.83rem;
|
||
border-bottom: 1px solid #f5f8fa;
|
||
color: var(--tx);
|
||
vertical-align: middle;
|
||
}
|
||
.sd-table tbody tr:last-child td { border-bottom: none; }
|
||
.sd-table tbody tr:hover { background: #fafcfd; }
|
||
|
||
/* Row highlight berdasarkan status */
|
||
.sd-table tbody tr.row-alpa { background: #fff5f5; }
|
||
.sd-table tbody tr.row-alpa:hover { background: #fee2e2; }
|
||
|
||
/* Status badge di tabel */
|
||
.sd-status {
|
||
padding: 4px 11px; border-radius: 20px;
|
||
font-size: 0.76rem; font-weight: 700;
|
||
display: inline-flex; align-items: center; gap: 4px;
|
||
}
|
||
.sd-status.hadir { background: #d1fae5; color: #065f46; }
|
||
.sd-status.terlambat { background: #fef3c7; color: #92400e; }
|
||
.sd-status.izin { background: #dbeafe; color: #1e40af; }
|
||
.sd-status.sakit { background: #ede9fe; color: #5b21b6; }
|
||
.sd-status.alpa { background: #fee2e2; color: #991b1b; }
|
||
.sd-status.pulang { background: #ccfbf1; color: #0f766e; }
|
||
|
||
/* Kolom tanggal + hari */
|
||
.sd-date-main { font-weight: 700; font-size: 0.84rem; color: var(--tx); }
|
||
.sd-date-day { font-size: 0.71rem; color: var(--mu); margin-top: 1px; }
|
||
|
||
/* Metode chip */
|
||
.sd-metode {
|
||
display: inline-flex; align-items: center; gap: 5px;
|
||
background: var(--bg); border: 1px solid var(--br);
|
||
padding: 3px 9px; border-radius: 7px;
|
||
font-size: 0.74rem; font-weight: 600; color: var(--mu);
|
||
}
|
||
|
||
.sd-empty {
|
||
text-align: center; padding: 44px 20px;
|
||
color: var(--mu); font-size: 0.84rem;
|
||
}
|
||
.sd-empty i { font-size: 2.6rem; opacity: 0.15; display: block; margin-bottom: 10px; }
|
||
|
||
/* ──────────────────────────────────────────────
|
||
PAGINATION
|
||
────────────────────────────────────────────── */
|
||
.sd-pagination { padding: 12px 16px; border-top: 1px solid var(--br); }
|
||
|
||
@media (max-width: 720px) {
|
||
.sd-pills { grid-template-columns: repeat(3, 1fr); }
|
||
.sd-row2 { grid-template-columns: 1fr; }
|
||
.sd-hero-kpi { grid-template-columns: repeat(3, 1fr); }
|
||
.sd-table th:nth-child(1),
|
||
.sd-table td:nth-child(1) { display: none; }
|
||
}
|
||
</style>
|
||
|
||
{{-- ── NAVIGASI KEMBALI ── --}}
|
||
<div class="sd-nav">
|
||
<a href="{{ route('santri.kegiatan.index') }}?tab={{ $fromTab ?? 'jadwal' }}">
|
||
<i class="fas fa-arrow-left"></i> Kembali ke Jadwal
|
||
</a>
|
||
<span class="sd-nav-sep">›</span>
|
||
<span class="sd-nav-cur">{{ $kegiatan->nama_kegiatan }}</span>
|
||
</div>
|
||
|
||
{{-- ── HERO — Info Kegiatan + Ringkasan ── --}}
|
||
<div class="sd-hero">
|
||
<div class="sd-hero-inner">
|
||
<h1 class="sd-hero-name">
|
||
<i class="fas fa-clipboard-list" style="opacity:0.7;margin-right:4px;"></i>
|
||
{{ $kegiatan->nama_kegiatan }}
|
||
</h1>
|
||
<div class="sd-hero-chips">
|
||
<span class="sd-chip"><i class="fas fa-tag"></i> {{ $kegiatan->kategori->nama_kategori }}</span>
|
||
<span class="sd-chip"><i class="fas fa-calendar-day"></i> Setiap {{ $kegiatan->hari }}</span>
|
||
<span class="sd-chip">
|
||
<i class="fas fa-clock"></i>
|
||
{{ date('H:i', strtotime($kegiatan->waktu_mulai)) }} – {{ date('H:i', strtotime($kegiatan->waktu_selesai)) }}
|
||
</span>
|
||
@if($kegiatan->materi)
|
||
<span class="sd-chip"><i class="fas fa-book-open"></i> {{ Str::limit($kegiatan->materi, 35) }}</span>
|
||
@endif
|
||
</div>
|
||
|
||
{{-- 3 angka paling penting --}}
|
||
<div class="sd-hero-kpi">
|
||
<div class="sd-hkpi">
|
||
@php
|
||
$clr = $persentaseHadir >= 85 ? 'clr-great' : ($persentaseHadir >= 70 ? 'clr-ok' : 'clr-bad');
|
||
@endphp
|
||
<div class="sd-hkpi-val {{ $clr }}">{{ $persentaseHadir }}%</div>
|
||
<div class="sd-hkpi-lbl">Tingkat Kehadiran</div>
|
||
<div class="sd-hkpi-sub">hadir + terlambat</div>
|
||
</div>
|
||
<div class="sd-hkpi">
|
||
<div class="sd-hkpi-val clr-white">{{ $hadirEfektif }}</div>
|
||
<div class="sd-hkpi-lbl">Kali Hadir</div>
|
||
<div class="sd-hkpi-sub">dari {{ $totalAbsensi }} tercatat</div>
|
||
</div>
|
||
<div class="sd-hkpi">
|
||
<div class="sd-hkpi-val {{ ($stats['Alpa'] ?? 0) > 0 ? 'clr-bad' : 'clr-great' }}">
|
||
{{ $stats['Alpa'] ?? 0 }}
|
||
</div>
|
||
<div class="sd-hkpi-lbl">Kali Alpa</div>
|
||
<div class="sd-hkpi-sub">tidak masuk tanpa izin</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- ── FILTER PERIODE ── --}}
|
||
<form method="GET" action="{{ route('santri.kegiatan.show', $kegiatan->kegiatan_id) }}" id="filterForm">
|
||
<input type="hidden" name="from_tab" value="{{ $fromTab ?? 'jadwal' }}">
|
||
<input type="hidden" name="preset" id="hPreset" value="{{ $preset }}">
|
||
<input type="hidden" name="date_from" id="hDateFrom" value="{{ request('date_from') }}">
|
||
<input type="hidden" name="date_to" id="hDateTo" value="{{ request('date_to') }}">
|
||
|
||
<div class="sd-filter">
|
||
<div class="sd-fg">
|
||
<label><i class="fas fa-bolt"></i> Tampilkan periode</label>
|
||
<div class="sd-presets" id="presetBtns">
|
||
@foreach([
|
||
'this_week' => 'Minggu Ini',
|
||
'this_month' => 'Bulan Ini',
|
||
'last_month' => 'Bulan Lalu',
|
||
'last_3m' => '3 Bulan',
|
||
'all' => 'Semua Data',
|
||
] as $v => $l)
|
||
<button type="button"
|
||
class="sd-pbtn {{ $preset === $v ? 'active' : '' }}"
|
||
onclick="setPreset('{{ $v }}')">{{ $l }}</button>
|
||
@endforeach
|
||
</div>
|
||
</div>
|
||
<div class="sd-fg">
|
||
<label><i class="fas fa-calendar-alt"></i> Rentang kustom</label>
|
||
<div class="sd-drange">
|
||
<input type="date" id="inpFrom" value="{{ $dateFrom->format('Y-m-d') }}" onchange="setCustom()">
|
||
<span>—</span>
|
||
<input type="date" id="inpTo" value="{{ $dateTo->format('Y-m-d') }}" onchange="setCustom()">
|
||
</div>
|
||
</div>
|
||
<button type="submit" class="sd-apply"><i class="fas fa-sync-alt"></i> Terapkan</button>
|
||
<div class="sd-finfo">
|
||
<i class="fas fa-calendar-check" style="color:var(--m);"></i>
|
||
{{ $dateFrom->locale('id')->isoFormat('D MMM YYYY') }} –
|
||
{{ $dateTo->locale('id')->isoFormat('D MMM YYYY') }}
|
||
</div>
|
||
</div>
|
||
</form>
|
||
|
||
{{-- ── 6 STAT PILLS ── --}}
|
||
<div class="sd-pills">
|
||
@php
|
||
$pillData = [
|
||
['label' => 'Hadir', 'val' => $stats['Hadir'] ?? 0, 'icon' => 'check-circle', 'cls' => 'p-green'],
|
||
['label' => 'Terlambat', 'val' => $stats['Terlambat'] ?? 0, 'icon' => 'clock', 'cls' => 'p-amber'],
|
||
['label' => 'Izin', 'val' => $stats['Izin'] ?? 0, 'icon' => 'info-circle', 'cls' => 'p-blue'],
|
||
['label' => 'Sakit', 'val' => $stats['Sakit'] ?? 0, 'icon' => 'heartbeat', 'cls' => 'p-purple'],
|
||
['label' => 'Alpa', 'val' => $stats['Alpa'] ?? 0, 'icon' => 'times-circle', 'cls' => 'p-red'],
|
||
['label' => 'Pulang', 'val' => $stats['Pulang'] ?? 0, 'icon' => 'home', 'cls' => 'p-teal'],
|
||
];
|
||
@endphp
|
||
@foreach($pillData as $p)
|
||
<div class="sd-pill-card {{ $p['cls'] }}">
|
||
<div class="sd-pill-icon"><i class="fas fa-{{ $p['icon'] }}"></i></div>
|
||
<div class="sd-pill-val">{{ $p['val'] }}</div>
|
||
<div class="sd-pill-lbl">{{ $p['label'] }}</div>
|
||
</div>
|
||
@endforeach
|
||
</div>
|
||
|
||
{{-- ── INSIGHT BANNER — pesan mudah dipahami santri ── --}}
|
||
@php
|
||
$alpaCount = $stats['Alpa'] ?? 0;
|
||
$insightCls = $persentaseHadir >= 85 ? 'good' : ($persentaseHadir >= 65 ? 'warn' : 'bad');
|
||
if ($insightCls === 'good') {
|
||
$insightIcon = '🎉';
|
||
$insightJudul = 'Kehadiranmu sangat baik!';
|
||
$insightMsg = "Kamu hadir $hadirEfektif dari $totalAbsensi sesi yang tercatat. Pertahankan ya!";
|
||
} elseif ($insightCls === 'warn') {
|
||
$insightIcon = '⚠️';
|
||
$insightJudul = 'Kehadiranmu perlu ditingkatkan.';
|
||
$insightMsg = "Tingkat kehadiranmu $persentaseHadir% dalam periode ini. Yuk lebih rajin lagi!";
|
||
} else {
|
||
$insightIcon = '❗';
|
||
$insightJudul = 'Kehadiranmu sangat rendah.';
|
||
$insightMsg = "Hanya $persentaseHadir% dari sesi yang dihadiri. Ada $alpaCount kali alpa. Segera konsultasikan ke pembimbing.";
|
||
}
|
||
@endphp
|
||
@if($totalAbsensi > 0)
|
||
<div class="sd-insight {{ $insightCls }}">
|
||
<div class="sd-insight-ic">{{ $insightIcon }}</div>
|
||
<div class="sd-insight-text">
|
||
<b>{{ $insightJudul }}</b>
|
||
{{ $insightMsg }}
|
||
</div>
|
||
</div>
|
||
@endif
|
||
|
||
{{-- ── KALENDER VISUAL + DISTRIBUSI ── --}}
|
||
@php
|
||
// $absensiByDate sudah dikirim dari controller: ['Y-m-d' => 'Status', ...]
|
||
// Mencakup SEMUA data dalam range, bukan hanya halaman saat ini
|
||
|
||
$statusMeta = [
|
||
'Hadir' => ['bg'=>'#d1fae5','text'=>'#065f46','border'=>'#6ee7b7','dot'=>'#2bbd8e','icon'=>'✓'],
|
||
'Terlambat' => ['bg'=>'#fef3c7','text'=>'#92400e','border'=>'#fcd34d','dot'=>'#f59e0b','icon'=>'⏰'],
|
||
'Izin' => ['bg'=>'#dbeafe','text'=>'#1e40af','border'=>'#93c5fd','dot'=>'#3b82f6','icon'=>'I'],
|
||
'Sakit' => ['bg'=>'#ede9fe','text'=>'#5b21b6','border'=>'#c4b5fd','dot'=>'#8b5cf6','icon'=>'🏥'],
|
||
'Alpa' => ['bg'=>'#fee2e2','text'=>'#991b1b','border'=>'#fca5a5','dot'=>'#e53e3e','icon'=>'✗'],
|
||
'Pulang' => ['bg'=>'#ccfbf1','text'=>'#0f766e','border'=>'#5eead4','dot'=>'#0d9488','icon'=>'🏠'],
|
||
];
|
||
|
||
$distItems = [
|
||
['label'=>'Hadir', 'val'=>$stats['Hadir'] ?? 0, 'color'=>'#2bbd8e', 'emoji'=>'✅'],
|
||
['label'=>'Terlambat', 'val'=>$stats['Terlambat'] ?? 0, 'color'=>'#f59e0b', 'emoji'=>'⏰'],
|
||
['label'=>'Izin', 'val'=>$stats['Izin'] ?? 0, 'color'=>'#3b82f6', 'emoji'=>'ℹ️'],
|
||
['label'=>'Sakit', 'val'=>$stats['Sakit'] ?? 0, 'color'=>'#8b5cf6', 'emoji'=>'🏥'],
|
||
['label'=>'Alpa', 'val'=>$stats['Alpa'] ?? 0, 'color'=>'#e53e3e', 'emoji'=>'❌'],
|
||
['label'=>'Pulang', 'val'=>$stats['Pulang'] ?? 0, 'color'=>'#0d9488', 'emoji'=>'🏠'],
|
||
];
|
||
|
||
$hariSingkat = ['Monday'=>'Sen','Tuesday'=>'Sel','Wednesday'=>'Rab',
|
||
'Thursday'=>'Kam','Friday'=>'Jum','Saturday'=>'Sab','Sunday'=>'Ahd'];
|
||
@endphp
|
||
|
||
<style>
|
||
/* ── Kalender Visual ── */
|
||
.sd-cal-wrap {
|
||
background: var(--wh); border-radius: 12px;
|
||
padding: 18px; box-shadow: var(--sh); margin-bottom: 14px;
|
||
}
|
||
.sd-cal-title {
|
||
font-size: 0.85rem; font-weight: 700; color: var(--tx);
|
||
margin-bottom: 6px; display: flex; align-items: center; gap: 7px;
|
||
}
|
||
.sd-cal-hint {
|
||
font-size: 0.75rem; color: var(--mu);
|
||
margin-bottom: 14px; padding: 7px 11px;
|
||
background: var(--bg); border-radius: 7px;
|
||
border-left: 3px solid var(--m);
|
||
display: flex; align-items: center; gap: 6px;
|
||
}
|
||
.sd-legend {
|
||
display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px;
|
||
}
|
||
.sd-legend-item {
|
||
display: inline-flex; align-items: center; gap: 5px;
|
||
font-size: 0.74rem; font-weight: 600; color: var(--tx);
|
||
}
|
||
.sd-legend-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
|
||
|
||
.sd-cal-grid { display: flex; flex-wrap: wrap; gap: 6px; }
|
||
.sd-cal-slot {
|
||
width: 50px; border-radius: 9px; padding: 7px 4px 6px;
|
||
text-align: center; border: 1.5px solid #e8edf2;
|
||
background: #f8fafc; transition: transform 0.12s, box-shadow 0.12s;
|
||
cursor: default;
|
||
}
|
||
.sd-cal-slot:hover { transform: translateY(-2px); box-shadow: 0 5px 16px rgba(0,0,0,0.13); z-index: 5; }
|
||
.sd-cal-slot-icon { font-size: 1rem; line-height: 1; margin-bottom: 3px; display: block; }
|
||
.sd-cal-slot-date { font-size: 0.69rem; font-weight: 800; line-height: 1; display: block; }
|
||
.sd-cal-slot-day { font-size: 0.60rem; font-weight: 500; opacity: 0.65; display: block; margin-top: 1px; }
|
||
.sd-cal-slot-lbl { font-size: 0.58rem; font-weight: 700; display: block; margin-top: 3px;
|
||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||
.sd-cal-slot.empty { background: #f1f5f9; border-color: #e2e8f0; opacity: 0.5; }
|
||
.sd-cal-slot.is-today { outline: 2px solid #f5a623; outline-offset: 2px; }
|
||
|
||
/* ── Distribusi ── */
|
||
.sd-dist2-wrap {
|
||
background: var(--wh); border-radius: 12px;
|
||
padding: 18px; box-shadow: var(--sh); margin-bottom: 18px;
|
||
}
|
||
.sd-dist2-title {
|
||
font-size: 0.85rem; font-weight: 700; color: var(--tx);
|
||
margin-bottom: 14px; display: flex; align-items: center; gap: 7px;
|
||
}
|
||
.sd-dist2-list { display: flex; flex-direction: column; gap: 13px; }
|
||
.sd-dist2-row { display: flex; align-items: center; gap: 10px; }
|
||
.sd-dist2-emoji { font-size: 1.05rem; width: 22px; text-align: center; flex-shrink: 0; }
|
||
.sd-dist2-lbl { font-size: 0.82rem; font-weight: 700; color: var(--tx); min-width: 76px; }
|
||
.sd-dist2-track { flex: 1; height: 12px; background: #f1f5f9; border-radius: 6px; overflow: hidden; }
|
||
.sd-dist2-fill { height: 100%; border-radius: 6px; }
|
||
.sd-dist2-val { font-size: 0.82rem; font-weight: 800; color: var(--tx); min-width: 30px; text-align: right; }
|
||
.sd-dist2-pct { font-size: 0.72rem; color: var(--mu); min-width: 38px; text-align: right; }
|
||
</style>
|
||
|
||
{{-- Kalender Visual --}}
|
||
<div class="sd-cal-wrap">
|
||
<div class="sd-cal-title">
|
||
<i class="fas fa-calendar-alt" style="color:var(--m);"></i>
|
||
Kalender Kehadiran
|
||
<span style="margin-left:auto;font-size:0.71rem;color:var(--mu);font-weight:500;background:var(--bg);border:1px solid var(--br);padding:3px 9px;border-radius:7px;">
|
||
{{ $dateFrom->locale('id')->isoFormat('D MMM') }} – {{ $dateTo->locale('id')->isoFormat('D MMM YYYY') }}
|
||
</span>
|
||
</div>
|
||
<div class="sd-cal-hint">
|
||
<i class="fas fa-lightbulb" style="color:var(--m);flex-shrink:0;"></i>
|
||
Tiap kotak = 1 hari dalam periode filter. Warna = status absensimu. Kotak abu-abu = tidak ada catatan absensi di hari itu.
|
||
</div>
|
||
|
||
<div class="sd-legend">
|
||
@foreach($statusMeta as $sLabel => $sMeta)
|
||
<div class="sd-legend-item">
|
||
<div class="sd-legend-dot" style="background:{{ $sMeta['dot'] }};"></div> {{ $sLabel }}
|
||
</div>
|
||
@endforeach
|
||
<div class="sd-legend-item">
|
||
<div class="sd-legend-dot" style="background:#e2e8f0;"></div> Tidak ada catatan
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sd-cal-grid">
|
||
@php $cursor = $dateFrom->copy(); @endphp
|
||
@while($cursor->lte($dateTo))
|
||
@php
|
||
$tgl = $cursor->format('Y-m-d');
|
||
$status = $absensiByDate[$tgl] ?? null;
|
||
$meta = $status ? ($statusMeta[$status] ?? null) : null;
|
||
$hariId = $hariSingkat[$cursor->format('l')] ?? substr($cursor->format('l'), 0, 3);
|
||
$tglFmt = $cursor->format('d/m');
|
||
$isToday = $tgl === \Carbon\Carbon::today()->format('Y-m-d');
|
||
@endphp
|
||
@if($meta)
|
||
<div class="sd-cal-slot {{ $isToday ? 'is-today' : '' }}"
|
||
style="background:{{ $meta['bg'] }};border-color:{{ $meta['border'] }};color:{{ $meta['text'] }};"
|
||
title="{{ $cursor->locale('id')->isoFormat('dddd, D MMMM YYYY') }} — {{ $status }}">
|
||
<span class="sd-cal-slot-icon">{{ $meta['icon'] }}</span>
|
||
<span class="sd-cal-slot-date">{{ $tglFmt }}</span>
|
||
<span class="sd-cal-slot-day">{{ $hariId }}</span>
|
||
<span class="sd-cal-slot-lbl">{{ $status }}</span>
|
||
</div>
|
||
@else
|
||
<div class="sd-cal-slot empty {{ $isToday ? 'is-today' : '' }}"
|
||
title="{{ $cursor->locale('id')->isoFormat('dddd, D MMMM YYYY') }} — Tidak ada catatan">
|
||
<span class="sd-cal-slot-icon" style="color:#cbd5e1;">–</span>
|
||
<span class="sd-cal-slot-date" style="color:#94a3b8;">{{ $tglFmt }}</span>
|
||
<span class="sd-cal-slot-day" style="color:#94a3b8;">{{ $hariId }}</span>
|
||
<span class="sd-cal-slot-lbl" style="color:#d1d5db;">Belum</span>
|
||
</div>
|
||
@endif
|
||
@php $cursor->addDay(); @endphp
|
||
@endwhile
|
||
</div>
|
||
</div>
|
||
|
||
{{-- Distribusi Status --}}
|
||
<div class="sd-dist2-wrap">
|
||
<div class="sd-dist2-title">
|
||
<i class="fas fa-align-left" style="color:#f5a623;"></i>
|
||
Perincian Status
|
||
<span style="margin-left:auto;font-size:0.71rem;color:var(--mu);font-weight:500;background:var(--bg);border:1px solid var(--br);padding:3px 9px;border-radius:7px;">{{ $totalAbsensi }} total sesi tercatat</span>
|
||
</div>
|
||
@if($totalAbsensi > 0)
|
||
<div class="sd-dist2-list">
|
||
@foreach($distItems as $d)
|
||
@if($d['val'] > 0 || in_array($d['label'], ['Hadir','Alpa']))
|
||
<div class="sd-dist2-row">
|
||
<div class="sd-dist2-emoji">{{ $d['emoji'] }}</div>
|
||
<div class="sd-dist2-lbl">{{ $d['label'] }}</div>
|
||
<div class="sd-dist2-track">
|
||
<div class="sd-dist2-fill" style="width:{{ round($d['val']/$totalAbsensi*100) }}%;background:{{ $d['color'] }};"></div>
|
||
</div>
|
||
<div class="sd-dist2-val">{{ $d['val'] }}×</div>
|
||
<div class="sd-dist2-pct">{{ round($d['val']/$totalAbsensi*100) }}%</div>
|
||
</div>
|
||
@endif
|
||
@endforeach
|
||
</div>
|
||
@else
|
||
<div class="sd-empty"><i class="fas fa-inbox"></i><p>Belum ada data absensi.</p></div>
|
||
@endif
|
||
</div>
|
||
|
||
{{-- ── TABEL RIWAYAT ── --}}
|
||
<div class="sd-table-wrap">
|
||
|
||
{{-- Header tabel --}}
|
||
<div class="sd-table-header" style="flex-wrap:wrap;gap:8px;">
|
||
<div class="sd-table-header-title">
|
||
<i class="fas fa-history" style="color:var(--m);"></i>
|
||
Rekap Kehadiran
|
||
</div>
|
||
{{-- Periode aktif — jelas terlihat --}}
|
||
<div style="display:flex;align-items:center;gap:6px;flex-wrap:wrap;flex:1;">
|
||
<span style="
|
||
background:#e8f7f2; color:#1a7a5e;
|
||
border:1px solid #a7f3d0;
|
||
padding:4px 11px; border-radius:20px;
|
||
font-size:0.76rem; font-weight:700;
|
||
display:inline-flex; align-items:center; gap:5px;
|
||
">
|
||
<i class="fas fa-calendar-check"></i>
|
||
{{ $dateFrom->locale('id')->isoFormat('D MMM YYYY') }}
|
||
–
|
||
{{ $dateTo->locale('id')->isoFormat('D MMM YYYY') }}
|
||
</span>
|
||
@php
|
||
$presetLabels = [
|
||
'this_week' => 'Minggu Ini',
|
||
'this_month' => 'Bulan Ini',
|
||
'last_month' => 'Bulan Lalu',
|
||
'last_3m' => '3 Bulan Terakhir',
|
||
'all' => 'Semua Data',
|
||
'custom' => 'Kustom',
|
||
];
|
||
@endphp
|
||
@if(isset($presetLabels[$preset]))
|
||
<span style="font-size:0.73rem;color:var(--mu);">
|
||
({{ $presetLabels[$preset] }})
|
||
</span>
|
||
@endif
|
||
</div>
|
||
<span class="sd-count-badge">{{ $riwayats->total() }} sesi</span>
|
||
</div>
|
||
|
||
{{-- Sub-info: kalimat penjelas --}}
|
||
<div style="
|
||
padding:9px 16px;
|
||
background:#f8fafc;
|
||
border-bottom:1px solid var(--br);
|
||
font-size:0.78rem; color:var(--mu);
|
||
display:flex; align-items:center; gap:6px;
|
||
">
|
||
<i class="fas fa-info-circle" style="color:var(--m);"></i>
|
||
Menampilkan <strong style="color:var(--tx);">{{ $riwayats->total() }} catatan absensi</strong>
|
||
kegiatan <strong style="color:var(--tx);">{{ $kegiatan->nama_kegiatan }}</strong>
|
||
dari tanggal <strong style="color:var(--tx);">{{ $dateFrom->locale('id')->isoFormat('D MMM YYYY') }}</strong>
|
||
sampai <strong style="color:var(--tx);">{{ $dateTo->locale('id')->isoFormat('D MMM YYYY') }}</strong>.
|
||
@if($riwayats->hasPages())
|
||
Halaman {{ $riwayats->currentPage() }} dari {{ $riwayats->lastPage() }}.
|
||
@endif
|
||
</div>
|
||
|
||
@if($riwayats->count() > 0)
|
||
<div style="overflow-x:auto;">
|
||
<table class="sd-table">
|
||
<thead>
|
||
<tr>
|
||
<th style="width:42px;">#</th>
|
||
<th>Tanggal</th>
|
||
<th>Jam Absen</th>
|
||
<th>Status</th>
|
||
<th>Cara Absen</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
@foreach($riwayats as $idx => $absensi)
|
||
@php
|
||
$statusLower = strtolower($absensi->status);
|
||
$rowCls = $statusLower === 'alpa' ? 'row-alpa' : '';
|
||
$metode = $absensi->metode_absen ?? '';
|
||
$metodeLabel = $metode === 'Import_Mesin' ? 'Mesin' : ($metode ?: 'Manual');
|
||
$metodeIcon = $metode === 'RFID' ? 'id-card' : ($metode === 'Import_Mesin' ? 'desktop' : 'hand-pointer');
|
||
@endphp
|
||
<tr class="{{ $rowCls }}">
|
||
<td style="color:#9ca3af;font-size:0.74rem;text-align:center;">
|
||
{{ $riwayats->firstItem() + $idx }}
|
||
</td>
|
||
<td>
|
||
<div class="sd-date-main">
|
||
{{ \Carbon\Carbon::parse($absensi->tanggal)->format('d M Y') }}
|
||
</div>
|
||
<div class="sd-date-day">
|
||
{{ \Carbon\Carbon::parse($absensi->tanggal)->locale('id')->isoFormat('dddd') }}
|
||
</div>
|
||
</td>
|
||
<td>
|
||
@if($absensi->waktu_absen)
|
||
<span style="font-weight:700;color:var(--tx);font-size:0.9rem;">
|
||
{{ \Carbon\Carbon::parse($absensi->waktu_absen)->format('H:i') }}
|
||
</span>
|
||
<span style="font-size:0.7rem;color:var(--mu);display:block;">WIB</span>
|
||
@else
|
||
<span style="color:#d1d5db;font-size:0.8rem;">—</span>
|
||
@endif
|
||
</td>
|
||
<td>
|
||
<span class="sd-status {{ $statusLower }}">
|
||
@if($absensi->status === 'Hadir') <i class="fas fa-check"></i>
|
||
@elseif($absensi->status === 'Terlambat') <i class="fas fa-clock"></i>
|
||
@elseif($absensi->status === 'Izin') <i class="fas fa-info"></i>
|
||
@elseif($absensi->status === 'Sakit') <i class="fas fa-heartbeat"></i>
|
||
@elseif($absensi->status === 'Alpa') <i class="fas fa-times"></i>
|
||
@elseif($absensi->status === 'Pulang') <i class="fas fa-home"></i>
|
||
@endif
|
||
{{ $absensi->status }}
|
||
</span>
|
||
</td>
|
||
<td>
|
||
<span class="sd-metode">
|
||
<i class="fas fa-{{ $metodeIcon }}"></i> {{ $metodeLabel }}
|
||
</span>
|
||
</td>
|
||
</tr>
|
||
@endforeach
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div class="sd-pagination">
|
||
{{ $riwayats->appends(request()->query())->links() }}
|
||
</div>
|
||
@else
|
||
<div class="sd-empty">
|
||
<i class="fas fa-inbox"></i>
|
||
<p>Belum ada catatan absensi dalam periode ini.</p>
|
||
<p style="font-size:0.76rem;margin-top:4px;">
|
||
Periode aktif: <strong>{{ $dateFrom->locale('id')->isoFormat('D MMM YYYY') }} – {{ $dateTo->locale('id')->isoFormat('D MMM YYYY') }}</strong>.
|
||
Coba pilih periode yang lebih luas di filter atas.
|
||
</p>
|
||
</div>
|
||
@endif
|
||
</div>
|
||
|
||
<script>
|
||
function setPreset(val) {
|
||
document.querySelectorAll('.sd-pbtn').forEach(b => b.classList.remove('active'));
|
||
event.target.classList.add('active');
|
||
document.getElementById('hPreset').value = val;
|
||
document.getElementById('hDateFrom').value = '';
|
||
document.getElementById('hDateTo').value = '';
|
||
document.getElementById('filterForm').submit();
|
||
}
|
||
function setCustom() {
|
||
document.getElementById('hPreset').value = '';
|
||
document.getElementById('hDateFrom').value = document.getElementById('inpFrom').value;
|
||
document.getElementById('hDateTo').value = document.getElementById('inpTo').value;
|
||
document.querySelectorAll('.sd-pbtn').forEach(b => b.classList.remove('active'));
|
||
}
|
||
|
||
</script>
|
||
@endsection |