@extends('layouts.admin')

@section('title', 'Jenis & Aturan Reimbursement')

@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-teal-50 text-teal-600 flex items-center justify-center font-bold">
                    <i data-lucide="sliders" class="w-5 h-5"></i>
                </div>
                <div>
                    <h1 class="text-2xl font-bold text-slate-900 tracking-tight">Jenis & Aturan Reimbursement</h1>
                    <p class="text-xs text-slate-500 mt-0.5">Kelola kategori klaim, limit plafon (per klaim / bulan / tahun), serta syarat nota bukti kuitansi</p>
                </div>
            </div>
        </div>
        <div class="flex items-center gap-2">
            <button type="button" onclick="openCreateModal()" 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-semibold shadow-sm shadow-primary-600/30 transition-all">
                <i data-lucide="plus" class="w-4 h-4"></i>
                <span>Tambah Jenis Klaim</span>
            </button>
        </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

    <!-- Statistik Ringkasan -->
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div class="bg-white p-4 rounded-2xl border border-slate-200/80 shadow-sm flex items-center gap-3.5">
            <div class="w-11 h-11 rounded-xl bg-primary-50 text-primary-600 flex items-center justify-center shrink-0">
                <i data-lucide="layers" class="w-5 h-5"></i>
            </div>
            <div>
                <span class="text-[11px] font-semibold text-slate-400 uppercase tracking-wider block">Total Kategori</span>
                <span class="text-lg font-bold text-slate-800 tracking-tight">{{ $stats['total'] }} Jenis</span>
            </div>
        </div>

        <div class="bg-white p-4 rounded-2xl border border-slate-200/80 shadow-sm flex items-center gap-3.5">
            <div class="w-11 h-11 rounded-xl bg-emerald-50 text-emerald-600 flex items-center justify-center shrink-0">
                <i data-lucide="check-circle" class="w-5 h-5"></i>
            </div>
            <div>
                <span class="text-[11px] font-semibold text-slate-400 uppercase tracking-wider block">Status Aktif</span>
                <span class="text-lg font-bold text-emerald-600 tracking-tight">{{ $stats['aktif'] }} Aktif</span>
            </div>
        </div>

        <div class="bg-white p-4 rounded-2xl border border-slate-200/80 shadow-sm flex items-center gap-3.5">
            <div class="w-11 h-11 rounded-xl bg-amber-50 text-amber-600 flex items-center justify-center shrink-0">
                <i data-lucide="receipt" class="w-5 h-5"></i>
            </div>
            <div>
                <span class="text-[11px] font-semibold text-slate-400 uppercase tracking-wider block">Wajib Bukti Nota</span>
                <span class="text-lg font-bold text-slate-800 tracking-tight">{{ $stats['wajib_nota'] }} Jenis</span>
            </div>
        </div>

        <div class="bg-white p-4 rounded-2xl border border-slate-200/80 shadow-sm flex items-center gap-3.5">
            <div class="w-11 h-11 rounded-xl bg-slate-100 text-slate-600 flex items-center justify-center shrink-0">
                <i data-lucide="eye-off" class="w-5 h-5"></i>
            </div>
            <div>
                <span class="text-[11px] font-semibold text-slate-400 uppercase tracking-wider block">Nonaktif</span>
                <span class="text-lg font-bold text-slate-600 tracking-tight">{{ $stats['nonaktif'] }} Ditutup</span>
            </div>
        </div>
    </div>

    <!-- Filter & Pencarian -->
    <div class="bg-white p-4 rounded-2xl border border-slate-200/80 shadow-sm flex flex-col sm:flex-row items-center justify-between gap-3">
        <form method="GET" action="{{ route('admin.reimbursement.jenis.index') }}" class="flex flex-wrap items-center gap-2.5 w-full sm:w-auto">
            <div class="relative flex-1 sm:w-64">
                <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 jenis klaim / kode..." class="w-full pl-9 pr-3 py-2 text-xs rounded-xl border border-slate-200 focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500">
            </div>

            <select name="status" onchange="this.form.submit()" class="px-3 py-2 text-xs rounded-xl border border-slate-200 focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 bg-white">
                <option value="">Semua Status</option>
                <option value="aktif" {{ request('status') === 'aktif' ? 'selected' : '' }}>Aktif</option>
                <option value="nonaktif" {{ request('status') === 'nonaktif' ? 'selected' : '' }}>Nonaktif</option>
            </select>

            <button type="submit" class="px-3.5 py-2 rounded-xl bg-slate-100 hover:bg-slate-200 text-slate-700 text-xs font-semibold transition-colors">
                Filter
            </button>
            @if(request()->anyFilled(['search', 'status']))
                <a href="{{ route('admin.reimbursement.jenis.index') }}" class="px-3 py-2 rounded-xl bg-rose-50 text-rose-600 hover:bg-rose-100 text-xs font-semibold transition-colors">
                    Reset
                </a>
            @endif
        </form>

        <div class="text-xs text-slate-500 shrink-0">
            Menampilkan <span class="font-bold text-slate-800">{{ $jenisList->total() }}</span> kategori
        </div>
    </div>

    <!-- Tabel Daftar Jenis Reimbursement -->
    <div class="bg-white rounded-2xl border border-slate-200/80 shadow-sm overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-left text-xs border-collapse">
                <thead>
                    <tr class="bg-slate-50/80 border-b border-slate-200/80 text-slate-500 font-bold uppercase tracking-wider text-[10px]">
                        <th class="py-3.5 px-4 w-12 text-center">No</th>
                        <th class="py-3.5 px-4">Jenis & Deskripsi</th>
                        <th class="py-3.5 px-4">Batasan Plafon</th>
                        <th class="py-3.5 px-4 text-center">Wajib Nota</th>
                        <th class="py-3.5 px-4 text-center">Status</th>
                        <th class="py-3.5 px-4 text-center">Pengajuan</th>
                        <th class="py-3.5 px-4 text-right">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @forelse($jenisList as $index => $item)
                    <tr class="hover:bg-slate-50/60 transition-colors">
                        <td class="py-3.5 px-4 text-center text-slate-400 font-semibold">
                            {{ $jenisList->firstItem() + $index }}
                        </td>
                        <td class="py-3.5 px-4 max-w-xs">
                            <div class="flex items-center gap-2">
                                <span class="font-bold text-slate-800 text-sm tracking-tight">{{ $item->nama_jenis }}</span>
                                @if($item->kode_jenis)
                                    <span class="px-1.5 py-0.5 rounded-md bg-slate-100 text-slate-600 font-mono font-bold text-[10px]">
                                        {{ $item->kode_jenis }}
                                    </span>
                                @endif
                            </div>
                            <p class="text-[11px] text-slate-500 mt-0.5 line-clamp-2 leading-relaxed">
                                {{ $item->deskripsi ?: '-' }}
                            </p>
                            @if($item->aturan)
                            <div class="mt-1.5 flex items-center gap-1 text-[10px] text-teal-700 font-medium">
                                <i data-lucide="info" class="w-3 h-3 text-teal-500 shrink-0"></i>
                                <span class="truncate">Memiliki syarat & aturan klaim khusus</span>
                            </div>
                            @endif
                        </td>
                        <td class="py-3.5 px-4">
                            <div class="space-y-1">
                                <div class="flex items-center justify-between gap-3 text-[11px]">
                                    <span class="text-slate-400">Per Klaim:</span>
                                    <span class="font-semibold {{ $item->plafon_per_klaim ? 'text-slate-800' : 'text-slate-400 italic' }}">
                                        {{ $item->formatted_plafon_klaim }}
                                    </span>
                                </div>
                                <div class="flex items-center justify-between gap-3 text-[11px]">
                                    <span class="text-slate-400">Per Bulan:</span>
                                    <span class="font-semibold {{ $item->plafon_per_bulan ? 'text-indigo-600' : 'text-slate-400 italic' }}">
                                        {{ $item->formatted_plafon_bulan }}
                                    </span>
                                </div>
                                <div class="flex items-center justify-between gap-3 text-[11px]">
                                    <span class="text-slate-400">Per Tahun:</span>
                                    <span class="font-semibold {{ $item->plafon_per_tahun ? 'text-emerald-600' : 'text-slate-400 italic' }}">
                                        {{ $item->formatted_plafon_tahun }}
                                    </span>
                                </div>
                            </div>
                        </td>
                        <td class="py-3.5 px-4 text-center">
                            @if($item->wajib_bukti_nota)
                                <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full bg-emerald-50 text-emerald-700 font-bold text-[10px] border border-emerald-200/60">
                                    <i data-lucide="check" class="w-3 h-3 text-emerald-600"></i>
                                    Wajib Nota
                                </span>
                            @else
                                <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full bg-slate-100 text-slate-600 font-medium text-[10px]">
                                    Opsional
                                </span>
                            @endif
                        </td>
                        <td class="py-3.5 px-4 text-center">
                            <form action="{{ route('admin.reimbursement.jenis.toggle-status', $item->id) }}" method="POST" class="inline-block">
                                @csrf
                                <button type="submit" class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[10px] font-bold transition-all {{ $item->status_aktif ? 'bg-emerald-500/15 text-emerald-700 border border-emerald-300 hover:bg-emerald-200' : 'bg-rose-50 text-rose-600 border border-rose-200 hover:bg-rose-100' }}" title="Klik untuk ubah status">
                                    <span class="w-1.5 h-1.5 rounded-full {{ $item->status_aktif ? 'bg-emerald-500 animate-pulse' : 'bg-rose-500' }}"></span>
                                    {{ $item->status_aktif ? 'Aktif' : 'Nonaktif' }}
                                </button>
                            </form>
                        </td>
                        <td class="py-3.5 px-4 text-center font-bold text-slate-700">
                            {{ $item->pengajuan_count }} Klaim
                        </td>
                        <td class="py-3.5 px-4 text-right">
                            <div class="flex items-center justify-end gap-1.5">
                                <button type="button" 
                                        onclick="openEditModal({{ json_encode($item) }})" 
                                        class="p-1.5 rounded-lg text-slate-500 hover:text-primary-600 hover:bg-primary-50 transition-colors" 
                                        title="Ubah Konfigurasi">
                                    <i data-lucide="edit-3" class="w-4 h-4"></i>
                                </button>

                                <form action="{{ route('admin.reimbursement.jenis.destroy', $item->id) }}" method="POST" onsubmit="return confirm('Apakah Anda yakin ingin menghapus jenis reimbursement {{ $item->nama_jenis }}?')" class="inline-block">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="p-1.5 rounded-lg text-slate-500 hover:text-rose-600 hover:bg-rose-50 transition-colors" title="Hapus Jenis">
                                        <i data-lucide="trash-2" class="w-4 h-4"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7" class="py-12 text-center text-slate-400">
                            <div class="flex flex-col items-center justify-center gap-2">
                                <i data-lucide="inbox" class="w-8 h-8 text-slate-300"></i>
                                <span class="font-medium text-xs">Belum ada jenis reimbursement terdaftar.</span>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

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

