@extends('layouts.admin')

@section('title', 'Aturan Denda Presensi & Ketidakhadiran')

@section('content')
<div class="space-y-6">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-slate-900 tracking-tight">Aturan Denda Presensi</h1>
            <p class="text-xs text-slate-500 mt-1">Konfigurasi skema denda keterlambatan masuk, denda pulang cepat/lewat batas, dan denda tidak hadir / alpa</p>
        </div>
        <button onclick="document.getElementById('modalTambahDenda').classList.remove('hidden'); toggleMenitInputs('tambah');" class="inline-flex items-center gap-2 px-4 py-2.5 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="plus" class="w-4 h-4"></i>
            <span>Tambah Aturan Denda</span>
        </button>
    </div>

    <!-- Info Box: Penjelasan Perhitungan Denda -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div class="p-4 rounded-2xl bg-amber-50/70 border border-amber-200/60 flex items-start gap-3">
            <div class="w-9 h-9 rounded-xl bg-amber-100 text-amber-700 flex items-center justify-center shrink-0 mt-0.5">
                <i data-lucide="log-in" class="w-4 h-4"></i>
            </div>
            <div>
                <h4 class="text-xs font-bold text-amber-900">Perhitungan Denda Masuk</h4>
                <p class="text-[11px] text-amber-800 mt-0.5 leading-relaxed">
                    Dihitung mulai dari batas <strong>Akhir Masuk</strong> shift kerja. Keterlambatan menit dikenakan sanksi denda proporsional sesuai aturan.
                </p>
            </div>
        </div>

        <div class="p-4 rounded-2xl bg-blue-50/70 border border-blue-200/60 flex items-start gap-3">
            <div class="w-9 h-9 rounded-xl bg-blue-100 text-blue-700 flex items-center justify-center shrink-0 mt-0.5">
                <i data-lucide="log-out" class="w-4 h-4"></i>
            </div>
            <div>
                <h4 class="text-xs font-bold text-blue-900">Perhitungan Denda Pulang</h4>
                <p class="text-[11px] text-blue-800 mt-0.5 leading-relaxed">
                    Dihitung jika karyawan pulang mendahului batas <strong>Awal Pulang</strong> (pulang cepat) atau melewati batas <strong>Akhir Pulang</strong>.
                </p>
            </div>
        </div>

        <div class="p-4 rounded-2xl bg-rose-50/70 border border-rose-200/60 flex items-start gap-3">
            <div class="w-9 h-9 rounded-xl bg-rose-100 text-rose-700 flex items-center justify-center shrink-0 mt-0.5">
                <i data-lucide="user-x" class="w-4 h-4"></i>
            </div>
            <div>
                <h4 class="text-xs font-bold text-rose-900">Denda Tidak Hadir (Alfa)</h4>
                <p class="text-[11px] text-rose-800 mt-0.5 leading-relaxed">
                    Dikenakan pada karyawan yang tidak hadir / tidak absen masuk tanpa keterangan. <strong>Dicatat otomatis saat penguncian absensi</strong> akhir bulan.
                </p>
            </div>
        </div>
    </div>

    <!-- Filter Bar: Golongan Denda & Kategori -->
    <div class="flex flex-wrap items-center justify-between gap-3 p-4 rounded-2xl bg-white border border-slate-200/80 shadow-sm">
        <div class="flex items-center gap-2">
            <span class="text-xs font-bold text-slate-700">Filter Golongan:</span>
            <div class="flex flex-wrap gap-1.5">
                <a href="{{ route('admin.pengaturan-absensi.denda') }}" class="px-3 py-1.5 rounded-xl text-xs font-semibold {{ !request('golongan') ? 'bg-primary-600 text-white' : 'bg-slate-100 text-slate-600 hover:bg-slate-200' }}">
                    Semua
                </a>
                @foreach($golonganList as $gol)
                <a href="{{ route('admin.pengaturan-absensi.denda', ['golongan' => $gol, 'kategori' => request('kategori')]) }}" class="px-3 py-1.5 rounded-xl text-xs font-semibold {{ request('golongan') == $gol ? 'bg-primary-600 text-white' : 'bg-slate-100 text-slate-600 hover:bg-slate-200' }}">
                    {{ $gol }}
                </a>
                @endforeach
            </div>
        </div>

        <div class="flex items-center gap-2">
            <span class="text-xs font-bold text-slate-700">Kategori:</span>
            <div class="flex flex-wrap gap-1.5">
                <a href="{{ route('admin.pengaturan-absensi.denda', ['golongan' => request('golongan')]) }}" class="px-3 py-1.5 rounded-xl text-xs font-semibold {{ !request('kategori') ? 'bg-slate-800 text-white' : 'bg-slate-100 text-slate-600 hover:bg-slate-200' }}">
                    Semua
                </a>
                <a href="{{ route('admin.pengaturan-absensi.denda', ['golongan' => request('golongan'), 'kategori' => 'masuk']) }}" class="px-3 py-1.5 rounded-xl text-xs font-semibold {{ request('kategori') == 'masuk' ? 'bg-orange-500 text-white' : 'bg-orange-50 text-orange-700 hover:bg-orange-100' }}">
                    Denda Masuk
                </a>
                <a href="{{ route('admin.pengaturan-absensi.denda', ['golongan' => request('golongan'), 'kategori' => 'pulang']) }}" class="px-3 py-1.5 rounded-xl text-xs font-semibold {{ request('kategori') == 'pulang' ? 'bg-blue-600 text-white' : 'bg-blue-50 text-blue-700 hover:bg-blue-100' }}">
                    Denda Pulang
                </a>
                <a href="{{ route('admin.pengaturan-absensi.denda', ['golongan' => request('golongan'), 'kategori' => 'tidak_hadir']) }}" class="px-3 py-1.5 rounded-xl text-xs font-semibold {{ request('kategori') == 'tidak_hadir' ? 'bg-rose-600 text-white' : 'bg-rose-50 text-rose-700 hover:bg-rose-100' }}">
                    Denda Tidak Hadir
                </a>
            </div>
        </div>
    </div>

    <!-- Tabel Skema Denda -->
    <div class="rounded-2xl bg-white border border-slate-200/80 shadow-sm overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full min-w-[850px] text-left border-collapse">
                <thead>
                    <tr class="border-b border-slate-100 bg-slate-50/60 text-[11px] font-bold text-slate-400 uppercase tracking-wider">
                        <th class="py-3 px-4">Golongan Pegawai</th>
                        <th class="py-3 px-4">Kategori Denda</th>
                        <th class="py-3 px-4">Rentang Waktu / Satuan</th>
                        <th class="py-3 px-4">Jenis Sanksi</th>
                        <th class="py-3 px-4">Nominal Denda</th>
                        <th class="py-3 px-4">Keterangan</th>
                        <th class="py-3 px-4 text-center">Status</th>
                        <th class="py-3 px-4 text-right">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100 text-xs">
                    @forelse($dendaList as $d)
                    <tr class="hover:bg-slate-50/70 transition-colors">
                        <td class="py-3.5 px-4 font-bold text-slate-800">
                            <span class="inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-extrabold bg-slate-100 text-slate-800 border border-slate-200">
                                {{ $d->golongan_denda ?? 'Reguler' }}
                            </span>
                        </td>
                        <td class="py-3.5 px-4">
                            @if($d->kategori_denda == 'masuk')
                            <span class="px-2.5 py-1 rounded-lg text-[10px] font-extrabold uppercase tracking-wider bg-orange-100 text-orange-800 border border-orange-200 flex items-center gap-1 w-max">
                                <i data-lucide="log-in" class="w-3 h-3 text-orange-600"></i> Denda Masuk
                            </span>
                            @elseif($d->kategori_denda == 'pulang')
                            <span class="px-2.5 py-1 rounded-lg text-[10px] font-extrabold uppercase tracking-wider bg-blue-50 text-blue-700 border border-blue-200 flex items-center gap-1 w-max">
                                <i data-lucide="log-out" class="w-3 h-3 text-blue-600"></i> Denda Pulang
                            </span>
                            @else
                            <span class="px-2.5 py-1 rounded-lg text-[10px] font-extrabold uppercase tracking-wider bg-rose-100 text-rose-800 border border-rose-200 flex items-center gap-1 w-max">
                                <i data-lucide="user-x" class="w-3 h-3 text-rose-600"></i> Denda Tidak Hadir
                            </span>
                            @endif
                        </td>
                        <td class="py-3.5 px-4 font-bold text-slate-900">
                            @if($d->kategori_denda == 'tidak_hadir')
                            <span class="text-rose-700 flex items-center gap-1">
                                <i data-lucide="calendar" class="w-3.5 h-3.5"></i>
                                <span>Per Hari Tidak Hadir</span>
                            </span>
                            @else
                            {{ $d->menit_keterlambatan_awal }} - {{ $d->menit_keterlambatan_akhir }} Menit
                            @endif
                        </td>
                        <td class="py-3.5 px-4">
                            @if($d->jenis_denda == 'nominal_tetap')
                            <span class="px-2 py-0.5 rounded text-[10px] font-bold bg-amber-50 text-amber-700 border border-amber-200">
                                Nominal Tetap
                            </span>
                            @elseif($d->jenis_denda == 'potong_satu_hari')
                            <span class="px-2 py-0.5 rounded text-[10px] font-bold bg-rose-100 text-rose-800 border border-rose-300">
                                Potong 1 Hari Kerja
                            </span>
                            @elseif($d->jenis_denda == 'potong_setengah_hari')
                            <span class="px-2 py-0.5 rounded text-[10px] font-bold bg-rose-50 text-rose-700 border border-rose-200">
                                Potong 1/2 Hari Kerja
                            </span>
                            @else
                            <span class="px-2 py-0.5 rounded text-[10px] font-bold bg-purple-50 text-purple-700 border border-purple-200">
                                Persentase Gaji
                            </span>
                            @endif
                        </td>
                        <td class="py-3.5 px-4 font-mono font-bold text-rose-600">
                            @if($d->jenis_denda == 'nominal_tetap')
                            Rp {{ number_format($d->nominal_denda, 0, ',', '.') }}
                            @elseif($d->jenis_denda == 'potong_satu_hari')
                            1 Hari Gaji Pokok
                            @elseif($d->jenis_denda == 'potong_setengah_hari')
                            Setengah Hari Gaji
                            @else
                            {{ $d->nominal_denda }}%
                            @endif
                        </td>
                        <td class="py-3.5 px-4 text-slate-500">
                            {{ $d->keterangan ?? '-' }}
                        </td>
                        <td class="py-3.5 px-4 text-center">
                            <span class="px-2 py-0.5 rounded-full text-[10px] font-bold bg-emerald-50 text-emerald-700 border border-emerald-200">
                                Aktif
                            </span>
                        </td>
                        <td class="py-3.5 px-4 text-right">
                            <div class="flex items-center justify-end gap-1">
                                <button type="button" 
                                    onclick="openEditModal({{ json_encode($d) }})" 
                                    class="p-1.5 rounded-lg text-slate-400 hover:text-amber-600 hover:bg-amber-50 transition-colors" 
                                    title="Edit Aturan Denda">
                                    <i data-lucide="edit-3" class="w-4 h-4"></i>
                                </button>
                                <form action="{{ route('admin.pengaturan-absensi.denda.destroy', $d->id) }}" method="POST" onsubmit="return confirm('Hapus aturan denda ini?');" class="inline">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="p-1.5 rounded-lg text-slate-400 hover:text-rose-600 hover:bg-rose-50 transition-colors" title="Hapus">
                                        <i data-lucide="trash-2" class="w-4 h-4"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="8" class="py-8 text-center text-slate-400">Belum ada aturan denda tersimpan</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Modal Tambah Denda -->
