@extends('layouts.admin')

@section('title', 'Konfigurasi Kuota Cuti Pegawai')

@section('content')
<div class="space-y-6">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
            <div class="flex items-center gap-2.5">
                <div class="w-9 h-9 rounded-xl bg-primary-50 text-primary-600 flex items-center justify-center font-bold">
                    <i data-lucide="calendar-heart" class="w-5 h-5"></i>
                </div>
                <div>
                    <h1 class="text-2xl font-bold text-slate-900 tracking-tight">Konfigurasi Kuota Cuti Pegawai</h1>
                    <p class="text-xs text-slate-500 mt-0.5">Atur hak jatah kuota cuti tahunan standar perusahaan dan kustomisasi kuota per karyawan</p>
                </div>
            </div>
        </div>
        <div class="flex items-center gap-2 flex-wrap">
            <button type="button" onclick="openModalKebijakan()" class="inline-flex items-center gap-2 px-3.5 py-2 rounded-xl bg-white border border-slate-200 text-slate-700 hover:bg-slate-50 text-xs font-semibold shadow-sm transition-all">
                <i data-lucide="sliders" class="w-4 h-4 text-primary-600"></i>
                <span>Kebijakan Default Perusahaan</span>
            </button>
            <form action="{{ route('admin.pengaturan-absensi.kuota-cuti.generate') }}" method="POST" class="inline">
                @csrf
                <input type="hidden" name="tahun" value="{{ $tahun }}">
                <button type="submit" class="inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-primary-600 hover:bg-primary-700 text-white text-xs font-semibold shadow-md shadow-primary-500/20 transition-all">
                    <i data-lucide="refresh-cw" class="w-4 h-4"></i>
                    <span>Sinkronisasi Kuota Tahun {{ $tahun }}</span>
                </button>
            </form>
        </div>
    </div>

    <!-- Alert Flash -->
    @if(session('success'))
    <div class="p-4 rounded-2xl bg-emerald-50 border border-emerald-200 text-emerald-800 text-xs font-semibold flex items-center justify-between shadow-sm">
        <div class="flex items-center gap-2.5">
            <i data-lucide="check-circle-2" class="w-4 h-4 text-emerald-600 shrink-0"></i>
            <span>{{ session('success') }}</span>
        </div>
        <button onclick="this.parentElement.remove()" class="text-emerald-500 hover:text-emerald-700">
            <i data-lucide="x" class="w-4 h-4"></i>
        </button>
    </div>
    @endif

    @if(session('error'))
    <div class="p-4 rounded-2xl bg-rose-50 border border-rose-200 text-rose-800 text-xs font-semibold flex items-center justify-between shadow-sm">
        <div class="flex items-center gap-2.5">
            <i data-lucide="alert-circle" class="w-4 h-4 text-rose-600 shrink-0"></i>
            <span>{{ session('error') }}</span>
        </div>
        <button onclick="this.parentElement.remove()" class="text-rose-500 hover:text-rose-700">
            <i data-lucide="x" class="w-4 h-4"></i>
        </button>
    </div>
    @endif

    <!-- 4 Statistik Ringkasan -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <!-- Kuota Default Perusahaan -->
        <div class="p-4 rounded-2xl bg-white border border-slate-100 shadow-sm flex items-center gap-4">
            <div class="w-12 h-12 rounded-xl bg-blue-50 text-blue-600 flex items-center justify-center shrink-0">
                <i data-lucide="calendar" class="w-6 h-6"></i>
            </div>
            <div>
                <p class="text-[11px] font-bold text-slate-400 uppercase tracking-wider">Kuota Standar Default</p>
                <div class="flex items-baseline gap-1 mt-0.5">
                    <h3 class="text-xl font-bold text-slate-800">{{ $konfigurasi->kuota_tahunan_default }}</h3>
                    <span class="text-xs text-slate-400 font-semibold">Hari / Tahun</span>
                </div>
            </div>
        </div>

        <!-- Total Pegawai Terkonfigurasi -->
        <div class="p-4 rounded-2xl bg-white border border-slate-100 shadow-sm flex items-center gap-4">
            <div class="w-12 h-12 rounded-xl bg-purple-50 text-purple-600 flex items-center justify-center shrink-0">
                <i data-lucide="users" class="w-6 h-6"></i>
            </div>
            <div>
                <p class="text-[11px] font-bold text-slate-400 uppercase tracking-wider">Pegawai Terdaftar {{ $tahun }}</p>
                <div class="flex items-baseline gap-1 mt-0.5">
                    <h3 class="text-xl font-bold text-slate-800">{{ $totalPegawaiTerkonfigurasi }}</h3>
                    <span class="text-xs text-slate-400 font-semibold">/ {{ $totalPegawaiKaryawan }} Pegawai</span>
                </div>
            </div>
        </div>

        <!-- Total Hari Cuti Terpakai -->
        <div class="p-4 rounded-2xl bg-white border border-slate-100 shadow-sm flex items-center gap-4">
            <div class="w-12 h-12 rounded-xl bg-amber-50 text-amber-600 flex items-center justify-center shrink-0">
                <i data-lucide="user-minus" class="w-6 h-6"></i>
            </div>
            <div>
                <p class="text-[11px] font-bold text-slate-400 uppercase tracking-wider">Total Cuti Terpakai</p>
                <div class="flex items-baseline gap-1 mt-0.5">
                    <h3 class="text-xl font-bold text-amber-600">{{ $totalTerpakai }}</h3>
                    <span class="text-xs text-slate-400 font-semibold">Hari</span>
                </div>
            </div>
        </div>

        <!-- Total Sisa Kuota Aktif -->
        <div class="p-4 rounded-2xl bg-white border border-slate-100 shadow-sm flex items-center gap-4">
            <div class="w-12 h-12 rounded-xl bg-emerald-50 text-emerald-600 flex items-center justify-center shrink-0">
                <i data-lucide="check-circle" class="w-6 h-6"></i>
            </div>
            <div>
                <p class="text-[11px] font-bold text-slate-400 uppercase tracking-wider">Sisa Kuota Perusahaan</p>
                <div class="flex items-baseline gap-1 mt-0.5">
                    <h3 class="text-xl font-bold text-emerald-600">{{ $totalSisa }}</h3>
                    <span class="text-xs text-slate-400 font-semibold">Hari</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Filter Toolbar -->
    <div class="bg-white p-4 rounded-2xl border border-slate-100 shadow-sm">
        <form method="GET" action="{{ route('admin.pengaturan-absensi.kuota-cuti.index') }}" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-5 gap-3 items-end">
            <!-- Filter Tahun -->
            <div>
                <label class="block text-[11px] font-bold text-slate-500 uppercase tracking-wider mb-1.5">Tahun Periode</label>
                <select name="tahun" onchange="this.form.submit()" class="w-full px-3 py-2 text-xs rounded-xl border border-slate-200 focus:outline-none focus:border-primary-500 bg-white font-semibold text-slate-800">
                    @foreach($tahunOptions as $optTahun)
                        <option value="{{ $optTahun }}" {{ $tahun == $optTahun ? 'selected' : '' }}>
                            Tahun Anggaran {{ $optTahun }}
                        </option>
                    @endforeach
                </select>
            </div>

            <!-- Filter Departemen -->
            <div>
                <label class="block text-[11px] font-bold text-slate-500 uppercase tracking-wider mb-1.5">Departemen</label>
                <select name="departemen_id" class="w-full px-3 py-2 text-xs rounded-xl border border-slate-200 focus:outline-none focus:border-primary-500 bg-white">
                    <option value="">Semua Departemen</option>
                    @foreach($departemens as $dept)
                        <option value="{{ $dept->id }}" {{ request('departemen_id') == $dept->id ? 'selected' : '' }}>
                            {{ $dept->nama_departemen }}
                        </option>
                    @endforeach
                </select>
            </div>

            <!-- Pencarian Pegawai -->
            <div class="md:col-span-2">
                <label class="block text-[11px] font-bold text-slate-500 uppercase tracking-wider mb-1.5">Pencarian Pegawai</label>
                <div class="relative">
                    <i data-lucide="search" class="w-4 h-4 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2"></i>
                    <input type="text" name="search" value="{{ request('search') }}" placeholder="Cari nama karyawan atau NIP..." class="w-full pl-9 pr-3 py-2 text-xs rounded-xl border border-slate-200 focus:outline-none focus:border-primary-500">
                </div>
            </div>

            <!-- Tombol Submit & Reset -->
            <div class="flex items-center gap-2">
                <button type="submit" class="flex-1 px-4 py-2 bg-slate-900 hover:bg-slate-800 text-white text-xs font-semibold rounded-xl transition-colors flex items-center justify-center gap-1.5">
                    <i data-lucide="filter" class="w-3.5 h-3.5"></i>
                    <span>Terapkan</span>
                </button>
                @if(request()->hasAny(['departemen_id', 'search']))
                <a href="{{ route('admin.pengaturan-absensi.kuota-cuti.index', ['tahun' => $tahun]) }}" class="p-2 text-slate-400 hover:text-slate-600 hover:bg-slate-100 rounded-xl transition-colors" title="Reset Filter">
                    <i data-lucide="rotate-ccw" class="w-4 h-4"></i>
                </a>
                @endif
            </div>
        </form>
    </div>

    <!-- Tabel Kuota Cuti Pegawai -->
    <div class="bg-white rounded-2xl border border-slate-100 shadow-sm overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-left text-xs min-w-[850px]">
                <thead>
                    <tr class="bg-slate-50/75 border-b border-slate-100 text-[11px] font-bold text-slate-400 uppercase tracking-wider">
                        <th class="py-3.5 px-4">Karyawan</th>
                        <th class="py-3.5 px-4 text-center">Kuota Pokok</th>
                        <th class="py-3.5 px-4 text-center">Tambahan / Bonus</th>
                        <th class="py-3.5 px-4 text-center">Total Hak Kuota</th>
                        <th class="py-3.5 px-4 text-center">Terpakai</th>
                        <th class="py-3.5 px-4 text-center">Sisa Kuota</th>
                        <th class="py-3.5 px-4">Keterangan Khusus</th>
                        <th class="py-3.5 px-4 text-right">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @forelse($kuotaPegawais as $item)
                    @php
                        $peg = $item->pegawai;
                        $total = $item->total_kuota;
                        $terpakai = $item->kuota_terpakai;
                        $sisa = $item->sisa_kuota;
                        $percentage = $total > 0 ? min(100, round(($terpakai / $total) * 100)) : 0;
                    @endphp
                    <tr class="hover:bg-slate-50/50 transition-colors">
                        <!-- Pegawai -->
                        <td class="py-3.5 px-4">
                            <div class="flex items-center gap-3">
                                <div class="w-8 h-8 rounded-full bg-primary-100 text-primary-700 font-bold flex items-center justify-center text-xs shrink-0">
                                    {{ strtoupper(substr($peg->nama_lengkap ?? 'K', 0, 1)) }}
                                </div>
                                <div class="min-w-0">
                                    <p class="font-bold text-slate-800 truncate">{{ $peg->nama_lengkap ?? '-' }}</p>
                                    <p class="text-[10px] text-slate-400 truncate">NIP: {{ $peg->nip }} • {{ $peg->departemen->nama_departemen ?? '-' }} ({{ $peg->jabatan->nama_jabatan ?? '-' }})</p>
                                </div>
                            </div>
                        </td>

                        <!-- Kuota Pokok -->
                        <td class="py-3.5 px-4 text-center font-semibold text-slate-700">
                            {{ $item->kuota_utama }} Hari
                        </td>

                        <!-- Kuota Tambahan -->
                        <td class="py-3.5 px-4 text-center">
                            @if($item->kuota_tambahan > 0)
                                <span class="inline-flex items-center gap-0.5 px-2 py-0.5 rounded text-[10px] font-bold bg-purple-50 text-purple-700 border border-purple-200">
                                    +{{ $item->kuota_tambahan }} Hari
                                </span>
                            @else
                                <span class="text-slate-400">-</span>
                            @endif
                        </td>

                        <!-- Total Hak Kuota -->
                        <td class="py-3.5 px-4 text-center font-black text-slate-800">
                            {{ $total }} Hari
                        </td>

                        <!-- Terpakai -->
                        <td class="py-3.5 px-4 text-center">
                            <div class="inline-flex flex-col items-center">
                                <span class="font-bold text-amber-600">{{ $terpakai }} Hari</span>
                                <div class="w-16 h-1.5 rounded-full bg-slate-100 mt-1 overflow-hidden">
                                    <div class="h-full bg-amber-500 rounded-full" style="width: {{ $percentage }}%"></div>
                                </div>
                            </div>
                        </td>

                        <!-- Sisa Kuota -->
                        <td class="py-3.5 px-4 text-center">
                            @if($sisa <= 0)
                                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold bg-rose-50 text-rose-700 border border-rose-200">
                                    Habis (0 Hari)
                                </span>
                            @elseif($sisa <= 3)
                                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold bg-amber-50 text-amber-700 border border-amber-200">
                                    Sisa {{ $sisa }} Hari
                                </span>
                            @else
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-emerald-50 text-emerald-700 border border-emerald-200">
                                    Sisa {{ $sisa }} Hari
                                </span>
                            @endif
                        </td>

                        <!-- Keterangan Khusus -->
                        <td class="py-3.5 px-4 max-w-xs text-slate-500 truncate" title="{{ $item->catatan }}">
                            {{ $item->catatan ?: '-' }}
                        </td>

                        <!-- Aksi -->
                        <td class="py-3.5 px-4 text-right whitespace-nowrap">
                            <div class="inline-flex items-center gap-1.5">
                                <button type="button" onclick="openModalEditPegawai({{ json_encode([
                                    'id' => $item->id,
                                    'nama' => $peg->nama_lengkap,
                                    'nip' => $peg->nip,
                                    'tahun' => $item->tahun,
                                    'kuota_utama' => $item->kuota_utama,
                                    'kuota_tambahan' => $item->kuota_tambahan,
                                    'catatan' => $item->catatan,
                                ]) }})" class="p-1.5 rounded-lg text-slate-400 hover:text-primary-600 hover:bg-primary-50 transition-colors" title="Edit Kuota Karyawan">
                                    <i data-lucide="edit-3" class="w-4 h-4"></i>
                                </button>

                                <form action="{{ route('admin.pengaturan-absensi.kuota-cuti.sync-pegawai', $item->id) }}" method="POST" class="inline">
                                    @csrf
                                    <button type="submit" class="p-1.5 rounded-lg text-slate-400 hover:text-amber-600 hover:bg-amber-50 transition-colors" title="Sinkronkan Pemakaian Cuti Riil">
                                        <i data-lucide="refresh-cw" class="w-4 h-4"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="8" class="py-12 text-center">
                            <div class="w-16 h-16 rounded-2xl bg-slate-50 text-slate-300 flex items-center justify-center mx-auto mb-3">
                                <i data-lucide="calendar-heart" class="w-8 h-8"></i>
                            </div>
                            <h4 class="text-sm font-bold text-slate-700">Belum Ada Kuota Cuti untuk Tahun {{ $tahun }}</h4>
                            <p class="text-xs text-slate-400 mt-1 max-w-sm mx-auto">Klik tombol "Sinkronisasi Kuota Tahun {{ $tahun }}" di atas untuk menginisialisasi jatah cuti seluruh pegawai aktif.</p>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($kuotaPegawais->hasPages())
        <div class="p-4 border-t border-slate-100">
            {{ $kuotaPegawais->links() }}
        </div>
        @endif
    </div>
