@php
<<<<<<< HEAD
    $setting = App\Models\SiteSetting::find(1);
    $version = $setting->copyright ?? '2.0.0'; // Default version
=======
    $version = $setting->copyright ?? '2.0.0';
>>>>>>> origin/main
@endphp

<footer class="page-footer text-center py-3 footer-area">
    <div class="d-flex justify-content-between align-items-center flex-wrap">

        <!-- COPYRIGHT -->
        <p class="mb-0 fw-semibold text-white">
            CHM ERP {{ $version }} © 2021 - <span id="current-year"></span>  
            | All rights reserved.
        </p>

        <!-- SMOOTH RHYTHMIC MARQUEE -->
        <div class="marquee-container d-none d-md-block">
            <div class="marquee">
                <div class="marquee-group">
                    <a href="{{ $setting->facebook }}" target="_blank"><i class='bx bxl-facebook me-1'></i>Facebook</a>
                    <a href="{{ $setting->youtube }}" target="_blank"><i class='bx bxl-youtube me-1'></i>YouTube</a>
                    <a href="{{ $setting->instagram }}" target="_blank"><i class='bx bxl-instagram me-1'></i>Instagram</a>
                    <a href="{{ $setting->website }}" target="_blank"><i class='bx bx-globe me-1'></i>Website</a>
                </div>

                <!-- Duplicate for seamless loop -->
                <div class="marquee-group">
                    <a href="{{ $setting->facebook }}" target="_blank"><i class='bx bxl-facebook me-1'></i>Facebook</a>
                    <a href="{{ $setting->youtube }}" target="_blank"><i class='bx bxl-youtube me-1'></i>YouTube</a>
                    <a href="{{ $setting->instagram }}" target="_blank"><i class='bx bxl-instagram me-1'></i>Instagram</a>
                    <a href="{{ $setting->website }}" target="_blank"><i class='bx bx-globe me-1'></i>Website</a>
                </div>
            </div>
        </div>

    </div>
</footer>

<script>
    // Set current year dynamically
    document.addEventListener("DOMContentLoaded", function () {
        document.getElementById("current-year").textContent = new Date().getFullYear();
    });
</script>

<style>
/* Footer base */
.footer-area {
    background: #111827;
    color: #d1d5db;
    border-top: 1px solid #374151;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 900;
    transition: margin-left 0.3s;
}

/* Marquee container */
.marquee-container {
    overflow: hidden;
    position: relative;
    max-width: 550px;
}

/* Gradient fade effect */
.marquee-container::before,
.marquee-container::after {
    content: "";
    position: absolute;
    width: 60px;
    height: 100%;
    top: 0;
    pointer-events: none;
}

.marquee-container::before {
    left: 0;
    background: linear-gradient(to right, #111827, transparent);
}

.marquee-container::after {
    right: 0;
    background: linear-gradient(to left, #111827, transparent);
}

/* Marquee animation */
.marquee {
    display: flex;
    width: max-content;
    animation: marqueeScroll 18s linear infinite;
}

/* Marquee group */
.marquee-group {
    display: flex;
    gap: 40px;
}

/* Links inside marquee */
.marquee-group a {
    color: #9ca3af;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.marquee-group a:hover {
    color: #fff;
}

/* Keyframes for smooth scrolling */
@keyframes marqueeScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Adjust when sidebar is collapsed */
.sidebar-collapsed.footer-area {
    margin-left: 80px !important;
}

</style>