<div id="modalTambahDenda" class="fixed inset-0 z-50 bg-slate-900/40 backdrop-blur-sm hidden flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl max-w-md w-full p-5 sm:p-6 shadow-xl space-y-4 max-h-[92vh] overflow-y-auto">
        <div class="flex items-center justify-between pb-3 border-b border-slate-100">
            <h3 class="font-bold text-slate-900 text-sm">Tambah Aturan Denda</h3>
            <button onclick="document.getElementById('modalTambahDenda').classList.add('hidden')" class="p-1 text-slate-400 hover:text-slate-600">
                <i data-lucide="x" class="w-4 h-4"></i>
            </button>
        </div>
        <form action="{{ route('admin.pengaturan-absensi.denda.store') }}" method="POST" class="space-y-4 text-xs">
            @csrf

            <!-- PILIHAN GOLONGAN DENDA -->
            <div>
                <label class="block font-bold text-slate-700 mb-1">Golongan / Skema Denda Pegawai *</label>
                <div class="grid grid-cols-3 gap-2 mb-2">
                    <label class="p-2.5 rounded-xl border border-slate-200 hover:border-primary-400 cursor-pointer text-center bg-slate-50/50 has-[:checked]:bg-primary-50 has-[:checked]:border-primary-500 has-[:checked]:text-primary-700">
                        <input type="radio" name="golongan_denda" value="Reguler" checked class="hidden">
                        <span class="font-bold block text-xs">Reguler</span>
                        <span class="text-[9px] text-slate-400 block">Staf Umum</span>
                    </label>
                    <label class="p-2.5 rounded-xl border border-slate-200 hover:border-primary-400 cursor-pointer text-center bg-slate-50/50 has-[:checked]:bg-primary-50 has-[:checked]:border-primary-500 has-[:checked]:text-primary-700">
                        <input type="radio" name="golongan_denda" value="Shift" class="hidden">
                        <span class="font-bold block text-xs">Shift</span>
                        <span class="text-[9px] text-slate-400 block">Operasional</span>
                    </label>
                    <label class="p-2.5 rounded-xl border border-slate-200 hover:border-primary-400 cursor-pointer text-center bg-slate-50/50 has-[:checked]:bg-primary-50 has-[:checked]:border-primary-500 has-[:checked]:text-primary-700">
                        <input type="radio" name="golongan_denda" value="Khusus" class="hidden">
                        <span class="font-bold block text-xs">Khusus</span>
                        <span class="text-[9px] text-slate-400 block">Outsourcing</span>
                    </label>
                </div>
            </div>

            <!-- PILIHAN KATEGORI DENDA: MASUK, PULANG, ATAU TIDAK HADIR -->
            <div>
                <label class="block font-bold text-slate-700 mb-1.5">Kategori Denda *</label>
                <div class="grid grid-cols-3 gap-2">
                    <label class="p-2.5 rounded-xl border border-slate-200 hover:border-primary-400 cursor-pointer flex flex-col items-center text-center bg-slate-50/50 has-[:checked]:bg-orange-50 has-[:checked]:border-orange-500">
                        <input type="radio" name="kategori_denda" value="masuk" checked onchange="toggleMenitInputs('tambah')" class="w-3.5 h-3.5 text-orange-600 mb-1">
                        <span class="block font-bold text-slate-800 text-[11px]">Masuk</span>
                        <span class="text-[9px] text-slate-400">Akhir masuk</span>
                    </label>

                    <label class="p-2.5 rounded-xl border border-slate-200 hover:border-primary-400 cursor-pointer flex flex-col items-center text-center bg-slate-50/50 has-[:checked]:bg-blue-50 has-[:checked]:border-blue-500">
                        <input type="radio" name="kategori_denda" value="pulang" onchange="toggleMenitInputs('tambah')" class="w-3.5 h-3.5 text-blue-600 mb-1">
                        <span class="block font-bold text-slate-800 text-[11px]">Pulang</span>
                        <span class="text-[9px] text-slate-400">Batas pulang</span>
                    </label>

                    <label class="p-2.5 rounded-xl border border-slate-200 hover:border-primary-400 cursor-pointer flex flex-col items-center text-center bg-slate-50/50 has-[:checked]:bg-rose-50 has-[:checked]:border-rose-500">
                        <input type="radio" name="kategori_denda" value="tidak_hadir" onchange="toggleMenitInputs('tambah')" class="w-3.5 h-3.5 text-rose-600 mb-1">
                        <span class="block font-bold text-rose-800 text-[11px]">Tidak Hadir</span>
                        <span class="text-[9px] text-rose-500">Alpa / Absen</span>
                    </label>
                </div>
            </div>

            <!-- CONTAINER MENIT KETERLAMBATAN -->
            <div id="tambah_container_menit" class="grid grid-cols-2 gap-3">
                <div>
                    <label class="block font-bold text-slate-700 mb-1">Menit Awal *</label>
                    <input type="number" id="tambah_menit_keterlambatan_awal" name="menit_keterlambatan_awal" value="1" placeholder="Contoh: 1" class="w-full px-3 py-2 rounded-xl border border-slate-200 outline-none">
                </div>
                <div>
                    <label class="block font-bold text-slate-700 mb-1">Menit Akhir *</label>
                    <input type="number" id="tambah_menit_keterlambatan_akhir" name="menit_keterlambatan_akhir" value="15" placeholder="Contoh: 15" class="w-full px-3 py-2 rounded-xl border border-slate-200 outline-none">
                </div>
            </div>

            <div id="tambah_info_tidak_hadir" class="hidden p-3 rounded-xl bg-rose-50/70 border border-rose-200/60 text-[11px] text-rose-800 flex items-start gap-2">
                <i data-lucide="info" class="w-4 h-4 text-rose-600 shrink-0 mt-0.5"></i>
                <span>Denda ini berlaku flat <strong>per hari tidak hadir / alpa</strong> dan dihitung otomatis saat closing laporan akhir bulan.</span>
            </div>

            <div>
                <label class="block font-bold text-slate-700 mb-1">Jenis Sanksi Denda *</label>
                <select name="jenis_denda" id="tambah_jenis_denda" required class="w-full px-3 py-2 rounded-xl border border-slate-200 outline-none">
                    <option value="nominal_tetap">Nominal Rupiah Tetap</option>
                    <option value="potong_satu_hari">Potong 1 Hari Gaji Pokok (Full Day)</option>
                    <option value="potong_setengah_hari">Potong 1/2 Hari Gaji Pokok (Half Day)</option>
                    <option value="persen_gaji">Persentase Gaji Pokok (%)</option>
                </select>
            </div>

            <div>
                <label class="block font-bold text-slate-700 mb-1">Nominal (Rupiah / %)</label>
                <input type="number" name="nominal_denda" value="50000" min="0" class="w-full px-3 py-2 rounded-xl border border-slate-200 outline-none">
                <span class="text-[10px] text-slate-400 mt-0.5 block">Diabaikan jika memilih opsi Potong 1 Hari atau 1/2 Hari Kerja</span>
            </div>

            <div>
                <label class="block font-bold text-slate-700 mb-1">Keterangan Aturan</label>
                <input type="text" name="keterangan" placeholder="Contoh: Denda alpa 1 hari kerja tanpa keterangan" class="w-full px-3 py-2 rounded-xl border border-slate-200 outline-none">
            </div>

            <div class="pt-3 border-t border-slate-100 flex justify-end gap-2">
                <button type="button" onclick="document.getElementById('modalTambahDenda').classList.add('hidden')" class="px-4 py-2 rounded-xl border border-slate-200 text-slate-600 font-semibold">Batal</button>
                <button type="submit" class="px-4 py-2 rounded-xl bg-primary-600 text-white font-bold hover:bg-primary-700">Simpan Aturan</button>
            </div>
        </form>
    </div>
