</div>
    <!-- End Main Content -->
    
<!-- 
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>


    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    

<script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.7/js/dataTables.bootstrap5.min.js"></script> -->

<!-- jQuery -->
<script src="<?= base_url('assets/js/jquery-3.7.0.min.js'); ?>"></script>

<!-- Bootstrap JS -->
<script src="<?= base_url('assets/js/bootstrap.bundle.min.js'); ?>"></script>

<!-- DataTables -->
<script src="<?= base_url('assets/js/jquery.dataTables.min.js'); ?>"></script>
<script src="<?= base_url('assets/js/dataTables.bootstrap5.min.js'); ?>"></script>
    
    <!-- Matikan error alert DataTables --> 
    <script>
        $.fn.dataTable.ext.errMode = 'none';
    </script>
    
    <!-- Initialize DataTables -->
    <script>
        $(document).ready(function() {
            if ($('.datatable').length > 0) {
                $('.datatable').each(function() {
                    if ($(this).find('tbody tr').length > 0) {
                        $(this).DataTable({
                            "language": {
                                "url": "//cdn.datatables.net/plug-ins/1.13.0/i18n/id.json"
                            },
                            "pageLength": 10,
                            "order": [[0, "asc"]]
                        });
                    }
                });
            }
            
            // Auto-hide alerts after 5 seconds
            setTimeout(function() {
                $('.alert').fadeOut('slow');
            }, 5000);
        });
    </script>

    <!-- Dropdown Topbar Avatar -->
    <script>
    (function() {
        var wrap     = document.getElementById('topbarUserWrap');
        var avatar   = document.getElementById('topbarAvatar');
        var dropdown = document.getElementById('topbarDropdown');

        if (!avatar || !dropdown) return;

        // Toggle dropdown saat klik avatar
        avatar.addEventListener('click', function(e) {
            e.stopPropagation();
            dropdown.classList.toggle('show');
        });

        // Tutup dropdown saat klik di luar
        document.addEventListener('click', function(e) {
            if (wrap && !wrap.contains(e.target)) {
                dropdown.classList.remove('show');
            }
        });

        // Tutup dropdown saat tekan Escape
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                dropdown.classList.remove('show');
            }
        });
    })();
    </script>

    <!-- PWA Service Worker Registration -->
    <script>
    if ('serviceWorker' in navigator) {
        window.addEventListener('load', function() {
            navigator.serviceWorker.register('<?= base_url('sw.js'); ?>').then(function(registration) {
                console.log('ServiceWorker registration successful with scope: ', registration.scope);
            }, function(err) {
                console.log('ServiceWorker registration failed: ', err);
            });
        });
    }
    </script>

    <!-- GLOBAL BOOTSTRAP MODAL (REUSABLE) -->
    <div class="modal fade" id="globalModal" tabindex="-1" aria-hidden="true" style="z-index: 99999;">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content" style="border-radius:16px; border:none; box-shadow: 0 10px 40px rgba(0,0,0,0.15);">
                <div class="modal-header border-0 pb-0" style="padding: 25px 30px 10px;">
                    <h5 class="modal-title fw-bold" id="globalModalTitle">Konfirmasi</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body border-0 pt-1" style="padding: 10px 30px 25px;">
                    <p id="globalModalMessage" class="text-muted mb-0" style="font-size: 0.95rem; line-height: 1.6;"></p>
                </div>
                <div class="modal-footer border-0 pt-0" style="padding: 0 30px 30px; gap: 12px;">
                    <button type="button" id="globalModalCancelBtn" class="btn fw-semibold" data-bs-dismiss="modal" style="border-radius:10px; padding: 10px 20px; font-size: 0.85rem; background: #f1f5f9; color: #475569; border: none; flex: 1;">Batal</button>
                    <button type="button" id="globalModalConfirmBtn" class="btn fw-bold text-white" style="border-radius:10px; padding: 10px 20px; font-size: 0.85rem; background: linear-gradient(135deg, #4f46e5, #6366f1); border: none; flex: 1; box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2);">Konfirmasi</button>
                </div>
            </div>
        </div>
    </div>

    <script>
    /**
     * Global Confirm & Alert Helper (Bootstrap 5)
     */
    const GlobalModal = {
        modal: null,
        init: function() {
            const el = document.getElementById('globalModal');
            if (el) this.modal = new bootstrap.Modal(el);
        },
        confirm: function(options) {
            if (!this.modal) this.init();
            
            const title   = options.title || 'Konfirmasi';
            const message = options.message || 'Apakah Anda yakin ingin melanjutkan?';
            const type    = options.type || 'primary'; // primary, danger, success
            const btnText = options.confirmText || 'Ya, Lanjutkan';
            
            document.getElementById('globalModalTitle').innerText = title;
            document.getElementById('globalModalMessage').innerHTML = message;
            
            const confirmBtn = document.getElementById('globalModalConfirmBtn');
            const cancelBtn  = document.getElementById('globalModalCancelBtn');
            
            confirmBtn.innerText = btnText;
            cancelBtn.style.display = 'block'; // Ensure cancel btn is visible
            
            // Reset button style based on type
            confirmBtn.className = 'btn fw-bold text-white';
            if (type === 'danger') {
                confirmBtn.style.background = 'linear-gradient(135deg, #dc2626, #ef4444)';
                confirmBtn.style.boxShadow = '0 4px 12px rgba(220, 38, 38, 0.2)';
            } else if (type === 'success') {
                confirmBtn.style.background = 'linear-gradient(135deg, #059669, #10b981)';
                confirmBtn.style.boxShadow = '0 4px 12px rgba(5, 150, 105, 0.2)';
            } else {
                confirmBtn.style.background = 'linear-gradient(135deg, #4f46e5, #6366f1)';
                confirmBtn.style.boxShadow = '0 4px 12px rgba(79, 70, 229, 0.2)';
            }

            confirmBtn.onclick = function() {
                GlobalModal.modal.hide();
                if (typeof options.onConfirm === 'function') options.onConfirm();
            };

            this.modal.show();
        },
        alert: function(options) {
            if (!this.modal) this.init();
            
            const title   = options.title || 'Informasi';
            const message = options.message || '';
            const type    = options.type || 'primary';
            
            document.getElementById('globalModalTitle').innerText = title;
            document.getElementById('globalModalMessage').innerHTML = message;
            
            const confirmBtn = document.getElementById('globalModalConfirmBtn');
            const cancelBtn  = document.getElementById('globalModalCancelBtn');
            
            confirmBtn.innerText = 'Tutup';
            cancelBtn.style.display = 'none'; // Hide cancel button for alerts
            
            confirmBtn.className = 'btn fw-bold text-white';
            confirmBtn.style.background = 'linear-gradient(135deg, #4f46e5, #6366f1)';
            confirmBtn.style.boxShadow = '0 4px 12px rgba(79, 70, 229, 0.2)';
            
            confirmBtn.onclick = function() {
                GlobalModal.modal.hide();
            };

            this.modal.show();
        }
    };

    // Override native alert globally to use Bootstrap 5 Modal
    window.alert = function(msg) { 
        GlobalModal.alert({ message: msg }); 
    };

    // Auto-handle [data-confirm] links and buttons
    document.addEventListener('click', function(e) {
        const target = e.target.closest('[data-confirm]');
        if (target) {
            e.preventDefault();
            const message = target.getAttribute('data-confirm');
            const title   = target.getAttribute('data-title') || 'Konfirmasi';
            const type    = target.getAttribute('data-type') || 'danger';
            
            GlobalModal.confirm({
                title: title,
                message: message,
                type: type,
                onConfirm: function() {
                    if (target.tagName === 'A') {
                        window.location.href = target.href;
                    } else {
                        const form = target.closest('form');
                        if (form) form.submit();
                    }
                }
            });
        }
    });
    </script>

</body>

</html>