@extends('layouts.admin')

@section('title', 'Detail Pegawai: ' . $pegawai->nama_lengkap)

@section('content')
<div class="space-y-6">
    <!-- Header Back & Action -->
    <div class="flex items-center justify-between">
        <div class="flex items-center gap-3">
            <a href="{{ route('admin.pegawai.index') }}" class="p-2 rounded-xl bg-white border border-slate-200 text-slate-500 hover:text-slate-800 transition-colors">
                <i data-lucide="arrow-left" class="w-4 h-4"></i>
            </a>
            <div>
                <h1 class="text-xl font-bold text-slate-900 tracking-tight">{{ $pegawai->nama_lengkap }}</h1>
                <p class="text-xs text-slate-500">{{ $pegawai->nip }} • {{ $pegawai->jabatan->nama_jabatan ?? '-' }}</p>
            </div>
        </div>
        <div class="flex items-center gap-2">
            @if($pegawai->status_aktif)
                <form action="{{ route('admin.pegawai.toggle-status', $pegawai->id) }}" method="POST" onsubmit="return confirm('Apakah Anda yakin ingin MENONAKTIFKAN pegawai ini? Akses login mobile dan presensi akan ditangguhkan.');" class="inline">
                    @csrf
                    <input type="hidden" name="status_aktif" value="0">
                    <button type="submit" class="inline-flex items-center gap-2 px-3.5 py-2 rounded-xl bg-white border border-rose-200 text-rose-600 hover:bg-rose-50 text-xs font-bold transition-all shadow-xs">
                        <i data-lucide="user-x" class="w-3.5 h-3.5"></i>
                        <span>Nonaktifkan Pegawai</span>
                    </button>
                </form>
            @else
                <form action="{{ route('admin.pegawai.toggle-status', $pegawai->id) }}" method="POST" onsubmit="return confirm('Aktifkan kembali pegawai ini? Pegawai akan dapat login dan absen kembali.');" class="inline">
                    @csrf
                    <input type="hidden" name="status_aktif" value="1">
                    <button type="submit" class="inline-flex items-center gap-2 px-3.5 py-2 rounded-xl bg-emerald-600 hover:bg-emerald-700 text-white text-xs font-bold transition-all shadow-sm shadow-emerald-600/30">
                        <i data-lucide="user-check" class="w-3.5 h-3.5"></i>
                        <span>Aktifkan Pegawai</span>
                    </button>
                </form>
            @endif

            @if($pegawai->face_descriptor || $pegawai->face_photo_path)
                <form action="{{ route('admin.pegawai.reset-face', $pegawai->id) }}" method="POST" onsubmit="return confirm('Apakah Anda yakin ingin MERESET DATA WAJAH pegawai {{ addslashes($pegawai->nama_lengkap) }}?\n\nTemplate biometrik wajah akan dihapus permanen dan pegawai wajib melakukan pemindaian wajah ulang melalui aplikasi mobile.');" class="inline">
                    @csrf
                    <button type="submit" class="inline-flex items-center gap-2 px-3.5 py-2 rounded-xl bg-white border border-amber-200 text-amber-700 hover:bg-amber-50 text-xs font-bold transition-all shadow-xs" title="Reset Data Wajah Biometrik Pegawai">
                        <i data-lucide="scan-face" class="w-3.5 h-3.5 text-amber-600"></i>
                        <span>Reset Data Wajah</span>
                    </button>
                </form>
            @endif

            <a href="{{ route('admin.pegawai.edit', $pegawai->id) }}" class="inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-primary-600 hover:bg-primary-700 text-white text-xs font-bold shadow-sm shadow-primary-500/30 transition-all">
                <i data-lucide="edit-3" class="w-3.5 h-3.5"></i>
                <span>Edit Pegawai</span>
            </a>
        </div>
    </div>

    <!-- PROFILE HERO CARD -->
    <div class="p-6 rounded-2xl bg-white border border-slate-200/80 shadow-sm flex flex-col md:flex-row md:items-center justify-between gap-6">
        <div class="flex items-center gap-5">
            <div class="w-16 h-16 rounded-2xl bg-gradient-to-tr from-primary-600 to-amber-500 text-white font-extrabold flex items-center justify-center text-xl shadow-md shadow-primary-500/20 shrink-0 overflow-hidden">
                @if($pegawai->foto_profil)
                    <img src="{{ asset('storage/' . $pegawai->foto_profil) }}" alt="{{ $pegawai->nama_lengkap }}" class="w-full h-full object-cover">
                @else
                    {{ $pegawai->inisial }}
                @endif
            </div>
            <div>
                <div class="flex items-center gap-2 flex-wrap">
                    <h2 class="text-lg font-bold text-slate-900">{{ $pegawai->nama_lengkap }}</h2>
                    <span class="px-2 py-0.5 rounded-full text-[10px] font-bold bg-slate-100 text-slate-700 border border-slate-200">
                        {{ ucfirst($pegawai->status_kerja) }}
                    </span>
                    @if($pegawai->status_aktif)
                        <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-emerald-50 text-emerald-700 border border-emerald-200">
                            <span class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></span>
                            <span>Aktif</span>
                        </span>
                    @else
                        <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-rose-50 text-rose-700 border border-rose-200">
                            <span class="w-1.5 h-1.5 rounded-full bg-rose-500"></span>
                            <span>Non-Aktif (Akses Ditangguhkan)</span>
                        </span>
                    @endif
                </div>
                <p class="text-xs text-slate-500 mt-0.5">
                    {{ $pegawai->departemen->nama_departemen ?? '-' }} • {{ $pegawai->divisi->nama_divisi ?? '-' }}
                </p>
                <div class="flex items-center gap-4 text-xs text-slate-400 mt-2">
                    <span class="flex items-center gap-1"><i data-lucide="mail" class="w-3.5 h-3.5"></i> {{ $pegawai->email }}</span>
                    <span class="flex items-center gap-1"><i data-lucide="phone" class="w-3.5 h-3.5"></i> {{ $pegawai->no_telepon ?? '-' }}</span>
                </div>
            </div>
        </div>

        <div class="flex items-center gap-3">
            <div class="text-right">
                <span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider block">Kebijakan Denda</span>
                @if($pegawai->flag_denda == 'bebas_denda')
                <span class="text-xs font-bold text-emerald-700 bg-emerald-50 px-2.5 py-1 rounded-lg border border-emerald-200 inline-block mt-1">
                    Bebas Denda (Exempt)
                </span>
                @elseif($pegawai->flag_denda == 'hanya_masuk')
                <span class="text-xs font-bold text-blue-700 bg-blue-50 px-2.5 py-1 rounded-lg border border-blue-200 inline-block mt-1">
                    Hanya Masuk ({{ $pegawai->golongan_denda ?? 'Reguler' }})
                </span>
                @elseif($pegawai->flag_denda == 'hanya_pulang')
                <span class="text-xs font-bold text-purple-700 bg-purple-50 px-2.5 py-1 rounded-lg border border-purple-200 inline-block mt-1">
                    Hanya Pulang ({{ $pegawai->golongan_denda ?? 'Reguler' }})
                </span>
                @else
                <span class="text-xs font-bold text-orange-700 bg-orange-50 px-2.5 py-1 rounded-lg border border-orange-200 inline-block mt-1">
                    Denda Penuh ({{ $pegawai->golongan_denda ?? 'Reguler' }})
                </span>
                @endif
            </div>
        </div>
    </div>

    <!-- 2 COLUMN GRID INFO -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <!-- 1. DATA PRIBADI & KONTAK DARURAT -->
        <div class="p-6 rounded-2xl bg-white border border-slate-200/80 shadow-sm space-y-4">
            <h3 class="text-sm font-bold text-slate-900 flex items-center gap-2 border-b border-slate-100 pb-3">
                <i data-lucide="user" class="w-4 h-4 text-primary-600"></i>
                <span>Data Pribadi & Kontak</span>
            </h3>
            <div class="grid grid-cols-2 gap-3 text-xs">
                <div>
                    <span class="text-slate-400 block text-[11px]">NIK</span>
                    <span class="font-semibold text-slate-800">{{ $pegawai->nik }}</span>
                </div>
                <div>
                    <span class="text-slate-400 block text-[11px]">Jenis Kelamin</span>
                    <span class="font-semibold text-slate-800">{{ $pegawai->jenis_kelamin == 'L' ? 'Laki-laki' : 'Perempuan' }}</span>
                </div>
                <div>
                    <span class="text-slate-400 block text-[11px]">Tempat, Tgl Lahir</span>
                    <span class="font-semibold text-slate-800">{{ $pegawai->tempat_lahir ?? '-' }}, {{ $pegawai->tanggal_lahir ? $pegawai->tanggal_lahir->format('d M Y') : '-' }}</span>
                </div>
                <div>
                    <span class="text-slate-400 block text-[11px]">Agama / Status</span>
                    <span class="font-semibold text-slate-800">{{ $pegawai->agama }} • {{ ucwords(str_replace('_', ' ', $pegawai->status_nikah)) }}</span>
                </div>
                <div class="col-span-2">
                    <span class="text-slate-400 block text-[11px]">Alamat Domisili</span>
                    <span class="font-semibold text-slate-800">{{ $pegawai->alamat ?? '-' }}</span>
                </div>
                <div class="col-span-2 pt-2 border-t border-slate-100">
                    <span class="text-slate-400 block text-[11px]">Kontak Darurat</span>
                    <span class="font-semibold text-slate-800">{{ $pegawai->nama_kontak_darurat ?? '-' }} ({{ $pegawai->hubungan_kontak_darurat ?? '-' }}) — {{ $pegawai->telepon_kontak_darurat ?? '-' }}</span>
                </div>
                <div class="col-span-2 pt-2 border-t border-slate-100 flex items-center justify-between">
                    <div>
                        <span class="text-slate-400 block text-[11px]">Akun Login Web Portal & Mobile</span>
                        <span class="font-mono text-xs font-semibold text-slate-800">{{ $pegawai->nip }} / {{ $pegawai->email }}</span>
                    </div>
                    @if($pegawai->user)
                        <span class="px-2.5 py-1 rounded-full text-[10px] font-bold bg-emerald-50 text-emerald-700 border border-emerald-200 inline-flex items-center gap-1">
                            <i data-lucide="check-circle-2" class="w-3 h-3 text-emerald-600"></i> Akun User Aktif
                        </span>
                    @else
                        <span class="px-2.5 py-1 rounded-full text-[10px] font-bold bg-amber-50 text-amber-700 border border-amber-200 inline-flex items-center gap-1">
                            <i data-lucide="alert-circle" class="w-3 h-3 text-amber-600"></i> Auto-Provisioning
                        </span>
                    @endif
                </div>
            </div>
        </div>

        <!-- 2. HIRARKI & STRUKTUR ORGANISASI -->
        <div class="p-6 rounded-2xl bg-white border border-slate-200/80 shadow-sm space-y-4">
            <h3 class="text-sm font-bold text-slate-900 flex items-center gap-2 border-b border-slate-100 pb-3">
                <i data-lucide="git-branch" class="w-4 h-4 text-primary-600"></i>
                <span>Hirarki & Posisi Organisasi</span>
            </h3>
            <div class="space-y-3 text-xs">
                <div class="p-3 rounded-xl bg-slate-50 flex items-center justify-between">
                    <div>
                        <span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider block">Atasan Langsung (Approval Flow)</span>
                        @if($pegawai->atasan)
                        <span class="font-bold text-slate-800 text-sm mt-0.5 block">{{ $pegawai->atasan->nama_lengkap }}</span>
                        <span class="text-[11px] text-slate-500">{{ $pegawai->atasan->jabatan->nama_jabatan ?? '-' }}</span>
                        @else
                        <span class="text-xs text-slate-500 font-semibold italic mt-0.5 block">Puncak Hirarki (Tidak Memiliki Atasan)</span>
                        @endif
                    </div>
                    <div class="w-8 h-8 rounded-lg bg-white text-primary-600 flex items-center justify-center shadow-sm">
                        <i data-lucide="shield-check" class="w-4 h-4"></i>
                    </div>
                </div>

                <div class="grid grid-cols-2 gap-3">
                    <div>
                        <span class="text-slate-400 block text-[11px]">Jabatan & Level Grade</span>
                        <span class="font-semibold text-slate-800">{{ $pegawai->jabatan->nama_jabatan ?? '-' }} (Level {{ $pegawai->jabatan->tingkat_level ?? '-' }})</span>
                    </div>
                    <div>
                        <span class="text-slate-400 block text-[11px]">Tgl Bergabung</span>
                        <span class="font-semibold text-slate-800">{{ $pegawai->tanggal_masuk ? $pegawai->tanggal_masuk->format('d M Y') : '-' }}</span>
                    </div>
                </div>

                @if($pegawai->bawahan->isNotEmpty())
                <div class="pt-2 border-t border-slate-100">
                    <span class="text-slate-400 block text-[11px] mb-1.5">Bawahan Langsung ({{ $pegawai->bawahan->count() }})</span>
                    <div class="flex flex-wrap gap-1.5">
                        @foreach($pegawai->bawahan as $bawahan)
                        <span class="px-2 py-1 rounded-lg bg-slate-100 text-slate-700 text-[11px] font-medium">
                            {{ $bawahan->nama_lengkap }}
                        </span>
                        @endforeach
                    </div>
                </div>
                @endif
            </div>
        </div>

        <!-- 3. REKENING BANK & PAYROLL -->
        <div class="p-6 rounded-2xl bg-white border border-slate-200/80 shadow-sm space-y-4">
            <h3 class="text-sm font-bold text-slate-900 flex items-center justify-between border-b border-slate-100 pb-3">
                <span class="flex items-center gap-2">
                    <i data-lucide="credit-card" class="w-4 h-4 text-primary-600"></i>
                    <span>Rekening Bank & Payroll</span>
                </span>
                <span class="px-2 py-0.5 rounded text-[10px] font-bold {{ $pegawai->nama_bank && $pegawai->nomor_rekening ? 'bg-emerald-50 text-emerald-700 border border-emerald-200' : 'bg-amber-50 text-amber-700 border border-amber-200' }}">
                    {{ $pegawai->nama_bank && $pegawai->nomor_rekening ? 'Rekening Terverifikasi' : 'Belum Lengkap' }}
                </span>
            </h3>
            <div class="space-y-3 text-xs">
                <div class="p-4 rounded-xl bg-gradient-to-r from-orange-50 to-amber-50 border border-orange-100 flex items-center justify-between">
                    <div>
                        <span class="text-[10px] font-bold text-orange-600 uppercase tracking-wider block">Bank Tujuan Transfer</span>
                        <div class="flex items-center gap-2 mt-1">
                            <span class="font-extrabold text-slate-800 text-sm">{{ $pegawai->nama_bank ?? 'Belum Diatur' }}</span>
                            @if($pegawai->nomor_rekening)
                                <span class="font-mono text-xs font-bold text-primary-700 bg-white px-2 py-0.5 rounded border border-orange-200">{{ $pegawai->nomor_rekening }}</span>
                            @endif
                        </div>
                        <p class="text-[11px] text-slate-500 mt-1">
                            Atas Nama: <strong class="text-slate-800">{{ $pegawai->atas_nama_rekening ?: ($pegawai->nama_lengkap ?? '-') }}</strong>
                        </p>
                    </div>
                    <div class="w-10 h-10 rounded-xl bg-white text-primary-600 flex items-center justify-center shadow-sm shrink-0">
                        <i data-lucide="wallet" class="w-5 h-5"></i>
                    </div>
                </div>

                <div class="grid grid-cols-2 gap-3 pt-1">
                    <div>
                        <span class="text-slate-400 block text-[11px]">Gaji Pokok Terdaftar</span>
                        <span class="font-bold text-slate-800 text-sm">Rp {{ number_format($pegawai->gaji_pokok ?? 0, 0, ',', '.') }}</span>
                    </div>
                    <div>
                        <span class="text-slate-400 block text-[11px]">Metode Penyaluran</span>
                        <span class="font-semibold text-slate-800">Transfer Otomatis Payroll</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 4. PENDIDIKAN & KARIR -->
        <div class="p-6 rounded-2xl bg-white border border-slate-200/80 shadow-sm space-y-4">
            <h3 class="text-sm font-bold text-slate-900 flex items-center gap-2 border-b border-slate-100 pb-3">
                <i data-lucide="graduation-cap" class="w-4 h-4 text-primary-600"></i>
                <span>Riwayat Pendidikan</span>
            </h3>
            @forelse($pegawai->pendidikan as $pdd)
            <div class="p-3 rounded-xl bg-slate-50 flex items-center justify-between text-xs">
                <div>
                    <span class="font-bold text-slate-800 block">{{ $pdd->nama_institusi }}</span>
                    <span class="text-slate-500">{{ $pdd->jenjang }} • {{ $pdd->jurusan }}</span>
                </div>
                <div class="text-right">
                    <span class="font-bold text-slate-700 block">{{ $pdd->tahun_lulus }}</span>
                    <span class="text-[11px] text-emerald-600 font-semibold">IPK {{ $pdd->nilai_ipk ?? '-' }}</span>
                </div>
            </div>
            @empty
            <p class="text-xs text-slate-400">Belum ada riwayat pendidikan terdata</p>
            @endforelse
        </div>

        <!-- 4. PENGATURAN ABSENSI & KEBIJAKAN DENDA -->
        <div class="p-6 rounded-2xl bg-white border border-slate-200/80 shadow-sm space-y-4">
            <h3 class="text-sm font-bold text-slate-900 flex items-center gap-2 border-b border-slate-100 pb-3">
                <i data-lucide="shield-alert" class="w-4 h-4 text-orange-600"></i>
                <span>Kebijakan Denda & GPS Absensi</span>
            </h3>
            <div class="space-y-3.5 text-xs">
                <!-- Info Status Flag Denda & Golongan -->
                <div class="p-3.5 rounded-xl bg-orange-50/60 border border-orange-200/60">
                    <div class="flex items-center justify-between mb-1.5">
                        <span class="text-[11px] font-bold text-orange-950 uppercase tracking-wider">Status Denda:</span>
                        <span class="font-extrabold text-xs text-orange-800">{{ $pegawai->label_flag_denda }}</span>
                    </div>
                    <div class="flex items-center justify-between text-slate-600 text-[11px]">
                        <span>Golongan Skema Denda:</span>
                        <span class="font-mono font-bold text-slate-900 bg-white px-2 py-0.5 rounded border border-orange-200">{{ $pegawai->golongan_denda ?? 'Reguler' }}</span>
                    </div>
                    <p class="text-[10px] text-slate-500 mt-2 border-t border-orange-200/60 pt-1.5">
                        @if($pegawai->flag_denda == 'bebas_denda')
                        Pegawai dikecualikan dari segala sanksi pemotongan denda keterlambatan (Exempt Rp 0).
                        @elseif($pegawai->flag_denda == 'hanya_masuk')
                        Pegawai hanya dikenakan denda jika terlambat masuk shift, bebas denda kepulangan.
                        @elseif($pegawai->flag_denda == 'hanya_pulang')
                        Pegawai hanya dikenakan denda pada jam kepulangan, bebas denda keterlambatan masuk.
                        @else
                        Pegawai dikenakan denda keterlambatan masuk (dihitung dari akhir masuk) dan denda pulang (dihitung dari akhir pulang).
                        @endif
                    </p>
                </div>

                <div class="grid grid-cols-3 gap-3 pt-1">
                    <div>
                        <span class="text-slate-400 block text-[11px]">Titik Kantor Default</span>
                        <span class="font-semibold text-slate-800 text-xs">{{ $pegawai->lokasiAbsensi->nama_lokasi ?? 'Semua Lokasi' }}</span>
                    </div>
                    <div>
                        <span class="text-slate-400 block text-[11px]">Izin WFA</span>
                        <span class="font-semibold text-xs {{ $pegawai->ijinkan_wfa ? 'text-emerald-600' : 'text-slate-500' }}">
                            {{ $pegawai->ijinkan_wfa ? 'Diizinkan (Bebas)' : 'Wajib di Kantor' }}
                        </span>
                    </div>
                    <div>
                        <span class="text-slate-400 block text-[11px]">Face Recognition</span>
                        <span class="font-semibold text-xs {{ ($pegawai->wajib_face_recognition ?? true) ? 'text-emerald-600' : 'text-amber-600' }}">
                            {{ ($pegawai->wajib_face_recognition ?? true) ? 'Wajib (Aktif)' : 'Nonaktif (Bypass)' }}
                        </span>
                    </div>
                </div>

                <div class="pt-2 border-t border-slate-100">
                    <span class="text-slate-400 block text-[11px] mb-1">Perangkat Smartphone Terkunci (Single Device)</span>
                    @forelse($pegawai->sesiPerangkat as $sesi)
                    <div class="p-2.5 rounded-xl bg-slate-50 flex items-center justify-between">
                        <div class="flex items-center gap-2">
                            <i data-lucide="smartphone" class="w-4 h-4 text-primary-600"></i>
                            <div>
                                <span class="font-bold text-slate-800 block text-xs">{{ $sesi->model_perangkat ?? 'Perangkat Mobile' }}</span>
                                <span class="text-[10px] font-mono text-slate-400 truncate block">{{ $sesi->device_id }}</span>
                            </div>
                        </div>
                        <span class="px-2 py-0.5 rounded text-[10px] font-bold {{ $sesi->status_terkunci ? 'bg-emerald-50 text-emerald-700' : 'bg-rose-50 text-rose-700' }}">
                            {{ $sesi->status_terkunci ? 'Terkunci' : 'Terbuka' }}
                        </span>
                    </div>
                    @empty
                    <p class="text-xs text-slate-400 italic">Belum ada perangkat terhubung</p>
                    @endforelse
                </div>
            </div>
        </div>

        <!-- 6. MASTER BIOMETRIK FACE RECOGNITION AI -->
        <div class="p-6 rounded-2xl bg-white border border-slate-200/80 shadow-sm space-y-4">
            <div class="flex items-center justify-between border-b border-slate-100 pb-3">
                <h3 class="text-sm font-bold text-slate-900 flex items-center gap-2">
                    <i data-lucide="scan-face" class="w-4 h-4 text-primary-600"></i>
                    <span>Biometrik & Face Recognition</span>
                </h3>
                @if($pegawai->face_descriptor || $pegawai->face_photo_path)
                    <span class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-emerald-50 text-emerald-700 border border-emerald-200">
                        <span class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></span>
                        <span>Wajah Terdaftar</span>
                    </span>
                @else
                    <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-amber-50 text-amber-700 border border-amber-200">
                        <i data-lucide="shield-alert" class="w-3 h-3 text-amber-600"></i>
                        <span>Belum Terdaftar</span>
                    </span>
                @endif
            </div>

            <div class="space-y-3.5 text-xs">
                @if($pegawai->face_descriptor || $pegawai->face_photo_path)
                    <!-- Kartu Info Wajah Terdaftar -->
                    <div class="p-3.5 rounded-xl bg-gradient-to-r from-slate-50 to-emerald-50/40 border border-emerald-100 flex items-start gap-4">
                        <div class="relative shrink-0">
                            <div class="w-16 h-20 rounded-xl bg-slate-100 border-2 border-emerald-500/50 overflow-hidden shadow-sm flex items-center justify-center">
                                @if($pegawai->face_photo_path)
                                    <img src="{{ asset('storage/' . $pegawai->face_photo_path) }}" alt="Foto Master Wajah" class="w-full h-full object-cover">
                                @else
                                    <i data-lucide="user" class="w-8 h-8 text-slate-400"></i>
                                @endif
                            </div>
                            <span class="absolute -bottom-1 -right-1 bg-emerald-600 text-white rounded-full p-0.5 shadow">
                                <i data-lucide="check" class="w-3 h-3"></i>
                            </span>
                        </div>
                        <div class="space-y-1.5 flex-1">
                            <div class="flex items-center justify-between">
                                <span class="font-bold text-slate-800 text-xs">Template Biometrik AI Aktif</span>
                                <span class="text-[10px] font-mono text-emerald-700 bg-emerald-100/60 px-1.5 py-0.5 rounded font-semibold">128-D Vector</span>
                            </div>
                            <p class="text-[11px] text-slate-500 leading-relaxed">
                                Foto master dan 128 titik biometrik wajah tersimpan untuk verifikasi pencocokan presensi di aplikasi mobile.
                            </p>
                            <div class="text-[10px] text-slate-400 pt-1 flex items-center gap-1.5">
                                <i data-lucide="clock" class="w-3 h-3 text-slate-400"></i>
                                <span>Terdokumentasi: {{ $pegawai->face_registered_at ? $pegawai->face_registered_at->translatedFormat('d M Y, H:i') . ' WIB' : 'Pendaftaran Awal' }}</span>
                            </div>
                        </div>
                    </div>

                    <div class="p-3 rounded-xl bg-slate-50 border border-slate-100 flex items-center justify-between">
                        <div>
                            <span class="font-bold text-slate-800 block text-xs">Reset Master Biometrik</span>
                            <span class="text-[11px] text-slate-500">Hapus rekaman wajah jika karyawan berganti penampilan atau foto salah</span>
                        </div>
                        <form action="{{ route('admin.pegawai.reset-face', $pegawai->id) }}" method="POST" onsubmit="return confirm('Apakah Anda yakin ingin MERESET DATA WAJAH pegawai {{ addslashes($pegawai->nama_lengkap) }}?\n\nTemplate biometrik wajah akan dihapus dan pegawai wajib melakukan scan ulang saat presensi berikutnya.');">
                            @csrf
                            <button type="submit" class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-rose-50 hover:bg-rose-100 text-rose-700 border border-rose-200 text-xs font-bold transition-all shadow-xs">
                                <i data-lucide="refresh-cw" class="w-3.5 h-3.5"></i>
                                <span>Reset Data Wajah</span>
                            </button>
                        </form>
                    </div>
                @else
                    <!-- Kartu Belum Terdaftar -->
                    <div class="p-4 rounded-xl bg-amber-50/70 border border-amber-200/80 text-amber-900">
                        <div class="flex items-center gap-2 font-bold text-xs text-amber-800 mb-1">
                            <i data-lucide="alert-circle" class="w-4 h-4 text-amber-600"></i>
                            <span>Wajah Pegawai Belum Terdaftar</span>
                        </div>
                        <p class="text-[11px] text-amber-700 leading-relaxed">
                            Pegawai belum melakukan perekaman wajah master biometrik. Pendaftaran akan otomatis diminta oleh aplikasi mobile "Aku Hadir" saat pegawai melakukan login atau presensi pertama kali.
                        </p>
                    </div>

                    <div class="p-3 rounded-xl bg-slate-50 border border-slate-100 text-[11px] text-slate-500 flex items-center gap-2">
                        <i data-lucide="info" class="w-4 h-4 text-primary-500 shrink-0"></i>
                        <span>Jika karyawan mengalami kendala kamera atau tidak memiliki wajah terdaftar, Anda dapat menonaktifkan syarat wajah di menu Edit Pegawai.</span>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection