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