</div>

<!-- MODAL: KEBIJAKAN DEFAULT PERUSAHAAN -->
<div id="modalKebijakan" class="fixed inset-0 z-50 hidden bg-slate-900/60 backdrop-blur-sm flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl max-w-md w-full shadow-2xl border border-slate-100 overflow-hidden transform transition-all animate-in fade-in zoom-in-95">
        <div class="p-5 border-b border-slate-100 flex items-center justify-between">
            <div class="flex items-center gap-2.5">
                <div class="w-8 h-8 rounded-lg bg-primary-50 text-primary-600 flex items-center justify-center font-bold">
                    <i data-lucide="sliders" class="w-4 h-4"></i>
                </div>
                <div>
                    <h3 class="text-sm font-bold text-slate-800">Kebijakan Kuota Cuti Standar</h3>
                    <p class="text-[10px] text-slate-400">Aturan jatah cuti tahunan dasar untuk seluruh karyawan</p>
                </div>
            </div>
            <button type="button" onclick="closeModalKebijakan()" class="p-1 rounded-lg 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.kuota-cuti.update-default') }}" method="POST" class="p-5 space-y-4 text-xs">
            @csrf
            @method('PUT')

            <!-- Kuota Tahunan Default -->
            <div>
                <label class="block text-slate-700 font-bold uppercase tracking-wider text-[11px] mb-1.5">Jatah Kuota Standar Per Karyawan (Hari/Tahun) <span class="text-rose-500">*</span></label>
                <div class="relative">
                    <input type="number" name="kuota_tahunan_default" value="{{ $konfigurasi->kuota_tahunan_default }}" required min="0" max="60" class="w-full pl-3 pr-12 py-2 text-xs rounded-xl border border-slate-200 focus:outline-none focus:border-primary-500 font-bold text-slate-800">
                    <span class="absolute right-3 top-1/2 -translate-y-1/2 text-[11px] font-semibold text-slate-400">Hari</span>
                </div>
                <p class="text-[10px] text-slate-400 mt-1">Standar umum ketenagakerjaan biasanya 12 hari kerja per tahun.</p>
            </div>

            <!-- Opsi Minus Kuota -->
            <div class="pt-2 border-t border-slate-100">
                <label class="flex items-start gap-2.5 cursor-pointer">
                    <input type="checkbox" name="ijinkan_minus" value="1" {{ $konfigurasi->ijinkan_minus ? 'checked' : '' }} class="mt-0.5 rounded text-primary-600 focus:ring-primary-500">
                    <div>
                        <span class="font-bold text-slate-800">Ijinkan Pengajuan Melebihi Kuota (Minus)</span>
                        <p class="text-[10px] text-slate-400 leading-relaxed">Jika tidak dicentang, karyawan tidak dapat mengajukan cuti tahunan apabila sisa kuotanya tidak mencukupi.</p>
                    </div>
                </label>
            </div>

            <!-- Catatan Kebijakan -->
            <div>
                <label class="block text-slate-700 font-bold uppercase tracking-wider text-[11px] mb-1.5">Keterangan / Regulasi Kebijakan Cuti</label>
                <textarea name="catatan_kebijakan" rows="2" class="w-full px-3 py-2 text-xs rounded-xl border border-slate-200 focus:outline-none focus:border-primary-500" placeholder="Catatan internal regulasi cuti perusahaan...">{{ $konfigurasi->catatan_kebijakan }}</textarea>
            </div>

            <!-- Sync Pegawai Tahun Ini -->
            <div class="p-3 rounded-xl bg-amber-50/70 border border-amber-200/60">
                <label class="flex items-start gap-2 cursor-pointer">
                    <input type="checkbox" name="sync_pegawai_tahun_ini" value="1" class="mt-0.5 rounded text-amber-600 focus:ring-amber-500">
                    <span class="text-[10px] text-amber-900 font-semibold leading-relaxed">
                        Perbarui juga jatah pokok seluruh karyawan tahun {{ date('Y') }} yang belum memiliki kuota bonus tambahan.
                    </span>
                </label>
            </div>

            <div class="pt-2 flex items-center justify-end gap-2">
                <button type="button" onclick="closeModalKebijakan()" class="px-3.5 py-2 rounded-xl border border-slate-200 text-slate-600 font-bold hover:bg-slate-50 transition-colors">
                    Batal
                </button>
                <button type="submit" class="px-4 py-2 rounded-xl bg-primary-600 hover:bg-primary-700 text-white font-bold shadow-md shadow-primary-500/20 transition-all">
                    Simpan Kebijakan
                </button>
            </div>
        </form>
    </div>
