{% extends "global/Page.html" %}
{% load otree static %}


{% block content %}

<style>
    .slider-page {
        max-width: 700px;
        margin: 40px auto;
        text-align: center;
    }

    .slider-instructions {
        margin-bottom: 20px;
    }

    .slider-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        margin-top: 30px;
    }

    .slider-track {
        position: relative;
        width: 350px;
    }

    #slider_input {
        width: 100%;
    }

    .slider-bubble {
        position: absolute;
        top: -28px;
        transform: translateX(-50%);
        padding: 2px 6px;
        border-radius: 4px;
        background: rgba(0, 0, 0, 0.8);
        color: #fff;
        font-size: 0.85rem;
        white-space: nowrap;
    }

    .slider-target {
        font-size: 1rem;
        text-align: left;
        min-width: 120px;
    }
/* hide oTree default timer bar */
.otree-timer {
    display: none !important;
}

/* same top-right box design as your reference */
#end-countdown {
    position: fixed;
    top: 8px;
    right: 12px;
    background: rgba(255, 255, 255, 0.95);
    padding: 4px 8px;
    border-radius: 6px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    display: block; /* always visible */
}

#end-countdown-number {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
}

</style>

<div class="slider-page">
    <div class="slider-instructions">
        <p>
            Ajustez le curseur pour qu'il atteigne la valeur cible indiquée à droite.
        </p>

    </div>

    <div class="slider-wrapper">
        <div class="slider-track">
            <!-- slider itself: ALWAYS start at 50 -->
            <input
                id="slider_input"
                type="range"
                name="slider_value"
                min="{{ min_value }}"
                max="{{ max_value }}"
                value="50"
            >

            <!-- bubble showing the current value, above the thumb -->
            <div id="slider_bubble" class="slider-bubble">
                50
            </div>
        </div>

        <!-- target on the right (random each round from Python) -->
        <div class="slider-target">
            Cible&nbsp;: <span>{{ target }}</span>
        </div>
    </div>
</div>

<div id="end-countdown">
    <span id="end-countdown-number">0:00</span>
</div>
<div style="text-align:right;">
      {{ next_button }}
</div>

<script>
    (function () {
        var slider = document.getElementById('slider_input');
        var bubble = document.getElementById('slider_bubble');

        if (!slider || !bubble) return;

        function updateBubble() {
            var val = Number(slider.value);
            var min = Number(slider.min);
            var max = Number(slider.max);
            var percent = (val - min) / (max - min);

            bubble.style.left = (percent * 100) + '%';
            bubble.textContent = val;
        }

        updateBubble();
        slider.addEventListener('input', updateBubble);

        // Hide / disable the Next button so they cannot advance manually
        var btn =
            document.querySelector('button.otree-btn-next') ||
            document.querySelector('button[type="submit"]') ||
            document.querySelector('button.btn-primary');

        if (btn) {
            btn.style.display = 'none';
            btn.disabled = true;
        }
    })();
    // ===== OVERALL APP TIMER (always visible, synced to slider_start_time) =====
var TOTAL = {{ total_time }};
var elapsedAtRender = {{ elapsed_at_render }};
var jsPageLoadTime = Date.now();

var endNumber = document.getElementById('end-countdown-number');

function pad2(n) {
    return (n < 10) ? ('0' + n) : String(n);
}

function updateGlobalCountdown() {
    var extraElapsed = Math.floor((Date.now() - jsPageLoadTime) / 1000);
    var elapsed = elapsedAtRender + extraElapsed;
    var remaining = TOTAL - elapsed;
    if (remaining < 0) remaining = 0;

    var m = Math.floor(remaining / 60);
    var s = remaining % 60;

    if (endNumber) {
        endNumber.textContent = m + ':' + pad2(s);
    }
}

updateGlobalCountdown();
setInterval(updateGlobalCountdown, 1000);
</script>

{% endblock %}