@extends('layouts.admin')

@section('title', 'Tambah Pegawai Baru')

@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.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">Tambah Pegawai Baru</h1>
                <p class="text-xs text-slate-500">Lengkapi informasi identitas pribadi, pekerjaan, pendidikan, dan absensi</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('pendidikan')" id="tab-btn-pendidikan" 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="graduation-cap" class="w-4 h-4"></i>
                <span>Pendidikan</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</span>
            </button>
        </div>

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

            <!-- 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 (Opsional)</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">
                            <i data-lucide="user" class="w-8 h-8"></i>
                        </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">Format: JPG, PNG, WEBP. Maksimal ukuran 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') }}" required placeholder="Contoh: 317101..." 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') }}" required placeholder="Contoh: Kemal Maulana, S.Kom" 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">Laki-laki</option>
                            <option value="P">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">
                            <option value="Islam">Islam</option>
                            <option value="Kristen">Kristen</option>
                            <option value="Katolik">Katolik</option>
                            <option value="Hindu">Hindu</option>
                            <option value="Buddha">Buddha</option>
                            <option value="Konghucu">Konghucu</option>
                            <option value="Lainnya">Lainnya</option>
                        </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') }}" placeholder="Jakarta" 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') }}" 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') }}" required placeholder="email@perusahaan.com" 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') }}" placeholder="08123456789" 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">Belum Menikah</option>
                            <option value="menikah">Menikah</option>
                            <option value="cerai">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') }}" 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" 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" 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" 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') }}" required placeholder="Contoh: NIP-2026-089" 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">Karyawan Tetap</option>
                            <option value="kontrak">Karyawan Kontrak</option>
                            <option value="probation">Probation / Masa Percobaan</option>
                            <option value="magang">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 }}">{{ $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 }}">{{ $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 }}">{{ $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 }}">{{ $ats->nama_lengkap }} ({{ $ats->jabatan->nama_jabatan ?? '-' }})</option>
                            @endforeach
                        </select>
                        <span class="text-[10px] text-slate-400 mt-1 block">Atasan langsung yang berwenang menyetujui pengajuan izin & lembur</span>
                    </div>

                    <div>
                        <label class="block text-xs font-bold text-slate-700 mb-1">Tanggal Bergabung *</label>
                        <input type="date" name="tanggal_masuk" value="{{ date('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', 0) }}" min="0" placeholder="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>
                                        <option value="BCA" {{ old('nama_bank') == 'BCA' ? 'selected' : '' }}>Bank Central Asia (BCA)</option>
                                        <option value="Mandiri" {{ old('nama_bank') == 'Mandiri' ? 'selected' : '' }}>Bank Mandiri</option>
                                        <option value="BNI" {{ old('nama_bank') == 'BNI' ? 'selected' : '' }}>Bank Negara Indonesia (BNI)</option>
                                        <option value="BRI" {{ old('nama_bank') == 'BRI' ? 'selected' : '' }}>Bank Rakyat Indonesia (BRI)</option>
                                        <option value="BSI" {{ old('nama_bank') == 'BSI' ? 'selected' : '' }}>Bank Syariah Indonesia (BSI)</option>
                                        <option value="CIMB Niaga" {{ old('nama_bank') == 'CIMB Niaga' ? 'selected' : '' }}>CIMB Niaga</option>
                                        <option value="Permata" {{ old('nama_bank') == 'Permata' ? 'selected' : '' }}>Bank Permata</option>
                                        <option value="Danamon" {{ old('nama_bank') == 'Danamon' ? 'selected' : '' }}>Bank Danamon</option>
                                        <option value="BTN" {{ old('nama_bank') == 'BTN' ? 'selected' : '' }}>Bank Tabungan Negara (BTN)</option>
                                        <option value="Bank Jago" {{ old('nama_bank') == 'Bank Jago' ? 'selected' : '' }}>Bank Jago</option>
                                        <option value="SeaBank" {{ old('nama_bank') == 'SeaBank' ? 'selected' : '' }}>SeaBank</option>
                                        <option value="Lainnya" {{ old('nama_bank') == 'Lainnya' ? 'selected' : '' }}>Bank Lainnya</option>
                                    </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') }}" 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') }}" 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>
                </div>
            </div>

            <!-- TAB 3: PENDIDIKAN -->
            <div id="tab-pendidikan" 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">Jenjang Pendidikan Terakhir</label>
                        <select name="jenjang" 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="S1">Strata 1 (S1)</option>
                            <option value="D3">Diploma 3 (D3)</option>
                            <option value="S2">Magister (S2)</option>
                            <option value="SMA">SMA / SMK</option>
                            <option value="S3">Doktor (S3)</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-xs font-bold text-slate-700 mb-1">Nama Universitas / Sekolah</label>
                        <input type="text" name="nama_institusi" placeholder="Contoh: Universitas Gadjah Mada" 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">Jurusan / Program Studi</label>
                        <input type="text" name="jurusan" placeholder="Contoh: Sistem Informasi" 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 class="grid grid-cols-2 gap-3">
                        <div>
                            <label class="block text-xs font-bold text-slate-700 mb-1">Tahun Lulus</label>
                            <input type="number" name="tahun_lulus" value="2022" 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">Nilai IPK</label>
                            <input type="number" step="0.01" name="nilai_ipk" placeholder="3.75" 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>

            <!-- TAB 4: PENGATURAN ABSENSI -->
            <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">Tetap (Jam Reguler Berulang Tiap Hari Kerja)</option>
                                <option value="shift_rutin">Shift Rutin (Pagi / Siang Berjadwal)</option>
                                <option value="fleksibel_roster">Fleksibel Roster (Dijadwalkan 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 }}">{{ $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 }}">{{ $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" 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" 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" 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" 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 }}">{{ $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" 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" 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" 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">Aktifkan verifikasi wajah biometrik saat absen. Bisa dimatikan jika kamera HP bermasalah.</span>
                                </div>
                            </label>
                        </div>
                    </div>

                    <!-- Otomatisasi Akun Login Portal & Mobile -->
                    <div class="mt-4 p-4 rounded-xl bg-blue-50/70 border border-blue-200/80">
                        <div class="flex items-center gap-2 font-bold text-xs text-blue-900 mb-1">
                            <i data-lucide="key-round" class="w-4 h-4 text-blue-600"></i>
                            <span>Otomatisasi Akun Login Portal Web & Mobile</span>
                        </div>
                        <p class="text-[11px] text-blue-700 leading-relaxed mb-3">
                            Sistem akan otomatis membuat akun login pada tabel pengguna untuk pegawai ini. Pegawai dapat login ke portal website maupun aplikasi mobile menggunakan <strong>NIP</strong> atau <strong>Email</strong> terdaftar.
                        </p>
                        <div class="max-w-md">
                            <label class="block text-xs font-bold text-slate-700 mb-1">Kata Sandi Awal (Opsional)</label>
                            <input type="text" name="password" value="{{ old('password') }}" placeholder="Default: password123" 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">
                            <span class="text-[10px] text-slate-400 mt-1 block">Kosongkan jika ingin menggunakan kata sandi standar sistem: <code>password123</code></span>
                        </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.index') }}" 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 Pegawai
                    </button>
                </div>
            </div>
        </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