@extends('layouts.admin')

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

@section('content')
<div class="max-w-5xl mx-auto space-y-6">
    <!-- Header -->
    <div class="flex items-center justify-between">
        <div class="flex items-center gap-3">
            <a href="{{ route('admin.pegawai.show', $pegawai->id) }}" 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">Edit Data Pegawai & Pengaturan Denda</h1>
                <p class="text-xs text-slate-500">Perbarui data identitas, jabatan, dan aturan sanksi denda absensi untuk <strong>{{ $pegawai->nama_lengkap }}</strong></p>
            </div>
        </div>
    </div>

    <!-- Form Master Pegawai Ber-Tab -->
    <div class="bg-white rounded-2xl border border-slate-200/80 shadow-sm overflow-hidden">
        <!-- Tabs Header -->
        <div class="flex border-b border-slate-100 bg-slate-50/50 px-6 pt-3 gap-2 overflow-x-auto text-xs font-semibold">
            <button type="button" onclick="switchTab('pribadi')" id="tab-btn-pribadi" class="tab-btn pb-3 px-3 border-b-2 border-primary-600 text-primary-600 flex items-center gap-2">
                <i data-lucide="user" class="w-4 h-4"></i>
                <span>Data Pribadi</span>
            </button>
            <button type="button" onclick="switchTab('pekerjaan')" id="tab-btn-pekerjaan" class="tab-btn pb-3 px-3 border-b-2 border-transparent text-slate-500 hover:text-slate-700 flex items-center gap-2">
                <i data-lucide="briefcase" class="w-4 h-4"></i>
                <span>Pekerjaan & Hirarki</span>
            </button>
            <button type="button" onclick="switchTab('absensi')" id="tab-btn-absensi" class="tab-btn pb-3 px-3 border-b-2 border-transparent text-slate-500 hover:text-slate-700 flex items-center gap-2">
                <i data-lucide="map-pin" class="w-4 h-4"></i>
                <span>Pengaturan Absensi & Denda</span>
            </button>
        </div>

        <form action="{{ route('admin.pegawai.update', $pegawai->id) }}" method="POST" enctype="multipart/form-data" class="p-6 md:p-8 space-y-6">
            @csrf
            @method('PUT')

            <!-- TAB 1: DATA PRIBADI -->
            <div id="tab-pribadi" class="tab-content space-y-5">
                <!-- Foto Profil Pegawai -->
                <div class="bg-slate-50/70 p-4 rounded-xl border border-dashed border-slate-300">
                    <label class="block text-xs font-bold text-slate-700 mb-2">Foto Profil Pegawai</label>
                    <div class="flex items-center gap-4">
                        <div id="preview-foto-container" class="w-16 h-16 rounded-xl bg-slate-200 border border-slate-300 flex items-center justify-center text-slate-400 overflow-hidden shrink-0">
                            @if($pegawai->foto_profil)
                                <img src="{{ asset('storage/' . $pegawai->foto_profil) }}" alt="{{ $pegawai->nama_lengkap }}" class="w-full h-full object-cover">
                            @else
                                <i data-lucide="user" class="w-8 h-8"></i>
                            @endif
                        </div>
                        <div class="flex-1">
                            <input type="file" name="foto_profil" id="input-foto-profil" accept="image/jpeg,image/png,image/jpg,image/webp" class="text-xs text-slate-600 file:mr-3 file:py-2 file:px-3 file:rounded-lg file:border-0 file:text-xs file:font-semibold file:bg-primary-50 file:text-primary-700 hover:file:bg-primary-100 cursor-pointer">
                            <p class="text-[11px] text-slate-400 mt-1">Pilih gambar baru jika ingin mengganti foto profil. Format: JPG, PNG, WEBP (Maks 4MB).</p>
                        </div>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                    <div>
                        <label class="block text-xs font-bold text-slate-700 mb-1">NIK (Nomor Induk Kependudukan) *</label>
                        <input type="text" name="nik" value="{{ old('nik', $pegawai->nik) }}" required class="w-full px-3.5 py-2.5 rounded-xl border border-slate-200 text-xs focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none">
                    </div>
                    <div>
                        <label class="block text-xs font-bold text-slate-700 mb-1">Nama Lengkap & Gelar *</label>
                        <input type="text" name="nama_lengkap" value="{{ old('nama_lengkap', $pegawai->nama_lengkap) }}" required class="w-full px-3.5 py-2.5 rounded-xl border border-slate-200 text-xs focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none">
                    </div>
                    <div>
                        <label class="block text-xs font-bold text-slate-700 mb-1">Jenis Kelamin *</label>
                        <select name="jenis_kelamin" required class="w-full px-3.5 py-2.5 rounded-xl border border-slate-200 text-xs focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none">
                            <option value="L" {{ old('jenis_kelamin', $pegawai->jenis_kelamin) == 'L' ? 'selected' : '' }}>Laki-laki</option>
                            <option value="P" {{ old('jenis_kelamin', $pegawai->jenis_kelamin) == 'P' ? 'selected' : '' }}>Perempuan</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-xs font-bold text-slate-700 mb-1">Agama *</label>
                        <select name="agama" required class="w-full px-3.5 py-2.5 rounded-xl border border-slate-200 text-xs focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none">
                            @foreach(['Islam', 'Kristen', 'Katolik', 'Hindu', 'Buddha', 'Konghucu', 'Lainnya'] as $agm)
                            <option value="{{ $agm }}" {{ old('agama', $pegawai->agama) == $agm ? 'selected' : '' }}>{{ $agm }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="block text-xs font-bold text-slate-700 mb-1">Tempat Lahir</label>
                        <input type="text" name="tempat_lahir" value="{{ old('tempat_lahir', $pegawai->tempat_lahir) }}" class="w-full px-3.5 py-2.5 rounded-xl border border-slate-200 text-xs focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none">
                    </div>
                    <div>
                        <label class="block text-xs font-bold text-slate-700 mb-1">Tanggal Lahir</label>
                        <input type="date" name="tanggal_lahir" value="{{ old('tanggal_lahir', optional($pegawai->tanggal_lahir)->format('Y-m-d')) }}" class="w-full px-3.5 py-2.5 rounded-xl border border-slate-200 text-xs focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none">
                    </div>
                    <div>
                        <label class="block text-xs font-bold text-slate-700 mb-1">Email *</label>
                        <input type="email" name="email" value="{{ old('email', $pegawai->email) }}" required class="w-full px-3.5 py-2.5 rounded-xl border border-slate-200 text-xs focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none">
                    </div>
                    <div>
                        <label class="block text-xs font-bold text-slate-700 mb-1">Nomor Telepon / WhatsApp</label>
                        <input type="text" name="no_telepon" value="{{ old('no_telepon', $pegawai->no_telepon) }}" class="w-full px-3.5 py-2.5 rounded-xl border border-slate-200 text-xs focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none">
                    </div>
                    <div>
                        <label class="block text-xs font-bold text-slate-700 mb-1">Status Pernikahan</label>
                        <select name="status_nikah" class="w-full px-3.5 py-2.5 rounded-xl border border-slate-200 text-xs focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none">
                            <option value="belum_menikah" {{ old('status_nikah', $pegawai->status_nikah) == 'belum_menikah' ? 'selected' : '' }}>Belum Menikah</option>
                            <option value="menikah" {{ old('status_nikah', $pegawai->status_nikah) == 'menikah' ? 'selected' : '' }}>Menikah</option>
                            <option value="cerai" {{ old('status_nikah', $pegawai->status_nikah) == 'cerai' ? 'selected' : '' }}>Cerai</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-xs font-bold text-slate-700 mb-1">Golongan Darah</label>
                        <input type="text" name="golongan_darah" value="{{ old('golongan_darah', $pegawai->golongan_darah) }}" placeholder="A / B / AB / O" class="w-full px-3.5 py-2.5 rounded-xl border border-slate-200 text-xs focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none">
                    </div>
                </div>

                <div class="border-t border-slate-100 pt-4">
                    <p class="text-xs font-bold text-slate-700 mb-3">Kontak Darurat</p>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div>
                            <input type="text" name="nama_kontak_darurat" value="{{ old('nama_kontak_darurat', $pegawai->nama_kontak_darurat) }}" placeholder="Nama Lengkap Kontak" class="w-full px-3.5 py-2 rounded-xl border border-slate-200 text-xs">
                        </div>
                        <div>
                            <input type="text" name="hubungan_kontak_darurat" value="{{ old('hubungan_kontak_darurat', $pegawai->hubungan_kontak_darurat) }}" placeholder="Hubungan (Orang Tua / Pasangan)" class="w-full px-3.5 py-2 rounded-xl border border-slate-200 text-xs">
                        </div>
                        <div>
                            <input type="text" name="telepon_kontak_darurat" value="{{ old('telepon_kontak_darurat', $pegawai->telepon_kontak_darurat) }}" placeholder="No Telepon Darurat" class="w-full px-3.5 py-2 rounded-xl border border-slate-200 text-xs">
                        </div>
                    </div>
                </div>
            </div>

            <!-- TAB 2: PEKERJAAN & HIRARKI -->
            <div id="tab-pekerjaan" class="tab-content hidden space-y-5">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                    <div>
                        <label class="block text-xs font-bold text-slate-700 mb-1">NIP (Nomor Induk Pegawai) *</label>
                        <input type="text" name="nip" value="{{ old('nip', $pegawai->nip) }}" required class="w-full px-3.5 py-2.5 rounded-xl border border-slate-200 text-xs focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none">
                    </div>
                    <div>
                        <label class="block text-xs font-bold text-slate-700 mb-1">Status Hubungan Kerja *</label>
                        <select name="status_kerja" required class="w-full px-3.5 py-2.5 rounded-xl border border-slate-200 text-xs focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none">
                            <option value="tetap" {{ old('status_kerja', $pegawai->status_kerja) == 'tetap' ? 'selected' : '' }}>Karyawan Tetap</option>
                            <option value="kontrak" {{ old('status_kerja', $pegawai->status_kerja) == 'kontrak' ? 'selected' : '' }}>Karyawan Kontrak</option>
                            <option value="probation" {{ old('status_kerja', $pegawai->status_kerja) == 'probation' ? 'selected' : '' }}>Probation / Masa Percobaan</option>
                            <option value="magang" {{ old('status_kerja', $pegawai->status_kerja) == 'magang' ? 'selected' : '' }}>Magang / Internship</option>
                        </select>
                    </div>

                    <!-- Departemen -->
                    <div>
                        <label class="block text-xs font-bold text-slate-700 mb-1">Departemen *</label>
                        <select name="departemen_id" required class="w-full px-3.5 py-2.5 rounded-xl border border-slate-200 text-xs focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none">
                            @foreach($departemenList as $dep)
                            <option value="{{ $dep->id }}" {{ old('departemen_id', $pegawai->departemen_id) == $dep->id ? 'selected' : '' }}>{{ $dep->nama_departemen }} (Tingkat {{ $dep->tingkat }})</option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Divisi -->
                    <div>
                        <label class="block text-xs font-bold text-slate-700 mb-1">Divisi *</label>
                        <select name="divisi_id" required class="w-full px-3.5 py-2.5 rounded-xl border border-slate-200 text-xs focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none">
                            @foreach($divisiList as $div)
                            <option value="{{ $div->id }}" {{ old('divisi_id', $pegawai->divisi_id) == $div->id ? 'selected' : '' }}>{{ $div->nama_divisi }} (Tingkat {{ $div->tingkat }})</option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Jabatan -->
                    <div>
                        <label class="block text-xs font-bold text-slate-700 mb-1">Jabatan & Level Grade *</label>
                        <select name="jabatan_id" required class="w-full px-3.5 py-2.5 rounded-xl border border-slate-200 text-xs focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none">
                            @foreach($jabatanList as $jab)
                            <option value="{{ $jab->id }}" {{ old('jabatan_id', $pegawai->jabatan_id) == $jab->id ? 'selected' : '' }}>{{ $jab->nama_jabatan }} — Level {{ $jab->tingkat_level }}</option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Atasan Langsung (Hirarki Pegawai) -->
                    <div>
                        <label class="block text-xs font-bold text-slate-700 mb-1">Atasan Langsung (Approval Flow)</label>
                        <select name="atasan_id" class="w-full px-3.5 py-2.5 rounded-xl border border-slate-200 text-xs focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none">
                            <option value="">-- Tanpa Atasan (Puncak Hirarki) --</option>
                            @foreach($atasanList as $ats)
                            <option value="{{ $ats->id }}" {{ old('atasan_id', $pegawai->atasan_id) == $ats->id ? 'selected' : '' }}>{{ $ats->nama_lengkap }} ({{ $ats->jabatan->nama_jabatan ?? '-' }})</option>
                            @endforeach
                        </select>
                    </div>

                    <div>
                        <label class="block text-xs font-bold text-slate-700 mb-1">Tanggal Bergabung *</label>
                        <input type="date" name="tanggal_masuk" value="{{ old('tanggal_masuk', optional($pegawai->tanggal_masuk)->format('Y-m-d')) }}" required class="w-full px-3.5 py-2.5 rounded-xl border border-slate-200 text-xs focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none">
                    </div>

                    <div>
                        <label class="block text-xs font-bold text-slate-700 mb-1">Gaji Pokok (IDR)</label>
                        <input type="number" name="gaji_pokok" value="{{ old('gaji_pokok', $pegawai->gaji_pokok) }}" min="0" class="w-full px-3.5 py-2.5 rounded-xl border border-slate-200 text-xs focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none">
                    </div>

                    <!-- Seksi Informasi Rekening & Payroll -->
                    <div class="col-span-1 md:col-span-2 mt-2 pt-4 border-t border-slate-100">
                        <div class="p-4 rounded-2xl bg-orange-50/50 border border-orange-100 space-y-4">
                            <div class="flex items-center gap-2">
                                <div class="w-7 h-7 rounded-lg bg-primary-100 text-primary-700 flex items-center justify-center">
                                    <i data-lucide="credit-card" class="w-4 h-4"></i>
                                </div>
                                <div>
                                    <h4 class="text-xs font-bold text-slate-900">Informasi Rekening Bank (Payroll)</h4>
                                    <p class="text-[11px] text-slate-500">Rekening tujuan pencairan transfer gaji bulanan karyawan</p>
                                </div>
                            </div>
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                <div>
                                    <label class="block text-xs font-bold text-slate-700 mb-1">Nama Bank Penerima</label>
                                    <select name="nama_bank" class="w-full px-3.5 py-2.5 rounded-xl border border-slate-200 text-xs focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none bg-white">
                                        <option value="">-- Pilih Bank --</option>
                                        @php
                                            $bankList = ['BCA' => 'Bank Central Asia (BCA)', 'Mandiri' => 'Bank Mandiri', 'BNI' => 'Bank Negara Indonesia (BNI)', 'BRI' => 'Bank Rakyat Indonesia (BRI)', 'BSI' => 'Bank Syariah Indonesia (BSI)', 'CIMB Niaga' => 'CIMB Niaga', 'Permata' => 'Bank Permata', 'Danamon' => 'Bank Danamon', 'BTN' => 'Bank Tabungan Negara (BTN)', 'Bank Jago' => 'Bank Jago', 'SeaBank' => 'SeaBank', 'Lainnya' => 'Bank Lainnya'];
                                            $selectedBank = old('nama_bank', $pegawai->nama_bank);
                                        @endphp
                                        @foreach($bankList as $k => $label)
                                            <option value="{{ $k }}" {{ $selectedBank == $k ? 'selected' : '' }}>{{ $label }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div>
                                    <label class="block text-xs font-bold text-slate-700 mb-1">Nomor Rekening</label>
                                    <input type="text" name="nomor_rekening" value="{{ old('nomor_rekening', $pegawai->nomor_rekening) }}" placeholder="Contoh: 8820123456" class="w-full px-3.5 py-2.5 rounded-xl border border-slate-200 text-xs focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none font-mono">
                                </div>
                                <div>
                                    <label class="block text-xs font-bold text-slate-700 mb-1">Atas Nama Rekening</label>
                                    <input type="text" name="atas_nama_rekening" value="{{ old('atas_nama_rekening', $pegawai->atas_nama_rekening) }}" placeholder="Nama sesuai buku tabungan" class="w-full px-3.5 py-2.5 rounded-xl border border-slate-200 text-xs focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Status Keaktifan Pegawai -->
                    <div class="col-span-1 md:col-span-2 pt-2">
                        <div class="p-4 rounded-2xl {{ $pegawai->status_aktif ? 'bg-emerald-50/60 border border-emerald-200' : 'bg-rose-50/60 border border-rose-200' }} flex flex-col sm:flex-row sm:items-center justify-between gap-3">
                            <div class="flex items-center gap-3">
                                <div class="w-10 h-10 rounded-xl {{ $pegawai->status_aktif ? 'bg-emerald-500 text-white' : 'bg-rose-500 text-white' }} flex items-center justify-center shadow-sm shrink-0">
                                    <i data-lucide="{{ $pegawai->status_aktif ? 'user-check' : 'user-x' }}" class="w-5 h-5"></i>
                                </div>
                                <div>
                                    <h4 class="text-xs font-bold text-slate-900">Status Keaktifan Pegawai</h4>
                                    <p class="text-[11px] text-slate-500">
                                        {{ $pegawai->status_aktif ? 'Pegawai saat ini aktif, dapat masuk aplikasi mobile dan melakukan presensi.' : 'Pegawai saat ini non-aktif. Akses mobile dan pencatatan presensi dinonaktifkan.' }}
                                    </p>
                                </div>
                            </div>
                            <label class="relative inline-flex items-center cursor-pointer select-none shrink-0">
                                <input type="checkbox" name="status_aktif" value="1" {{ old('status_aktif', $pegawai->status_aktif) ? 'checked' : '' }} class="sr-only peer">
                                <div class="w-11 h-6 bg-slate-300 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-slate-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-emerald-600"></div>
                                <span class="ml-2.5 text-xs font-bold text-slate-700">
                                    Centang untuk Aktifkan
                                </span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>

            <!-- TAB 3: PENGATURAN ABSENSI & DENDA -->
            <div id="tab-absensi" class="tab-content hidden space-y-6">
                <!-- Bagian 1: Jam & Pola Kehadiran -->
                <div>
                    <h4 class="text-xs font-bold text-slate-800 uppercase tracking-wider mb-3 pb-1 border-b border-slate-100 flex items-center gap-2">
                        <i data-lucide="clock" class="w-3.5 h-3.5 text-primary-500"></i>
                        <span>Pola & Lokasi Absensi</span>
                    </h4>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div>
                            <label class="block text-xs font-bold text-slate-700 mb-1">Tipe Jadwal Absensi *</label>
                            <select name="tipe_jadwal" required class="w-full px-3.5 py-2.5 rounded-xl border border-slate-200 text-xs focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none">
                                <option value="tetap" {{ old('tipe_jadwal', $pegawai->tipe_jadwal) == 'tetap' ? 'selected' : '' }}>Tetap (Jam Reguler Berulang)</option>
                                <option value="shift_rutin" {{ old('tipe_jadwal', $pegawai->tipe_jadwal) == 'shift_rutin' ? 'selected' : '' }}>Shift Rutin (Pagi / Siang)</option>
                                <option value="fleksibel_roster" {{ old('tipe_jadwal', $pegawai->tipe_jadwal) == 'fleksibel_roster' ? 'selected' : '' }}>Fleksibel Roster (Bulanan)</option>
                            </select>
                        </div>

                        <div>
                            <label class="block text-xs font-bold text-slate-700 mb-1">Lokasi Kantor Default (GPS) *</label>
                            <select name="lokasi_absensi_id" class="w-full px-3.5 py-2.5 rounded-xl border border-slate-200 text-xs focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none">
                                @foreach($lokasiList as $loc)
                                <option value="{{ $loc->id }}" {{ old('lokasi_absensi_id', $pegawai->lokasi_absensi_id) == $loc->id ? 'selected' : '' }}>{{ $loc->nama_lokasi }} (Radius {{ $loc->radius_meter }}m)</option>
                                @endforeach
                            </select>
                        </div>

                        <div>
                            <label class="block text-xs font-bold text-slate-700 mb-1">Pola Hari Kerja</label>
                            <select name="hari_kerja_id" class="w-full px-3.5 py-2.5 rounded-xl border border-slate-200 text-xs focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none">
                                <option value="">-- Standar Perusahaan --</option>
                                @foreach($hariKerjaList as $hk)
                                <option value="{{ $hk->id }}" {{ old('hari_kerja_id', $pegawai->hari_kerja_id) == $hk->id ? 'selected' : '' }}>{{ $hk->nama_pola_kerja }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>

                <!-- Bagian 2: Flagging & Skema Denda Pegawai -->
                <div class="p-4 rounded-2xl bg-orange-50/50 border border-orange-200/60 space-y-4">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center gap-2">
                            <i data-lucide="alert-triangle" class="w-4 h-4 text-orange-600"></i>
                            <h4 class="text-xs font-bold text-orange-950 uppercase tracking-wider">Flagging Kebijakan Denda Keterlambatan</h4>
                        </div>
                        <span class="text-[10px] text-orange-700 font-semibold bg-orange-100/80 px-2 py-0.5 rounded-md">Aturan Sanksi Kehadiran</span>
                    </div>

                    <!-- Pilihan Flag Denda Karyawan -->
                    <div>
                        <label class="block text-xs font-bold text-slate-800 mb-2">Status Pengenaan Denda (Flagging) *</label>
                        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
                            <label class="p-3 rounded-xl border border-slate-200 hover:border-primary-400 cursor-pointer bg-white has-[:checked]:bg-orange-50 has-[:checked]:border-orange-500 transition-all flex flex-col justify-between">
                                <div>
                                    <div class="flex items-center justify-between mb-1">
                                        <span class="text-xs font-bold text-slate-900">Denda Penuh</span>
                                        <input type="radio" name="flag_denda" value="aktif" {{ old('flag_denda', $pegawai->flag_denda) == 'aktif' ? 'checked' : '' }} class="w-4 h-4 text-primary-600 focus:ring-primary-500">
                                    </div>
                                    <p class="text-[10px] text-slate-500">Dikenakan denda masuk & denda pulang normal</p>
                                </div>
                                <span class="mt-2 text-[9px] font-bold text-orange-600 uppercase">Standar Pegawai</span>
                            </label>

                            <label class="p-3 rounded-xl border border-slate-200 hover:border-primary-400 cursor-pointer bg-white has-[:checked]:bg-orange-50 has-[:checked]:border-orange-500 transition-all flex flex-col justify-between">
                                <div>
                                    <div class="flex items-center justify-between mb-1">
                                        <span class="text-xs font-bold text-slate-900">Hanya Masuk</span>
                                        <input type="radio" name="flag_denda" value="hanya_masuk" {{ old('flag_denda', $pegawai->flag_denda) == 'hanya_masuk' ? 'checked' : '' }} class="w-4 h-4 text-primary-600 focus:ring-primary-500">
                                    </div>
                                    <p class="text-[10px] text-slate-500">Hanya denda jika telat masuk, bebas denda pulang</p>
                                </div>
                                <span class="mt-2 text-[9px] font-bold text-blue-600 uppercase">Field / Tim Luar</span>
                            </label>

                            <label class="p-3 rounded-xl border border-slate-200 hover:border-primary-400 cursor-pointer bg-white has-[:checked]:bg-orange-50 has-[:checked]:border-orange-500 transition-all flex flex-col justify-between">
                                <div>
                                    <div class="flex items-center justify-between mb-1">
                                        <span class="text-xs font-bold text-slate-900">Hanya Pulang</span>
                                        <input type="radio" name="flag_denda" value="hanya_pulang" {{ old('flag_denda', $pegawai->flag_denda) == 'hanya_pulang' ? 'checked' : '' }} class="w-4 h-4 text-primary-600 focus:ring-primary-500">
                                    </div>
                                    <p class="text-[10px] text-slate-500">Hanya denda jam pulang, bebas denda masuk</p>
                                </div>
                                <span class="mt-2 text-[9px] font-bold text-purple-600 uppercase">Piket Siang</span>
                            </label>

                            <label class="p-3 rounded-xl border border-slate-200 hover:border-primary-400 cursor-pointer bg-white has-[:checked]:bg-orange-50 has-[:checked]:border-orange-500 transition-all flex flex-col justify-between">
                                <div>
                                    <div class="flex items-center justify-between mb-1">
                                        <span class="text-xs font-bold text-slate-900">Bebas Denda</span>
                                        <input type="radio" name="flag_denda" value="bebas_denda" {{ old('flag_denda', $pegawai->flag_denda) == 'bebas_denda' ? 'checked' : '' }} class="w-4 h-4 text-primary-600 focus:ring-primary-500">
                                    </div>
                                    <p class="text-[10px] text-slate-500">Exempt (Rp 0), bebas segala sanksi denda absensi</p>
                                </div>
                                <span class="mt-2 text-[9px] font-bold text-emerald-600 uppercase">Pimpinan / Direksi</span>
                            </label>
                        </div>
                    </div>

                    <!-- Skema Golongan Denda -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 pt-2">
                        <div>
                            <label class="block text-xs font-bold text-slate-700 mb-1">Kelompok / Golongan Denda *</label>
                            <select name="golongan_denda" required class="w-full px-3.5 py-2.5 rounded-xl border border-slate-200 text-xs bg-white focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none">
                                @foreach($golonganDendaList as $gol)
                                <option value="{{ $gol }}" {{ old('golongan_denda', $pegawai->golongan_denda) == $gol ? 'selected' : '' }}>{{ $gol }}</option>
                                @endforeach
                            </select>
                            <span class="text-[10px] text-slate-400 mt-1 block">Tingkat tarif denda akan mengacu ke aturan golongan denda ini</span>
                        </div>
                        <div class="space-y-2 pt-2">
                            <label class="flex items-center gap-2 cursor-pointer">
                                <input type="checkbox" name="kunci_perangkat" value="1" {{ old('kunci_perangkat', $pegawai->kunci_perangkat) ? 'checked' : '' }} class="w-4 h-4 rounded text-primary-600 focus:ring-primary-500 border-slate-300">
                                <span class="text-xs font-semibold text-slate-800">Kunci Perangkat (Single Device Binding)</span>
                            </label>
                            <label class="flex items-center gap-2 cursor-pointer">
                                <input type="checkbox" name="ijinkan_wfa" value="1" {{ old('ijinkan_wfa', $pegawai->ijinkan_wfa) ? 'checked' : '' }} class="w-4 h-4 rounded text-primary-600 focus:ring-primary-500 border-slate-300">
                                <span class="text-xs font-semibold text-slate-800">Izinkan WFA (Absensi di luar radius GPS)</span>
                            </label>
                            <label class="flex items-start gap-2 cursor-pointer bg-slate-50 p-2.5 rounded-xl border border-slate-200">
                                <input type="checkbox" name="wajib_face_recognition" value="1" {{ old('wajib_face_recognition', $pegawai->wajib_face_recognition ?? true) ? 'checked' : '' }} class="w-4 h-4 mt-0.5 rounded text-primary-600 focus:ring-primary-500 border-slate-300">
                                <div>
                                    <span class="text-xs font-bold text-slate-800 block">Wajibkan Face Recognition (Pencocokan Wajah)</span>
                                    <span class="text-[10px] text-slate-500 block leading-relaxed">Hilangkan centang jika kamera HP karyawan bermasalah agar dapat melakukan presensi dengan foto standar tanpa validasi biometrik.</span>
                                </div>
                            </label>

                            <!-- Status Biometrik & Tombol Reset Wajah -->
                            @if($pegawai->face_descriptor || $pegawai->face_photo_path)
                                <div class="p-3 rounded-xl bg-slate-50 border border-slate-200 flex items-center justify-between">
                                    <div class="flex items-center gap-2.5">
                                        <div class="w-8 h-8 rounded-lg bg-emerald-100 text-emerald-700 flex items-center justify-center shrink-0">
                                            <i data-lucide="scan-face" class="w-4 h-4"></i>
                                        </div>
                                        <div>
                                            <div class="flex items-center gap-2">
                                                <span class="text-xs font-bold text-slate-800">Biometrik Wajah Terdaftar</span>
                                                <span class="text-[9px] px-1.5 py-0.5 rounded font-bold bg-emerald-50 text-emerald-700 border border-emerald-200">Aktif</span>
                                            </div>
                                            <span class="text-[11px] text-slate-500">Scan master tersimpan {{ $pegawai->face_registered_at ? $pegawai->face_registered_at->translatedFormat('d M Y, H:i') : '' }}</span>
                                        </div>
                                    </div>
                                    <button type="button" onclick="if(confirm('Reset template biometrik wajah pegawai ini sekarang?\n\nPegawai wajib scan wajah ulang saat presensi mobile.')) document.getElementById('form-reset-face-edit').submit();" class="px-2.5 py-1.5 rounded-lg bg-white border border-rose-200 text-rose-600 hover:bg-rose-50 text-xs font-bold transition-all shadow-xs inline-flex items-center gap-1">
                                        <i data-lucide="refresh-cw" class="w-3 h-3"></i>
                                        <span>Reset Wajah</span>
                                    </button>
                                </div>
                            @else
                                <div class="p-3 rounded-xl bg-amber-50/60 border border-amber-200/60 flex items-center gap-2.5 text-xs text-amber-800">
                                    <i data-lucide="info" class="w-4 h-4 text-amber-600 shrink-0"></i>
                                    <span>Wajah biometrik belum didaftarkan. Pegawai akan diminta memindai wajah saat presensi di aplikasi mobile.</span>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            <!-- Footer Action -->
            <div class="border-t border-slate-100 pt-5 flex items-center justify-between">
                <span class="text-[11px] text-slate-400">* Kolom wajib diisi</span>
                <div class="flex items-center gap-3">
                    <a href="{{ route('admin.pegawai.show', $pegawai->id) }}" class="px-4 py-2.5 rounded-xl border border-slate-200 text-slate-600 hover:bg-slate-50 text-xs font-semibold">
                        Batal
                    </a>
                    <button type="submit" class="px-5 py-2.5 rounded-xl bg-primary-600 hover:bg-primary-700 text-white text-xs font-bold shadow-sm shadow-primary-500/30">
                        Simpan Perubahan Pegawai
                    </button>
                </div>
            </div>
        </form>

        <form id="form-reset-face-edit" action="{{ route('admin.pegawai.reset-face', $pegawai->id) }}" method="POST" class="hidden">
            @csrf
        </form>
    </div>
</div>

@push('scripts')
<script>
    function switchTab(tabId) {
        document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
        document.querySelectorAll('.tab-btn').forEach(btn => {
            btn.classList.remove('border-primary-600', 'text-primary-600');
            btn.classList.add('border-transparent', 'text-slate-500');
        });

        document.getElementById('tab-' + tabId).classList.remove('hidden');
        const activeBtn = document.getElementById('tab-btn-' + tabId);
        activeBtn.classList.remove('border-transparent', 'text-slate-500');
        activeBtn.classList.add('border-primary-600', 'text-primary-600');
    }

    document.getElementById('input-foto-profil')?.addEventListener('change', function(e) {
        if (e.target.files && e.target.files[0]) {
            const reader = new FileReader();
            reader.onload = function(ev) {
                const container = document.getElementById('preview-foto-container');
                if (container) {
                    container.innerHTML = `<img src="${ev.target.result}" class="w-full h-full object-cover">`;
                }
            };
            reader.readAsDataURL(e.target.files[0]);
        }
    });
</script>
@endpush
@endsection