<!-- Sticky Footer -->
<footer class="sticky-footer text-white">
    <div class="container-fluid px-4">
        <div class="row align-items-center">
            <div class="col-md-6 text-center text-md-start mb-2 mb-md-0">
                <span>Copyright &copy; <span style="color:#A67A00; font-weight:700;">ATR Sales & Marketing Services</span> - <?php echo date('Y'); ?></span>
            </div>
            <div class="col-md-6 text-center text-md-end">
                <span class="small">
                    <i class="fas fa-code me-1" style="color: #A67A00;"></i> 
                    Developed with <i class="fas fa-heart text-danger"></i> by 
                    <span style="color:#A67A00;">ATR Team</span>
                </span>
            </div>
        </div>
    </div>
</footer>

<style>
/* Sticky Footer Styles - Professional */
.sticky-footer {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    background: #2c2c2c !important;
    padding: 12px 20px !important;
    margin-left: 250px !important;
    width: auto !important;
    transition: margin-left 0.3s ease, background 0.3s ease !important;
    border-top: 2px solid rgba(166, 122, 0, 0.3);
    font-size: 13px;
}

/* Shadow on footer */
.sticky-footer {
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.1);
}

/* When sidebar is collapsed */
.sidebar-toggled .sticky-footer {
    margin-left: 90px !important;
}

/* Add padding to main content to prevent footer from overlapping content */
#content-wrapper {
    padding-bottom: 65px !important;
    min-height: 100vh !important;
}

/* Ensure content doesn't hide behind footer */
.container-fluid:last-child {
    margin-bottom: 10px;
}

/* Responsive for mobile devices */
@media (max-width: 768px) {
    .sticky-footer {
        margin-left: 0 !important;
        padding: 10px 15px !important;
    }
    
    #content-wrapper {
        padding-bottom: 75px !important;
    }
    
    .sticky-footer .container-fluid {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* For very small screens */
@media (max-width: 576px) {
    .sticky-footer {
        padding: 8px 12px !important;
        font-size: 11px !important;
    }
    
    .sticky-footer .row {
        flex-direction: column;
        text-align: center;
    }
    
    .sticky-footer .col-md-6 {
        margin-bottom: 5px;
    }
    
    #content-wrapper {
        padding-bottom: 85px !important;
    }
}

/* Footer hover effect */
.sticky-footer:hover {
    border-top-color: #A67A00;
    transition: border-top-color 0.3s ease;
}

/* Scroll to top button adjustment when footer is fixed */
.scroll-to-top {
    bottom: 80px !important;
    right: 25px !important;
}

@media (max-width: 768px) {
    .scroll-to-top {
        bottom: 90px !important;
        right: 15px !important;
    }
}

/* Smooth transition for main content */
#page-top, #wrapper, #content-wrapper {
    transition: padding-bottom 0.3s ease;
}
</style>

<!-- Optional: Add JavaScript to handle dynamic content loading -->
<script>
// Ensure footer stays at bottom when content is loaded dynamically
document.addEventListener('DOMContentLoaded', function() {
    adjustFooterPosition();
    window.addEventListener('resize', adjustFooterPosition);
});

function adjustFooterPosition() {
    var contentWrapper = document.getElementById('content-wrapper');
    var footer = document.querySelector('.sticky-footer');
    var windowHeight = window.innerHeight;
    var contentHeight = contentWrapper ? contentWrapper.scrollHeight : 0;
    
    // If content is less than viewport height, adjust padding
    if (contentHeight + 70 < windowHeight) {
        if (contentWrapper) {
            contentWrapper.style.minHeight = (windowHeight - 70) + 'px';
        }
    } else {
        if (contentWrapper) {
            contentWrapper.style.minHeight = '100vh';
        }
    }
}
</script>