<x-app-layout title="Rekap Bulanan">

@push('styles')
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<style>
:root {
    --p:#4f46e5;--pd:#3730a3;--pl:#eef2ff;
    --ok:#059669;--okl:#ecfdf5;
    --err:#dc2626;--errl:#fef2f2;
    --warn:#d97706;--warnl:#fffbeb;
    --info:#0284c7;--infol:#e0f2fe;
    --txt:#0f172a;--mut:#64748b;--mut2:#94a3b8;
    --bdr:#e2e8f0;--bg:#f0f4ff;--wh:#ffffff;
    --sh:0 1px 3px rgba(0,0,0,.06),0 4px 16px rgba(0,0,0,.05);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Plus Jakarta Sans',sans-serif;background:var(--bg);color:var(--txt);}
.wrap{max-width:1200px;margin:0 auto;padding:28px 28px 60px;}

/* ── BACK BUTTON ── */
.btn-back-top{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--mut);text-decoration:none;margin-bottom:18px;padding:8px 16px;background:var(--wh);border:1.5px solid var(--bdr);border-radius:10px;transition:all .15s;}
.btn-back-top:hover{color:var(--p);border-color:rgba(79,70,229,.3);background:var(--pl);}
.btn-back-top svg{width:14px;height:14px;stroke:currentColor;fill:none;}

.pg-hd{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-bottom:22px;}
.pg-title{font-size:1.35rem;font-weight:900;color:var(--txt);letter-spacing:-.03em;}
.pg-sub{font-size:12.5px;color:var(--mut);font-weight:500;margin-top:3px;}
.hd-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}

