@php
    use Carbon\Carbon;
    $start = Carbon::parse(config('sale.start'))->timestamp * 1000;
    $end   = Carbon::parse(config('sale.end'))->timestamp * 1000;
    $nowMs = Carbon::now()->timestamp * 1000;
@endphp

<!-- NORMAL BAR -->
<div class="bf-countdown-bar" style="display:block; width:100%; box-sizing:border-box;">
    <div style="
        background:#b0dacd;
        color:#000;
        font-weight:400;
        padding:10px 0;
        text-align:center;
        font-family:Arial, sans-serif;
        font-size:18px !important;
    ">
        <span class="bf-message" style="margin-right:12px;">
            <span>Use </span>
            <span style="font-weight:700;">"EASTER26"</span>
            <span> for EXTRA </span>
            <span>5%</span>
            <span> Off | </span>
            <span style="font-weight:700;">Easter Sale</span>
            <span> Ends In</span>
        </span>

        <span class="bf-timer"
            style="
                background:#d7ece6;
                color:#000;
                padding:10px 15px;
                border-radius:10px;
                font-weight:bold;
                display:inline-block;
            "
            aria-live="polite">
        </span>
    </div>
</div>

<!-- STICKY BAR -->
<div class="header-top-sticky bf-countdown-bar" style="width:100%; box-sizing:border-box;">
    <div style="
        background:#b0dacd;
        color:#000;
        font-weight:400;
        padding:10px 0;
        text-align:center;
        font-family:Arial, sans-serif;
        font-size:18px !important;
    ">
        <span class="bf-message" style="margin-right:12px;">
            <span>Use </span>
            <span style="font-weight:700;">"EASTER26"</span>
            <span> for EXTRA </span>
            <span>5%</span>
            <span> Off | </span>
            <span style="font-weight:700;">Easter Sale</span>
            <span> Ends In</span>
        </span>

        <span class="bf-timer"
            style="
                background:#d7ece6;
                color:#000;
                padding:10px 15px;
                border-radius:10px;
                font-weight:bold;
                display:inline-block;
                font-size:18px;
            "
            aria-live="polite">
        </span>
    </div>
</div>

<script>
(function () {
    var saleStart = parseInt(@json($start), 10);
    var saleEnd   = parseInt(@json($end), 10);
    var serverNow = parseInt(@json($nowMs), 10);

    var bars   = document.getElementsByClassName('bf-countdown-bar');
    var timers = document.getElementsByClassName('bf-timer');

    var offset = serverNow - Date.now();

    function now() {
        return Date.now() + offset;
    }

    function formatTime(ms) {
        if (ms <= 0) return '0d : 0h : 0m : 00s';

        var s = Math.floor(ms / 1000);
        var d = Math.floor(s / 86400); s %= 86400;
        var h = Math.floor(s / 3600);  s %= 3600;
        var m = Math.floor(s / 60);
        var sec = s % 60;

        sec = sec < 10 ? '0' + sec : sec;

        return d + 'd : ' + h + 'h : ' + m + 'm : ' + sec + 's';
    }

    function updateTimer() {
        var n = now();
        var remaining;

        if (n < saleStart) {
            remaining = saleStart - n;
        } else if (n <= saleEnd) {
            remaining = saleEnd - n;
        } else {
            for (var i = 0; i < bars.length; i++) {
                bars[i].style.display = 'none';
            }
            clearInterval(interval);
            return;
        }

        var timeText = formatTime(remaining);
        for (var j = 0; j < timers.length; j++) {
            timers[j].textContent = timeText;
        }
    }

    updateTimer();
    var interval = setInterval(updateTimer, 1000);
})();
</script>