<x-app-layout title="Dashboard Super Admin">

@push('styles')
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<style>
.content, .content * { font-family: 'Inter', sans-serif !important; }

/* ══ HERO ══ */
.hero {
    background: linear-gradient(135deg, #2e1065 0%, #4c1d95 45%, #5b21b6 100%);
    border-radius: 20px;
    padding: 28px 32px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(91,33,182,.35);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.hero-orb {
    position: absolute; border-radius: 50%; pointer-events: none; filter: blur(70px);
}
.hero-orb-1 { width:320px; height:320px; top:-120px; right:-80px;  background:rgba(139,92,246,.25); }
.hero-orb-2 { width:180px; height:180px; bottom:-70px; right:200px; background:rgba(196,181,253,.12); }
.hero-orb-3 { width:100px; height:100px; top:10px; right:320px;    background:rgba(255,255,255,.05); filter:blur(30px); }

.hero-left  { position:relative; z-index:1; }
.hero-right { position:relative; z-index:1; display:flex; gap:12px; flex-shrink:0; }

.hero-badge {
    display:inline-flex; align-items:center; gap:6px;
    background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2);
    border-radius:100px; padding:4px 12px; margin-bottom:12px;
    font-size:10.5px; font-weight:800; color:rgba(255,255,255,.75);
    text-transform:uppercase; letter-spacing:.1em;
}
.hero-badge svg { width:10px; height:10px; stroke:rgba(255,255,255,.6); }

.hero-title {
    font-size:1.7rem; font-weight:900; color:#fff;
    letter-spacing:-.03em; line-height:1.2; margin-bottom:16px;
}
.hero-title span { color:#c4b5fd; }

.hero-pills { display:flex; gap:8px; flex-wrap:wrap; }
.hpill {
    display:inline-flex; align-items:center; gap:6px;
    background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15);
    border-radius:8px; padding:6px 12px;
    font-size:11.5px; font-weight:700; color:rgba(255,255,255,.85);
}
.hpill svg { width:13px; height:13px; stroke:rgba(255,255,255,.7); flex-shrink:0; }
.hpill.green { background:rgba(52,211,153,.18); border-color:rgba(52,211,153,.3); color:#6ee7b7; }
.hpill.green svg { stroke:#6ee7b7; }

.hero-stat {
    background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15);
    border-radius:14px; padding:14px 20px; text-align:center; min-width:80px;
}
.hero-stat-n { font-size:1.9rem; font-weight:900; color:#fff; letter-spacing:-.04em; line-height:1; }
.hero-stat-l { font-size:10px; font-weight:700; color:rgba(255,255,255,.5); text-transform:uppercase; letter-spacing:.08em; margin-top:5px; }

/* ══ KPI ══ */
.kpi-row {
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:14px; margin-bottom:24px;
}
.kpi {
    background:#fff; border:1px solid #e8edf5; border-radius:16px;
    padding:20px; position:relative; overflow:hidden;
    box-shadow:0 1px 4px rgba(0,0,0,.04);
    transition:transform .2s, box-shadow .2s;
}
.kpi:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,.09); }
.kpi::before {
    content:''; position:absolute; top:0; left:0; right:0; height:3px; border-radius:16px 16px 0 0;
}
.kpi.k-violet::before { background:linear-gradient(90deg,#6d28d9,#8b5cf6); }
.kpi.k-sky::before    { background:linear-gradient(90deg,#0284c7,#38bdf8); }
.kpi.k-amber::before  { background:linear-gradient(90deg,#d97706,#fbbf24); }

.kpi-top { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:16px; }
.kpi-ico { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; }
.kpi-ico svg { width:22px; height:22px; }
.kpi-ico.k-violet { background:linear-gradient(135deg,#ede9fe,#ddd6fe); }
.kpi-ico.k-sky    { background:linear-gradient(135deg,#e0f2fe,#bae6fd); }
.kpi-ico.k-amber  { background:linear-gradient(135deg,#fef3c7,#fde68a); }

.kpi-tag { font-size:10px; font-weight:800; padding:3px 9px; border-radius:6px; }
.kpi-tag.t-v { background:#ede9fe; color:#5b21b6; }
.kpi-tag.t-s { background:#e0f2fe; color:#0369a1; }
.kpi-tag.t-a { background:#fef9c3; color:#92400e; }

.kpi-num { font-size:2.4rem; font-weight:900; color:#0f172a; line-height:1; margin-bottom:4px; letter-spacing:-.04em; }
.kpi-lbl { font-size:12.5px; font-weight:600; color:#64748b; }

/* ══ SECTION HEADER ══ */
.sec-hd { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.sec-hd-title { font-size:13.5px; font-weight:800; color:#0f172a; }
.sec-hd-link {
    font-size:12px; font-weight:700; color:#6d28d9; text-decoration:none;
    display:flex; align-items:center; gap:4px; transition:gap .15s;
}
.sec-hd-link:hover { gap:7px; }

/* ══ QUICK ACTIONS ══ */
.qa-grid {
    display:grid; grid-template-columns:repeat(4,1fr);
    gap:12px; margin-bottom:24px;
}
.qa {
    background:#fff; border:1px solid #e8edf5; border-radius:16px;
    padding:20px 14px; text-decoration:none; color:#0f172a;
    display:flex; flex-direction:column; align-items:center; gap:11px;
    box-shadow:0 1px 4px rgba(0,0,0,.04);
    transition:all .2s;
}
.qa:hover {
    transform:translateY(-4px);
    box-shadow:0 10px 28px rgba(109,40,217,.13);
    border-color:rgba(109,40,217,.2);
}
.qa-ico {
    width:50px; height:50px; border-radius:14px;
    display:flex; align-items:center; justify-content:center;
    transition:transform .2s;
}
.qa:hover .qa-ico { transform:scale(1.08); }
.qa-ico svg { width:22px; height:22px; }
.qa-ico.vi { background:linear-gradient(135deg,#8b5cf6,#6d28d9); }
.qa-ico.sk { background:linear-gradient(135deg,#38bdf8,#0284c7); }
.qa-ico.am { background:linear-gradient(135deg,#fbbf24,#d97706); }
.qa-ico.sl { background:linear-gradient(135deg,#94a3b8,#475569); }
.qa-lbl { font-size:11.5px; font-weight:700; color:#334155; text-align:center; }

/* ══ MAIN GRID ══ */
.main-grid {
    display:grid; grid-template-columns:1fr 310px;
    gap:20px; align-items:start;
}

/* ══ PANEL ══ */
.panel {
    background:#fff; border:1px solid #e8edf5;
    border-radius:18px; overflow:hidden;
    box-shadow:0 1px 4px rgba(0,0,0,.04);
}
.panel-hd {
    padding:15px 20px; border-bottom:1px solid #f1f5f9;
    display:flex; align-items:center; justify-content:space-between;
}
.panel-hd-title { font-size:13.5px; font-weight:800; color:#0f172a; }
.panel-hd-badge {
    font-size:11px; font-weight:700; background:#f1f5f9;
    color:#64748b; border-radius:100px; padding:3px 10px;
}

/* ══ TABLE ══ */
.itbl { width:100%; border-collapse:collapse; font-size:13px; }
.itbl thead tr { background:#fafbff; }
.itbl thead th {
    padding:10px 18px; text-align:left;
    font-size:10px; font-weight:800; letter-spacing:.1em;
    text-transform:uppercase; color:#94a3b8;
    border-bottom:1px solid #f1f5f9;
}
.itbl tbody tr { border-bottom:1px solid #f8f9fc; transition:background .12s; }
.itbl tbody tr:last-child { border-bottom:none; }
.itbl tbody tr:hover { background:#fafbff; }
.itbl tbody td { padding:13px 18px; vertical-align:middle; }

.icell { display:flex; align-items:center; gap:11px; }
.iav {
    width:38px; height:38px; border-radius:11px; flex-shrink:0;
    background:linear-gradient(135deg,#6d28d9,#8b5cf6);
    display:flex; align-items:center; justify-content:center;
    font-size:14px; font-weight:900; color:#fff;
}
.iname { font-size:13.5px; font-weight:700; color:#0f172a; }
.iaddr { font-size:11px; color:#94a3b8; font-weight:500; margin-top:1px; }

.nbadge {
    display:inline-flex; align-items:center; gap:5px;
    font-size:12.5px; font-weight:800; color:#6d28d9;
    background:#ede9fe; border-radius:8px; padding:4px 10px;
}
.nbadge svg { width:12px; height:12px; stroke:#7c3aed; }

.dot-on {
    display:inline-flex; align-items:center; gap:5px;
    font-size:11px; font-weight:700;
    color:#065f46; background:#dcfce7; border-radius:100px; padding:3px 10px;
}
.dot-on::before { content:''; width:6px; height:6px; border-radius:50%; background:#10b981; }

.tbl-btn {
    font-size:11.5px; font-weight:700; color:#6d28d9;
    text-decoration:none; padding:5px 12px;
    background:#ede9fe; border-radius:8px; white-space:nowrap;
    transition:background .15s;
}
.tbl-btn:hover { background:#ddd6fe; }

.empty-box { padding:48px 20px; text-align:center; }
.empty-box svg { stroke:#e2e8f0; margin-bottom:12px; }
.empty-box p { font-size:13px; color:#94a3b8; font-weight:600; }

.panel-ft { padding:13px 18px; border-top:1px solid #f1f5f9; text-align:right; }

/* ══ FEED ══ */
.fi {
    display:flex; align-items:flex-start; gap:12px;
    padding:13px 18px; border-bottom:1px solid #f8f9fc; transition:background .12s;
}
.fi:last-child { border-bottom:none; }
.fi:hover { background:#fafbff; }
.fi-ico {
    width:34px; height:34px; border-radius:10px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; margin-top:1px;
}
.fi-ico svg { width:15px; height:15px; }
.fi-ico.g { background:#dcfce7; }
.fi-ico.v { background:#ede9fe; }
.fi-ico.s { background:#e0f2fe; }
.fi-ico.a { background:#fef9c3; }
.fi-body { flex:1; min-width:0; }
.fi-lbl { font-size:12.5px; font-weight:700; color:#1e293b; }
.fi-sub { font-size:11px; color:#94a3b8; margin-top:2px; font-weight:500; }
.fi-time { font-size:10px; font-weight:700; color:#cbd5e1; white-space:nowrap; padding-top:2px; }

/* ══ RESPONSIVE ══ */
@media (max-width:1100px) { .main-grid { grid-template-columns:1fr; } }
@media (max-width:900px)  { .hero-right { display:none; } .kpi-row { grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px)  { .kpi-row { grid-template-columns:repeat(2,1fr); gap:10px; } .qa-grid { grid-template-columns:repeat(2,1fr); } .hero { padding:22px 18px; } .hero-title { font-size:1.3rem; } }
</style>
@endpush

{{-- HERO --}}
<div class="hero">
    <div class="hero-orb hero-orb-1"></div>
    <div class="hero-orb hero-orb-2"></div>
    <div class="hero-orb hero-orb-3"></div>

    <div class="hero-left">
        <div class="hero-badge">
            <svg viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
            Super Admin
        </div>
        <h2 class="hero-title">
            <span>Pusat Kendali</span> Instansi
        </h2>
        <div class="hero-pills">
            <span class="hpill">
                <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                <span id="live-clock">--:--:--</span>
            </span>
            <span class="hpill">
                <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
                <span id="live-date">--</span>
            </span>
            <span class="hpill green">
                <svg viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
                Sistem Online
            </span>
        </div>
    </div>

    <div class="hero-right">
        <div class="hero-stat">
            <div class="hero-stat-n">{{ $totalInstansi ?? 0 }}</div>
            <div class="hero-stat-l">Instansi</div>
        </div>
        <div class="hero-stat">
            <div class="hero-stat-n">{{ $totalKaryawan ?? 0 }}</div>
            <div class="hero-stat-l">Karyawan</div>
        </div>
        <div class="hero-stat">
            <div class="hero-stat-n">{{ $totalAbsensiHariIni ?? 0 }}</div>
            <div class="hero-stat-l">Absen</div>
        </div>
    </div>
</div>

{{-- KPI --}}
<div class="kpi-row">
    <div class="kpi k-violet">
        <div class="kpi-top">
            <div class="kpi-ico k-violet">
                <svg viewBox="0 0 24 24" fill="none" stroke="#6d28d9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/>
                </svg>
            </div>
            <span class="kpi-tag t-v">Aktif</span>
        </div>
        <div class="kpi-num">{{ $totalInstansi ?? 0 }}</div>
        <div class="kpi-lbl">Total Instansi Terdaftar</div>
    </div>

    <div class="kpi k-sky">
        <div class="kpi-top">
            <div class="kpi-ico k-sky">
                <svg viewBox="0 0 24 24" fill="none" stroke="#0284c7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <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>
            <span class="kpi-tag t-s">Terdaftar</span>
        </div>
        <div class="kpi-num">{{ $totalKaryawan ?? 0 }}</div>
        <div class="kpi-lbl">Total Karyawan Semua Instansi</div>
    </div>

    <div class="kpi k-amber">
        <div class="kpi-top">
            <div class="kpi-ico k-amber">
                <svg viewBox="0 0 24 24" fill="none" stroke="#d97706" stroke-width="2" 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"/><path d="m9 12 2 2 4-4"/>
                </svg>
            </div>
            <span class="kpi-tag t-a">Hari Ini</span>
        </div>
        <div class="kpi-num">{{ $totalAbsensiHariIni ?? 0 }}</div>
        <div class="kpi-lbl">Absensi Masuk Hari Ini</div>
    </div>
</div>

{{-- QUICK ACTIONS --}}
<div class="sec-hd">
    <span class="sec-hd-title">Aksi Cepat</span>
</div>
<div class="qa-grid">
    <a href="{{ route('admin.instansi.index') }}" class="qa">
        <div class="qa-ico vi">
            <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/>
            </svg>
        </div>
        <span class="qa-lbl">Kelola Instansi</span>
    </a>
    <a href="{{ route('admin.instansi.create') }}" class="qa">
        <div class="qa-ico sk">
            <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
                <line x1="12" y1="12" x2="12" y2="18"/><line x1="9" y1="15" x2="15" y2="15"/>
            </svg>
        </div>
        <span class="qa-lbl">Tambah Instansi</span>
    </a>
    <a href="{{ route('admin.laporan.index') }}" class="qa">
        <div class="qa-ico am">
            <svg viewBox="0 0 24 24" fill="none" stroke="white" 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"/>
                <line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/>
            </svg>
        </div>
        <span class="qa-lbl">Laporan Global</span>
    </a>
    <a href="{{ route('admin.pengaturan.index') }}" class="qa">
        <div class="qa-ico sl">
            <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="3"/>
                <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
            </svg>
        </div>
        <span class="qa-lbl">Pengaturan Sistem</span>
    </a>
</div>

{{-- TABLE + FEED --}}
<div class="main-grid">

    {{-- INSTANSI TABLE --}}
    <div class="panel">
        <div class="panel-hd">
            <span class="panel-hd-title">Daftar Instansi Terdaftar</span>
            <span class="panel-hd-badge">{{ count($instansiList ?? []) }} Instansi</span>
        </div>
        <table class="itbl">
            <thead>
                <tr>
                    <th>Instansi</th>
                    <th>Karyawan</th>
                    <th>Status</th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody>
                @forelse($instansiList ?? [] as $inst)
                <tr>
                    <td>
                        <div class="icell">
                            <div class="iav">{{ strtoupper(substr($inst->nama_instansi, 0, 1)) }}</div>
                            <div>
                                <div class="iname">{{ $inst->nama_instansi }}</div>
                                <div class="iaddr">{{ $inst->alamat ?? 'Belum ada alamat' }}</div>
                            </div>
                        </div>
                    </td>
                    <td>
                        <div class="nbadge">
                            <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>
                            {{ $inst->karyawans_count ?? 0 }}
                        </div>
                    </td>
                    <td><span class="dot-on">Aktif</span></td>
                    <td><a href="{{ route('admin.instansi.show', $inst) }}" class="tbl-btn">Detail →</a></td>
                </tr>
                @empty
                <tr><td colspan="4">
                    <div class="empty-box">
                        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>
                        <p>Belum ada instansi terdaftar</p>
                    </div>
                </td></tr>
                @endforelse
            </tbody>
        </table>
        <div class="panel-ft">
            <a href="{{ route('admin.instansi.index') }}" class="sec-hd-link">Lihat semua instansi →</a>
        </div>
    </div>

    {{-- ACTIVITY FEED --}}
    <div class="panel">
        <div class="panel-hd">
            <span class="panel-hd-title">Aktivitas Terkini</span>
        </div>
        <div class="fi">
            <div class="fi-ico g"><svg viewBox="0 0 24 24" fill="none" stroke="#059669" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg></div>
            <div class="fi-body"><div class="fi-lbl">Sistem berjalan normal</div><div class="fi-sub">Semua layanan aktif & online</div></div>
            <span class="fi-time">Baru saja</span>
        </div>
        <div class="fi">
            <div class="fi-ico v"><svg viewBox="0 0 24 24" fill="none" stroke="#7c3aed" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg></div>
            <div class="fi-body"><div class="fi-lbl">{{ $totalInstansi ?? 0 }} instansi terdaftar</div><div class="fi-sub">Data tersinkronisasi</div></div>
            <span class="fi-time">Hari ini</span>
        </div>
        <div class="fi">
            <div class="fi-ico s"><svg viewBox="0 0 24 24" fill="none" stroke="#0284c7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg></div>
            <div class="fi-body"><div class="fi-lbl">{{ $totalKaryawan ?? 0 }} karyawan aktif</div><div class="fi-sub">Di seluruh instansi</div></div>
            <span class="fi-time">{{ now()->isoFormat('D MMM') }}</span>
        </div>
        <div class="fi">
            <div class="fi-ico a"><svg viewBox="0 0 24 24" fill="none" stroke="#d97706" stroke-width="2" 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"/><path d="m9 12 2 2 4-4"/></svg></div>
            <div class="fi-body"><div class="fi-lbl">{{ $totalAbsensiHariIni ?? 0 }} absensi masuk</div><div class="fi-sub">Rekap hari ini semua instansi</div></div>
            <span class="fi-time">{{ now()->format('H:i') }}</span>
        </div>
    </div>

</div>

@push('scripts')
<script>
function tick() {
    const now = new Date(), p = n => String(n).padStart(2,'0');
    const et = document.getElementById('live-clock');
    const ed = document.getElementById('live-date');
    if (et) et.textContent = `${p(now.getHours())}:${p(now.getMinutes())}:${p(now.getSeconds())}`;
    if (ed) ed.textContent = now.toLocaleDateString('id-ID',{weekday:'long',day:'numeric',month:'long',year:'numeric'});
}
tick(); setInterval(tick, 1000);
</script>
@endpush

</x-app-layout>