.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:10px;font-size:13px;font-weight:700;font-family:inherit;cursor:pointer;text-decoration:none;border:none;transition:all .15s;white-space:nowrap;}
.btn svg{width:14px;height:14px;stroke:currentColor;fill:none;flex-shrink:0;}
.btn-print{background:var(--p);color:#fff;box-shadow:0 4px 14px rgba(79,70,229,.3);}
.btn-print:hover{background:var(--pd);transform:translateY(-1px);}
.btn-print svg{stroke:white;}
.btn-excel{background:#16a34a;color:#fff;box-shadow:0 4px 14px rgba(22,163,74,.3);}
.btn-excel:hover{background:#15803d;transform:translateY(-1px);}
.btn-excel svg{stroke:white;}

.filter-bar{background:var(--wh);border:1px solid var(--bdr);border-radius:16px;padding:14px 20px;margin-bottom:18px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;box-shadow:var(--sh);}
.filter-lbl{font-size:11px;font-weight:800;color:var(--mut2);text-transform:uppercase;letter-spacing:.07em;}
.filter-input{height:38px;padding:0 12px;border:1.5px solid var(--bdr);border-radius:9px;font-size:13px;font-weight:600;color:var(--txt);font-family:inherit;background:var(--wh);outline:none;transition:border-color .15s;}
.filter-input:focus{border-color:var(--p);}
.btn-filter{height:38px;padding:0 16px;border-radius:9px;background:var(--p);color:#fff;font-size:13px;font-weight:700;font-family:inherit;cursor:pointer;border:none;transition:all .15s;}
.btn-filter:hover{background:var(--pd);}

.sum-row{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:18px;}
.sum-card{background:var(--wh);border:1px solid var(--bdr);border-radius:16px;padding:16px 18px;box-shadow:var(--sh);display:flex;align-items:center;gap:12px;}
.sum-ico{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.sum-ico svg{width:18px;height:18px;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.sum-ico.sv{background:linear-gradient(135deg,#ede9fe,#ddd6fe);}
.sum-ico.ss{background:linear-gradient(135deg,#d1fae5,#a7f3d0);}
.sum-ico.sa{background:linear-gradient(135deg,#fef3c7,#fde68a);}
.sum-ico.sk{background:linear-gradient(135deg,#dbeafe,#bfdbfe);}
.sum-ico.sr{background:linear-gradient(135deg,#fee2e2,#fecaca);}
.sum-num{font-size:1.7rem;font-weight:900;letter-spacing:-.04em;line-height:1;}
.sum-lbl{font-size:11px;font-weight:600;color:var(--mut);margin-top:2px;}
.sum-num.cv{color:#6d28d9;}.sum-num.cs{color:var(--ok);}.sum-num.ca{color:var(--warn);}.sum-num.ck{color:var(--info);}.sum-num.cr{color:var(--err);}

.panel{background:var(--wh);border:1px solid var(--bdr);border-radius:20px;overflow:hidden;box-shadow:var(--sh);}
.panel-hd{padding:15px 20px;border-bottom:1px solid #f1f5f9;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.panel-hd-title{font-size:13.5px;font-weight:800;color:var(--txt);}
.panel-hd-badge{font-size:11px;font-weight:700;background:#f1f5f9;color:var(--mut);border-radius:100px;padding:3px 10px;}

.tbl-wrap{overflow-x:auto;}
.tbl{width:100%;border-collapse:collapse;font-size:13px;}
.tbl thead tr{background:#fafbff;}
.tbl thead th{padding:10px 12px;text-align:left;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mut2);border-bottom:1px solid #f1f5f9;white-space:nowrap;}
.tbl thead th.num{text-align:center;}
.tbl tbody tr{border-bottom:1px solid #f8f9fc;transition:background .12s;}
.tbl tbody tr:last-child{border-bottom:none;}
.tbl tbody tr:hover{background:#fafbff;}
.tbl td{padding:11px 12px;vertical-align:middle;}
.tbl td.num{text-align:center;font-weight:700;}

.av-cell{display:flex;align-items:center;gap:9px;}
.av{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:800;color:#fff;flex-shrink:0;}
.av-name{font-size:13px;font-weight:700;color:var(--txt);}
.av-nip{font-size:11px;color:var(--mut2);font-weight:500;}

.badge{display:inline-flex;align-items:center;justify-content:center;padding:2px 10px;border-radius:100px;font-size:11.5px;font-weight:700;min-width:32px;}
.b-ok{background:var(--okl);color:#065f46;}
.b-warn{background:var(--warnl);color:#92400e;}
.b-err{background:var(--errl);color:#991b1b;}
.b-info{background:var(--infol);color:#075985;}
.b-muted{background:#f1f5f9;color:var(--mut);}

.prog-wrap{display:flex;align-items:center;gap:8px;justify-content:center;}
.prog{width:64px;height:6px;background:#f1f5f9;border-radius:100px;overflow:hidden;}
.prog-fill{height:100%;border-radius:100px;}
.prog-pct{font-size:11.5px;font-weight:700;min-width:34px;}

.empty{padding:52px 20px;text-align:center;}
.empty svg{stroke:#e2e8f0;margin-bottom:12px;}
.empty p{font-size:13px;color:var(--mut2);font-weight:600;}

@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.fu1{animation:fadeUp .35s ease both;}
.fu2{animation:fadeUp .35s .06s ease both;}
.fu3{animation:fadeUp .35s .12s ease both;}

/* ── MOBILE CARD LIST (pengganti tabel di mobile) ── */
.mobile-list{display:none;flex-direction:column;gap:10px;padding:14px;}
.mob-card{background:var(--wh);border:1px solid var(--bdr);border-radius:14px;padding:14px 16px;box-shadow:0 1px 4px rgba(0,0,0,.04);}
.mob-card-top{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.mob-card-info{flex:1;}
.mob-card-name{font-size:13.5px;font-weight:800;color:var(--txt);}
.mob-card-meta{font-size:11px;color:var(--mut2);font-weight:500;margin-top:2px;}
.mob-pct-badge{font-size:12px;font-weight:800;padding:4px 10px;border-radius:100px;}
.mob-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:10px;}
.mob-stat{display:flex;flex-direction:column;align-items:center;gap:3px;}
.mob-stat-lbl{font-size:9px;font-weight:700;color:var(--mut2);text-transform:uppercase;letter-spacing:.05em;}
.mob-prog-row{display:flex;align-items:center;gap:8px;}
.mob-prog{flex:1;height:5px;background:#f1f5f9;border-radius:100px;overflow:hidden;}
.mob-prog-fill{height:100%;border-radius:100px;}
.mob-prog-pct{font-size:11px;font-weight:800;min-width:34px;text-align:right;}

/* ── PRINT ── */
@media print {
    *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;}
    body{background:white!important;}
    .pg-hd,.filter-bar,.sum-row,.hd-actions,.btn-back-top,.btn-print,.btn-excel,
    .no-print,.mobile-list{display:none!important;}
    .wrap{padding:0!important;max-width:100%!important;}
    .panel{border:none!important;box-shadow:none!important;border-radius:0!important;}
    .panel-hd{border-bottom:2px solid #0f172a!important;padding:8px 0!important;}
    .tbl{font-size:10px!important;}
    .tbl thead th{font-size:8.5px!important;padding:6px 8px!important;}
    .tbl td{padding:6px 8px!important;}
    .prog{display:none!important;}
    .prog-wrap{justify-content:center;}
    .av-nip{display:none;}
    .print-header{display:block!important;}
    @page{margin:1.5cm;size:A4 landscape;}
}

.print-header{display:none;margin-bottom:18px;padding-bottom:14px;border-bottom:2.5px solid #0f172a;}
.ph-top{display:flex;justify-content:space-between;align-items:flex-start;}
.ph-title{font-size:20px;font-weight:900;color:#0f172a;letter-spacing:-.03em;}
.ph-meta{font-size:11px;color:#475569;margin-top:4px;line-height:1.6;}
.ph-right{text-align:right;}
.ph-right .ph-instansi{font-size:14px;font-weight:800;color:#0f172a;}
.ph-right .ph-time{font-size:10px;color:#64748b;margin-top:3px;}
.ph-stats{display:flex;gap:24px;margin-top:14px;padding-top:12px;border-top:1px solid #e2e8f0;}
.ph-stat-item{text-align:center;}
.ph-stat-num{font-size:18px;font-weight:900;color:#0f172a;}
.ph-stat-lbl{font-size:9px;color:#64748b;text-transform:uppercase;letter-spacing:.06em;margin-top:1px;}

/* ── RESPONSIVE BREAKPOINTS ── */
@media(max-width:1000px){.sum-row{grid-template-columns:repeat(3,1fr);}}
@media(max-width:700px){
    .sum-row{grid-template-columns:repeat(2,1fr);}
    .wrap{padding:14px 14px 100px;}
    .hd-actions{width:100%;}
    .btn{flex:1;justify-content:center;}
    .pg-title{font-size:1.1rem;}
}
@media(max-width:600px){
    /* Sembunyikan tabel, tampilkan card list */
    .tbl-wrap{display:none!important;}
    .mobile-list{display:flex!important;}
    /* Filter bar menjadi kolom */
    .filter-bar{flex-direction:column;align-items:stretch;gap:10px;padding:14px;}
    .filter-input,.btn-filter{width:100%;}
    /* Summary jadi 2 kolom */
    .sum-row{grid-template-columns:1fr 1fr;}
    /* Back button di atas */
    .btn-back-top{width:100%;justify-content:center;margin-bottom:14px;}
}
@media(max-width:400px){
    .sum-row{grid-template-columns:1fr 1fr;}
    .sum-card{padding:12px 14px;}
    .sum-num{font-size:1.4rem;}
}
</style>
@endpush

@php
    $totalHadir     = $rekap->sum('hadir');
    $totalTepat     = $rekap->sum('tepat');
    $totalTerlambat = $rekap->sum('terlambat');
    $totalSakit     = $rekap->sum('sakit');
    $totalAlpha     = $rekap->sum('alpha');
    $avgPct         = $rekap->count() > 0 ? round($rekap->avg('pct')) : 0;
    $avatarColors   = ['#6d28d9','#0284c7','#059669','#d97706','#dc2626','#475569','#0891b2','#7c3aed'];
@endphp

<div class="wrap">

{{-- TOMBOL KEMBALI --}}
<a href="{{ url()->previous() }}" class="btn-back-top fu1">
    <svg viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
    Kembali
</a>

{{-- HEADER --}}
<div class="pg-hd fu1">
    <div>
        <div class="pg-title">Rekap Absensi Bulanan</div>
        <div class="pg-sub">{{ $periodeLabel }} · {{ $hariKerja }} hari kerja · {{ $rekap->count() }} karyawan</div>
    </div>
    <div class="hd-actions no-print">
        <button onclick="cetakPDF()" class="btn btn-print">
            <svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 6 2 18 2 18 9"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><rect x="6" y="14" width="12" height="8"/></svg>
            Cetak PDF
        </button>
        <button onclick="eksporExcel()" class="btn btn-excel">
            <svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
            Ekspor Excel
        </button>
    </div>
</div>

{{-- PRINT HEADER --}}
<div class="print-header">
    <div class="ph-top">
        <div>
            <div class="ph-title">Rekap Absensi Bulanan</div>
            <div class="ph-meta">Periode: {{ $periodeLabel }} &bull; Hari Kerja: {{ $hariKerja }} hari &bull; Total Karyawan: {{ $rekap->count() }}</div>
        </div>
        <div class="ph-right">
            <div class="ph-instansi">{{ $instansi->nama_instansi ?? 'Instansi' }}</div>
            <div class="ph-time" id="print-time"></div>
        </div>
    </div>
</div>

{{-- FILTER --}}
<div class="filter-bar fu2 no-print">
    <span class="filter-lbl">Filter</span>
    <form method="GET" action="{{ route('instansi.rekap.index') }}" style="display:contents;">
        <select name="bulan" class="filter-input">
            @foreach(range(1,12) as $m)
                <option value="{{ $m }}" {{ $bulan == $m ? 'selected' : '' }}>
                    {{ \Carbon\Carbon::create()->month($m)->isoFormat('MMMM') }}
                </option>
            @endforeach
        </select>
        <select name="tahun" class="filter-input">
            @foreach(range(date('Y'), date('Y')-4) as $y)
                <option value="{{ $y }}" {{ $tahun == $y ? 'selected' : '' }}>{{ $y }}</option>
            @endforeach
        </select>
        <button type="submit" class="btn-filter">Tampilkan</button>
    </form>
</div>

{{-- SUMMARY CARDS --}}
<div class="sum-row fu2">
    <div class="sum-card">
        <div class="sum-ico sv">
            <svg viewBox="0 0 24 24" stroke="currentColor" style="stroke:#7c3aed;"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
        </div>
        <div><div class="sum-num cv">{{ $rekap->count() }}</div><div class="sum-lbl">Total Karyawan</div></div>
    </div>
    <div class="sum-card">
        <div class="sum-ico ss">
            <svg viewBox="0 0 24 24" stroke="currentColor" style="stroke:#059669;"><polyline points="9 11 12 14 22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
        </div>
        <div><div class="sum-num cs">{{ $totalHadir }}</div><div class="sum-lbl">Total Hadir</div></div>
    </div>
    <div class="sum-card">
        <div class="sum-ico sa">
            <svg viewBox="0 0 24 24" stroke="currentColor" style="stroke:#d97706;"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
        </div>
        <div><div class="sum-num ca">{{ $totalTerlambat }}</div><div class="sum-lbl">Terlambat</div></div>
    </div>
    <div class="sum-card">
        <div class="sum-ico sk">
            <svg viewBox="0 0 24 24" stroke="currentColor" style="stroke:#0284c7;"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12 19.79 19.79 0 0 1 1.61 3.18 2 2 0 0 1 3.6 1h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 8.1a16 16 0 0 0 6 6l.91-.91a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
        </div>
        <div><div class="sum-num ck">{{ $totalSakit }}</div><div class="sum-lbl">Sakit/Izin</div></div>
    </div>
    <div class="sum-card">
        <div class="sum-ico sr">
            <svg viewBox="0 0 24 24" stroke="currentColor" style="stroke:#dc2626;"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
        </div>
        <div><div class="sum-num cr">{{ $totalAlpha }}</div><div class="sum-lbl">Alpha</div></div>
    </div>
</div>

{{-- TABLE PANEL --}}
<div class="panel fu3">
    <div class="panel-hd">
        <span class="panel-hd-title">Data Rekap Karyawan</span>
        <span class="panel-hd-badge">{{ $rekap->count() }} karyawan</span>
    </div>

    {{-- DESKTOP TABLE --}}
    <div class="tbl-wrap">
        <table class="tbl" id="tbl-rekap">
            <thead>
                <tr>
                    <th style="width:32px;">#</th>
                    <th>Karyawan</th>
                    <th>Jabatan</th>
                    <th class="num">Hadir</th>
                    <th class="num">Tepat</th>
                    <th class="num">Terlambat</th>
                    <th class="num">Sakit</th>
                    <th class="num">Alpha</th>
                    <th class="num">Kehadiran</th>
                    <th class="num">Status</th>
                </tr>
            </thead>
            <tbody>
                @forelse($rekap as $i => $r)
                @php $sakit = $r['sakit'] ?? 0; @endphp
                <tr>
                    <td style="color:var(--mut2);font-size:12px;font-weight:700;">{{ $i+1 }}</td>
                    <td>
                        <div class="av-cell">
                            <div class="av" style="background:{{ $avatarColors[$i % count($avatarColors)] }};">
                                {{ mb_strtoupper(mb_substr($r['nama'],0,2)) }}
                            </div>
                            <div>
                                <div class="av-name">{{ $r['nama'] }}</div>
                                <div class="av-nip">{{ $r['nip'] }}</div>
                            </div>
                        </div>
                    </td>
                    <td style="font-size:12px;color:var(--mut);">{{ $r['jabatan'] }}</td>
                    <td class="num"><span class="badge {{ $r['hadir'] > 0 ? 'b-ok' : 'b-muted' }}">{{ $r['hadir'] }}</span></td>
                    <td class="num"><span class="badge {{ $r['tepat'] > 0 ? 'b-ok' : 'b-muted' }}">{{ $r['tepat'] }}</span></td>
                    <td class="num"><span class="badge {{ $r['terlambat'] > 0 ? 'b-warn' : 'b-muted' }}">{{ $r['terlambat'] }}</span></td>
                    <td class="num"><span class="badge {{ $sakit > 0 ? 'b-info' : 'b-muted' }}">{{ $sakit }}</span></td>
                    <td class="num"><span class="badge {{ $r['alpha'] > 0 ? 'b-err' : 'b-muted' }}">{{ $r['alpha'] }}</span></td>
                    <td class="num">
                        <div class="prog-wrap">
                            <div class="prog"><div class="prog-fill" style="width:{{ $r['pct'] }}%;background:{{ $r['pct'] >= 80 ? '#059669' : ($r['pct'] >= 60 ? '#d97706' : '#dc2626') }};"></div></div>
                            <span class="prog-pct" style="color:{{ $r['pct'] >= 80 ? 'var(--ok)' : ($r['pct'] >= 60 ? 'var(--warn)' : 'var(--err)') }};">{{ $r['pct'] }}%</span>
                        </div>
                    </td>
                    <td class="num">
                        @if($r['pct'] >= 90)<span class="badge b-ok">Baik</span>
                        @elseif($r['pct'] >= 75)<span class="badge b-warn">Cukup</span>
                        @else<span class="badge b-err">Kurang</span>
                        @endif
                    </td>
                </tr>
                @empty
                <tr><td colspan="10"><div class="empty">
                    <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"><path d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2"/><rect x="9" y="3" width="6" height="4" rx="1"/></svg>
                    <p>Belum ada data absensi untuk periode ini</p>
                </div></td></tr>
                @endforelse
            </tbody>
            @if($rekap->count() > 0)
            <tfoot>
                <tr style="background:#fafbff;border-top:1.5px solid var(--bdr);">
                    <td colspan="3" style="padding:11px 12px;font-size:12px;font-weight:800;color:var(--txt);">TOTAL / RATA-RATA</td>
                    <td class="num" style="padding:11px 12px;"><span class="badge b-ok">{{ $totalHadir }}</span></td>
                    <td class="num" style="padding:11px 12px;"><span class="badge b-ok">{{ $totalTepat }}</span></td>
                    <td class="num" style="padding:11px 12px;"><span class="badge {{ $totalTerlambat > 0 ? 'b-warn' : 'b-muted' }}">{{ $totalTerlambat }}</span></td>
                    <td class="num" style="padding:11px 12px;"><span class="badge {{ $totalSakit > 0 ? 'b-info' : 'b-muted' }}">{{ $totalSakit }}</span></td>
                    <td class="num" style="padding:11px 12px;"><span class="badge {{ $totalAlpha > 0 ? 'b-err' : 'b-muted' }}">{{ $totalAlpha }}</span></td>
                    <td class="num" style="padding:11px 12px;"><span style="font-size:13px;font-weight:800;color:var(--p);">{{ $avgPct }}%</span></td>
                    <td></td>
                </tr>
            </tfoot>
            @endif
        </table>
    </div>

    {{-- MOBILE CARD LIST --}}
    <div class="mobile-list">
        @forelse($rekap as $i => $r)
        @php $sakit = $r['sakit'] ?? 0; $color = $avatarColors[$i % count($avatarColors)]; @endphp
        <div class="mob-card">
            <div class="mob-card-top">
                <div class="av" style="background:{{ $color }};width:38px;height:38px;border-radius:10px;font-size:.8rem;">
                    {{ mb_strtoupper(mb_substr($r['nama'],0,2)) }}
                </div>
                <div class="mob-card-info">
                    <div class="mob-card-name">{{ $r['nama'] }}</div>
                    <div class="mob-card-meta">{{ $r['nip'] }} · {{ $r['jabatan'] }}</div>
                </div>
                <span class="mob-pct-badge {{ $r['pct'] >= 90 ? 'b-ok' : ($r['pct'] >= 75 ? 'b-warn' : 'b-err') }}">
                    @if($r['pct'] >= 90)Baik @elseif($r['pct'] >= 75)Cukup @else Kurang @endif
                </span>
            </div>
            <div class="mob-stats">
                <div class="mob-stat">
                    <span class="badge {{ $r['hadir'] > 0 ? 'b-ok' : 'b-muted' }}">{{ $r['hadir'] }}</span>
                    <span class="mob-stat-lbl">Hadir</span>
                </div>
                <div class="mob-stat">
                    <span class="badge {{ $r['tepat'] > 0 ? 'b-ok' : 'b-muted' }}">{{ $r['tepat'] }}</span>
                    <span class="mob-stat-lbl">Tepat</span>
                </div>
                <div class="mob-stat">
                    <span class="badge {{ $r['terlambat'] > 0 ? 'b-warn' : 'b-muted' }}">{{ $r['terlambat'] }}</span>
                    <span class="mob-stat-lbl">Lambat</span>
                </div>
                <div class="mob-stat">
                    <span class="badge {{ $sakit > 0 ? 'b-info' : 'b-muted' }}">{{ $sakit }}</span>
                    <span class="mob-stat-lbl">Sakit</span>
                </div>
                <div class="mob-stat">
                    <span class="badge {{ $r['alpha'] > 0 ? 'b-err' : 'b-muted' }}">{{ $r['alpha'] }}</span>
                    <span class="mob-stat-lbl">Alpha</span>
                </div>
            </div>
            <div class="mob-prog-row">
                <div class="mob-prog"><div class="mob-prog-fill" style="width:{{ $r['pct'] }}%;background:{{ $r['pct'] >= 80 ? '#059669' : ($r['pct'] >= 60 ? '#d97706' : '#dc2626') }};"></div></div>
                <span class="mob-prog-pct" style="color:{{ $r['pct'] >= 80 ? 'var(--ok)' : ($r['pct'] >= 60 ? 'var(--warn)' : 'var(--err)') }};">{{ $r['pct'] }}%</span>
            </div>
        </div>
        @empty
        <div class="empty" style="padding:40px 20px;">
            <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" style="stroke:#e2e8f0;margin-bottom:12px;display:block;margin-left:auto;margin-right:auto;"><path d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2"/><rect x="9" y="3" width="6" height="4" rx="1"/></svg>
            <p style="font-size:13px;color:var(--mut2);font-weight:600;text-align:center;">Belum ada data absensi untuk periode ini</p>
        </div>
        @endforelse
    </div>
</div>

</div>

@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
<script>
function cetakPDF() {
    const now = new Date();
    document.getElementById('print-time').textContent =
        'Dicetak: ' + now.toLocaleDateString('id-ID', { day:'numeric', month:'long', year:'numeric' })
        + ', ' + now.toLocaleTimeString('id-ID', { hour:'2-digit', minute:'2-digit' });
    window.print();
}
function eksporExcel() {
    const instansi = "{{ $instansi->nama_instansi ?? 'Instansi' }}";
    const periode  = "{{ $periodeLabel }}";
    const hariKerja = "{{ $hariKerja }}";
    const tbl = document.getElementById('tbl-rekap');
    const rows = tbl.querySelectorAll('tbody tr');
    const headers = ['No','NIP','Nama','Jabatan','Hadir','Tepat Waktu','Terlambat','Sakit','Tidak Hadir','% Kehadiran','Keterangan'];
    const data = [];
    data.push([instansi]);
    data.push(['Rekap Absensi Bulanan']);
    data.push(['Periode: ' + periode + '   |   Hari Kerja: ' + hariKerja + ' hari']);
    data.push([]);
    data.push(headers);
    rows.forEach((tr, idx) => {
        const cells = tr.querySelectorAll('td');
        if (cells.length < 9) return;
        const nip  = tr.querySelector('.av-nip')?.textContent?.trim() ?? '';
        const nama = tr.querySelector('.av-name')?.textContent?.trim() ?? '';
        const row = [idx + 1, nip, nama, cells[2].textContent.trim(), cells[3].textContent.trim(), cells[4].textContent.trim(), cells[5].textContent.trim(), cells[6].textContent.trim(), cells[7].textContent.trim(), cells[8].textContent.trim(), cells[9].textContent.trim()];
        data.push(row);
    });
    data.push([]);
    data.push(['', '', 'TOTAL / RATA-RATA', '', "{{ $totalHadir }}", "{{ $totalTepat }}", "{{ $totalTerlambat }}", "{{ $totalSakit }}", "{{ $totalAlpha }}", "{{ $avgPct }}%", '']);
    const ws = XLSX.utils.aoa_to_sheet(data);
    ws['!cols'] = [{wch:5},{wch:16},{wch:26},{wch:22},{wch:8},{wch:13},{wch:11},{wch:8},{wch:12},{wch:14},{wch:12}];
    ws['!merges'] = [{s:{r:0,c:0},e:{r:0,c:10}},{s:{r:1,c:0},e:{r:1,c:10}},{s:{r:2,c:0},e:{r:2,c:10}}];
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, 'Rekap Absensi');
    XLSX.writeFile(wb, 'rekap-absensi-' + "{{ $bulan }}" + '.xlsx');
}
</script>
@endpush

</x-app-layout>