<x-app-layout>
    <div class="mb-12">
        <!-- Header -->
        <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-6 mb-8">
            <div>
                <h1 class="text-4xl font-black tracking-tight dark:text-white">
                    <span class="bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent">
                        Histori Bonus RAP
                    </span>
                </h1>
                <p class="text-slate-500 dark:text-slate-400 text-sm mt-1">
                    <i data-lucide="history" class="w-4 h-4 inline mr-2"></i>
                    Riwayat pengajuan dan pencairan bonus RAP
                </p>
            </div>
            <div class="flex items-center gap-4">
                <a href="{{ route('rap.data-bonus') }}"
                    class="px-4 py-2.5 bg-gradient-to-r from-green-600 to-emerald-600 text-white rounded-xl text-sm font-medium hover:shadow-lg transition-all flex items-center gap-2">
                    <i data-lucide="gift" class="w-4 h-4"></i>
                    Data Bonus
                </a>
                <a href="{{ route('rap.data-approval') }}"
                    class="px-4 py-2.5 bg-blue-600 text-white rounded-xl text-sm font-medium hover:bg-blue-700 transition-all flex items-center gap-2">
                    <i data-lucide="check-circle" class="w-4 h-4"></i>
                    Data Approval
                </a>
                <a href="{{ route('rap.index') }}"
                    class="px-4 py-2.5 bg-white dark:bg-gray-800 border rounded-xl text-sm font-medium hover:bg-slate-50 transition-all flex items-center gap-2">
                    <i data-lucide="arrow-left" class="w-4 h-4"></i> Kembali
                </a>
            </div>
        </div>

        <!-- Statistik Cards -->
        <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-6 gap-4 mb-6">
            <div class="bg-white dark:bg-[#1a1a2e] p-4 rounded-xl border shadow-sm">
                <div class="text-xs text-slate-500 mb-1">Total Pengajuan</div>
                <div class="text-2xl font-bold">{{ $statistik['total'] }}</div>
                <div class="text-xs text-slate-400">Bonus</div>
            </div>
            <div class="bg-white dark:bg-[#1a1a2e] p-4 rounded-xl border shadow-sm">
                <div class="text-xs text-slate-500 mb-1">Total Nominal</div>
                <div class="text-2xl font-bold text-green-600">Rp
                    {{ number_format($statistik['total_nominal'], 0, ',', '.') }}</div>
                <div class="text-xs text-slate-400">Semua pengajuan</div>
            </div>
            <div class="bg-white dark:bg-[#1a1a2e] p-4 rounded-xl border shadow-sm">
                <div class="text-xs text-slate-500 mb-1">Menunggu</div>
                <div class="text-2xl font-bold text-yellow-600">{{ $statistik['pending'] }}</div>
                <div class="text-xs text-slate-400">Belum dicairkan</div>
            </div>
            <div class="bg-white dark:bg-[#1a1a2e] p-4 rounded-xl border shadow-sm">
                <div class="text-xs text-slate-500 mb-1">Sudah Dicairkan</div>
                <div class="text-2xl font-bold text-emerald-600">{{ $statistik['disetujui'] }}</div>
                <div class="text-xs text-slate-400">Selesai</div>
            </div>
            <div class="bg-white dark:bg-[#1a1a2e] p-4 rounded-xl border shadow-sm">
                <div class="text-xs text-slate-500 mb-1">Bulan Ini</div>
                <div class="text-2xl font-bold text-blue-600">{{ $statistik['bulan_ini'] }}</div>
                <div class="text-xs text-slate-400">Pengajuan</div>
            </div>
            <div class="bg-white dark:bg-[#1a1a2e] p-4 rounded-xl border shadow-sm">
                <div class="text-xs text-slate-500 mb-1">Nominal Bulan Ini</div>
                <div class="text-lg font-bold text-purple-600">Rp
                    {{ number_format($statistik['nominal_bulan_ini'], 0, ',', '.') }}</div>
                <div class="text-xs text-slate-400">Total</div>
            </div>
        </div>

        <!-- Filter -->
        <div class="mb-6 bg-white dark:bg-[#1a1a2e] rounded-xl border p-4">
            <form method="GET" action="{{ route('rap.histori-bonus') }}" class="space-y-4">
                <div class="grid grid-cols-1 md:grid-cols-5 gap-4">
                    <div>
                        <label class="block text-sm font-medium mb-2">Tahun Ajaran</label>
                        <select name="tahun_ajaran"
                            class="w-full px-4 py-2 bg-white dark:bg-gray-800 border rounded-lg">
                            <option value="all">Semua Tahun</option>
                            @foreach ($allTahunAjaran as $ta)
                                <option value="{{ $ta }}"
                                    {{ request('tahun_ajaran') == $ta ? 'selected' : '' }}>{{ $ta }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium mb-2">Status</label>
                        <select name="status" class="w-full px-4 py-2 bg-white dark:bg-gray-800 border rounded-lg">
                            <option value="all">Semua Status</option>
                            <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>Menunggu
                                Pencairan</option>
                            <option value="disetujui" {{ request('status') == 'disetujui' ? 'selected' : '' }}>Sudah
                                Dicairkan</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium mb-2">Tanggal Mulai</label>
                        <input type="date" name="tanggal_dari" value="{{ request('tanggal_dari') }}"
                            class="w-full px-4 py-2 bg-white dark:bg-gray-800 border rounded-lg">
                    </div>
                    <div>
                        <label class="block text-sm font-medium mb-2">Tanggal Sampai</label>
                        <input type="date" name="tanggal_sampai" value="{{ request('tanggal_sampai') }}"
                            class="w-full px-4 py-2 bg-white dark:bg-gray-800 border rounded-lg">
                    </div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium mb-2">Pencarian</label>
                        <input type="text" name="search" value="{{ request('search') }}"
                            placeholder="Cari nama RAP, Marketing..."
                            class="w-full px-4 py-2 bg-white dark:bg-gray-800 border rounded-lg">
                    </div>
                    <div class="flex justify-end gap-2 items-end">
                        <button type="submit"
                            class="px-4 py-2 bg-gradient-to-r from-violet-600 to-indigo-700 text-white rounded-lg">
                            <i data-lucide="filter" class="w-4 h-4 inline mr-1"></i> Filter
                        </button>
                        <a href="{{ route('rap.histori-bonus') }}"
                            class="px-4 py-2 bg-white border rounded-lg">Reset</a>
                        <button type="button" onclick="window.print()"
                            class="px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700">
                            <i data-lucide="printer" class="w-4 h-4 inline mr-1"></i> Print
                        </button>
                    </div>
                </div>
            </form>
        </div>

        <!-- Tabel Histori -->
        <div class="bg-white dark:bg-[#1a1a2e] rounded-xl border overflow-hidden">
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead>
                        <tr class="bg-slate-50/50 dark:bg-white/5 border-b">
                            <th class="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">No</th>
                            <th class="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">Tanggal Pengajuan</th>
                            <th class="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">Nama RAP</th>
                            <th class="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">Marketing</th>
                            <th class="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">Tahun Ajaran</th>
                            <th class="text-center py-3 px-4 text-xs font-semibold text-slate-500 uppercase">Total Mhs</th>
                            <th class="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">Rule Bonus</th>
                            <th class="text-right py-3 px-4 text-xs font-semibold text-slate-500 uppercase">Nominal</th>
                            <th class="text-center py-3 px-4 text-xs font-semibold text-slate-500 uppercase">Status</th>
                            <th class="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">Tanggal Cair</th>
                            <th class="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">Catatan</th>
                            <th class="text-center py-3 px-4 text-xs font-semibold text-slate-500 uppercase">Aksi</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 dark:divide-gray-800">
                        @forelse($historiBonus as $index => $item)
                            @php
                                $statusColor = $item->status == 'pending' ? 'yellow' : 'emerald';
                                $statusText = $item->status == 'pending' ? 'Menunggu Pencairan' : 'Sudah Dicairkan';
                                $statusIcon = $item->status == 'pending' ? 'clock' : 'check-circle';
                                $ruleName = $item->ruleBonus ? $item->ruleBonus->nama_rule : ($item->rule_bonus_id ? 'Rule ID: ' . $item->rule_bonus_id : '-');
                                $catatan = $item->catatan_histori_bonus;
                            @endphp
                            <tr class="hover:bg-slate-50/50 dark:hover:bg-gray-800/30">
                                <td class="py-3 px-4">{{ $loop->iteration + ($historiBonus->currentPage() - 1) * $historiBonus->perPage() }}</td>
                                <td class="py-3 px-4 whitespace-nowrap">
                                    <span class="text-sm">{{ \Carbon\Carbon::parse($item->created_at)->format('d/m/Y H:i') }}</span>
                                    <div class="text-xs text-slate-400">{{ \Carbon\Carbon::parse($item->created_at)->diffForHumans() }}</div>
                                </td>
                                <td class="py-3 px-4 font-medium">{{ $item->rap->nama ?? '-' }}</td>
                                <td class="py-3 px-4">{{ $item->rap->marketing ?? '-' }}</td>
                                <td class="py-3 px-4">
                                    <span class="px-2 py-1 text-xs rounded-full bg-purple-500/10 text-purple-600">{{ $item->tahun_ajaran }}</span>
                                </td>
                                <td class="py-3 px-4 text-center font-semibold text-green-600">{{ $item->total_mahasiswa }} Mhs</td>
                                <td class="py-3 px-4">
                                    <span class="text-sm">{{ $ruleName }}</span>
                                    @if ($item->rule_bonus_id)
                                        <div class="text-xs text-slate-400">ID: {{ $item->rule_bonus_id }}</div>
                                    @endif
                                </td>
                                <td class="py-3 px-4 text-right font-bold text-green-600">Rp {{ number_format($item->nominal, 0, ',', '.') }}</td>
                                <td class="py-3 px-4">
                                    <span class="inline-flex items-center gap-1 px-2 py-1 text-xs rounded-full bg-{{ $statusColor }}-500/10 text-{{ $statusColor }}-600">
                                        <i data-lucide="{{ $statusIcon }}" class="w-3 h-3"></i>
                                        {{ $statusText }}
                                    </span>
                                </td>
                                <td class="py-3 px-4 whitespace-nowrap">
                                    @if ($item->status == 'disetujui' && $item->tanggal_cair)
                                        <span class="text-sm">{{ \Carbon\Carbon::parse($item->tanggal_cair)->format('d/m/Y H:i') }}</span>
                                        <div class="text-xs text-slate-400">oleh: {{ $item->pencair->name ?? '-' }}</div>
                                    @else
                                        <span class="text-sm text-slate-400">-</span>
                                    @endif
                                </td>
                                <td class="py-3 px-4 max-w-xs">
                                    @if($catatan)
                                        <div class="text-sm text-slate-600 dark:text-slate-300 line-clamp-2">{{ $catatan }}</div>
                                    @else
                                        <span class="text-xs text-slate-400">-</span>
                                    @endif
                                </td>
                                <td class="py-3 px-4">
                                    <div class="flex items-center gap-2">
                                        <button onclick="openCatatanModal({{ $item->id }}, '{{ addslashes($catatan) }}')"
                                            class="p-1.5 bg-amber-100 text-amber-600 rounded-lg hover:bg-amber-200 transition-all"
                                            title="Tambah/Edit Catatan">
                                            <i data-lucide="edit-3" class="w-4 h-4"></i>
                                        </button>
                                        <button onclick="showDetail({{ $item->id }})"
                                            class="p-1.5 bg-blue-100 text-blue-600 rounded-lg hover:bg-blue-200 transition-all"
                                            title="Lihat Detail">
                                            <i data-lucide="eye" class="w-4 h-4"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="12" class="py-12 text-center text-slate-500">
                                    <i data-lucide="inbox" class="w-12 h-12 mx-auto mb-3 text-slate-400"></i>
                                    <p>Belum ada histori bonus</p>
                                    <p class="text-xs mt-2">Bonus akan muncul setelah diajukan ke keuangan</p>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Pagination -->
        @if ($historiBonus->hasPages())
            <div class="mt-4 p-4 bg-white dark:bg-[#1a1a2e] rounded-xl border">
                {{ $historiBonus->withQueryString()->links('vendor.pagination.tailwind') }}
            </div>
        @endif
    </div>

    <!-- Modal Detail Bonus -->
    <div id="detailModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-xl w-full max-w-2xl p-6 relative max-h-[90vh] overflow-y-auto">
            <div class="flex justify-between items-center mb-4 pb-2 border-b">
                <h3 class="text-lg font-bold">Detail Bonus RAP</h3>
                <button onclick="closeDetailModal()" class="text-slate-400 hover:text-slate-600">
                    <i data-lucide="x" class="w-5 h-5"></i>
                </button>
            </div>
            <div id="detailContent" class="space-y-4">
                <div class="text-center py-8">
                    <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"></div>
                    <p class="mt-2 text-sm text-slate-500">Memuat...</p>
                </div>
            </div>
            <div class="flex justify-end mt-6 pt-3 border-t">
                <button onclick="closeDetailModal()" class="px-4 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition-all">Tutup</button>
            </div>
        </div>
    </div>

    <!-- Modal Tambah/Edit Catatan -->
    <div id="catatanModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50" style="z-index: 1000;">
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-xl w-full max-w-md p-6 relative" style="z-index: 1001;">
            <div class="flex justify-between items-center mb-4 pb-2 border-b">
                <h3 class="text-lg font-bold">Catatan Histori Bonus</h3>
                <button onclick="closeCatatanModal()" class="text-slate-400 hover:text-slate-600">
                    <i data-lucide="x" class="w-5 h-5"></i>
                </button>
            </div>
            <form id="catatanForm">
                @csrf
                <input type="hidden" id="bonus_id" name="bonus_id">
                <div class="mb-4">
                    <label class="block text-sm font-medium mb-2">Catatan</label>
                    <textarea id="catatan_text" name="catatan" rows="5"
                        class="w-full px-4 py-2 bg-white dark:bg-gray-700 border rounded-lg focus:ring-2 focus:ring-blue-500"
                        placeholder="Masukkan catatan untuk histori bonus ini..."></textarea>
                </div>
                <div class="flex justify-end gap-3 mt-6 pt-3 border-t">
                    <button type="button" onclick="closeCatatanModal()"
                        class="px-4 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition-all">
                        Batal
                    </button>
                    <button type="submit" id="btnSimpanCatatan"
                        class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-all">
                        <i data-lucide="save" class="w-4 h-4 inline mr-1"></i>
                        Simpan Catatan
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Style untuk SweetAlert agar muncul di atas modal -->
    <style>
        /* SweetAlert Container dengan z-index lebih tinggi */
        .swal2-container {
            z-index: 99999 !important;
        }

        /* Modal catatan dengan z-index yang lebih rendah dari SweetAlert */
        #catatanModal {
            z-index: 10000 !important;
        }

        /* Pastikan SweetAlert popup tidak terpotong */
        .swal2-popup {
            z-index: 100000 !important;
        }

        /* Backdrop SweetAlert */
        .swal2-backdrop {
            z-index: 99998 !important;
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            lucide.createIcons();

            @if (session('success'))
                Swal.fire({
                    title: 'Berhasil!',
                    text: '{{ session('success') }}',
                    icon: 'success',
                    timer: 3000,
                    toast: false,
                    position: 'center'
                });
            @endif
        });

        // ==================== CATATAN ====================
        let currentBonusId = null;

        function openCatatanModal(bonusId, existingCatatan) {
            currentBonusId = bonusId;
            document.getElementById('bonus_id').value = bonusId;
            document.getElementById('catatan_text').value = existingCatatan || '';

            const modal = document.getElementById('catatanModal');
            modal.classList.remove('hidden');
            modal.classList.add('flex');
            lucide.createIcons();
        }

        function closeCatatanModal() {
            const modal = document.getElementById('catatanModal');
            modal.classList.add('hidden');
            modal.classList.remove('flex');
            currentBonusId = null;
        }

        // Submit Catatan dengan SweetAlert z-index tinggi
        document.getElementById('catatanForm')?.addEventListener('submit', function(e) {
            e.preventDefault();

            const bonusId = document.getElementById('bonus_id').value;
            const catatan = document.getElementById('catatan_text').value;

            // Tampilkan SweetAlert (akan muncul di atas modal karena z-index sudah diatur)
            Swal.fire({
                title: 'Simpan Catatan?',
                text: 'Apakah Anda yakin ingin menyimpan catatan ini?',
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Ya, Simpan!',
                cancelButtonText: 'Batal',
                allowOutsideClick: false,
                backdrop: true
            }).then((result) => {
                if (result.isConfirmed) {
                    // Tampilkan loading
                    Swal.fire({
                        title: 'Menyimpan...',
                        text: 'Mohon tunggu sebentar',
                        icon: 'info',
                        allowOutsideClick: false,
                        didOpen: () => {
                            Swal.showLoading();
                        }
                    });

                    fetch(`/rap/simpan-catatan-histori-bonus/${bonusId}`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                        },
                        body: JSON.stringify({ catatan: catatan })
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            Swal.fire({
                                title: 'Berhasil!',
                                text: data.message,
                                icon: 'success',
                                timer: 2000,
                                showConfirmButton: true
                            }).then(() => {
                                closeCatatanModal();
                                window.location.reload();
                            });
                        } else {
                            Swal.fire({
                                title: 'Gagal!',
                                text: data.message,
                                icon: 'error',
                                confirmButtonText: 'OK'
                            });
                        }
                    })
                    .catch(error => {
                        Swal.fire({
                            title: 'Error!',
                            text: 'Terjadi kesalahan: ' + error,
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    });
                }
            });
        });

        // ==================== DETAIL BONUS ====================
        function showDetail(id) {
            const modal = document.getElementById('detailModal');
            const content = document.getElementById('detailContent');

            modal.classList.remove('hidden');
            modal.classList.add('flex');

            content.innerHTML = `
                <div class="text-center py-8">
                    <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"></div>
                    <p class="mt-2 text-sm text-slate-500">Memuat...</p>
                </div>
            `;
            lucide.createIcons();

            fetch(`/rap/get-catatan-bonus/${id}`, {
                headers: { 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    const statusBadge = data.status_badge || '<span class="px-2 py-1 text-xs rounded-full bg-yellow-500/10 text-yellow-600">Menunggu</span>';
                    const statusPengajuan = data.status === 'pending' ? 'Menunggu Pencairan' : 'Sudah Dicairkan';

                    content.innerHTML = `
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div class="bg-slate-50 dark:bg-gray-700/50 p-3 rounded-lg">
                                <div class="text-xs text-slate-500">Nama RAP</div>
                                <div class="font-medium">${data.rap_nama || '-'}</div>
                            </div>
                            <div class="bg-slate-50 dark:bg-gray-700/50 p-3 rounded-lg">
                                <div class="text-xs text-slate-500">Tahun Ajaran</div>
                                <div class="font-medium">${data.tahun_ajaran || '-'}</div>
                            </div>
                            <div class="bg-slate-50 dark:bg-gray-700/50 p-3 rounded-lg">
                                <div class="text-xs text-slate-500">Total Mahasiswa</div>
                                <div class="font-medium text-green-600">${data.total_mahasiswa || 0} Mahasiswa</div>
                            </div>
                            <div class="bg-slate-50 dark:bg-gray-700/50 p-3 rounded-lg">
                                <div class="text-xs text-slate-500">Mahasiswa Lunas</div>
                                <div class="font-medium text-emerald-600">${data.mahasiswa_lunas || 0} Mahasiswa</div>
                            </div>
                            <div class="bg-slate-50 dark:bg-gray-700/50 p-3 rounded-lg">
                                <div class="text-xs text-slate-500">Nominal Bonus</div>
                                <div class="font-bold text-green-600 text-lg">Rp ${new Intl.NumberFormat('id-ID').format(data.nominal || 0)}</div>
                            </div>
                            <div class="bg-slate-50 dark:bg-gray-700/50 p-3 rounded-lg">
                                <div class="text-xs text-slate-500">Rule Bonus</div>
                                <div class="font-medium">${data.rule_bonus || '-'}</div>
                            </div>
                            <div class="bg-slate-50 dark:bg-gray-700/50 p-3 rounded-lg">
                                <div class="text-xs text-slate-500">Status Validasi</div>
                                <div>${statusBadge}</div>
                            </div>
                            <div class="bg-slate-50 dark:bg-gray-700/50 p-3 rounded-lg">
                                <div class="text-xs text-slate-500">Status Pengajuan</div>
                                <div class="inline-flex items-center gap-1 px-2 py-1 text-xs rounded-full ${data.status === 'pending' ? 'bg-yellow-500/10 text-yellow-600' : 'bg-emerald-500/10 text-emerald-600'}">
                                    <i data-lucide="${data.status === 'pending' ? 'clock' : 'check-circle'}" class="w-3 h-3"></i>
                                    ${statusPengajuan}
                                </div>
                            </div>
                            <div class="bg-slate-50 dark:bg-gray-700/50 p-3 rounded-lg">
                                <div class="text-xs text-slate-500">Divalidasi oleh</div>
                                <div class="font-medium">${data.validator || '-'}</div>
                            </div>
                            <div class="bg-slate-50 dark:bg-gray-700/50 p-3 rounded-lg">
                                <div class="text-xs text-slate-500">Tanggal Validasi</div>
                                <div class="font-medium">${data.tanggal_validasi || '-'}</div>
                            </div>
                        </div>
                        <div class="bg-slate-50 dark:bg-gray-700/50 p-3 rounded-lg">
                            <div class="text-xs text-slate-500 mb-1">Catatan Validasi</div>
                            <div class="text-sm">${data.catatan || '<em class="text-slate-400">Tidak ada catatan</em>'}</div>
                        </div>
                        <div class="bg-amber-50 dark:bg-amber-900/20 p-3 rounded-lg border border-amber-200 dark:border-amber-800">
                            <div class="text-xs text-amber-600 dark:text-amber-400 mb-1 font-bold">📝 Catatan Histori Bonus</div>
                            <div class="text-sm">${data.catatan_histori_bonus || '<em class="text-slate-400">Belum ada catatan</em>'}</div>
                        </div>
                    `;
                } else {
                    content.innerHTML = `<div class="text-center py-8 text-red-500"><i data-lucide="alert-circle" class="w-12 h-12 mx-auto mb-3"></i><p>Gagal memuat data: ${data.message}</p></div>`;
                }
                lucide.createIcons();
            })
            .catch(error => {
                content.innerHTML = `<div class="text-center py-8 text-red-500"><i data-lucide="alert-circle" class="w-12 h-12 mx-auto mb-3"></i><p>Terjadi kesalahan: ${error.message}</p></div>`;
                lucide.createIcons();
            });
        }

        function closeDetailModal() {
            const modal = document.getElementById('detailModal');
            modal.classList.add('hidden');
            modal.classList.remove('flex');
        }

        // Tutup modal saat klik overlay
        document.getElementById('detailModal')?.addEventListener('click', function(e) {
            if (e.target === this) closeDetailModal();
        });
        document.getElementById('catatanModal')?.addEventListener('click', function(e) {
            if (e.target === this) closeCatatanModal();
        });
    </script>
</x-app-layout>
