@if (!request()->cookie('cookie_consent'))
    <div id="cookie-consent-banner">
        <div class="cookie-consent-content">
            <span>This site uses cookies to improve your experience.</span>

            <a id="read-more-link" href="{{ route('cookies') }}">Read more</a>

            <div onclick="saveCookiePreference('all')" class="btn btn-outline-secondary cookie-accept-btn">
                Accept all cookies
            </div>
            <div onclick="saveCookiePreference('essential')" class="btn btn-outline-secondary cookie-accept-btn">
                Essential cookies only
            </div>
        </div>
    </div>

    <style>
        #cookie-consent-banner {
            font-family: "Montserrat Medium", sans-serif !important;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: #fff;
            color: #333333;
            padding: 15px;
            text-align: center;
            z-index: 9999;
            box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.15);
        }

        .cookie-consent-content {
            display: inline-flex;
            align-items: center;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
        }

        #read-more-link {
            color: #333333;
            text-decoration: underline;
        }

        .cookie-accept-btn {
            font-family: "Montserrat Medium", sans-serif;
            border-color: #6d6d6d;
            cursor: pointer;
        }

        .cookie-accept-btn:hover {
            background-color: #e6e6e6;
        }

        @media (max-width: 600px) {
            .cookie-consent-content {
                flex-direction: column;
                align-items: stretch;
            }

            .cookie-accept-btn {
                width: 100%;
            }

            #read-more-link {
                display: block;
                margin: 5px 0;
            }
        }
    </style>

    <script>
        function saveCookiePreference(preference) {
            const now = new Date();
            now.setFullYear(now.getFullYear() + 1);
            document.cookie = `cookie_consent=${preference}; expires=${now.toUTCString()}; path=/`;

            if (preference === 'essential') {
                window['ga-disable-UA-407427-3'] = true;
            }

            document.getElementById('cookie-consent-banner').style.display = 'none';
            location.reload();
        }
    </script>
@endif