<!-- MODAL TAMBAH JENIS REIMBURSEMENT -->
<div id="createModal" class="fixed inset-0 z-50 hidden bg-slate-900/60 backdrop-blur-sm flex items-center justify-center p-4 overflow-y-auto">
    <div class="bg-white rounded-2xl max-w-xl w-full p-6 shadow-2xl relative my-8 animate-in fade-in zoom-in-95 duration-200">
        <div class="flex items-center justify-between pb-4 border-b border-slate-100 mb-5">
            <div class="flex items-center gap-2.5">
                <div class="w-8 h-8 rounded-xl bg-primary-50 text-primary-600 flex items-center justify-center font-bold">
                    <i data-lucide="plus" class="w-4 h-4"></i>
                </div>
                <div>
                    <h3 class="text-base font-bold text-slate-900">Tambah Jenis & Aturan Reimbursement</h3>
                    <p class="text-[11px] text-slate-400">Atur batasan plafon dan ketentuan lampiran nota klaim</p>
                </div>
            </div>
            <button type="button" onclick="closeCreateModal()" class="text-slate-400 hover:text-slate-600">
                <i data-lucide="x" class="w-5 h-5"></i>
            </button>
        </div>

        <form action="{{ route('admin.reimbursement.jenis.store') }}" method="POST" class="space-y-4">
            @csrf
            
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
                <div class="sm:col-span-2 space-y-1">
                    <label class="text-xs font-semibold text-slate-700">Nama Jenis Klaim <span class="text-rose-500">*</span></label>
                    <input type="text" name="nama_jenis" required placeholder="Contoh: Kesehatan & Medis" class="w-full px-3 py-2 text-xs rounded-xl border border-slate-200 focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500">
                </div>
                <div class="space-y-1">
                    <label class="text-xs font-semibold text-slate-700">Kode Unik</label>
                    <input type="text" name="kode_jenis" placeholder="Contoh: MED" class="w-full px-3 py-2 text-xs rounded-xl border border-slate-200 focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 uppercase">
                </div>
            </div>

            <div class="space-y-1">
                <label class="text-xs font-semibold text-slate-700">Deskripsi Singkat</label>
                <textarea name="deskripsi" rows="2" placeholder="Jelaskan cakupan pengeluaran yang dapat diklaim..." class="w-full px-3 py-2 text-xs rounded-xl border border-slate-200 focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500"></textarea>
            </div>

            <!-- Konfigurasi Batasan Plafon -->
            <div class="p-4 rounded-xl bg-slate-50 border border-slate-200/80 space-y-3">
                <div class="flex items-center gap-2 text-xs font-bold text-slate-800">
                    <i data-lucide="wallet" class="w-4 h-4 text-primary-600"></i>
                    <span>Pengaturan Batas Plafon Biaya (Nominal Rupiah)</span>
                </div>
                <p class="text-[11px] text-slate-500 leading-relaxed">
                    Anda dapat mengisi salah satu plafon (per klaim, per bulan, atau per tahun), mengombinasikannya, atau mengosongkannya jika jenis klaim ini tidak dibatasi limit nominalnya.
                </p>

                <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
                    <div class="space-y-1">
                        <label class="text-[11px] font-semibold text-slate-600">Plafon per Klaim</label>
                        <div class="relative">
                            <span class="absolute left-2.5 top-1/2 -translate-y-1/2 text-slate-400 text-xs font-medium">Rp</span>
                            <input type="number" step="0.01" min="0" name="plafon_per_klaim" placeholder="Tanpa batas" class="w-full pl-8 pr-2.5 py-1.5 text-xs rounded-lg border border-slate-200 focus:outline-none focus:border-primary-500 bg-white">
                        </div>
                    </div>

                    <div class="space-y-1">
                        <label class="text-[11px] font-semibold text-slate-600">Plafon per Bulan</label>
                        <div class="relative">
                            <span class="absolute left-2.5 top-1/2 -translate-y-1/2 text-slate-400 text-xs font-medium">Rp</span>
                            <input type="number" step="0.01" min="0" name="plafon_per_bulan" placeholder="Tanpa batas" class="w-full pl-8 pr-2.5 py-1.5 text-xs rounded-lg border border-slate-200 focus:outline-none focus:border-primary-500 bg-white">
                        </div>
                    </div>

                    <div class="space-y-1">
                        <label class="text-[11px] font-semibold text-slate-600">Plafon per Tahun</label>
                        <div class="relative">
                            <span class="absolute left-2.5 top-1/2 -translate-y-1/2 text-slate-400 text-xs font-medium">Rp</span>
                            <input type="number" step="0.01" min="0" name="plafon_per_tahun" placeholder="Tanpa batas" class="w-full pl-8 pr-2.5 py-1.5 text-xs rounded-lg border border-slate-200 focus:outline-none focus:border-primary-500 bg-white">
                        </div>
                    </div>
                </div>
            </div>

            <!-- Flagging & Aturan -->
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 pt-1">
                <label class="flex items-center gap-2.5 p-3 rounded-xl border border-slate-200 bg-white cursor-pointer hover:bg-slate-50 transition-colors">
                    <input type="checkbox" name="wajib_bukti_nota" value="1" checked class="w-4 h-4 rounded text-primary-600 focus:ring-primary-500">
                    <div>
                        <span class="text-xs font-bold text-slate-800 block">Wajib Upload Bukti Nota</span>
                        <span class="text-[10px] text-slate-400">Karyawan wajib melampirkan foto kuitansi/struk</span>
                    </div>
                </label>

                <label class="flex items-center gap-2.5 p-3 rounded-xl border border-slate-200 bg-white cursor-pointer hover:bg-slate-50 transition-colors">
                    <input type="checkbox" name="status_aktif" value="1" checked class="w-4 h-4 rounded text-primary-600 focus:ring-primary-500">
                    <div>
                        <span class="text-xs font-bold text-slate-800 block">Status Langsung Aktif</span>
                        <span class="text-[10px] text-slate-400">Kategori dapat langsung dipilih di aplikasi mobile</span>
                    </div>
                </label>
            </div>

            <div class="space-y-1">
                <label class="text-xs font-semibold text-slate-700">Syarat, Ketentuan & Aturan Klaim</label>
                <textarea name="aturan" rows="3" placeholder="Tuliskan syarat klaim, batas waktu pengajuan nota, dokumen pendukung, dsb..." class="w-full px-3 py-2 text-xs rounded-xl border border-slate-200 focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 leading-relaxed"></textarea>
            </div>

            <div class="flex items-center justify-end gap-2 pt-4 border-t border-slate-100">
                <button type="button" onclick="closeCreateModal()" class="px-4 py-2.5 rounded-xl border border-slate-200 text-slate-600 hover:bg-slate-50 text-xs font-semibold transition-colors">
                    Batal
                </button>
                <button type="submit" class="px-5 py-2.5 rounded-xl bg-primary-600 hover:bg-primary-700 text-white text-xs font-semibold shadow-sm shadow-primary-600/30 transition-all">
                    Simpan Jenis Klaim
                </button>
            </div>
        </form>
    </div>
