<?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="max-w-[1600px] mx-auto p-4 md:p-6 antialiased">
        <!-- Header Section -->
        <div class="mb-6 space-y-4">
            <div
                class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 bg-white dark:bg-[#1a1a2e] p-5 rounded-3xl border border-slate-200 dark:border-white/5 shadow-sm">
                <div>
                    <h1 class="text-2xl md:text-3xl font-black tracking-tight dark:text-white">
                        <span class="bg-gradient-to-r from-violet-600 to-indigo-600 bg-clip-text text-transparent">
                            Validasi Rencana Angsuran
                        </span>
                    </h1>
                    <p class="text-slate-500 dark:text-slate-400 text-sm mt-1 flex items-center">
                        <i data-lucide="file-check" class="w-4 h-4 mr-2"></i>
                        Kelola validasi rencana angsuran mahasiswa
                    </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>
                </div>
            </div>

            <!-- Search Form -->
            <div class="bg-white dark:bg-[#1a1a2e] p-4 rounded-2xl border border-slate-200 dark:border-white/5 shadow-sm">
                <form method="GET" action="<?php echo e(route('validasi.rencana.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 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-violet-500 focus:border-transparent transition-all">
                        <?php if(request('search')): ?>
                            <a href="<?php echo e(route('validasi.rencana.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>
        </div>

        <!-- Main Card -->
        <div class="bg-white dark:bg-[#1a1a2e] rounded-3xl border border-slate-200 dark:border-white/5 shadow-xl overflow-hidden">

            <!-- Card Header with Stats -->
            <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 p-6 pb-4 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-violet-500/10 to-indigo-600/10 text-violet-500 flex items-center justify-center">
                        <i data-lucide="credit-card" 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()); ?> Rencana Angsuran
                        </p>
                    </div>
                </div>
            </div>

            <?php if($data->count() > 0): ?>
                <!-- Bulk Actions -->
                <div class="m-4 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="checkAll" class="w-4 h-4 text-violet-600 bg-gray-100 border-gray-300 rounded focus:ring-violet-500 focus:ring-2">
                                <label for="checkAll" class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">
                                    Pilih Semua Mahasiswa
                                </label>
                            </div>
                            <span class="text-sm text-slate-500 dark:text-slate-400">
                                (<span id="selectedCount">0</span> terpilih)
                            </span>
                        </div>

                        <div class="flex gap-3">
                            <button type="button" id="bulkSetujuiBtn" 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 Terpilih
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Table - Responsive dengan scroll horizontal -->
                <div class="overflow-x-auto">
                    <div class="inline-block min-w-full align-middle">
                        <table class="min-w-full">
                            <thead>
                                <tr class="bg-gradient-to-r from-slate-50 to-gray-50 dark:from-gray-800 dark:to-gray-900 border-b border-slate-200 dark:border-gray-700">
                                    <th class="py-4 px-3 text-left w-12">
                                        <input type="checkbox" id="checkAllHeader" class="w-4 h-4 text-violet-600 bg-gray-100 border-gray-300 rounded focus:ring-violet-500 focus:ring-2">
                                    </th>
                                    <th class="py-4 px-3 text-left text-sm font-semibold text-gray-900 dark:text-white">NIM</th>
                                    <th class="py-4 px-3 text-left text-sm font-semibold text-gray-900 dark:text-white">Nama Mahasiswa</th>
                                    <th class="py-4 px-3 text-left text-sm font-semibold text-gray-900 dark:text-white">Program Studi</th>
                                    <th class="py-4 px-3 text-left text-sm font-semibold text-gray-900 dark:text-white">Angkatan</th>
                                    <th class="py-4 px-3 text-left text-sm font-semibold text-gray-900 dark:text-white">Total Biaya</th>
                                    <th class="py-4 px-3 text-left text-sm font-semibold text-gray-900 dark:text-white">Status</th>
                                    <th class="py-4 px-3 text-left text-sm font-semibold text-gray-900 dark:text-white">Aksi</th>
                                 </tr>
                            </thead>
                            <tbody class="divide-y divide-slate-200 dark:divide-gray-700">
                                <?php $__currentLoopData = $data; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $a): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <?php
                                        $pendingCount = $a->details->where('rencana_valid', 'pending')->count();
                                        $validCount = $a->details->where('rencana_valid', 'valid')->count();
                                        $totalCount = $a->details->count();
                                    ?>
                                    <tr class="hover:bg-slate-50 dark:hover:bg-gray-800/50 transition-colors">
                                        <td class="py-4 px-3">
                                            <input type="checkbox" name="selected_angsurans[]" value="<?php echo e($a->id); ?>"
                                                class="mahasiswa-check w-4 h-4 text-violet-600 bg-gray-100 border-gray-300 rounded focus:ring-violet-500 focus:ring-2">
                                         </td>
                                        <td class="py-4 px-3 font-mono text-sm font-medium text-gray-900 dark:text-white">
                                            <?php echo e($a->mahasiswa->nim); ?>

                                         </td>
                                        <td class="py-4 px-3">
                                            <div class="font-medium text-gray-900 dark:text-white">
                                                <?php echo e($a->mahasiswa->nama); ?>

                                            </div>
                                            <div class="text-sm text-slate-500 dark:text-slate-400 mt-1">
                                                <?php echo e($a->mahasiswa->prodi->kampus->nama ?? '-'); ?>

                                            </div>
                                         </td>
                                        <td class="py-4 px-3"><?php echo e($a->mahasiswa->prodi->nama ?? '-'); ?></td>
                                        <td class="py-4 px-3">
                                            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
                                                <?php echo e($a->mahasiswa->angkatan); ?>

                                            </span>
                                         </td>
                                        <td class="py-4 px-3 font-mono font-medium text-gray-900 dark:text-white">
                                            Rp <?php echo e(number_format($a->total, 0, ',', '.')); ?>

                                         </td>
                                        <td class="py-4 px-3">
                                            <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">
                                                <i data-lucide="clock" class="w-3 h-3 mr-1"></i>
                                                Menunggu
                                            </span>
                                         </td>
                                        <td class="py-4 px-3">
                                            <div class="flex items-center gap-2">
                                                <button type="button" onclick="showDetailModal(<?php echo e($a->id); ?>)"
                                                    class="px-3 py-1.5 bg-slate-500/10 text-slate-600 dark:text-slate-400 hover:bg-slate-500/20 rounded-lg text-sm font-medium transition-all flex items-center gap-2 whitespace-nowrap"
                                                    title="Lihat Detail Komponen">
                                                    <i data-lucide="eye" class="w-4 h-4"></i>
                                                    Detail
                                                </button>

                                                <form action="<?php echo e(route('validasi.rencana.setujui', $a->id)); ?>" method="POST" class="m-0">
                                                    <?php echo csrf_field(); ?>
                                                    <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 whitespace-nowrap"
                                                        title="Setujui Semua Komponen"
                                                        data-id="<?php echo e($a->id); ?>"
                                                        data-nama="<?php echo e($a->mahasiswa->nama); ?>"
                                                        data-total="Rp <?php echo e(number_format($a->total, 0, ',', '.')); ?>">
                                                        <i data-lucide="check" class="w-4 h-4"></i>
                                                        Setujui
                                                    </button>
                                                </form>
                                            </div>
                                         </td>
                                     </tr>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </tbody>
                        </table>
                    </div>
                </div>
            <?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="credit-card" 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 rencana angsuran dengan kata kunci "<?php echo e(request('search')); ?>"
                        <?php else: ?>
                            Belum ada rencana angsuran menunggu validasi
                        <?php endif; ?>
                    </h3>
                    <p class="text-slate-500 dark:text-slate-400 mb-6">
                        Semua rencana angsuran sudah tervalidasi
                    </p>
                    <?php if(request('search')): ?>
                        <a href="<?php echo e(route('validasi.rencana.index')); ?>"
                            class="inline-flex items-center gap-2 px-4 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">
                            <i data-lucide="refresh-cw" class="w-4 h-4"></i>
                            Tampilkan Semua
                        </a>
                    <?php endif; ?>
                </div>
            <?php endif; ?>
        </div>
    </div>

    
    <div id="detailModal" class="fixed inset-0 z-50 overflow-y-auto hidden">
        <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
            <!-- Background overlay -->
            <div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75 dark:bg-gray-900 dark:bg-opacity-75"></div>

            <!-- Modal panel -->
            <div class="inline-block w-full max-w-4xl my-8 text-left align-middle transition-all transform bg-white dark:bg-[#1a1a2e] rounded-3xl shadow-2xl">
                <div class="flex items-center justify-between p-6 border-b border-slate-200 dark:border-white/5">
                    <h3 class="text-xl font-bold text-gray-900 dark:text-white">Detail Komponen Biaya</h3>
                    <button type="button" onclick="closeDetailModal()"
                        class="p-2 text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 rounded-xl hover:bg-slate-100 dark:hover:bg-gray-800 transition-all">
                        <i data-lucide="x" class="w-5 h-5"></i>
                    </button>
                </div>
                <div class="p-6 max-h-[60vh] overflow-y-auto" id="modalBody">
                    <!-- Content akan diisi via JavaScript -->
                </div>
                <div class="p-6 border-t border-slate-200 dark:border-white/5 flex justify-end gap-3">
                    <button type="button" onclick="closeDetailModal()"
                        class="px-4 py-2.5 bg-slate-100 dark:bg-gray-800 text-slate-600 dark:text-slate-300 rounded-xl text-sm font-medium hover:bg-slate-200 dark:hover:bg-gray-700 transition-all flex items-center gap-2">
                        <i data-lucide="x" class="w-4 h-4"></i>
                        Tutup
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            lucide.createIcons();

            const checkAll = document.getElementById('checkAll');
            const checkAllHeader = document.getElementById('checkAllHeader');
            const rowChecks = document.querySelectorAll('.mahasiswa-check');
            const bulkSetujuiBtn = document.getElementById('bulkSetujuiBtn');
            const selectedCount = document.getElementById('selectedCount');

            // Check dark mode
            const isDarkMode = document.documentElement.classList.contains('dark');

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

            function updateCount() {
                const selected = document.querySelectorAll('.mahasiswa-check:checked').length;
                if (selectedCount) selectedCount.textContent = selected;
                if (bulkSetujuiBtn) bulkSetujuiBtn.disabled = selected === 0;

                if (bulkSetujuiBtn) {
                    if (selected > 0) {
                        bulkSetujuiBtn.innerHTML = `<i data-lucide="check" class="w-4 h-4"></i> Setujui (${selected})`;
                        lucide.createIcons();
                    } else {
                        bulkSetujuiBtn.innerHTML = `<i data-lucide="check" class="w-4 h-4"></i> Setujui Terpilih`;
                        lucide.createIcons();
                    }
                }

                syncSelectAllState();
            }

            function syncSelectAllState() {
                const total = rowChecks.length;
                const checked = document.querySelectorAll('.mahasiswa-check:checked').length;
                const all = checked === total;
                const some = checked > 0 && !all;

                if (checkAll) {
                    checkAll.checked = all;
                    checkAll.indeterminate = some;
                }
                if (checkAllHeader) {
                    checkAllHeader.checked = all;
                    checkAllHeader.indeterminate = some;
                }
            }

            function toggleAll(isChecked) {
                rowChecks.forEach(cb => cb.checked = isChecked);
                updateCount();
            }

            if (checkAll) checkAll.addEventListener('change', e => toggleAll(e.target.checked));
            if (checkAllHeader) checkAllHeader.addEventListener('change', e => toggleAll(e.target.checked));
            rowChecks.forEach(cb => cb.addEventListener('change', updateCount));

            function performBulkSetujui() {
                const selected = [...document.querySelectorAll('.mahasiswa-check:checked')].map(c => c.value);
                if (selected.length === 0) {
                    SwalModal.fire({
                        title: 'Peringatan!',
                        text: 'Pilih minimal 1 rencana angsuran!',
                        icon: 'warning',
                        confirmButtonText: 'Mengerti',
                        confirmButtonColor: '#f59e0b'
                    });
                    return;
                }

                SwalModal.fire({
                    title: 'Setujui Rencana Angsuran?',
                    html: `Anda akan <strong>menyetujui</strong> ${selected.length} rencana angsuran.<br><br>
                           <span class="text-amber-500 font-semibold">⚠️ Pastikan Anda sudah mengecek semua detail dengan teliti!</span>`,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: `Ya, Setujui ${selected.length} Data`,
                    cancelButtonText: 'Periksa Kembali',
                    confirmButtonColor: '#10b981',
                    cancelButtonColor: '#64748b',
                    reverseButtons: true,
                    width: '500px'
                }).then(result => {
                    if (!result.isConfirmed) return;

                    const form = document.createElement('form');
                    form.method = 'POST';
                    form.action = '<?php echo e(route('validasi.rencana.bulk.setujui')); ?>';

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

                    selected.forEach(id => {
                        const input = document.createElement('input');
                        input.type = 'hidden';
                        input.name = 'selected_angsurans[]';
                        input.value = id;
                        form.appendChild(input);
                    });

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

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

            bulkSetujuiBtn?.addEventListener('click', performBulkSetujui);

            document.querySelectorAll('.individual-setujui-btn').forEach(button => {
                button.addEventListener('click', function() {
                    const id = this.dataset.id;
                    const nama = this.dataset.nama;
                    const total = this.dataset.total;
                    const form = this.closest('form');

                    SwalModal.fire({
                        title: 'Setujui Rencana Angsuran?',
                        html: `Anda akan menyetujui rencana angsuran:<br>
                              <strong class="text-indigo-600 dark:text-indigo-400">${nama}</strong><br>
                              <span class="text-lg font-bold text-emerald-600 dark:text-emerald-400">${total}</span>`,
                        icon: 'question',
                        showCancelButton: true,
                        confirmButtonText: 'Ya, Setujui!',
                        cancelButtonText: 'Batal',
                        confirmButtonColor: '#10b981',
                        cancelButtonColor: '#64748b',
                        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;
                            lucide.createIcons();
                            form.submit();
                        }
                    });
                });
            });

            updateCount();

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

            <?php if(session('error')): ?>
                SwalModal.fire({
                    icon: 'error',
                    title: 'Gagal!',
                    text: "<?php echo e(session('error')); ?>",
                    showConfirmButton: true,
                    confirmButtonText: 'Mengerti'
                });
            <?php endif; ?>

            <?php if(session('warning')): ?>
                SwalModal.fire({
                    icon: 'warning',
                    title: 'Peringatan!',
                    text: "<?php echo e(session('warning')); ?>",
                    showConfirmButton: true,
                    confirmButtonText: 'Mengerti',
                    confirmButtonColor: '#f59e0b'
                });
            <?php endif; ?>
        });

        function showDetailModal(angsuranId) {
            const modalBody = document.getElementById('modalBody');
            if (!modalBody) return;

            modalBody.innerHTML = `
                <div class="text-center py-8">
                    <i data-lucide="loader-2" class="w-8 h-8 animate-spin text-slate-400 mx-auto mb-4"></i>
                    <p class="text-slate-500 dark:text-slate-400">Memuat detail komponen...</p>
                </div>
            `;

            const modal = document.getElementById('detailModal');
            if (modal) {
                modal.classList.remove('hidden');
                document.body.style.overflow = 'hidden';
                lucide.createIcons();
            }

            fetch(`/validasi-rencana/${angsuranId}/detail`)
                .then(response => {
                    if (!response.ok) throw new Error('Network response was not ok');
                    return response.json();
                })
                .then(data => {
                    if (data.error) throw new Error(data.error);
                    if (modalBody) {
                        modalBody.innerHTML = data.html;
                        lucide.createIcons();
                    }
                })
                .catch(error => {
                    console.error('Error loading modal:', error);
                    if (modalBody) {
                        modalBody.innerHTML = `
                            <div class="text-center py-8">
                                <i data-lucide="alert-triangle" class="w-12 h-12 text-red-400 mx-auto mb-4"></i>
                                <p class="text-red-600 dark:text-red-400 font-medium">Gagal memuat data detail</p>
                                <p class="text-sm text-slate-500 dark:text-slate-400 mt-2">${error.message}</p>
                                <button onclick="showDetailModal(${angsuranId})" class="mt-4 px-4 py-2 bg-violet-500 text-white rounded-lg text-sm hover:bg-violet-600 transition-all">
                                    <i data-lucide="refresh-cw" class="w-4 h-4 inline mr-1"></i>
                                    Coba Lagi
                                </button>
                            </div>
                        `;
                        lucide.createIcons();
                    }
                });
        }

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

        document.getElementById('detailModal')?.addEventListener('click', function(event) {
            if (event.target === this) closeDetailModal();
        });

        document.addEventListener('keydown', function(event) {
            if (event.key === 'Escape') closeDetailModal();
        });
    </script>

    <style>
        .individual-form {
            display: inline;
            margin: 0;
        }

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

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

        /* Perbaikan scroll horizontal */
        .overflow-x-auto {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        @media (max-width: 768px) {
            .p-6 {
                padding: 1rem;
            }
            .px-3 {
                padding-left: 0.5rem;
                padding-right: 0.5rem;
            }
            .py-4 {
                padding-top: 0.75rem;
                padding-bottom: 0.75rem;
            }
            th, td {
                padding-left: 0.5rem;
                padding-right: 0.5rem;
            }
        }

        /* Biarkan tabel scroll horizontal di mobile */
        @media (max-width: 1024px) {
            .overflow-x-auto {
                margin: 0 -1rem;
                padding: 0 1rem;
            }
        }
    </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/rencana.blade.php ENDPATH**/ ?>