</div>

<!-- Modal Edit Denda -->
<div id="modalEditDenda" class="fixed inset-0 z-50 bg-slate-900/40 backdrop-blur-sm hidden flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl max-w-md w-full p-5 sm:p-6 shadow-xl space-y-4 max-h-[92vh] overflow-y-auto">
        <div class="flex items-center justify-between pb-3 border-b border-slate-100">
            <h3 class="font-bold text-slate-900 text-sm">Edit Data Aturan Denda</h3>
            <button onclick="document.getElementById('modalEditDenda').classList.add('hidden')" class="p-1 text-slate-400 hover:text-slate-600">
                <i data-lucide="x" class="w-4 h-4"></i>
            </button>
        </div>
        <form id="formEditDenda" action="" method="POST" class="space-y-4 text-xs">
            @csrf
            @method('PUT')

            <!-- PILIHAN GOLONGAN DENDA -->
            <div>
                <label class="block font-bold text-slate-700 mb-1">Golongan / Skema Denda Pegawai *</label>
                <div class="grid grid-cols-3 gap-2 mb-2">
                    <label class="p-2.5 rounded-xl border border-slate-200 hover:border-primary-400 cursor-pointer text-center bg-slate-50/50 has-[:checked]:bg-primary-50 has-[:checked]:border-primary-500 has-[:checked]:text-primary-700">
                        <input type="radio" id="edit_golongan_reguler" name="golongan_denda" value="Reguler" class="hidden">
                        <span class="font-bold block text-xs">Reguler</span>
                        <span class="text-[9px] text-slate-400 block">Staf Umum</span>
                    </label>
                    <label class="p-2.5 rounded-xl border border-slate-200 hover:border-primary-400 cursor-pointer text-center bg-slate-50/50 has-[:checked]:bg-primary-50 has-[:checked]:border-primary-500 has-[:checked]:text-primary-700">
                        <input type="radio" id="edit_golongan_shift" name="golongan_denda" value="Shift" class="hidden">
                        <span class="font-bold block text-xs">Shift</span>
                        <span class="text-[9px] text-slate-400 block">Operasional</span>
                    </label>
                    <label class="p-2.5 rounded-xl border border-slate-200 hover:border-primary-400 cursor-pointer text-center bg-slate-50/50 has-[:checked]:bg-primary-50 has-[:checked]:border-primary-500 has-[:checked]:text-primary-700">
                        <input type="radio" id="edit_golongan_khusus" name="golongan_denda" value="Khusus" class="hidden">
                        <span class="font-bold block text-xs">Khusus</span>
                        <span class="text-[9px] text-slate-400 block">Outsourcing</span>
                    </label>
                </div>
            </div>

            <!-- PILIHAN KATEGORI DENDA: MASUK, PULANG, ATAU TIDAK HADIR -->
            <div>
                <label class="block font-bold text-slate-700 mb-1.5">Kategori Denda *</label>
                <div class="grid grid-cols-3 gap-2">
                    <label class="p-2.5 rounded-xl border border-slate-200 hover:border-primary-400 cursor-pointer flex flex-col items-center text-center bg-slate-50/50 has-[:checked]:bg-orange-50 has-[:checked]:border-orange-500">
                        <input type="radio" id="edit_kategori_masuk" name="kategori_denda" value="masuk" onchange="toggleMenitInputs('edit')" class="w-3.5 h-3.5 text-orange-600 mb-1">
                        <span class="block font-bold text-slate-800 text-[11px]">Masuk</span>
                        <span class="text-[9px] text-slate-400">Akhir masuk</span>
                    </label>

                    <label class="p-2.5 rounded-xl border border-slate-200 hover:border-primary-400 cursor-pointer flex flex-col items-center text-center bg-slate-50/50 has-[:checked]:bg-blue-50 has-[:checked]:border-blue-500">
                        <input type="radio" id="edit_kategori_pulang" name="kategori_denda" value="pulang" onchange="toggleMenitInputs('edit')" class="w-3.5 h-3.5 text-blue-600 mb-1">
                        <span class="block font-bold text-slate-800 text-[11px]">Pulang</span>
                        <span class="text-[9px] text-slate-400">Batas pulang</span>
                    </label>

                    <label class="p-2.5 rounded-xl border border-slate-200 hover:border-primary-400 cursor-pointer flex flex-col items-center text-center bg-slate-50/50 has-[:checked]:bg-rose-50 has-[:checked]:border-rose-500">
                        <input type="radio" id="edit_kategori_tidak_hadir" name="kategori_denda" value="tidak_hadir" onchange="toggleMenitInputs('edit')" class="w-3.5 h-3.5 text-rose-600 mb-1">
                        <span class="block font-bold text-rose-800 text-[11px]">Tidak Hadir</span>
                        <span class="text-[9px] text-rose-500">Alpa / Absen</span>
                    </label>
                </div>
            </div>

            <!-- CONTAINER MENIT EDIT -->
            <div id="edit_container_menit" class="grid grid-cols-2 gap-3">
                <div>
                    <label class="block font-bold text-slate-700 mb-1">Menit Awal *</label>
                    <input type="number" id="edit_menit_keterlambatan_awal" name="menit_keterlambatan_awal" class="w-full px-3 py-2 rounded-xl border border-slate-200 outline-none">
                </div>
                <div>
                    <label class="block font-bold text-slate-700 mb-1">Menit Akhir *</label>
                    <input type="number" id="edit_menit_keterlambatan_akhir" name="menit_keterlambatan_akhir" class="w-full px-3 py-2 rounded-xl border border-slate-200 outline-none">
                </div>
            </div>

            <div id="edit_info_tidak_hadir" class="hidden p-3 rounded-xl bg-rose-50/70 border border-rose-200/60 text-[11px] text-rose-800 flex items-start gap-2">
                <i data-lucide="info" class="w-4 h-4 text-rose-600 shrink-0 mt-0.5"></i>
                <span>Denda ini berlaku flat <strong>per hari tidak hadir / alpa</strong> dan dihitung otomatis saat closing laporan akhir bulan.</span>
            </div>

            <div>
                <label class="block font-bold text-slate-700 mb-1">Jenis Sanksi Denda *</label>
                <select id="edit_jenis_denda" name="jenis_denda" required class="w-full px-3 py-2 rounded-xl border border-slate-200 outline-none">
                    <option value="nominal_tetap">Nominal Rupiah Tetap</option>
                    <option value="potong_satu_hari">Potong 1 Hari Gaji Pokok (Full Day)</option>
                    <option value="potong_setengah_hari">Potong 1/2 Hari Gaji Pokok (Half Day)</option>
                    <option value="persen_gaji">Persentase Gaji Pokok (%)</option>
                </select>
            </div>

            <div>
                <label class="block font-bold text-slate-700 mb-1">Nominal (Rupiah / %)</label>
                <input type="number" id="edit_nominal_denda" name="nominal_denda" min="0" class="w-full px-3 py-2 rounded-xl border border-slate-200 outline-none">
                <span class="text-[10px] text-slate-400 mt-0.5 block">Diabaikan jika memilih opsi Potong 1 Hari atau 1/2 Hari Kerja</span>
            </div>

            <div>
                <label class="block font-bold text-slate-700 mb-1">Keterangan</label>
                <input type="text" id="edit_keterangan" name="keterangan" class="w-full px-3 py-2 rounded-xl border border-slate-200 outline-none">
            </div>

            <div class="pt-3 border-t border-slate-100 flex justify-end gap-2">
                <button type="button" onclick="document.getElementById('modalEditDenda').classList.add('hidden')" class="px-4 py-2 rounded-xl border border-slate-200 text-slate-600 font-semibold">Batal</button>
                <button type="submit" class="px-4 py-2 rounded-xl bg-primary-600 text-white font-bold hover:bg-primary-700">Simpan Perubahan</button>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