</div>

<!-- MODAL EDIT JENIS REIMBURSEMENT -->
<div id="editModal" class="fixed inset-0 z-50 hidden bg-slate-900/60 backdrop-blur-sm flex items-center justify-center p-4 overflow-y-auto">
    <div class="bg-white rounded-2xl max-w-xl w-full p-6 shadow-2xl relative my-8 animate-in fade-in zoom-in-95 duration-200">
        <div class="flex items-center justify-between pb-4 border-b border-slate-100 mb-5">
            <div class="flex items-center gap-2.5">
                <div class="w-8 h-8 rounded-xl bg-amber-50 text-amber-600 flex items-center justify-center font-bold">
                    <i data-lucide="edit-3" class="w-4 h-4"></i>
                </div>
                <div>
                    <h3 class="text-base font-bold text-slate-900">Ubah Jenis & Aturan Reimbursement</h3>
                    <p class="text-[11px] text-slate-400">Perbarui batasan plafon atau aturan klaim</p>
                </div>
            </div>
            <button type="button" onclick="closeEditModal()" class="text-slate-400 hover:text-slate-600">
                <i data-lucide="x" class="w-5 h-5"></i>
            </button>
        </div>

        <form id="editForm" method="POST" class="space-y-4">
            @csrf
            @method('PUT')
            
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
                <div class="sm:col-span-2 space-y-1">
                    <label class="text-xs font-semibold text-slate-700">Nama Jenis Klaim <span class="text-rose-500">*</span></label>
                    <input type="text" id="edit_nama_jenis" name="nama_jenis" required class="w-full px-3 py-2 text-xs rounded-xl border border-slate-200 focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500">
                </div>
                <div class="space-y-1">
                    <label class="text-xs font-semibold text-slate-700">Kode Unik</label>
                    <input type="text" id="edit_kode_jenis" name="kode_jenis" class="w-full px-3 py-2 text-xs rounded-xl border border-slate-200 focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 uppercase">
                </div>
            </div>

            <div class="space-y-1">
                <label class="text-xs font-semibold text-slate-700">Deskripsi Singkat</label>
                <textarea id="edit_deskripsi" name="deskripsi" rows="2" class="w-full px-3 py-2 text-xs rounded-xl border border-slate-200 focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500"></textarea>
            </div>

            <!-- Konfigurasi Batasan Plafon -->
            <div class="p-4 rounded-xl bg-slate-50 border border-slate-200/80 space-y-3">
                <div class="flex items-center gap-2 text-xs font-bold text-slate-800">
                    <i data-lucide="wallet" class="w-4 h-4 text-primary-600"></i>
                    <span>Pengaturan Batas Plafon Biaya (Nominal Rupiah)</span>
                </div>
                <p class="text-[11px] text-slate-500 leading-relaxed">
                    Kosongkan kolom plafon jika jenis klaim ini tidak memiliki batasan nominal.
                </p>

                <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
                    <div class="space-y-1">
                        <label class="text-[11px] font-semibold text-slate-600">Plafon per Klaim</label>
                        <div class="relative">
                            <span class="absolute left-2.5 top-1/2 -translate-y-1/2 text-slate-400 text-xs font-medium">Rp</span>
                            <input type="number" step="0.01" min="0" id="edit_plafon_per_klaim" name="plafon_per_klaim" placeholder="Tanpa batas" class="w-full pl-8 pr-2.5 py-1.5 text-xs rounded-lg border border-slate-200 focus:outline-none focus:border-primary-500 bg-white">
                        </div>
                    </div>

                    <div class="space-y-1">
                        <label class="text-[11px] font-semibold text-slate-600">Plafon per Bulan</label>
                        <div class="relative">
                            <span class="absolute left-2.5 top-1/2 -translate-y-1/2 text-slate-400 text-xs font-medium">Rp</span>
                            <input type="number" step="0.01" min="0" id="edit_plafon_per_bulan" name="plafon_per_bulan" placeholder="Tanpa batas" class="w-full pl-8 pr-2.5 py-1.5 text-xs rounded-lg border border-slate-200 focus:outline-none focus:border-primary-500 bg-white">
                        </div>
                    </div>

                    <div class="space-y-1">
                        <label class="text-[11px] font-semibold text-slate-600">Plafon per Tahun</label>
                        <div class="relative">
                            <span class="absolute left-2.5 top-1/2 -translate-y-1/2 text-slate-400 text-xs font-medium">Rp</span>
                            <input type="number" step="0.01" min="0" id="edit_plafon_per_tahun" name="plafon_per_tahun" placeholder="Tanpa batas" class="w-full pl-8 pr-2.5 py-1.5 text-xs rounded-lg border border-slate-200 focus:outline-none focus:border-primary-500 bg-white">
                        </div>
                    </div>
                </div>
            </div>

            <!-- Flagging & Aturan -->
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 pt-1">
                <label class="flex items-center gap-2.5 p-3 rounded-xl border border-slate-200 bg-white cursor-pointer hover:bg-slate-50 transition-colors">
                    <input type="checkbox" id="edit_wajib_bukti_nota" name="wajib_bukti_nota" value="1" class="w-4 h-4 rounded text-primary-600 focus:ring-primary-500">
                    <div>
                        <span class="text-xs font-bold text-slate-800 block">Wajib Upload Bukti Nota</span>
                        <span class="text-[10px] text-slate-400">Karyawan wajib melampirkan foto kuitansi/struk</span>
                    </div>
                </label>

                <label class="flex items-center gap-2.5 p-3 rounded-xl border border-slate-200 bg-white cursor-pointer hover:bg-slate-50 transition-colors">
                    <input type="checkbox" id="edit_status_aktif" name="status_aktif" value="1" class="w-4 h-4 rounded text-primary-600 focus:ring-primary-500">
                    <div>
                        <span class="text-xs font-bold text-slate-800 block">Status Aktif</span>
                        <span class="text-[10px] text-slate-400">Tampilkan kategori ini pada mobile app</span>
                    </div>
                </label>
            </div>

            <div class="space-y-1">
                <label class="text-xs font-semibold text-slate-700">Syarat, Ketentuan & Aturan Klaim</label>
                <textarea id="edit_aturan" name="aturan" rows="3" class="w-full px-3 py-2 text-xs rounded-xl border border-slate-200 focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 leading-relaxed"></textarea>
            </div>

            <div class="flex items-center justify-end gap-2 pt-4 border-t border-slate-100">
                <button type="button" onclick="closeEditModal()" class="px-4 py-2.5 rounded-xl border border-slate-200 text-slate-600 hover:bg-slate-50 text-xs font-semibold transition-colors">
                    Batal
                </button>
                <button type="submit" class="px-5 py-2.5 rounded-xl bg-primary-600 hover:bg-primary-700 text-white text-xs font-semibold shadow-sm shadow-primary-600/30 transition-all">
                    Simpan Perubahan
                </button>
            </div>
        </form>
    </div>
