<?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-amber-500/10 to-orange-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-amber-600 to-orange-600 bg-clip-text text-transparent">
                        Validasi Potongan Biaya
                    </span>
                </h1>
                <p class="text-slate-500 dark:text-slate-400 text-sm pl-1">
                    <i data-lucide="percent" class="w-4 h-4 inline mr-2"></i>
                    Validasi potongan yang diajukan oleh admin/keuangan
                </p>
            </div>

            <div class="flex items-center gap-4">
                <button onclick="window.print()"
                    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="printer" class="w-4 h-4"></i>
                    <span class="hidden sm:inline">Print</span>
                </button>
                <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-amber-600/10 to-orange-600/10 rounded-3xl blur opacity-0 group-hover:opacity-30 transition duration-500">
            </div>
            <div
                class="relative bg-white dark:bg-[#1a1a2e] p-8 rounded-3xl border border-slate-200 dark:border-white/5 shadow-xl">

                <!-- Card Header -->
                <div
                    class="flex flex-col md:flex-row justify-between items-start md:items-center gap-6 mb-8 pb-6 border-b border-slate-100 dark:border-white/5">
                    <div class="flex items-center gap-4">
                        <div
                            class="w-12 h-12 rounded-2xl bg-gradient-to-br from-amber-500/10 to-orange-600/10 text-amber-500 flex items-center justify-center">
                            <i data-lucide="percent" class="w-6 h-6"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold text-gray-900 dark:text-white">Data Menunggu Validasi</h3>
                            <p class="text-sm text-slate-500 dark:text-slate-400">
                                Total: <?php echo e($data->count()); ?> Mahasiswa |
                                <?php echo e($data->sum(function ($a) {return $a->details->count();})); ?> Item Potongan
                            </p>
                        </div>
                    </div>

                    <!-- Search Form -->
                    <form method="GET" action="<?php echo e(route('validasi-potongan.index')); ?>" class="relative">
                        <div class="relative">
                            <i data-lucide="search"
                                class="absolute left-4 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(request('search')); ?>"
                                placeholder="Cari NIM, nama mahasiswa, atau prodi..."
                                class="w-full md:w-80 pl-12 pr-10 py-2.5 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-xl text-gray-700 dark:text-gray-300 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent transition-all">
                            <?php if(request('search')): ?>
                                <a href="<?php echo e(route('validasi-potongan.index')); ?>"
                                    class="absolute right-3 top-1/2 transform -translate-y-1/2 text-slate-400 hover:text-slate-600">
                                    <i data-lucide="x" class="w-4 h-4"></i>
                                </a>
                            <?php endif; ?>
                        </div>
                    </form>
                </div>

                <!-- Alerts -->
                <?php if(session('success')): ?>
                    <div
                        class="mb-6 p-4 bg-gradient-to-r from-emerald-500/10 to-green-600/10 border border-emerald-500/20 rounded-2xl animate-fade-in">
                        <div class="flex items-start gap-3">
                            <div
                                class="w-10 h-10 rounded-xl bg-emerald-500/10 text-emerald-500 flex items-center justify-center flex-shrink-0">
                                <i data-lucide="check-circle" class="w-5 h-5"></i>
                            </div>
                            <div class="flex-1">
                                <p class="text-emerald-700 dark:text-emerald-400 font-medium"><?php echo e(session('success')); ?>

                                </p>
                            </div>
                        </div>
                    </div>
                <?php endif; ?>

                <?php if(session('error')): ?>
                    <div
                        class="mb-6 p-4 bg-gradient-to-r from-red-500/10 to-rose-600/10 border border-red-500/20 rounded-2xl animate-fade-in">
                        <div class="flex items-start gap-3">
                            <div
                                class="w-10 h-10 rounded-xl bg-red-500/10 text-red-500 flex items-center justify-center flex-shrink-0">
                                <i data-lucide="alert-circle" class="w-5 h-5"></i>
                            </div>
                            <div class="flex-1">
                                <p class="text-red-700 dark:text-red-400 font-medium"><?php echo e(session('error')); ?></p>
                            </div>
                        </div>
                    </div>
                <?php endif; ?>

                <?php if($data->count() > 0): ?>
                    <!-- Bulk Actions -->
                    <div
                        class="mb-6 p-4 bg-gradient-to-r from-slate-50 to-gray-50 dark:from-gray-800/50 dark:to-gray-900/50 border border-slate-200 dark:border-gray-700 rounded-2xl">
                        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
                            <div class="flex items-center gap-3">
                                <div class="flex items-center">
                                    <input type="checkbox" id="checkAllItems"
                                        class="w-4 h-4 text-amber-600 bg-gray-100 border-gray-300 rounded focus:ring-amber-500 focus:ring-2">
                                    <label for="checkAllItems"
                                        class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">
                                        Pilih Semua Item
                                    </label>
                                </div>
                                <span class="text-sm text-slate-500 dark:text-slate-400">
                                    (<span id="selectedItemCount">0</span> item terpilih)
                                </span>
                            </div>

                            <div class="flex gap-3">
                                <button type="button" id="bulkSetujuiItemsBtn" disabled
                                    class="px-4 py-2.5 bg-gradient-to-r from-emerald-600 to-green-700 text-white rounded-xl text-sm font-medium hover:shadow-lg hover:shadow-emerald-500/25 transition-all flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed">
                                    <i data-lucide="check" class="w-4 h-4"></i>
                                    Setujui Item Terpilih (<span id="setujuiItemCount">0</span>)
                                </button>

                                <button type="button" id="bulkTolakItemsBtn" disabled
                                    class="px-4 py-2.5 bg-gradient-to-r from-red-600 to-rose-700 text-white rounded-xl text-sm font-medium hover:shadow-lg hover:shadow-red-500/25 transition-all flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed">
                                    <i data-lucide="x" class="w-4 h-4"></i>
                                    Tolak Item Terpilih (<span id="tolakItemCount">0</span>)
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Accordion Groups -->
                    <?php $__currentLoopData = $data; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $angsuran): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <?php
                            $mahasiswa = $angsuran->mahasiswa;
                            $totalPotongan = $angsuran->details->sum('potongan');
                            $totalPotonganFormatted = 'Rp ' . number_format($totalPotongan, 0, ',', '.');
                            $groupId = 'group-' . $angsuran->id;
                            $status = $angsuran->details->first()->potongan_valid ?? 'pending';
                        ?>
                        <div
                            class="mb-4 bg-white dark:bg-gray-800/50 rounded-2xl border border-slate-200 dark:border-gray-700 overflow-hidden shadow-sm hover:shadow-md transition-all duration-200">
                            <!-- Accordion Header -->
                            <div class="accordion-header cursor-pointer bg-gradient-to-r from-slate-50 to-gray-50 dark:from-gray-800 dark:to-gray-900 px-6 py-4 border-b border-slate-200 dark:border-gray-700 transition-all hover:bg-slate-100 dark:hover:bg-gray-700/50"
                                data-group-id="<?php echo e($groupId); ?>">
                                <div
                                    class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
                                    <div class="flex items-center gap-4 flex-1">
                                        <div class="flex items-center gap-2">
                                            <div class="accordion-icon transition-transform duration-200">
                                                <i data-lucide="chevron-right" class="w-5 h-5 text-slate-500"></i>
                                            </div>
                                        </div>
                                        <div class="flex items-center gap-3">
                                            <div
                                                class="w-10 h-10 rounded-full bg-gradient-to-br from-amber-500/20 to-orange-600/20 text-amber-600 flex items-center justify-center">
                                                <i data-lucide="user" class="w-5 h-5"></i>
                                            </div>
                                            <div>
                                                <h3 class="font-semibold text-gray-900 dark:text-white text-lg">
                                                    <?php echo e($mahasiswa->nama); ?>

                                                </h3>
                                                <div
                                                    class="flex flex-wrap items-center gap-3 text-xs text-slate-500 dark:text-slate-400 mt-1">
                                                    <span class="flex items-center gap-1">
                                                        <i data-lucide="id-card" class="w-3 h-3"></i>
                                                        NIM: <?php echo e($mahasiswa->nim); ?>

                                                    </span>
                                                    <span class="flex items-center gap-1">
                                                        <i data-lucide="graduation-cap" class="w-3 h-3"></i>
                                                        <?php echo e($mahasiswa->prodi->nama ?? '-'); ?>

                                                    </span>
                                                    <span class="flex items-center gap-1">
                                                        <i data-lucide="building" class="w-3 h-3"></i>
                                                        <?php echo e($mahasiswa->kampus->nama ?? '-'); ?>

                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="flex flex-col items-end">
                                        <div class="text-right">
                                            <span class="text-xs text-slate-500 dark:text-slate-400">Total
                                                Potongan</span>
                                            <div class="font-mono font-bold text-red-600 dark:text-red-400 text-xl">
                                                <?php echo e($totalPotonganFormatted); ?>

                                            </div>
                                            <div class="text-xs text-slate-500 dark:text-slate-400">
                                                <?php echo e($angsuran->details->count()); ?> item potongan
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Accordion Body -->
                            <div id="<?php echo e($groupId); ?>" class="accordion-body hidden">
                                <div class="overflow-x-auto">
                                    <table class="w-full">
                                        <thead class="bg-gray-50 dark:bg-gray-900/50">
                                            <tr class="border-b border-slate-200 dark:border-gray-700">
                                                <th class="py-3 px-4 w-12 text-center">
                                                    <input type="checkbox"
                                                        class="group-item-check-all w-4 h-4 text-amber-600 rounded"
                                                        data-group-id="<?php echo e($angsuran->id); ?>">
                                                </th>
                                                <th
                                                    class="py-3 px-4 text-left text-xs font-semibold text-slate-600 dark:text-slate-400 uppercase">
                                                    Kode Biaya</th>
                                                <th
                                                    class="py-3 px-4 text-left text-xs font-semibold text-slate-600 dark:text-slate-400 uppercase">
                                                    Komponen</th>
                                                <th
                                                    class="py-3 px-4 text-left text-xs font-semibold text-slate-600 dark:text-slate-400 uppercase">
                                                    Total Awal</th>
                                                <th
                                                    class="py-3 px-4 text-left text-xs font-semibold text-slate-600 dark:text-slate-400 uppercase">
                                                    Potongan</th>
                                                <th
                                                    class="py-3 px-4 text-center text-xs font-semibold text-slate-600 dark:text-slate-400 uppercase">
                                                    Aksi</th>
                                            </tr>
                                        </thead>
                                        <tbody class="divide-y divide-slate-100 dark:divide-gray-800">
                                            <?php $__currentLoopData = $angsuran->details; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $detail): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                <tr
                                                    class="hover:bg-slate-50 dark:hover:bg-gray-800/30 transition-colors">
                                                    <td class="py-3 px-4 text-center">
                                                        <input type="checkbox" name="selected_potongan[]"
                                                            value="<?php echo e($detail->id); ?>"
                                                            class="potongan-check w-4 h-4 text-amber-600 rounded"
                                                            data-group-id="<?php echo e($angsuran->id); ?>">
                                                    </td>
                                                    <td class="py-3 px-4">
                                                        <span
                                                            class="font-mono text-sm font-medium text-gray-900 dark:text-white">
                                                            <?php echo e($detail->kode_biaya); ?>

                                                        </span>
                                                    </td>
                                                    <td class="py-3 px-4">
                                                        <span
                                                            class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-200">
                                                            <?php echo e($detail->komponen); ?>

                                                        </span>
                                                    </td>
                                                    <td class="py-3 px-4 font-mono text-gray-600 dark:text-gray-400">
                                                        Rp <?php echo e(number_format($detail->total_asli, 0, ',', '.')); ?>

                                                    </td>
                                                    <td
                                                        class="py-3 px-4 font-mono font-medium text-red-600 dark:text-red-400">
                                                        -Rp <?php echo e(number_format($detail->potongan, 0, ',', '.')); ?>

                                                    </td>
                                                    <td class="py-3 px-4">
                                                        <div class="flex items-center justify-center gap-2">
                                                            <button type="button"
                                                                class="individual-setujui-btn px-3 py-1.5 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 hover:bg-emerald-500/20 rounded-lg text-sm font-medium transition-all flex items-center gap-2"
                                                                data-id="<?php echo e($detail->id); ?>"
                                                                data-nama="<?php echo e($mahasiswa->nama); ?>"
                                                                data-komponen="<?php echo e($detail->komponen); ?>"
                                                                data-potongan="<?php echo e(number_format($detail->potongan, 0, ',', '.')); ?>">
                                                                <i data-lucide="check" class="w-4 h-4"></i>
                                                                Setujui
                                                            </button>
                                                            <button type="button"
                                                                class="individual-tolak-btn px-3 py-1.5 bg-red-500/10 text-red-600 dark:text-red-400 hover:bg-red-500/20 rounded-lg text-sm font-medium transition-all flex items-center gap-2"
                                                                data-id="<?php echo e($detail->id); ?>"
                                                                data-nama="<?php echo e($mahasiswa->nama); ?>"
                                                                data-komponen="<?php echo e($detail->komponen); ?>"
                                                                data-potongan="<?php echo e(number_format($detail->potongan, 0, ',', '.')); ?>">
                                                                <i data-lucide="x" class="w-4 h-4"></i>
                                                                Tolak
                                                            </button>
                                                        </div>
                                                    </td>
                                                </tr>
                                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                        </tbody>
                                        <tfoot
                                            class="bg-gray-50 dark:bg-gray-900/50 border-t border-slate-200 dark:border-gray-700">
                                            <tr>
                                                <td colspan="3"
                                                    class="py-3 px-4 text-right font-medium text-gray-700 dark:text-gray-300">
                                                    Total Potongan Group:
                                                </td>
                                                <td
                                                    class="py-3 px-4 font-mono font-bold text-red-600 dark:text-red-400">
                                                    -Rp
                                                    <?php echo e(number_format($angsuran->details->sum('potongan'), 0, ',', '.')); ?>

                                                </td>
                                                <td
                                                    class="py-3 px-4 font-mono font-bold text-green-600 dark:text-green-400">
                                                    Rp
                                                    <?php echo e(number_format($angsuran->details->sum('total'), 0, ',', '.')); ?>

                                                </td>
                                                <td class="py-3 px-4"></td>
                                            </tr>
                                        </tfoot>
                                    </table>
                                </div>
                            </div>
                        </div>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                <?php else: ?>
                    <!-- Empty State -->
                    <div class="text-center py-12">
                        <div
                            class="w-20 h-20 mx-auto mb-6 rounded-2xl bg-gradient-to-br from-slate-100 to-gray-100 dark:from-gray-800 dark:to-gray-900 flex items-center justify-center">
                            <i data-lucide="percent" class="w-10 h-10 text-slate-400"></i>
                        </div>
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
                            <?php if(request('search')): ?>
                                Tidak ditemukan potongan dengan filter yang diterapkan
                            <?php else: ?>
                                Belum ada potongan menunggu validasi
                            <?php endif; ?>
                        </h3>
                        <p class="text-slate-500 dark:text-slate-400 mb-6">
                            Semua potongan sudah tervalidasi
                        </p>
                        <?php if(request('search')): ?>
                            <a href="<?php echo e(route('validasi-potongan.index')); ?>"
                                class="inline-flex items-center gap-2 px-4 py-2.5 bg-gradient-to-r from-amber-600 to-orange-700 text-white rounded-xl text-sm font-medium hover:shadow-lg hover:shadow-amber-500/25 transition-all">
                                <i data-lucide="refresh-cw" class="w-4 h-4"></i>
                                Tampilkan Semua
                            </a>
                        <?php endif; ?>
                    </div>
                <?php endif; ?>
            </div>
        </div>
    </div>

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

            // ========== ACCORDION FUNCTIONALITY ==========
            const accordionHeaders = document.querySelectorAll('.accordion-header');

            function toggleAccordion(header) {
                const groupId = header.dataset.groupId;
                const body = document.getElementById(groupId);
                const icon = header.querySelector('.accordion-icon i');

                if (body.classList.contains('hidden')) {
                    body.classList.remove('hidden');
                    if (icon) {
                        icon.setAttribute('data-lucide', 'chevron-down');
                    }
                } else {
                    body.classList.add('hidden');
                    if (icon) {
                        icon.setAttribute('data-lucide', 'chevron-right');
                    }
                }
                lucide.createIcons();
            }

            accordionHeaders.forEach(header => {
                header.addEventListener('click', function(e) {
                    if (e.target.type === 'checkbox' || e.target.closest('.group-checkbox')) {
                        return;
                    }
                    toggleAccordion(this);
                });
            });

            // ========== ITEM SELECTION LOGIC ==========
            const allItemCheckboxes = document.querySelectorAll('.potongan-check');
            const groupItemCheckAlls = document.querySelectorAll('.group-item-check-all');
            const checkAllItems = document.getElementById('checkAllItems');
            const bulkSetujuiItemsBtn = document.getElementById('bulkSetujuiItemsBtn');
            const bulkTolakItemsBtn = document.getElementById('bulkTolakItemsBtn');
            const selectedItemCount = document.getElementById('selectedItemCount');
            const setujuiItemCount = document.getElementById('setujuiItemCount');
            const tolakItemCount = document.getElementById('tolakItemCount');

            // SweetAlert configuration
            const SwalModal = Swal.mixin({
                background: document.documentElement.classList.contains('dark') ? '#1a1a2e' : '#ffffff',
                color: document.documentElement.classList.contains('dark') ? '#e5e7eb' : '#374151',
                confirmButtonColor: '#f59e0b',
                cancelButtonColor: '#ef4444',
                backdrop: document.documentElement.classList.contains('dark') ? 'rgba(0, 0, 0, 0.7)' :
                    'rgba(0, 0, 0, 0.5)',
                customClass: {
                    popup: 'rounded-2xl shadow-2xl',
                    title: 'font-bold',
                    htmlContainer: 'text-sm',
                    confirmButton: 'px-4 py-2.5 rounded-xl font-medium transition-all hover:shadow-lg',
                    cancelButton: 'px-4 py-2.5 rounded-xl font-medium transition-all hover:shadow-lg'
                }
            });

            function updateItemSelectionCount() {
                const selectedItems = Array.from(document.querySelectorAll('.potongan-check:checked'));
                const count = selectedItems.length;

                selectedItemCount.textContent = count;
                setujuiItemCount.textContent = count;
                tolakItemCount.textContent = count;

                bulkSetujuiItemsBtn.disabled = count === 0;
                bulkTolakItemsBtn.disabled = count === 0;

                if (count > 0) {
                    bulkSetujuiItemsBtn.innerHTML =
                        `<i data-lucide="check" class="w-4 h-4"></i> Setujui Item Terpilih (${count})`;
                    bulkTolakItemsBtn.innerHTML =
                        `<i data-lucide="x" class="w-4 h-4"></i> Tolak Item Terpilih (${count})`;
                } else {
                    bulkSetujuiItemsBtn.innerHTML =
                        `<i data-lucide="check" class="w-4 h-4"></i> Setujui Item Terpilih (<span id="setujuiItemCount">0</span>)`;
                    bulkTolakItemsBtn.innerHTML =
                        `<i data-lucide="x" class="w-4 h-4"></i> Tolak Item Terpilih (<span id="tolakItemCount">0</span>)`;
                }

                // Update checkAllItems state
                if (checkAllItems) {
                    const totalItems = allItemCheckboxes.length;
                    const checkedItems = selectedItems.length;
                    checkAllItems.checked = totalItems > 0 && checkedItems === totalItems;
                    checkAllItems.indeterminate = checkedItems > 0 && checkedItems < totalItems;
                }

                // Update group item check-all states
                updateGroupCheckAllStates();
            }

            function updateGroupCheckAllStates() {
                groupItemCheckAlls.forEach(btn => {
                    const groupId = btn.dataset.groupId;
                    const itemsInGroup = document.querySelectorAll(
                        `.potongan-check[data-group-id="${groupId}"]`);
                    const checkedItems = Array.from(itemsInGroup).filter(item => item.checked);

                    if (itemsInGroup.length === 0) return;

                    if (checkedItems.length === itemsInGroup.length) {
                        btn.checked = true;
                        btn.indeterminate = false;
                    } else if (checkedItems.length > 0) {
                        btn.checked = false;
                        btn.indeterminate = true;
                    } else {
                        btn.checked = false;
                        btn.indeterminate = false;
                    }
                });
            }

            function toggleAllItems(isChecked) {
                allItemCheckboxes.forEach(cb => cb.checked = isChecked);
                updateItemSelectionCount();
            }

            function toggleGroupItems(groupId, isChecked) {
                const itemsInGroup = document.querySelectorAll(`.potongan-check[data-group-id="${groupId}"]`);
                itemsInGroup.forEach(item => item.checked = isChecked);
                updateItemSelectionCount();
            }

            function getSelectedItemIds() {
                return Array.from(document.querySelectorAll('.potongan-check:checked')).map(cb => cb.value);
            }

            // Event listeners
            allItemCheckboxes.forEach(cb => {
                cb.addEventListener('change', () => updateItemSelectionCount());
            });

            groupItemCheckAlls.forEach(btn => {
                btn.addEventListener('change', function(e) {
                    toggleGroupItems(this.dataset.groupId, this.checked);
                });
            });

            if (checkAllItems) {
                checkAllItems.addEventListener('change', (e) => toggleAllItems(e.target.checked));
            }

            // ========== BULK ACTIONS (FIXED) ==========
            function performBulkOnItems(action, url) {
                const selectedItemIds = getSelectedItemIds();
                if (selectedItemIds.length === 0) {
                    SwalModal.fire({
                        title: 'Peringatan!',
                        text: 'Pilih minimal 1 potongan!',
                        icon: 'warning',
                        confirmButtonText: 'Mengerti'
                    });
                    return;
                }

                const text = action === 'setujui' ? 'menyetujui' : 'menolak';
                const color = action === 'setujui' ? '#10b981' : '#ef4444';

                SwalModal.fire({
                    title: 'Konfirmasi',
                    html: `Anda akan <strong>${text}</strong> <strong>${selectedItemIds.length}</strong> item potongan.`,
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonColor: color,
                    cancelButtonColor: '#6b7280',
                    confirmButtonText: 'Lanjutkan',
                    cancelButtonText: 'Batal'
                }).then(result => {
                    if (!result.isConfirmed) return;

                    // Buat form dengan method POST
                    const form = document.createElement('form');
                    form.method = 'POST';
                    form.action = url;
                    form.style.display = 'none';

                    // Tambahkan CSRF token
                    const csrfToken = document.createElement('input');
                    csrfToken.type = 'hidden';
                    csrfToken.name = '_token';
                    csrfToken.value = '<?php echo e(csrf_token()); ?>';
                    form.appendChild(csrfToken);

                    // Kirim selected_potongan sebagai array
                    selectedItemIds.forEach(id => {
                        const input = document.createElement('input');
                        input.type = 'hidden';
                        input.name = 'selected_potongan[]';
                        input.value = id;
                        form.appendChild(input);
                    });

                    if (action === 'setujui') {
                        bulkSetujuiItemsBtn.innerHTML =
                            '<i data-lucide="loader-2" class="w-4 h-4 animate-spin mr-1"></i> Memproses...';
                        bulkSetujuiItemsBtn.disabled = true;
                    } else {
                        bulkTolakItemsBtn.innerHTML =
                            '<i data-lucide="loader-2" class="w-4 h-4 animate-spin mr-1"></i> Memproses...';
                        bulkTolakItemsBtn.disabled = true;
                    }

                    document.body.appendChild(form);
                    form.submit();
                });
            }

            bulkSetujuiItemsBtn?.addEventListener('click', () => performBulkOnItems('setujui',
                '<?php echo e(route('validasi-potongan.bulk-setujui')); ?>'));
            bulkTolakItemsBtn?.addEventListener('click', () => performBulkOnItems('tolak',
                '<?php echo e(route('validasi-potongan.bulk-tolak')); ?>'));

            // ========== INDIVIDUAL ACTIONS ==========
            document.querySelectorAll('.individual-setujui-btn').forEach(button => {
                button.addEventListener('click', function() {
                    const id = this.dataset.id;
                    const nama = this.dataset.nama;
                    const komponen = this.dataset.komponen;
                    const potongan = this.dataset.potongan;

                    SwalModal.fire({
                        title: 'Setujui Potongan?',
                        html: `<div class="text-center">
                    <div class="font-semibold text-lg mb-2">${nama}</div>
                    <div class="text-sm text-slate-500 dark:text-slate-400 mb-1">${komponen}</div>
                    <div class="font-mono font-bold text-red-600 dark:text-red-400 text-xl">
                        Potongan Rp ${potongan}
                    </div>
                  </div>`,
                        icon: 'question',
                        showCancelButton: true,
                        confirmButtonText: 'Ya, Setujui!',
                        cancelButtonText: 'Batal',
                        reverseButtons: true
                    }).then((result) => {
                        if (result.isConfirmed) {
                            this.innerHTML =
                                '<i data-lucide="loader-2" class="w-4 h-4 animate-spin mr-1"></i> Memproses...';
                            this.disabled = true;

                            // PERBAIKAN: Gunakan route baru dengan suffix -item
                            const form = document.createElement('form');
                            form.method = 'POST';
                            form.action = `/validasi-potongan/setujui-item/${id}`;

                            const csrfToken = document.createElement('input');
                            csrfToken.type = 'hidden';
                            csrfToken.name = '_token';
                            csrfToken.value = '<?php echo e(csrf_token()); ?>';
                            form.appendChild(csrfToken);

                            document.body.appendChild(form);
                            form.submit();
                        }
                    });
                });
            });

            document.querySelectorAll('.individual-tolak-btn').forEach(button => {
                button.addEventListener('click', function() {
                    const id = this.dataset.id;
                    const nama = this.dataset.nama;
                    const komponen = this.dataset.komponen;
                    const potongan = this.dataset.potongan;

                    SwalModal.fire({
                        title: 'Tolak Potongan?',
                        html: `<div class="text-center">
                    <div class="font-semibold text-lg mb-2">${nama}</div>
                    <div class="text-sm text-slate-500 dark:text-slate-400 mb-1">${komponen}</div>
                    <div class="font-mono font-bold text-red-600 dark:text-red-400 text-xl">
                        Potongan Rp ${potongan}
                    </div>
                  </div>`,
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonText: 'Ya, Tolak!',
                        cancelButtonText: 'Batal',
                        reverseButtons: true
                    }).then((result) => {
                        if (result.isConfirmed) {
                            this.innerHTML =
                                '<i data-lucide="loader-2" class="w-4 h-4 animate-spin mr-1"></i> Memproses...';
                            this.disabled = true;

                            // PERBAIKAN: Gunakan route baru dengan suffix -item
                            const form = document.createElement('form');
                            form.method = 'POST';
                            form.action = `/validasi-potongan/tolak-item/${id}`;

                            const csrfToken = document.createElement('input');
                            csrfToken.type = 'hidden';
                            csrfToken.name = '_token';
                            csrfToken.value = '<?php echo e(csrf_token()); ?>';
                            form.appendChild(csrfToken);

                            document.body.appendChild(form);
                            form.submit();
                        }
                    });
                });
            });

            // Initial update
            updateItemSelectionCount();

            // Session alerts
            <?php if(session('success')): ?>
                SwalModal.fire({
                    title: '✅ Berhasil!',
                    text: '<?php echo e(session('success')); ?>',
                    icon: 'success',
                    confirmButtonText: 'Mengerti',
                    timer: 3000,
                    timerProgressBar: true
                });
            <?php endif; ?>

            <?php if(session('error')): ?>
                SwalModal.fire({
                    title: '❌ Error!',
                    text: '<?php echo e(session('error')); ?>',
                    icon: 'error',
                    confirmButtonText: 'Mengerti'
                });
            <?php endif; ?>
        });
    </script>

    <style>
        .animate-fade-in {
            animation: fadeIn 0.3s ease-in-out;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .overflow-x-auto::-webkit-scrollbar {
            height: 6px;
        }

        .overflow-x-auto::-webkit-scrollbar-track {
            background: #f1f5f9;
            border-radius: 3px;
        }

        .overflow-x-auto::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 3px;
        }

        .dark .overflow-x-auto::-webkit-scrollbar-track {
            background: #374151;
        }

        .dark .overflow-x-auto::-webkit-scrollbar-thumb {
            background: #4b5563;
        }

        .accordion-body {
            transition: all 0.3s ease;
        }

        .accordion-header {
            transition: background-color 0.2s ease;
        }

        .accordion-icon i {
            transition: transform 0.2s ease;
        }
    </style>
 <?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/validasi/potongan.blade.php ENDPATH**/ ?>