</div>

<!-- MODAL: EDIT KUOTA PEGAWAI KHUSUS -->
<div id="modalEditPegawai" class="fixed inset-0 z-50 hidden bg-slate-900/60 backdrop-blur-sm flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl max-w-md w-full shadow-2xl border border-slate-100 overflow-hidden transform transition-all animate-in fade-in zoom-in-95">
        <div class="p-5 border-b border-slate-100 flex items-center justify-between">
            <div class="flex items-center gap-2.5">
                <div class="w-8 h-8 rounded-lg bg-purple-50 text-purple-600 flex items-center justify-center font-bold">
                    <i data-lucide="user-check" class="w-4 h-4"></i>
                </div>
                <div>
                    <h3 class="text-sm font-bold text-slate-800">Edit Kuota Karyawan</h3>
                    <p class="text-[10px] text-slate-400" id="editPegawaiSubtext">Penyesuaian kuota cuti tahunan</p>
                </div>
            </div>
            <button type="button" onclick="closeModalEditPegawai()" class="p-1 rounded-lg text-slate-400 hover:text-slate-600">
                <i data-lucide="x" class="w-4 h-4"></i>
            </button>
        </div>

        <form id="formEditPegawai" method="POST" class="p-5 space-y-4 text-xs">
            @csrf
            @method('PUT')

            <!-- Kuota Pokok -->
            <div>
                <label class="block text-slate-700 font-bold uppercase tracking-wider text-[11px] mb-1.5">Kuota Cuti Pokok (Hari) <span class="text-rose-500">*</span></label>
                <input type="number" name="kuota_utama" id="editKuotaUtama" required min="0" max="60" class="w-full px-3 py-2 text-xs rounded-xl border border-slate-200 focus:outline-none focus:border-purple-500 font-bold text-slate-800">
            </div>

            <!-- Kuota Tambahan -->
            <div>
                <label class="block text-slate-700 font-bold uppercase tracking-wider text-[11px] mb-1.5">Kuota Tambahan / Bonus (Hari)</label>
                <input type="number" name="kuota_tambahan" id="editKuotaTambahan" required min="0" max="30" class="w-full px-3 py-2 text-xs rounded-xl border border-slate-200 focus:outline-none focus:border-purple-500 font-bold text-slate-800">
                <p class="text-[10px] text-slate-400 mt-1">Dapat diisi untuk reward, carry-over sisa tahun lalu, atau dispensasi khusus.</p>
            </div>

            <!-- Catatan -->
            <div>
                <label class="block text-slate-700 font-bold uppercase tracking-wider text-[11px] mb-1.5">Catatan / Alasan Penyesuaian</label>
                <input type="text" name="catatan" id="editCatatan" placeholder="Contoh: Carry over sisa cuti 2025" class="w-full px-3 py-2 text-xs rounded-xl border border-slate-200 focus:outline-none focus:border-purple-500">
            </div>

            <div class="pt-2 flex items-center justify-end gap-2">
                <button type="button" onclick="closeModalEditPegawai()" class="px-3.5 py-2 rounded-xl border border-slate-200 text-slate-600 font-bold hover:bg-slate-50 transition-colors">
                    Batal
                </button>
                <button type="submit" class="px-4 py-2 rounded-xl bg-purple-600 hover:bg-purple-700 text-white font-bold shadow-md shadow-purple-500/20 transition-all">
                    Simpan Perubahan
                </button>
            </div>
        </form>
    </div>
</div>

<script>
    function openModalKebijakan() {
        document.getElementById('modalKebijakan').classList.remove('hidden');
    }

    function closeModalKebijakan() {
        document.getElementById('modalKebijakan').classList.add('hidden');
    }

    function openModalEditPegawai(data) {
        const form = document.getElementById('formEditPegawai');
        form.action = `/admin/pengaturan-absensi/kuota-cuti/${data.id}`;

        document.getElementById('editPegawaiSubtext').innerText = `${data.nama} (${data.nip}) - Periode ${data.tahun}`;
        document.getElementById('editKuotaUtama').value = data.kuota_utama;
        document.getElementById('editKuotaTambahan').value = data.kuota_tambahan;
        document.getElementById('editCatatan').value = data.catatan || '';

        document.getElementById('modalEditPegawai').classList.remove('hidden');
    }

    function closeModalEditPegawai() {
        document.getElementById('modalEditPegawai').classList.add('hidden');
    }
</script>
@endsection