<x-app-layout title="Detail Karyawan">

@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 {
    --primary:#4f46e5;--primary-d:#3730a3;--primary-l:#eef2ff;
    --success:#059669;--success-l:#ecfdf5;
    --danger:#dc2626;--danger-l:#fef2f2;
    --warning:#d97706;--warning-l:#fffbeb;
    --sky:#0284c7;--sky-l:#e0f2fe;
    --text:#0f172a;--muted:#64748b;--muted2:#94a3b8;
    --border:#e2e8f0;--bg:#f0f4ff;--white:#ffffff;
    --sh:0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.05);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Plus Jakarta Sans',sans-serif;background:var(--bg);color:var(--text);}
.wrap{max-width:1100px;margin:0 auto;padding:28px 28px 52px;}

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

/* ── PROFILE HEADER ── */
.profile-header{background:linear-gradient(135deg,#1e1b4b 0%,#3730a3 50%,#4f46e5 100%);border-radius:22px;padding:28px 32px;display:flex;align-items:center;gap:24px;margin-bottom:22px;position:relative;overflow:hidden;box-shadow:0 12px 40px rgba(79,70,229,.3);}
.ph-orb{position:absolute;border-radius:50%;pointer-events:none;filter:blur(60px);}
.ph-orb-1{width:250px;height:250px;top:-80px;right:-40px;background:rgba(139,92,246,.3);}
.ph-orb-2{width:120px;height:120px;bottom:-40px;right:180px;background:rgba(196,181,253,.12);}
.ph-avatar{width:80px;height:80px;border-radius:20px;flex-shrink:0;background:rgba(255,255,255,.15);border:2px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:900;color:#fff;overflow:hidden;position:relative;z-index:1;}
.ph-avatar img{width:100%;height:100%;object-fit:cover;border-radius:18px;}
.ph-info{flex:1;position:relative;z-index:1;min-width:0;}
.ph-name{font-size:1.5rem;font-weight:900;color:#fff;letter-spacing:-.03em;margin-bottom:4px;}
.ph-jabatan{font-size:13px;font-weight:600;color:rgba(255,255,255,.65);margin-bottom:14px;}
.ph-pills{display:flex;gap:8px;flex-wrap:wrap;}
.ph-pill{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:8px;padding:5px 12px;font-size:11.5px;font-weight:700;color:rgba(255,255,255,.85);}
.ph-pill svg{width:12px;height:12px;stroke:rgba(255,255,255,.7);fill:none;flex-shrink:0;}
.ph-stats{display:flex;gap:10px;flex-shrink:0;position:relative;z-index:1;}
.ph-stat{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:14px 18px;text-align:center;min-width:74px;}
.ph-stat-n{font-size:1.7rem;font-weight:900;color:#fff;letter-spacing:-.04em;line-height:1;}
.ph-stat-l{font-size:9.5px;font-weight:700;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.08em;margin-top:4px;}

/* ── GRID ── */
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:22px;}

/* ── PANEL ── */
.panel{background:var(--white);border:1px solid var(--border);border-radius:20px;overflow:hidden;box-shadow:var(--sh);}
.panel-hd{padding:16px 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(--text);}
.panel-hd-badge{font-size:11px;font-weight:700;background:#f1f5f9;color:var(--muted);border-radius:100px;padding:3px 10px;}

/* ── INFO LIST ── */
.info-list{padding:4px 0;}
.info-row{display:flex;align-items:flex-start;gap:12px;padding:13px 20px;border-bottom:1px solid #f8f9fc;}
.info-row:last-child{border-bottom:none;}
.info-ico{width:32px;height:32px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;margin-top:1px;}
.info-ico svg{width:14px;height:14px;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.ico-v{background:#ede9fe;}.ico-v svg{stroke:#7c3aed;}
.ico-s{background:#dcfce7;}.ico-s svg{stroke:#059669;}
.ico-b{background:#dbeafe;}.ico-b svg{stroke:#0284c7;}
.ico-a{background:#fef9c3;}.ico-a svg{stroke:#d97706;}
.ico-r{background:#fee2e2;}.ico-r svg{stroke:#dc2626;}
.ico-sl{background:#f1f5f9;}.ico-sl svg{stroke:#64748b;}
.info-label{font-size:11px;font-weight:600;color:var(--muted2);margin-bottom:2px;}
.info-val{font-size:13.5px;font-weight:700;color:var(--text);}
.info-val.mono{font-family:monospace;font-size:13px;}

/* ── ABSENSI TABLE ── */
.abs-wrap{overflow-x:auto;}
.abs-table{width:100%;border-collapse:collapse;font-size:13px;}
.abs-table thead tr{background:#fafbff;}
.abs-table thead th{padding:10px 18px;text-align:left;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted2);border-bottom:1px solid #f1f5f9;white-space:nowrap;}
.abs-table tbody tr{border-bottom:1px solid #f8f9fc;transition:background .12s;}
.abs-table tbody tr:last-child{border-bottom:none;}
.abs-table tbody tr:hover{background:#fafbff;}
.abs-table tbody td{padding:11px 18px;vertical-align:middle;}
.status-dot{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:3px 10px;border-radius:100px;}
.sd-hadir{background:#dcfce7;color:#065f46;}
.sd-hadir::before{content:'';width:6px;height:6px;border-radius:50%;background:#10b981;}
.sd-terlambat{background:#fef9c3;color:#92400e;}
.sd-terlambat::before{content:'';width:6px;height:6px;border-radius:50%;background:#f59e0b;}
.sd-absen{background:#fee2e2;color:#991b1b;}
.sd-absen::before{content:'';width:6px;height:6px;border-radius:50%;background:#ef4444;}
.time-pill{font-size:12.5px;font-weight:700;}
.time-ok{color:var(--success);}
.time-late{color:var(--warning);}
.time-none{color:var(--muted2);}
.lokasi-cell{display:flex;align-items:center;gap:5px;}
.lokasi-cell svg{width:12px;height:12px;stroke:#0284c7;fill:none;flex-shrink:0;}
.lokasi-text{font-size:11.5px;font-weight:600;color:var(--muted);max-width:140px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.empty-tbl{padding:44px 20px;text-align:center;}
.empty-tbl svg{stroke:#e2e8f0;margin-bottom:12px;}
.empty-tbl p{font-size:13px;color:var(--muted2);font-weight:600;}

/* ── MOBILE ABS CARDS ── */
.abs-mobile{display:none;flex-direction:column;gap:8px;padding:12px;}
.abs-mob-card{background:#fafbff;border:1px solid var(--border);border-radius:12px;padding:12px 14px;}
.abs-mob-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;gap:6px;flex-wrap:wrap;}
.abs-mob-date{font-size:12.5px;font-weight:800;color:var(--text);}
.abs-mob-row{display:flex;gap:10px;font-size:12px;flex-wrap:wrap;}
.abs-mob-item{display:flex;align-items:center;gap:4px;color:var(--muted);}
.abs-mob-item svg{width:11px;height:11px;stroke:currentColor;fill:none;flex-shrink:0;}

/* ── ACTIONS ── */
.btn{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;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:13px;height:13px;stroke:currentColor;fill:none;}
.btn-edit{background:var(--primary-l);color:var(--primary);border:1.5px solid rgba(79,70,229,.2);}
.btn-edit:hover{background:var(--primary);color:#fff;}

/* ── ANIMATIONS ── */
@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;}

/* ── RESPONSIVE ── */
@media(max-width:900px){
    .detail-grid{grid-template-columns:1fr;}
    .ph-stats{display:grid;grid-template-columns:1fr 1fr;width:100%;}
}
@media(max-width:600px){
    .wrap{padding:14px 14px 80px;}
    .profile-header{flex-direction:column;align-items:flex-start;gap:16px;padding:20px;}
    .ph-avatar{width:64px;height:64px;border-radius:16px;font-size:22px;}
    .ph-name{font-size:1.2rem;}
    .ph-stats{display:grid;grid-template-columns:1fr 1fr;width:100%;}
    .abs-wrap{display:none!important;}
    .abs-mobile{display:flex!important;}
    .back-btn{width:100%;justify-content:center;}
    .panel-hd{gap:6px;}
}
</style>
@endpush

<div class="wrap">

{{-- TOMBOL KEMBALI --}}
<a href="{{ route('instansi.karyawan.index') }}" class="back-btn fu1">
    <svg viewBox="0 0 24 24" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
    Kembali ke Daftar Karyawan
</a>

{{-- PROFILE HEADER --}}
<div class="profile-header fu1">
    <div class="ph-orb ph-orb-1"></div>
    <div class="ph-orb ph-orb-2"></div>

    <div class="ph-avatar">
        @if($karyawan->foto ?? false)
            <img src="{{ asset('storage/'.$karyawan->foto) }}" alt="{{ $karyawan->nama }}">
        @else
            {{ mb_strtoupper(mb_substr($karyawan->nama,0,2)) }}
        @endif
    </div>

    <div class="ph-info">
        <div class="ph-name">{{ $karyawan->nama }}</div>
        <div class="ph-jabatan">{{ $karyawan->jabatan->nama_jabatan ?? '-' }}</div>
        <div class="ph-pills">
            <span class="ph-pill">
                <svg viewBox="0 0 24 24" 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>
                NIP: {{ $karyawan->nip }}
            </span>
            <span class="ph-pill">
                <svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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"/></svg>
                {{ $karyawan->no_hp ?? '-' }}
            </span>
            @if($karyawan->jamKerja)
            <span class="ph-pill">
                <svg viewBox="0 0 24 24" 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>
                {{ \Carbon\Carbon::parse($karyawan->jamKerja->jam_masuk)->format('H:i') }} – {{ \Carbon\Carbon::parse($karyawan->jamKerja->jam_pulang)->format('H:i') }}
            </span>
            @endif
        </div>
    </div>

    <div class="ph-stats">
        <div class="ph-stat">
            <div class="ph-stat-n" style="color:#86efac;">{{ $totalHadir }}</div>
            <div class="ph-stat-l">Hadir</div>
        </div>
        <div class="ph-stat">
            <div class="ph-stat-n" style="color:#fcd34d;">{{ $totalTerlambat }}</div>
            <div class="ph-stat-l">Terlambat</div>
        </div>
    </div>
</div>

{{-- DETAIL GRID --}}
<div class="detail-grid fu2">
    <div class="panel">
        <div class="panel-hd">
            <span class="panel-hd-title">Informasi Pribadi</span>
            <a href="{{ route('instansi.karyawan.edit', $karyawan->id) }}" class="btn btn-edit">
                <svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
                Edit
            </a>
        </div>
        <div class="info-list">
            <div class="info-row">
                <div class="info-ico ico-v"><svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2"/></svg></div>
                <div><div class="info-label">Jabatan</div><div class="info-val">{{ $karyawan->jabatan->nama_jabatan ?? '-' }}</div></div>
            </div>
            <div class="info-row">
                <div class="info-ico ico-s"><svg viewBox="0 0 24 24" 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></div>
                <div>
                    <div class="info-label">Jam Kerja</div>
                    @if($karyawan->jamKerja)
                        <div class="info-val">{{ \Carbon\Carbon::parse($karyawan->jamKerja->jam_masuk)->format('H:i') }} – {{ \Carbon\Carbon::parse($karyawan->jamKerja->jam_pulang)->format('H:i') }}</div>
                        <div style="font-size:11px;color:var(--muted2);font-weight:500;margin-top:2px;">Toleransi {{ $karyawan->jamKerja->toleransi_menit }} menit</div>
                    @else<div class="info-val">—</div>@endif
                </div>
            </div>
            <div class="info-row">
                <div class="info-ico ico-b"><svg viewBox="0 0 24 24" 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></div>
                <div><div class="info-label">Bergabung Sejak</div><div class="info-val">{{ $karyawan->created_at ? \Carbon\Carbon::parse($karyawan->created_at)->isoFormat('D MMMM YYYY') : '-' }}</div></div>
            </div>
            <div class="info-row">
                <div class="info-ico ico-s"><svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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="info-label">Hadir Bulan Ini</div><div class="info-val" style="color:var(--success);">{{ $totalHadir }} hari</div></div>
            </div>
            <div class="info-row">
                <div class="info-ico ico-a"><svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg></div>
                <div><div class="info-label">Terlambat Bulan Ini</div><div class="info-val" style="color:{{ $totalTerlambat > 0 ? 'var(--warning)' : 'var(--success)' }};">{{ $totalTerlambat }} kali</div></div>
            </div>
        </div>
    </div>

    <div class="panel">
        <div class="panel-hd"><span class="panel-hd-title">Kontak & Akun</span></div>
        <div class="info-list">
            <div class="info-row">
                <div class="info-ico ico-sl"><svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg></div>
                <div><div class="info-label">Email</div><div class="info-val" style="font-size:13px;word-break:break-all;">{{ $karyawan->user->email ?? '-' }}</div></div>
            </div>
            <div class="info-row">
                <div class="info-ico ico-s"><svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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="info-label">No. HP</div><div class="info-val mono">{{ $karyawan->no_hp ?? '-' }}</div></div>
            </div>
            <div class="info-row">
                <div class="info-ico ico-b"><svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg></div>
                <div><div class="info-label">Alamat</div><div class="info-val" style="font-size:12.5px;line-height:1.5;">{{ $karyawan->alamat ?? '-' }}</div></div>
            </div>
        </div>
    </div>
</div>

{{-- RIWAYAT ABSENSI --}}
<div class="panel fu3">
    <div class="panel-hd">
        <span class="panel-hd-title">Riwayat Absensi</span>
        <span class="panel-hd-badge">30 hari terakhir</span>
    </div>

    {{-- DESKTOP TABLE --}}
    <div class="abs-wrap">
        <table class="abs-table">
            <thead>
                <tr>
                    <th>Tanggal</th>
                    <th>Foto</th>
                    <th>Jam Masuk</th>
                    <th>Jam Pulang</th>
                    <th>Lokasi</th>
                    <th>Status</th>
                    <th>Terlambat</th>
                </tr>
            </thead>
            <tbody>
                @forelse($absensi as $ab)
                @php
                    $fotoMasukUrl = $ab->foto_masuk ? asset('storage/' . $ab->foto_masuk) : null;
                    $lat = $ab->latitude_masuk ?? null;
                    $lng = $ab->longitude_masuk ?? null;
                    $mapsUrl = ($lat && $lng) ? "https://maps.google.com/?q={$lat},{$lng}" : null;
                    $lokasiText = ($lat && $lng) ? round($lat, 6) . ', ' . round($lng, 6) : null;
                @endphp
                <tr>
                    <td style="font-weight:700;">{{ \Carbon\Carbon::parse($ab->tanggal)->isoFormat('ddd, D MMM YYYY') }}</td>
                    <td>
                        @if($fotoMasukUrl)
                            <a href="{{ $fotoMasukUrl }}" target="_blank"><img src="{{ $fotoMasukUrl }}" style="width:42px;height:42px;border-radius:10px;object-fit:cover;border:2px solid #e2e8f0;display:block;" onerror="this.parentElement.innerHTML='<span style=\'font-size:11px;color:#94a3b8;\'>—</span>'"></a>
                        @else<span style="font-size:12px;color:var(--muted2);">—</span>@endif
                    </td>
                    <td><span class="time-pill {{ $ab->status_waktu === 'terlambat' ? 'time-late' : ($ab->jam_masuk ? 'time-ok' : 'time-none') }}">{{ $ab->jam_masuk ? \Carbon\Carbon::parse($ab->jam_masuk)->format('H:i') : '—' }}</span></td>
                    <td><span class="time-pill {{ $ab->jam_pulang ? 'time-ok' : 'time-none' }}">{{ $ab->jam_pulang ? \Carbon\Carbon::parse($ab->jam_pulang)->format('H:i') : '—' }}</span></td>
                    <td>
                        @if($lokasiText && $mapsUrl)
                            <a href="{{ $mapsUrl }}" target="_blank" class="lokasi-cell" style="text-decoration:none;">
                                <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
                                <span class="lokasi-text" style="color:var(--sky);">{{ $lokasiText }}</span>
                            </a>
                        @else<span style="font-size:12px;color:var(--muted2);">—</span>@endif
                    </td>
                    <td>
                        @if($ab->status_waktu === 'tepat_waktu')<span class="status-dot sd-hadir">Hadir</span>
                        @elseif($ab->status_waktu === 'terlambat')<span class="status-dot sd-terlambat">Terlambat</span>
                        @elseif($ab->jam_masuk)<span class="status-dot sd-hadir">Hadir</span>
                        @else<span class="status-dot sd-absen">Tidak Hadir</span>@endif
                    </td>
                    <td>
                        @if(isset($ab->terlambat_menit) && $ab->terlambat_menit > 0)
                            <span style="font-size:12px;font-weight:700;color:var(--warning);">+{{ $ab->terlambat_menit }} mnt</span>
                        @else<span style="font-size:12px;color:var(--muted2);">—</span>@endif
                    </td>
                </tr>
                @empty
                <tr><td colspan="7"><div class="empty-tbl">
                    <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" style="display:block;margin:0 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>Belum ada riwayat absensi</p>
                </div></td></tr>
                @endforelse
            </tbody>
        </table>
    </div>

    {{-- MOBILE CARD LIST --}}
    <div class="abs-mobile">
        @forelse($absensi as $ab)
        @php
            $fotoMasukUrl = $ab->foto_masuk ? asset('storage/' . $ab->foto_masuk) : null;
            $lat = $ab->latitude_masuk ?? null; $lng = $ab->longitude_masuk ?? null;
            $mapsUrl = ($lat && $lng) ? "https://maps.google.com/?q={$lat},{$lng}" : null;
        @endphp
        <div class="abs-mob-card">
            <div class="abs-mob-head">
                <span class="abs-mob-date">{{ \Carbon\Carbon::parse($ab->tanggal)->isoFormat('ddd, D MMM YYYY') }}</span>
                @if($ab->status_waktu === 'tepat_waktu')<span class="status-dot sd-hadir">Hadir</span>
                @elseif($ab->status_waktu === 'terlambat')<span class="status-dot sd-terlambat">Terlambat</span>
                @elseif($ab->jam_masuk)<span class="status-dot sd-hadir">Hadir</span>
                @else<span class="status-dot sd-absen">Tidak Hadir</span>@endif
            </div>
            <div class="abs-mob-row">
                <div class="abs-mob-item" style="color:{{ $ab->status_waktu === 'terlambat' ? 'var(--warning)' : 'var(--success)' }};">
                    <svg viewBox="0 0 24 24" 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>
                    Masuk: {{ $ab->jam_masuk ? \Carbon\Carbon::parse($ab->jam_masuk)->format('H:i') : '—' }}
                </div>
                <div class="abs-mob-item" style="color:var(--muted);">
                    <svg viewBox="0 0 24 24" 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>
                    Pulang: {{ $ab->jam_pulang ? \Carbon\Carbon::parse($ab->jam_pulang)->format('H:i') : '—' }}
                </div>
                @if(isset($ab->terlambat_menit) && $ab->terlambat_menit > 0)
                <div class="abs-mob-item" style="color:var(--warning);">
                    +{{ $ab->terlambat_menit }} mnt terlambat
                </div>
                @endif
                @if($mapsUrl)
                <a href="{{ $mapsUrl }}" target="_blank" class="abs-mob-item" style="color:var(--sky);text-decoration:none;">
                    <svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="stroke:var(--sky);"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
                    Lihat Lokasi
                </a>
                @endif
            </div>
        </div>
        @empty
        <div class="empty-tbl"><p>Belum ada riwayat absensi</p></div>
        @endforelse
    </div>
</div>

</div>

</x-app-layout>