{{-- 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 &amp; 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
                    &nbsp;·&nbsp;
                    <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 &nbsp;·&nbsp; {{ $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