@php
    // Using Carbon to parse server times and convert to milliseconds
    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

<div class="bf-countdown-bar" style="display:block; width:100%; box-sizing:border-box;">
    <div style="
        background: #b0dacd;
        color: #000000;
        font-weight: 700;
        padding: 10px 16px;
        text-align: center;
        font-family: Arial, sans-serif;
        font-size: 20px;
        padding:10px 0px !important;
    ">
        <span class="bf-message" style="margin-right:12px;">
            <strong style="font-weight:700;">Black Friday</strong>
            <span style="font-weight:400 !important;"> Sale is Live Now | Ends in</span>
        </span>
        <span class="bf-timer"
            style="
                    background: #d7ece6;
                    color: #000000;
                    padding: 10px 15px;
                    border-radius: 10px;
                    font-weight: bold;
                    display: inline-block;
            "
            aria-live="polite">
        </span>
    </div>
</div>

<div class="header-top-sticky bf-countdown-bar" style=" width:100%; box-sizing:border-box;">
    <div style="
        background: #b0dacd;
        color: #000000;
        font-weight: 700;
        padding: 10px 16px;
        text-align: center;
        font-family: Arial, sans-serif;
        font-size: 20px;
        padding:10px 0px !important;
    ">
        <span class="bf-message" style="margin-right:12px;">
            <strong style="font-weight:700;">Black Friday</strong>
            <span style="font-weight:400 !important;"> Sale is Live Now | Ends in</span>
        </span>
        <span class="bf-timer"
            style="
                    background: #d7ece6;
                    color: #000000;
                    padding: 10px 15px;
                    border-radius: 10px;
                    font-weight: bold;
                    display: inline-block;
            "
            aria-live="polite">
        </span>
    </div>
</div>

<script>
(function(){
    // End and start timestamps sent from server (ms)
    var saleStart = parseInt(@json($start), 10);
    var saleEnd   = parseInt(@json($end), 10);
    var serverNow = parseInt(@json($nowMs), 10);

    // Show the bar (we show/hide based on times)
    var bar = document.getElementsByClassName('bf-countdown-bar');
    var msg = document.getElementsByClassName('bf-message');
    var timer = document.getElementsByClassName('bf-timer');

    // Maintain a local clock offset between client and server
    var clientNow = Date.now();
    var offset = serverNow - clientNow; // server - client

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

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

        var s = Math.floor(ms / 1000);
        var days = Math.floor(s / 86400);  s %= 86400;
        var hours = Math.floor(s / 3600);  s %= 3600;
        var mins = Math.floor(s / 60);
        var secs = s % 60;

        // Add leading zero to seconds if <10
        secs = secs < 10 ? '0' + secs : secs;

        return days + 'd : ' + hours + 'h : ' + mins + 'm : ' + secs + 's';
    }

    function update() {
        var n = now();
        var messageSuffix = '';
        var timerText = '';

        if (n < saleStart) {
            // before start -> show starts in
            messageSuffix = ' Starts In';
            timerText = formatTime(saleStart - n);
        } else if (n >= saleStart && n <= saleEnd) {
            // live
            messageSuffix = ' is Live Now | Ends in';
            timerText = formatTime(saleEnd - n);
        } else {
            // ended -> hide bar or show ended message
            // Option A: hide bar
            for (var i = 0; i < bar.length; i++) {
                bar[i].style.display = 'none';
            }
            // Option B: show "Sale ended" uncomment below if you prefer visible ended message
            // messageSuffix = ' Ended';
            // timerText = '';
            clearInterval(intervalId);
            return; // Exit early if ended
        }

        // Construct HTML to preserve bold on "Black Friday" and normal weight on rest
        var messageHTML = '<strong style="font-weight:700;">Black Friday</strong><span style="font-weight:400 !important;"> Sale' + messageSuffix + '</span>';

        // Update all elements if not ended
        for (var i = 0; i < bar.length; i++) {
            bar[i].style.display = 'block';
        }
        for (var j = 0; j < msg.length; j++) {
            msg[j].innerHTML = messageHTML;
        }
        for (var k = 0; k < timer.length; k++) {
            timer[k].textContent = timerText;
        }
    }

    // Start updates
    update();
    var intervalId = setInterval(update, 1000);
})();
</script>