</div>

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

    function closeCreateModal() {
        document.getElementById('createModal').classList.add('hidden');
    }

    function openEditModal(item) {
        const form = document.getElementById('editForm');
        form.action = `/admin/reimbursement/jenis/${item.id}`;

        document.getElementById('edit_nama_jenis').value = item.nama_jenis || '';
        document.getElementById('edit_kode_jenis').value = item.kode_jenis || '';
        document.getElementById('edit_deskripsi').value = item.deskripsi || '';
        document.getElementById('edit_plafon_per_klaim').value = item.plafon_per_klaim !== null ? item.plafon_per_klaim : '';
        document.getElementById('edit_plafon_per_bulan').value = item.plafon_per_bulan !== null ? item.plafon_per_bulan : '';
        document.getElementById('edit_plafon_per_tahun').value = item.plafon_per_tahun !== null ? item.plafon_per_tahun : '';
        document.getElementById('edit_wajib_bukti_nota').checked = Boolean(item.wajib_bukti_nota);
        document.getElementById('edit_status_aktif').checked = Boolean(item.status_aktif);
        document.getElementById('edit_aturan').value = item.aturan || '';

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

    function closeEditModal() {
        document.getElementById('editModal').classList.add('hidden');
    }

    // Tutup modal jika klik di backdrop luar
    window.addEventListener('click', function(e) {
        const createModal = document.getElementById('createModal');
        const editModal = document.getElementById('editModal');
        if (e.target === createModal) closeCreateModal();
        if (e.target === editModal) closeEditModal();
    });
</script>
@endsection