<?php if (isset($component)) { $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54 = $attributes; } ?>
<?php $component = App\View\Components\AppLayout::resolve([] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('app-layout'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\App\View\Components\AppLayout::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes([]); ?>
    <div class="mb-12">
        <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-6 mb-8">
            <div class="relative">
                <div
                    class="absolute -left-3 -top-3 w-20 h-20 bg-gradient-to-br from-violet-500/10 to-indigo-600/10 rounded-full blur-xl">
                </div>
                <h1 class="text-4xl font-black tracking-tight dark:text-white relative z-10 mb-2">
                    <span class="bg-gradient-to-r from-violet-600 to-indigo-600 bg-clip-text text-transparent">
                        Tambah Biaya
                    </span>
                </h1>
                <p class="text-slate-500 dark:text-slate-400 text-sm pl-1">
                    <i data-lucide="inbox" class="w-4 h-4 inline mr-2"></i>
                    Tambah biaya baru untuk mahasiswa
                </p>
            </div>

            <div class="flex items-center gap-4">
                <a href="<?php echo e(route('dashboard')); ?>"
                    class="px-4 py-2.5 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-xl text-sm font-medium text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-gray-700 transition-all flex items-center gap-2 shadow-sm">
                    <i data-lucide="arrow-left" class="w-4 h-4"></i>
                    <span>Kembali</span>
                </a>
            </div>
        </div>

        <!-- Main Card -->
        <div class="group relative">
            <div
                class="absolute -inset-1 bg-gradient-to-r from-violet-600/10 to-indigo-600/10 rounded-3xl blur opacity-0 group-hover:opacity-30 transition duration-500">
            </div>
            <div
                class="relative bg-white dark:bg-[#1a1a2e] rounded-3xl border border-slate-200 dark:border-white/5 shadow-xl overflow-hidden">

                <!-- Card Header -->
                <div class="p-6 border-b border-slate-100 dark:border-white/5">
                    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
                        <div>
                            <h3 class="text-xl font-bold text-gray-900 dark:text-white">Form Tambah Biaya</h3>
                            <p class="text-sm text-slate-500 dark:text-slate-400 mt-1">
                                Pilih mahasiswa, lalu isi form di bawah
                            </p>
                        </div>
                        <div class="text-sm text-slate-500 dark:text-slate-400">
                            Total: <span
                                class="font-bold text-violet-600 dark:text-violet-400"><?php echo e($mahasiswa->total()); ?></span>
                            mahasiswa valid
                        </div>
                    </div>
                </div>

                <!-- Filter Section -->
                <div class="p-6 border-b border-slate-100 dark:border-white/5 bg-slate-50/50 dark:bg-white/5">
                    <form method="GET" action="<?php echo e(route('tambah-biaya.index')); ?>" class="space-y-4">
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                            <?php if($isGlobal): ?>
                                <div>
                                    <label
                                        class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Kampus</label>
                                    <select name="kampus_id"
                                        class="w-full px-4 py-2 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-lg text-sm focus:ring-2 focus:ring-violet-500">
                                        <option value="all">Semua Kampus</option>
                                        <?php $__currentLoopData = $kampusList; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $kampus): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                            <option value="<?php echo e($kampus->id); ?>"
                                                <?php echo e(($filters['kampus_id'] ?? '') == $kampus->id ? 'selected' : ''); ?>>
                                                <?php echo e($kampus->nama); ?>

                                                <?php echo e($kampus->singkatan ? '(' . $kampus->singkatan . ')' : ''); ?>

                                            </option>
                                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                    </select>
                                </div>
                            <?php endif; ?>

                            <div class="<?php echo e($isGlobal ? 'md:col-span-2' : 'md:col-span-3'); ?>">
                                <label
                                    class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Pencarian</label>
                                <div class="relative">
                                    <i data-lucide="search"
                                        class="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-slate-400"></i>
                                    <input type="text" name="search" value="<?php echo e($filters['search'] ?? ''); ?>"
                                        placeholder="Cari nama atau NIM..."
                                        class="w-full pl-10 pr-4 py-2 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-lg text-sm focus:ring-2 focus:ring-violet-500">
                                </div>
                            </div>
                        </div>

                        <div class="flex justify-end gap-2">
                            <button type="submit"
                                class="px-4 py-2 bg-gradient-to-r from-violet-600 to-indigo-700 text-white rounded-lg text-sm font-medium hover:shadow-lg hover:shadow-violet-500/25 transition-all flex items-center gap-2">
                                <i data-lucide="filter" class="w-4 h-4"></i> Filter
                            </button>

                            <?php if(request()->hasAny(['kampus_id', 'search'])): ?>
                                <a href="<?php echo e(route('tambah-biaya.index')); ?>"
                                    class="px-4 py-2 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-lg text-sm font-medium text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-gray-700 transition-all flex items-center gap-2">
                                    <i data-lucide="x" class="w-4 h-4"></i> Reset
                                </a>
                            <?php endif; ?>
                        </div>
                    </form>
                </div>

                <!-- Form Tambah Biaya -->
                <form action="<?php echo e(route('tambah-biaya.inject')); ?>" method="POST" id="bulkInjectForm">
                    <?php echo csrf_field(); ?>

                    <!-- DAFTAR BIAYA (TAMBAH BIAYA BARU) -->
                    <div
                        class="p-6 border-b border-slate-100 dark:border-white/5 bg-gradient-to-r from-violet-50 to-indigo-50 dark:from-violet-900/20 dark:to-indigo-900/20">
                        <div class="flex items-center justify-between mb-4">
                            <h4 class="font-semibold text-lg text-gray-900 dark:text-white flex items-center gap-2">
                                <i data-lucide="plus-circle" class="w-5 h-5 text-violet-500"></i>
                                Tambah Biaya Baru
                            </h4>
                            <button type="button" onclick="tambahItemBiaya()"
                                class="px-3 py-1.5 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-lg text-sm font-medium text-violet-600 dark:text-violet-400 hover:bg-violet-50 dark:hover:bg-violet-900/20 transition-all flex items-center gap-1">
                                <i data-lucide="plus" class="w-4 h-4"></i> Tambah Item
                            </button>
                        </div>

                        <div id="biaya-items-container" class="space-y-4">
                            <!-- Item biaya pertama -->
                            <div id="biaya-item-0"
                                class="biaya-item p-4 bg-white dark:bg-gray-800/50 rounded-xl border border-slate-200 dark:border-gray-700">
                                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                                    <div>
                                        <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">
                                            Nama Biaya <span class="text-red-500">*</span>
                                        </label>
                                        <input type="text" name="biaya_items[0][nama]"
                                            class="w-full px-3 py-2 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-lg text-sm"
                                            placeholder="Contoh: Biaya KKN" required>
                                    </div>
                                    <div>
                                        <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">
                                            Kategori <span class="text-red-500">*</span>
                                        </label>
                                        <select name="biaya_items[0][kategori]"
                                            class="w-full px-3 py-2 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-lg text-sm"
                                            required>
                                            <option value="">Pilih</option>
                                            <option value="RUTIN">RUTIN - Rutin</option>
                                            <option value="BL">BL - Lain</option>
                                            <option value="SP">SP - Pendek</option>
                                        </select>
                                    </div>
                                    <div>
                                        <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">
                                            Nominal (Rp) <span class="text-red-500">*</span>
                                        </label>
                                        <input type="number" name="biaya_items[0][nominal]"
                                            class="w-full px-3 py-2 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-lg text-sm"
                                            placeholder="0" min="0" required>
                                    </div>
                                    <div>
                                        <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">
                                            Semester & Tanggal <span class="text-red-500">*</span>
                                        </label>
                                        <div class="flex gap-2">
                                            <button type="button"
                                                onclick="openSemesterModal(0)"
                                                class="flex-1 px-3 py-2 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-lg text-sm text-left flex items-center justify-between hover:border-violet-500 transition-all">
                                                <span class="text-slate-500" id="semester-summary-0">Pilih Semester</span>
                                                <i data-lucide="calendar" class="w-4 h-4 text-slate-400"></i>
                                            </button>
                                        </div>
                                        <div id="semester-values-container-0"></div>
                                        <div id="tanggal-data-0" class="hidden"></div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Template biaya baru -->
                        <template id="biaya-item-template">
                            <div class="biaya-item p-4 bg-white dark:bg-gray-800/50 rounded-xl border border-slate-200 dark:border-gray-700 relative">
                                <button type="button" onclick="hapusItemBiaya(this)"
                                    class="absolute -top-2 -right-2 w-6 h-6 bg-red-500 text-white rounded-full flex items-center justify-center hover:bg-red-600 transition-all z-10 shadow-md">
                                    <i data-lucide="x" class="w-4 h-4"></i>
                                </button>
                                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                                    <div>
                                        <input type="text" name="biaya_items[__INDEX__][nama]"
                                            class="w-full px-3 py-2 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-lg text-sm"
                                            placeholder="Nama Biaya" required>
                                    </div>
                                    <div>
                                        <select name="biaya_items[__INDEX__][kategori]"
                                            class="w-full px-3 py-2 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-lg text-sm"
                                            required>
                                            <option value="">Pilih</option>
                                            <option value="RUTIN">RUTIN - Rutin</option>
                                            <option value="BL">BL - Lain</option>
                                            <option value="SP">SP - Pendek</option>
                                        </select>
                                    </div>
                                    <div>
                                        <input type="number" name="biaya_items[__INDEX__][nominal]"
                                            class="w-full px-3 py-2 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-lg text-sm"
                                            placeholder="Nominal" min="0" required>
                                    </div>
                                    <div>
                                        <div class="flex gap-2">
                                            <button type="button"
                                                onclick="openSemesterModal(__INDEX__)"
                                                class="flex-1 px-3 py-2 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-lg text-sm text-left flex items-center justify-between hover:border-violet-500 transition-all">
                                                <span class="text-slate-500" id="semester-summary-__INDEX__">Pilih Semester</span>
                                                <i data-lucide="calendar" class="w-4 h-4 text-slate-400"></i>
                                            </button>
                                        </div>
                                        <div id="semester-values-container-__INDEX__"></div>
                                        <div id="tanggal-data-__INDEX__" class="hidden"></div>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </div>

                    <!-- Info Alert -->
                    <div class="p-4 bg-blue-50 dark:bg-blue-900/20 border-b">
                        <div class="flex items-start gap-3 text-sm">
                            <i data-lucide="info" class="w-5 h-5 text-blue-500 flex-shrink-0"></i>
                            <div>
                                <p class="font-medium mb-1">Informasi:</p>
                                <ul class="list-disc list-inside space-y-1">
                                    <li>Hanya menampilkan mahasiswa dengan status valid</li>
                                    <li>Biaya yang ditambahkan akan langsung valid tanpa perlu validasi</li>
                                    <li>Untuk potongan biaya, gunakan menu <span
                                            class="font-medium text-amber-600">Potongan Biaya</span> yang terpisah</li>
                                    <li>Setiap semester yang dipilih akan memiliki tanggal jatuh tempo sendiri</li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <!-- Table Section -->
                    <div class="overflow-x-auto">
                        <table class="w-full">
                            <thead>
                                <tr class="bg-slate-50/50 dark:bg-white/5 border-b">
                                    <th class="py-4 px-6 w-12">
                                        <input type="checkbox" id="selectAll"
                                            class="w-4 h-4 text-violet-600 rounded">
                                    </th>
                                    <th class="text-left py-4 px-6 text-xs font-semibold text-slate-500 uppercase">NIM
                                    </th>
                                    <th class="text-left py-4 px-6 text-xs font-semibold text-slate-500 uppercase">Nama
                                    </th>
                                    <th class="text-left py-4 px-6 text-xs font-semibold text-slate-500 uppercase">
                                        Kampus</th>
                                    <th class="text-left py-4 px-6 text-xs font-semibold text-slate-500 uppercase">
                                        Prodi</th>
                                    <th class="text-left py-4 px-6 text-xs font-semibold text-slate-500 uppercase">
                                        Angkatan</th>
                                    <th class="text-left py-4 px-6 text-xs font-semibold text-slate-500 uppercase">
                                        Status</th>
                                    <th class="text-left py-4 px-6 text-xs font-semibold text-slate-500 uppercase">Aksi
                                    </th>
                                </tr>
                            </thead>
                            <tbody class="divide-y">
                                <?php $__empty_1 = true; $__currentLoopData = $mahasiswa; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $m): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                                    <tr
                                        class="hover:bg-slate-50/50 dark:hover:bg-white/5 <?php echo e(!$m->has_angsuran ? 'opacity-50 bg-gray-50' : ''); ?>">
                                        <td class="py-4 px-6">
                                            <?php if($m->has_angsuran): ?>
                                                <input type="checkbox" name="mahasiswa_ids[]"
                                                    value="<?php echo e($m->id); ?>"
                                                    class="mahasiswa-checkbox w-4 h-4 text-violet-600 rounded">
                                            <?php else: ?>
                                                <span class="text-xs text-red-500"
                                                    title="Belum punya rencana angsuran"><i data-lucide="x-circle"
                                                        class="w-4 h-4"></i></span>
                                            <?php endif; ?>
                                        </td>
                                        <td class="py-4 px-6 font-mono text-sm"><?php echo e($m->nim); ?></td>
                                        <td class="py-4 px-6 font-medium"><?php echo e($m->nama); ?></td>
                                        <td class="py-4 px-6 text-sm"><?php echo e($m->kampus->nama ?? '-'); ?></td>
                                        <td class="py-4 px-6 text-sm"><?php echo e($m->prodi->nama ?? '-'); ?></td>
                                        <td class="py-4 px-6 text-sm"><?php echo e($m->angkatan); ?></td>
                                        <td class="py-4 px-6">
                                            <?php if($m->has_angsuran): ?>
                                                <span
                                                    class="px-2 py-1 bg-green-500/10 text-green-600 rounded-lg text-xs">Valid</span>
                                            <?php else: ?>
                                                <span
                                                    class="px-2 py-1 bg-red-500/10 text-red-600 rounded-lg text-xs">Belum
                                                    Ada</span>
                                            <?php endif; ?>
                                        </td>
                                        <td class="py-4 px-6">
                                            <?php if($m->has_angsuran): ?>
                                                <button type="button"
                                                    onclick="showAngsuranDetail(<?php echo e($m->id); ?>)"
                                                    class="text-xs text-violet-600 hover:underline flex items-center gap-1">
                                                    <i data-lucide="eye" class="w-3 h-3"></i> Detail
                                                </button>
                                            <?php endif; ?>
                                        </td>
                                    </tr>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                                    <tr>
                                        <td colspan="8" class="py-12 text-center text-slate-500">Tidak ada data
                                        </td>
                                    </tr>
                                <?php endif; ?>
                            </tbody>
                        </table>
                    </div>

                    <!-- Pagination & Actions -->
                    <div class="p-6 border-t">
                        <div class="flex flex-col sm:flex-row justify-between items-center gap-4">
                            <div class="flex items-center gap-4">
                                <span class="text-sm text-slate-500" id="selectedCount">0 mahasiswa dipilih</span>
                                <button type="button" onclick="clearSelection()"
                                    class="text-xs text-violet-600 hover:underline">Hapus pilihan</button>
                            </div>
                            <div>
                                <button type="button" onclick="showConfirmModal()"
                                    class="px-6 py-2.5 bg-gradient-to-r from-violet-600 to-indigo-700 text-white rounded-xl text-sm font-medium hover:shadow-lg hover:shadow-violet-500/25 transition-all flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
                                    id="submitBtn" disabled>
                                    <i data-lucide="inbox" class="w-4 h-4"></i>
                                    Tambah Biaya
                                </button>
                            </div>
                        </div>
                        <?php if($mahasiswa->hasPages()): ?>
                            <div class="mt-6"><?php echo e($mahasiswa->links('vendor.pagination.tailwind')); ?></div>
                        <?php endif; ?>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- MODAL PILIH SEMESTER & TANGGAL -->
    <div id="semesterModal" class="fixed inset-0 z-50 hidden overflow-y-auto">
        <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
            <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity dark:bg-gray-900 dark:bg-opacity-75"
                onclick="closeSemesterModal()"></div>

            <div class="inline-block align-bottom bg-white dark:bg-[#1a1a2e] rounded-3xl text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
                <div class="p-6">
                    <div class="flex justify-between items-center mb-4">
                        <h3 class="text-lg font-bold text-gray-900 dark:text-white" id="semesterModalTitle">
                            Pilih Semester & Tanggal
                        </h3>
                        <button type="button" onclick="closeSemesterModal()"
                            class="text-slate-400 hover:text-slate-500">
                            <i data-lucide="x" class="w-5 h-5"></i>
                        </button>
                    </div>

                    <div class="mb-4">
                        <p class="text-sm text-slate-500 dark:text-slate-400 mb-3">
                            Pilih semester dan atur tanggal jatuh tempo masing-masing:
                        </p>
                        <div id="semesterListContainer" class="space-y-3 max-h-96 overflow-y-auto pr-2">
                            <!-- Dynamic content -->
                        </div>
                    </div>

                    <div class="flex justify-end gap-3 mt-4 pt-4 border-t border-slate-200 dark:border-gray-700">
                        <button type="button" onclick="closeSemesterModal()"
                            class="px-4 py-2 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-lg text-sm font-medium text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-gray-700 transition-all">
                            Batal
                        </button>
                        <button type="button" onclick="saveSemesterSelection()"
                            class="px-4 py-2 bg-gradient-to-r from-violet-600 to-indigo-700 text-white rounded-lg text-sm font-medium hover:shadow-lg hover:shadow-violet-500/25 transition-all">
                            Simpan
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Konfirmasi Tambah Biaya -->
    <div id="confirmModal" class="fixed inset-0 z-50 hidden overflow-y-auto">
        <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
            <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" onclick="closeConfirmModal()">
            </div>
            <div
                class="inline-block align-bottom bg-white dark:bg-[#1a1a2e] rounded-3xl text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
                <div class="p-6">
                    <div class="flex items-center gap-4 mb-4">
                        <div
                            class="w-12 h-12 rounded-xl bg-violet-500/10 text-violet-500 flex items-center justify-center">
                            <i data-lucide="alert-triangle" class="w-6 h-6"></i>
                        </div>
                        <div>
                            <h3 class="text-lg font-bold">Konfirmasi Tambah Biaya</h3>
                            <p class="text-sm text-slate-500" id="confirmMessage"></p>
                        </div>
                    </div>
                    <div class="bg-slate-50 dark:bg-white/5 p-4 rounded-xl mb-4 max-h-96 overflow-y-auto">
                        <ul class="space-y-2 text-sm" id="summaryList"></ul>
                    </div>
                    <div class="flex justify-end gap-3">
                        <button type="button" onclick="closeConfirmModal()"
                            class="px-4 py-2 bg-white border rounded-lg text-sm">Batal</button>
                        <button type="button" onclick="submitForm()"
                            class="px-4 py-2 bg-gradient-to-r from-violet-600 to-indigo-700 text-white rounded-lg text-sm">Ya,
                            Tambah</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Detail Angsuran -->
    <div id="detailModal" class="fixed inset-0 z-50 hidden overflow-y-auto">
        <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
            <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" onclick="closeDetailModal()">
            </div>
            <div
                class="inline-block align-bottom bg-white dark:bg-[#1a1a2e] rounded-3xl text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full">
                <div class="p-6">
                    <div class="flex justify-between items-center mb-4">
                        <h3 class="text-lg font-bold" id="detailModalTitle">Detail Angsuran</h3>
                        <button onclick="closeDetailModal()" class="text-slate-400 hover:text-slate-500">
                            <i data-lucide="x" class="w-5 h-5"></i>
                        </button>
                    </div>
                    <div id="detailModalContent" class="space-y-4">
                        <div class="text-center py-8" id="detailLoading">
                            <div
                                class="inline-block animate-spin rounded-full h-8 w-8 border-4 border-violet-500 border-t-transparent">
                            </div>
                            <p class="mt-2 text-sm text-slate-500">Memuat...</p>
                        </div>
                        <div id="detailData" class="hidden"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- SweetAlert2 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css" rel="stylesheet">

    <style>
        .swal2-container {
            z-index: 99999 !important;
        }

        .swal2-popup {
            z-index: 100000 !important;
            position: relative !important;
            border-radius: 24px !important;
            padding: 2rem !important;
            background: #ffffff !important;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
        }

        .dark .swal2-popup {
            background: #1a1a2e !important;
        }

        .swal2-title {
            font-size: 1.5rem !important;
            font-weight: 700 !important;
            color: #1e293b !important;
        }

        .dark .swal2-title {
            color: #e5e7eb !important;
        }

        .swal2-html-container {
            font-size: 1rem !important;
            color: #64748b !important;
            line-height: 1.5 !important;
        }

        .dark .swal2-html-container {
            color: #94a3b8 !important;
        }

        .swal2-confirm {
            padding: 0.75rem 1.5rem !important;
            border-radius: 12px !important;
            font-weight: 500 !important;
            font-size: 0.875rem !important;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
        }

        .swal2-cancel {
            padding: 0.75rem 1.5rem !important;
            border-radius: 12px !important;
            font-weight: 500 !important;
            font-size: 0.875rem !important;
        }

        .swal2-icon {
            margin: 1rem auto !important;
        }

        .swal2-timer-progress-bar {
            background: #10b981 !important;
            height: 4px !important;
        }

        .swal2-timer-progress-bar-container {
            background: #e2e8f0 !important;
        }

        @keyframes spin {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }

        .animate-spin {
            animation: spin 1s linear infinite;
        }

        body.modal-open {
            overflow: hidden;
        }

        .biaya-item {
            transition: all 0.2s ease;
        }

        .biaya-item:hover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }

        /* Custom scrollbar */
        .max-h-96::-webkit-scrollbar {
            width: 6px;
        }

        .max-h-96::-webkit-scrollbar-track {
            background: #f1f5f9;
            border-radius: 3px;
        }

        .max-h-96::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 3px;
        }

        .dark .max-h-96::-webkit-scrollbar-track {
            background: #334155;
        }

        .dark .max-h-96::-webkit-scrollbar-thumb {
            background: #475569;
        }
    </style>

    <!-- SweetAlert2 JS -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        let biayaItemCounter = 1;
        let currentItemIndex = null;
        let tempSelections = {};

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

            // Meta CSRF
            if (!document.querySelector('meta[name="csrf-token"]')) {
                const meta = document.createElement('meta');
                meta.name = 'csrf-token';
                meta.content = '<?php echo e(csrf_token()); ?>';
                document.head.appendChild(meta);
            }

            // Select All
            const selectAll = document.getElementById('selectAll');
            const checkboxes = document.querySelectorAll('.mahasiswa-checkbox');
            const submitBtn = document.getElementById('submitBtn');
            const selectedCountSpan = document.getElementById('selectedCount');

            function updateSelectedCount() {
                const checked = document.querySelectorAll('.mahasiswa-checkbox:checked').length;
                if (selectedCountSpan) selectedCountSpan.textContent = checked + ' mahasiswa dipilih';
                if (submitBtn) submitBtn.disabled = checked === 0;
            }

            if (selectAll) {
                selectAll.addEventListener('change', function() {
                    checkboxes.forEach(cb => cb.checked = this.checked);
                    updateSelectedCount();
                });
            }

            checkboxes.forEach(cb => {
                cb.addEventListener('change', updateSelectedCount);
            });

            window.clearSelection = function() {
                checkboxes.forEach(cb => cb.checked = false);
                if (selectAll) selectAll.checked = false;
                updateSelectedCount();
            };

            updateSelectedCount();
        });

        // ========== MODAL SEMESTER & TANGGAL ==========
        function openSemesterModal(itemIndex) {
            currentItemIndex = itemIndex;
            const modal = document.getElementById('semesterModal');
            const container = document.getElementById('semesterListContainer');

            // Get existing selections
            const existingContainer = document.getElementById(`semester-values-container-${itemIndex}`);
            const existingSemesterInputs = existingContainer ? existingContainer.querySelectorAll('input[name^="biaya_items"][name$="[semester][]"]') : [];
            const existingSelections = Array.from(existingSemesterInputs).map(input => input.value);

            // Get existing tanggal data
            const tanggalDataDiv = document.getElementById(`tanggal-data-${itemIndex}`);
            let existingTanggalMap = {};
            if (tanggalDataDiv && tanggalDataDiv.innerHTML) {
                try {
                    existingTanggalMap = JSON.parse(tanggalDataDiv.innerHTML);
                } catch(e) {}
            }

            const today = new Date().toISOString().split('T')[0];

            // Build semester list (1-14)
            let html = '';
            for (let i = 1; i <= 14; i++) {
                const isChecked = existingSelections.includes(i.toString());
                const tanggalValue = existingTanggalMap[i] || today;

                html += `
                    <div class="flex items-center gap-3 p-3 bg-slate-50 dark:bg-gray-800/30 rounded-lg">
                        <div class="flex items-center gap-2 w-24">
                            <input type="checkbox"
                                id="semester_${i}_${itemIndex}"
                                value="${i}"
                                class="semester-checkbox-modal w-4 h-4 text-violet-600 rounded"
                                ${isChecked ? 'checked' : ''}>
                            <label for="semester_${i}_${itemIndex}" class="text-sm font-medium text-gray-700 dark:text-gray-300">
                                Semester ${i}
                            </label>
                        </div>
                        <div class="flex-1">
                            <input type="date"
                                id="tanggal_${i}_${itemIndex}"
                                value="${tanggalValue}"
                                class="w-full px-3 py-2 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-lg text-sm"
                                ${isChecked ? '' : 'disabled'}>
                        </div>
                    </div>
                `;
            }

            container.innerHTML = html;

            // Add event listeners
            for (let i = 1; i <= 14; i++) {
                const checkbox = document.getElementById(`semester_${i}_${itemIndex}`);
                const tanggalInput = document.getElementById(`tanggal_${i}_${itemIndex}`);

                if (checkbox && tanggalInput) {
                    checkbox.addEventListener('change', function() {
                        tanggalInput.disabled = !this.checked;
                        if (this.checked && !tanggalInput.value) {
                            tanggalInput.value = today;
                        }
                    });
                }
            }

            modal.classList.remove('hidden');
            document.body.style.overflow = 'hidden';
            lucide.createIcons();
        }

        function closeSemesterModal() {
            document.getElementById('semesterModal').classList.add('hidden');
            document.body.style.overflow = 'auto';
            currentItemIndex = null;
        }

        function saveSemesterSelection() {
            if (currentItemIndex === null) return;

            const selectedSemesters = [];
            const tanggalMap = {};

            for (let i = 1; i <= 14; i++) {
                const checkbox = document.getElementById(`semester_${i}_${currentItemIndex}`);
                if (checkbox && checkbox.checked) {
                    selectedSemesters.push(i);
                    const tanggalInput = document.getElementById(`tanggal_${i}_${currentItemIndex}`);
                    if (tanggalInput && tanggalInput.value) {
                        tanggalMap[i] = tanggalInput.value;
                    } else {
                        tanggalMap[i] = new Date().toISOString().split('T')[0];
                    }
                }
            }

            if (selectedSemesters.length === 0) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Peringatan',
                    text: 'Pilih minimal 1 semester!',
                    confirmButtonColor: '#f59e0b',
                    confirmButtonText: 'OK'
                });
                return;
            }

            // Clear existing container
            const container = document.getElementById(`semester-values-container-${currentItemIndex}`);
            if (container) {
                container.innerHTML = '';

                // Create hidden inputs for each semester
                selectedSemesters.forEach(semester => {
                    const hiddenInput = document.createElement('input');
                    hiddenInput.type = 'hidden';
                    hiddenInput.name = `biaya_items[${currentItemIndex}][semester][]`;
                    hiddenInput.value = semester;
                    container.appendChild(hiddenInput);
                });
            }

            // Store tanggal data
            const tanggalDataDiv = document.getElementById(`tanggal-data-${currentItemIndex}`);
            if (tanggalDataDiv) {
                tanggalDataDiv.innerHTML = JSON.stringify(tanggalMap);

                // Create hidden date inputs
                const dateContainer = document.getElementById(`tanggal-data-${currentItemIndex}`).parentElement;
                const existingDateInputs = dateContainer.querySelectorAll('.hidden-date-input');
                existingDateInputs.forEach(el => el.remove());

                selectedSemesters.forEach(semester => {
                    const dateInput = document.createElement('input');
                    dateInput.type = 'hidden';
                    dateInput.name = `biaya_items[${currentItemIndex}][tanggal][]`;
                    dateInput.value = tanggalMap[semester];
                    dateInput.className = 'hidden-date-input';
                    dateContainer.appendChild(dateInput);
                });
            }

            // Update summary text
            const summarySpan = document.getElementById(`semester-summary-${currentItemIndex}`);
            if (summarySpan) {
                if (selectedSemesters.length === 1) {
                    summarySpan.innerHTML = `Semester ${selectedSemesters[0]}`;
                } else if (selectedSemesters.length <= 3) {
                    summarySpan.innerHTML = `${selectedSemesters.length} semester: ${selectedSemesters.join(', ')}`;
                } else {
                    summarySpan.innerHTML = `${selectedSemesters.length} semester terpilih`;
                }
                summarySpan.classList.remove('text-slate-500');
                summarySpan.classList.add('text-violet-600', 'dark:text-violet-400', 'font-medium');
            }

            closeSemesterModal();

            Swal.fire({
                icon: 'success',
                title: 'Berhasil!',
                text: `${selectedSemesters.length} semester dengan tanggal telah diatur`,
                showConfirmButton: false,
                timer: 1500,
                background: document.documentElement.classList.contains('dark') ? '#1a1a2e' : '#ffffff',
                color: document.documentElement.classList.contains('dark') ? '#e5e7eb' : '#374151'
            });
        }

        // ========== FUNGSI TAMBAH BIAYA ==========
        function tambahItemBiaya() {
            const container = document.getElementById('biaya-items-container');
            const template = document.getElementById('biaya-item-template');

            if (!template || !container) return;

            let templateHtml = template.innerHTML;
            templateHtml = templateHtml.replace(/__INDEX__/g, biayaItemCounter);

            const div = document.createElement('div');
            div.innerHTML = templateHtml;
            const newItem = div.firstElementChild;
            newItem.id = `biaya-item-${biayaItemCounter}`;
            container.appendChild(newItem);

            // Create empty container for this item
            const valuesContainer = document.getElementById(`semester-values-container-${biayaItemCounter}`);
            if (valuesContainer) {
                valuesContainer.innerHTML = '';
            }

            biayaItemCounter++;

            if (typeof lucide !== 'undefined') {
                lucide.createIcons();
            }
        }

        function hapusItemBiaya(btn) {
            const items = document.querySelectorAll('.biaya-item');
            if (items.length > 1) {
                btn.closest('.biaya-item').remove();
            } else {
                Swal.fire({
                    icon: 'warning',
                    title: 'Peringatan',
                    text: 'Minimal 1 item biaya harus diisi',
                    confirmButtonColor: '#f59e0b',
                    confirmButtonText: 'OK'
                });
            }
        }

        // ========== FUNGSI KONFIRMASI TAMBAH BIAYA ==========
        const confirmModal = document.getElementById('confirmModal');

        function escapeHtml(text) {
            if (!text) return '';
            const div = document.createElement('div');
            div.textContent = text;
            return div.innerHTML;
        }

        function showConfirmModal() {
            const checked = document.querySelectorAll('.mahasiswa-checkbox:checked');
            if (checked.length === 0) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Peringatan',
                    text: 'Pilih minimal 1 mahasiswa',
                    confirmButtonColor: '#f59e0b',
                    confirmButtonText: 'OK'
                });
                return;
            }

            const biayaItems = document.querySelectorAll('.biaya-item');
            let itemsList = [];
            let totalItems = 0;
            let totalNominal = 0;
            let isValid = true;

            biayaItems.forEach((item, idx) => {
                const namaInput = item.querySelector(`[name^="biaya_items["][name$="[nama]"]`);
                const kategoriSelect = item.querySelector(`[name^="biaya_items["][name$="[kategori]"]`);
                const nominalInput = item.querySelector(`[name^="biaya_items["][name$="[nominal]"]`);

                // Get semesters from hidden inputs
                const semesterHiddenInputs = item.querySelectorAll(`[name^="biaya_items["][name$="[semester][]"]`);
                const semesterList = Array.from(semesterHiddenInputs).map(input => input.value);

                const nama = namaInput?.value;
                const kategori = kategoriSelect?.value;
                const nominal = nominalInput?.value;

                if (!nama || !kategori || !nominal || semesterList.length === 0) {
                    isValid = false;
                }

                if (nama && kategori && nominal && semesterList.length) {
                    totalItems += semesterList.length * checked.length;
                    totalNominal += parseInt(nominal) * semesterList.length * checked.length;
                    itemsList.push(`
                        <div class="border-b pb-2 mb-2">
                            <p class="font-medium">${escapeHtml(nama)} (${kategori})</p>
                            <div class="text-xs text-slate-600">
                                Rp ${parseInt(nominal).toLocaleString()} - Semester ${semesterList.join(', ')}
                            </div>
                        </div>
                    `);
                }
            });

            if (!isValid) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Peringatan',
                    text: 'Isi semua form biaya dengan lengkap (nama, kategori, nominal, minimal 1 semester)',
                    confirmButtonColor: '#f59e0b',
                    confirmButtonText: 'OK'
                });
                return;
            }

            if (itemsList.length === 0) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Peringatan',
                    text: 'Isi form biaya terlebih dahulu',
                    confirmButtonColor: '#f59e0b',
                    confirmButtonText: 'OK'
                });
                return;
            }

            document.getElementById('confirmMessage').innerHTML = `Menambah ke <strong>${checked.length} mahasiswa</strong>`;
            document.getElementById('summaryList').innerHTML = `
                <div class="space-y-2 max-h-60 overflow-y-auto">
                    ${itemsList.join('')}
                </div>
                <div class="pt-2 border-t mt-2">
                    <div class="flex justify-between font-medium">
                        <span>Total Item:</span>
                        <span class="text-violet-600">${totalItems}</span>
                    </div>
                    <div class="flex justify-between font-medium">
                        <span>Total Nominal:</span>
                        <span class="text-violet-600">Rp ${totalNominal.toLocaleString()}</span>
                    </div>
                </div>
            `;
            confirmModal.classList.remove('hidden');
        }

        function closeConfirmModal() {
            confirmModal.classList.add('hidden');
        }

        function submitForm() {
            Swal.fire({
                title: 'Memproses...',
                text: 'Mohon tunggu sebentar',
                allowOutsideClick: false,
                allowEscapeKey: false,
                allowEnterKey: false,
                showConfirmButton: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });

            document.getElementById('bulkInjectForm').submit();
        }

        // ========== FUNGSI DETAIL MODAL ==========
        const detailModal = document.getElementById('detailModal');
        const detailLoading = document.getElementById('detailLoading');
        const detailData = document.getElementById('detailData');
        const detailModalTitle = document.getElementById('detailModalTitle');

        function showAngsuranDetail(mahasiswaId) {
            detailModal.classList.remove('hidden');
            detailLoading.classList.remove('hidden');
            detailData.classList.add('hidden');
            document.body.style.overflow = 'hidden';

            fetch(`/tambah-biaya/detail/${mahasiswaId}`)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }
                    return response.json();
                })
                .then(data => {
                    detailLoading.classList.add('hidden');

                    if (data.error) {
                        detailData.innerHTML = `<div class="text-center text-red-500 py-4">${escapeHtml(data.error)}</div>`;
                    } else {
                        detailModalTitle.textContent = `Detail Angsuran - ${escapeHtml(data.mahasiswa.nama)} (${data.mahasiswa.nim})`;

                        let html = `
                            <div class="flex flex-wrap gap-3 mb-4 p-3 bg-slate-50 dark:bg-white/5 rounded-xl">
                                <div class="flex items-center gap-2">
                                    <span class="text-xs text-slate-500">Total:</span>
                                    <span class="font-bold text-violet-600">Rp ${data.total.toLocaleString('id-ID')}</span>
                                </div>
                                <div class="w-px h-4 bg-slate-300 dark:bg-slate-600"></div>
                                <div class="flex items-center gap-2">
                                    <span class="text-xs text-slate-500">Dibayar:</span>
                                    <span class="font-bold text-green-600">Rp ${(data.total - data.sisa).toLocaleString('id-ID')}</span>
                                </div>
                                <div class="w-px h-4 bg-slate-300 dark:bg-slate-600"></div>
                                <div class="flex items-center gap-2">
                                    <span class="text-xs text-slate-500">Sisa:</span>
                                    <span class="font-bold text-amber-600">Rp ${data.sisa.toLocaleString('id-ID')}</span>
                                </div>
                            </div>
                            <div class="overflow-x-auto pb-2" style="scrollbar-width: thin;">
                                <div class="flex gap-3 min-w-max">
                        `;

                        if (data.details && data.details.length > 0) {
                            data.details.forEach(detail => {
                                let statusColor = '';
                                if (detail.status === 'lunas') {
                                    statusColor = 'bg-green-500';
                                } else if (detail.status === 'cicil') {
                                    statusColor = 'bg-yellow-500';
                                } else {
                                    statusColor = 'bg-blue-500';
                                }

                                let jenisColor = '';
                                if (detail.jenis === 'SPB') {
                                    jenisColor = 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400';
                                } else if (detail.jenis === 'SPP') {
                                    jenisColor = 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400';
                                } else if (detail.jenis === 'UKT') {
                                    jenisColor = 'bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-400';
                                } else {
                                    jenisColor = 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-400';
                                }

                                html += `
                                    <div class="w-64 flex-shrink-0 bg-white dark:bg-gray-800/50 rounded-xl border border-slate-200 dark:border-gray-700 p-3 hover:shadow-md transition-shadow">
                                        <div class="flex items-start justify-between mb-2">
                                            <div>
                                                <span class="text-xs font-mono text-slate-500">${escapeHtml(detail.kode_biaya)}</span>
                                                <h5 class="font-medium text-sm line-clamp-2" title="${escapeHtml(detail.komponen)}">${escapeHtml(detail.komponen)}</h5>
                                            </div>
                                            <span class="px-2 py-1 text-xs rounded-full ${statusColor}/10 ${statusColor.replace('bg-', 'text-')} font-medium">
                                                ${detail.status.toUpperCase()}
                                            </span>
                                        </div>
                                        <div class="space-y-2 text-xs">
                                            <div class="flex items-center justify-between">
                                                <span class="text-slate-500">Jenis:</span>
                                                <span class="px-2 py-0.5 rounded ${jenisColor}">${detail.jenis}</span>
                                            </div>
                                            <div class="flex items-center justify-between">
                                                <span class="text-slate-500">Semester:</span>
                                                <span class="font-medium">${detail.semester || '-'}</span>
                                            </div>
                                            <div class="flex items-center justify-between">
                                                <span class="text-slate-500">Cicilan ke-:</span>
                                                <span class="font-medium">${detail.nomor_cicilan > 0 ? detail.nomor_cicilan : '-'}</span>
                                            </div>
                                            <div class="pt-2 border-t border-slate-100 dark:border-gray-700">
                                                <div class="flex items-center justify-between mb-1">
                                                    <span class="text-slate-500">Tagihan:</span>
                                                    <span class="font-medium">Rp ${detail.total.toLocaleString('id-ID')}</span>
                                                </div>
                                `;

                                if (detail.potongan > 0) {
                                    html += `
                                        <div class="flex items-center justify-between text-red-600">
                                            <span class="text-slate-500">Potongan:</span>
                                            <span class="font-medium">-Rp ${detail.potongan.toLocaleString('id-ID')} (${detail.persen_potongan}%)</span>
                                        </div>
                                        <div class="flex items-center justify-between text-xs text-slate-400">
                                            <span class="text-slate-500">Asli:</span>
                                            <span class="line-through">Rp ${detail.total_asli.toLocaleString('id-ID')}</span>
                                        </div>
                                    `;
                                }

                                html += `
                                                <div class="flex items-center justify-between mt-1">
                                                    <span class="text-slate-500">Dibayar:</span>
                                                    <span class="font-medium text-green-600">Rp ${detail.dibayar.toLocaleString('id-ID')}</span>
                                                </div>
                                                <div class="flex items-center justify-between font-medium">
                                                    <span class="text-slate-500">Sisa:</span>
                                                    <span class="${detail.sisa > 0 ? 'text-amber-600' : 'text-green-600'}">Rp ${detail.sisa.toLocaleString('id-ID')}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                `;
                            });
                        } else {
                            html += `
                                <div class="w-full text-center py-8 text-slate-500">
                                    <i data-lucide="inbox" class="w-8 h-8 mx-auto mb-2 text-slate-400"></i>
                                    <p>Belum ada detail angsuran</p>
                                </div>
                            `;
                        }

                        html += `
                                </div>
                            </div>
                            <p class="text-xs text-slate-400 mt-2 text-right">Geser ke samping untuk melihat lebih banyak →</p>
                        `;

                        detailData.innerHTML = html;
                    }

                    detailData.classList.remove('hidden');
                    if (typeof lucide !== 'undefined') {
                        lucide.createIcons();
                    }
                })
                .catch(error => {
                    detailLoading.classList.add('hidden');
                    detailData.innerHTML = `
                        <div class="text-center text-red-500 py-8">
                            <i data-lucide="alert-circle" class="w-12 h-12 mx-auto mb-3 text-red-400"></i>
                            <p>Gagal memuat data: ${escapeHtml(error.message)}</p>
                        </div>
                    `;
                    detailData.classList.remove('hidden');
                    console.error('Error:', error);
                });
        }

        function closeDetailModal() {
            detailModal.classList.add('hidden');
            document.body.style.overflow = 'auto';
        }

        // Close modals when clicking outside
        window.onclick = function(e) {
            const confirmModalEl = document.getElementById('confirmModal');
            const detailModalEl = document.getElementById('detailModal');
            const semesterModalEl = document.getElementById('semesterModal');

            if (e.target === confirmModalEl) {
                closeConfirmModal();
            }
            if (e.target === detailModalEl) {
                closeDetailModal();
            }
            if (e.target === semesterModalEl) {
                closeSemesterModal();
            }
        };

        // Close modal with ESC key
        document.addEventListener('keydown', function(event) {
            if (event.key === 'Escape') {
                const confirmModalEl = document.getElementById('confirmModal');
                const detailModalEl = document.getElementById('detailModal');
                const semesterModalEl = document.getElementById('semesterModal');

                if (confirmModalEl && !confirmModalEl.classList.contains('hidden')) {
                    closeConfirmModal();
                }
                if (detailModalEl && !detailModalEl.classList.contains('hidden')) {
                    closeDetailModal();
                }
                if (semesterModalEl && !semesterModalEl.classList.contains('hidden')) {
                    closeSemesterModal();
                }
            }
        });

        // Session alerts with SweetAlert
        <?php if(session('success')): ?>
            Swal.fire({
                icon: 'success',
                title: 'Berhasil!',
                text: "<?php echo e(session('success')); ?>",
                showConfirmButton: true,
                confirmButtonText: 'Mengerti',
                timer: 3000,
                timerProgressBar: true,
                background: document.documentElement.classList.contains('dark') ? '#1a1a2e' : '#ffffff',
                color: document.documentElement.classList.contains('dark') ? '#e5e7eb' : '#374151'
            });
        <?php endif; ?>

        <?php if(session('warning')): ?>
            Swal.fire({
                icon: 'warning',
                title: 'Peringatan!',
                text: "<?php echo e(session('warning')); ?>",
                showConfirmButton: true,
                confirmButtonText: 'Mengerti',
                confirmButtonColor: '#f59e0b',
                background: document.documentElement.classList.contains('dark') ? '#1a1a2e' : '#ffffff',
                color: document.documentElement.classList.contains('dark') ? '#e5e7eb' : '#374151'
            });
        <?php endif; ?>

        <?php if(session('error')): ?>
            Swal.fire({
                icon: 'error',
                title: 'Gagal!',
                text: "<?php echo e(session('error')); ?>",
                showConfirmButton: true,
                confirmButtonText: 'Mengerti',
                background: document.documentElement.classList.contains('dark') ? '#1a1a2e' : '#ffffff',
                color: document.documentElement.classList.contains('dark') ? '#e5e7eb' : '#374151'
            });
        <?php endif; ?>

        <?php if(session('inject_errors')): ?>
            Swal.fire({
                icon: 'error',
                title: 'Beberapa Mahasiswa Gagal',
                html: `<div class="text-left max-h-60 overflow-y-auto">
                            <p class="mb-2">Detail error:</p>
                            <ul class="list-disc list-inside space-y-1">
                                <?php $__currentLoopData = session('inject_errors'); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $error): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <li class="text-sm"><?php echo e($error); ?></li>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </ul>
                        </div>`,
                showConfirmButton: true,
                confirmButtonText: 'Mengerti',
                background: document.documentElement.classList.contains('dark') ? '#1a1a2e' : '#ffffff',
                color: document.documentElement.classList.contains('dark') ? '#e5e7eb' : '#374151'
            });
        <?php endif; ?>
    </script>
 <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $attributes = $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $component = $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?>
<?php /**PATH C:\Users\User\Documents\K2-PROJECTS\k2-sipema\resources\views/tambah-biaya/index.blade.php ENDPATH**/ ?>