function toggleMenitInputs(mode) {
    const isEdit = mode === 'edit';
    const radioTidakHadir = isEdit 
        ? document.getElementById('edit_kategori_tidak_hadir') 
        : document.querySelector('input[name="kategori_denda"][value="tidak_hadir"]');
    
    const container = document.getElementById(isEdit ? 'edit_container_menit' : 'tambah_container_menit');
    const info = document.getElementById(isEdit ? 'edit_info_tidak_hadir' : 'tambah_info_tidak_hadir');
    const inputAwal = document.getElementById(isEdit ? 'edit_menit_keterlambatan_awal' : 'tambah_menit_keterlambatan_awal');
    const inputAkhir = document.getElementById(isEdit ? 'edit_menit_keterlambatan_akhir' : 'tambah_menit_keterlambatan_akhir');

    if (radioTidakHadir && radioTidakHadir.checked) {
        if (container) container.classList.add('hidden');
        if (info) info.classList.remove('hidden');
        if (inputAwal) { inputAwal.value = 0; inputAwal.removeAttribute('required'); }
        if (inputAkhir) { inputAkhir.value = 0; inputAkhir.removeAttribute('required'); }
    } else {
        if (container) container.classList.remove('hidden');
        if (info) info.classList.add('hidden');
        if (inputAwal) { 
            if (inputAwal.value == 0) inputAwal.value = 1; 
            inputAwal.setAttribute('required', 'required'); 
        }
        if (inputAkhir) { 
            if (inputAkhir.value == 0) inputAkhir.value = 15; 
            inputAkhir.setAttribute('required', 'required'); 
        }
    }
}

