<!-- jQuery (ONLY ONCE) -->
<script src="<?php echo site_url();?>public/assets/vendors/js/vendor.bundle.base.js"></script>

<!-- DataTables -->
<script src="<?php echo site_url();?>public/assets/js/dataTables.js"></script>
<script src="<?php echo site_url();?>public/assets/js/dataTables.bootstrap5.js"></script>

<!-- Bootstrap 
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
-->
<!-- Template / Dashboard scripts -->
<script src="<?php echo site_url();?>public/assets/js/off-canvas.js"></script>
<script src="<?php echo site_url();?>public/assets/js/hoverable-collapse.js"></script>
<script src="<?php echo site_url();?>public/assets/js/template.js"></script>
<script src="<?php echo site_url();?>public/assets/js/settings.js"></script>
<script src="<?php echo site_url();?>public/assets/js/todolist.js"></script>
<script src="<?php echo site_url();?>public/assets/js/dashboard.js"></script>
<link rel="stylesheet" href="<?= site_url('public/assets/css/datatables-custom.css') ?>">
<script>
  // Global loader functions for manual use (navigation, actions, etc.)
  function showLoader() { 
      document.getElementById('loader-overlay').classList.add('show'); 
  }
  function hideLoader() { 
      document.getElementById('loader-overlay').classList.remove('show');
  }
</script>
<style>
/* Manual loader for navigation/actions - used by showLoader() */
#loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.92);
    z-index: 99998;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
#loader-overlay.show {
    opacity: 1;
    visibility: visible;
}
.loader-box {
    text-align: center;
}
.loader-box .spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #e2e8f0;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 10px;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
.loader-box .loader-text {
    color: #64748b;
    font-size: 14px;
}

/* Add padding to content area so footer doesn't overlap */
.content,
.content-wrapper,
.dashboard-container,
.compliance-container,
.main-content {
    padding-bottom: 60px !important; /* Space for fixed footer */
}

/* Footer styling with sidebar adjustment */
.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin-left: 250px; /* Same as sidebar width */
    background: linear-gradient(135deg, #1e3a5f 0%, #0f172a 100%);
    color: #fff;
    padding: 12px 20px;
    text-align: center;
    z-index: 999;
    border-top: 3px solid #3b82f6;
    transition: margin-left 0.3s ease;
}

.footer p {
    margin: 0;
    font-size: 0.85rem;
    opacity: 0.9;
}

/* When sidebar is collapsed - use class on body for reliable detection */
body.sidebar-collapsed .footer {
    margin-left: 70px !important; /* Same as collapsed sidebar width */
}

/* Stack column search inputs */
.column-search-row th {
    padding: 0.25rem;
  }
  
  .column-search {
    font-size: 0.75rem;
    padding: 0.25rem 0.375rem;
  }

</style>

<div id="loader-overlay">
    <div class="loader-box">
        <div class="spinner"></div>
        <div class="loader-text">Please wait...</div>
    </div>
</div>

<!-- Footer -->
<div class="footer">
  <p class="mb-0">© 2025 Document Management System | All Rights Reserved</p>
</div>

<script>
// Update footer position when sidebar toggles
document.addEventListener('DOMContentLoaded', function() {
    var sidebar = document.getElementById('sidebar');
    var footer = document.querySelector('.footer');
    
    if (sidebar && footer) {
        // Function to update footer and body class
        function updateFooterPosition() {
            if (sidebar.classList.contains('collapsed')) {
                footer.style.marginLeft = '70px';
                document.body.classList.add('sidebar-collapsed');
            } else {
                footer.style.marginLeft = '250px';
                document.body.classList.remove('sidebar-collapsed');
            }
        }
        
        // Create a MutationObserver to watch for class changes on sidebar
        var observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                if (mutation.attributeName === 'class') {
                    updateFooterPosition();
                }
            });
        });
        
        observer.observe(sidebar, { attributes: true });
        
        // Initial state check
        updateFooterPosition();
    }
});
</script>

<!-- Bootstrap JS -->
</body>
</html>