@if(get_setting('feature_cookie_banner', true))
<div id="cookie_consent_banner" class="cookie-banner-wrapper d-none animate__animated animate__fadeIn">
    <div class="cookie-banner-card card adminuiux-card p-4 shadow-lg border-0">
        <div class="row align-items-center">
            <div class="col-12 col-md-auto mb-3 mb-md-0">
                <div class="avatar avatar-50 rounded-circle bg-warning-subtle text-warning">
                    <i class="bi bi-cookie fs-3"></i>
                </div>
            </div>
            <div class="col-12 col-md">
                <h6 class="fw-bold mb-1">{{ __('We use cookies') }}</h6>
                <p class="small text-muted mb-0">
                    {{ __('We use cookies to enhance your experience and analyze our traffic. By clicking "Accept", you consent to our use of cookies as described in our') }} 
                    <a href="{{ route('legal.show', 'privacy') }}" class="text-primary fw-bold text-decoration-none">{{ __('Privacy Policy') }}</a>.
                </p>
            </div>
            <div class="col-12 col-md-auto mt-3 mt-md-0">
                <div class="btn-group gap-2">
                    <button type="button" onclick="acceptCookies()" class="btn btn-pill-primary px-4">{{ __('Accept') }}</button>
                    <button type="button" onclick="dismissCookieBanner()" class="btn btn-pill-cancel px-3">{{ __('Dismiss') }}</button>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .cookie-banner-wrapper {
        position: fixed;
        bottom: 40px;
        left: 40px;
        right: 40px;
        z-index: 9999;
        max-width: 960px;
        margin: 0 auto;
    }
    .cookie-banner-card {
        border-radius: 30px !important;
        background: rgba(255, 255, 255, 0.8) !important;
        backdrop-filter: blur(25px) saturate(180%);
        border: 1px solid rgba(255, 255, 255, 0.4) !important;
        box-shadow: 0 40px 80px rgba(0,0,0,0.12) !important;
    }
    @media (max-width: 767px) {
        .cookie-banner-wrapper {
            bottom: 20px;
            left: 20px;
            right: 20px;
        }
        .cookie-banner-card {
            border-radius: 25px !important;
        }
    }
</style>

<script>
    function getCookie(name) {
        let nameEQ = name + "=";
        let ca = document.cookie.split(';');
        for(let i=0;i < ca.length;i++) {
            let c = ca[i];
            while (c.charAt(0)==' ') c = c.substring(1,c.length);
            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
        }
        return null;
    }

    function setCookie(name,value,days) {
        let expires = "";
        if (days) {
            let date = new Date();
            date.setTime(date.getTime() + (days*24*60*60*1000));
            expires = "; expires=" + date.toUTCString();
        }
        document.cookie = name + "=" + (value || "")  + expires + "; path=/; SameSite=Lax";
    }

    function acceptCookies() {
        setCookie('cookie_consent', 'accepted', 365);
        dismissCookieBanner();
    }

    function dismissCookieBanner() {
        const banner = document.getElementById('cookie_consent_banner');
        if (banner) {
            banner.classList.remove('animate__fadeIn');
            banner.classList.add('animate__fadeOutDown');
            setTimeout(() => banner.classList.add('d-none'), 500);
        }
    }

    document.addEventListener("DOMContentLoaded", function() {
        if (!getCookie('cookie_consent')) {
            setTimeout(() => {
                const banner = document.getElementById('cookie_consent_banner');
                if (banner) banner.classList.remove('d-none');
            }, 2000);
        }
    });
</script>
@endif