function openEditModal(d) {
    const form = document.getElementById('formEditDenda');
    form.action = `/admin/pengaturan-absensi/denda/${d.id}`;
    
    // Set radio golongan
    const gol = d.golongan_denda || 'Reguler';
    if (gol === 'Shift') {
        document.getElementById('edit_golongan_shift').checked = true;
    } else if (gol === 'Khusus') {
        document.getElementById('edit_golongan_khusus').checked = true;
    } else {
        document.getElementById('edit_golongan_reguler').checked = true;
    }

    // Set radio kategori
    if (d.kategori_denda === 'pulang') {
        document.getElementById('edit_kategori_pulang').checked = true;
    } else if (d.kategori_denda === 'tidak_hadir') {
        document.getElementById('edit_kategori_tidak_hadir').checked = true;
    } else {
        document.getElementById('edit_kategori_masuk').checked = true;
    }

    document.getElementById('edit_menit_keterlambatan_awal').value = d.menit_keterlambatan_awal || 0;
    document.getElementById('edit_menit_keterlambatan_akhir').value = d.menit_keterlambatan_akhir || 0;
    document.getElementById('edit_jenis_denda').value = d.jenis_denda;
    document.getElementById('edit_nominal_denda').value = d.nominal_denda;
    document.getElementById('edit_keterangan').value = d.keterangan || '';

    toggleMenitInputs('edit');

    document.getElementById('modalEditDenda').classList.remove('hidden');
    if (window.lucide) { lucide.createIcons(); }
}
</script>
@endpush
@endsection