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

{% block content %}

<style>
    .stim-img {
        display: block;
        margin: 0 auto;
        /* cancel any global responsive img rules */
        width: auto !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;
        margin-top: 15px;
    }

    .answers-block {
        text-align: center;
        margin-top: 6px;
    }

    .answer-radios {
        display: inline-flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px 18px;
        font-size: 0.95rem;
        margin-top: 8px;
    }

    .answer-radios label {
        cursor: pointer;
    }

    .answer-radios input {
        margin-right: 4px;
    }

    .timer-msg {
        text-align: center;
        margin-top: 10px;
        font-size: 0.9rem;
        color: #555;
    }

    .otree-timer {
        display: none !important;
    }

    /* countdown box: fixed at top-right of the viewport */
    #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: none;
    }

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

    /* ===== layout: images left, answers right ===== */
    .layout-wrap {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        gap: 40px;                 /* CHANGE HERE if you want more/less space between columns */
        width: 120%;
    }

    .layout-left {
        text-align: center;
    }

    .layout-right {
        width: 700px;              /* CHANGE HERE to make the right column wider/narrower */
        text-align: center;
        margin-top: 60px;
    }

    .layout-right .answers-block {
        text-align: center;
        margin-top: 0;
    }

    .layout-right .answer-radios {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;

        gap: 25px;                 /* CHANGE HERE to increase/decrease vertical spacing between answers */

        justify-content: flex-start;
        align-items: center;
        margin-top: 15px;          /* CHANGE HERE if you want the whole list lower/higher */
    }

    /* reduce margin-top only for the first image */
    .layout-left img.stim-img:first-of-type {
        margin-top: -20px;         /* CHANGE HERE to move first image up/down (more negative = higher) */
    }

    .image-separator {
        border: none;
        border-top: 1px solid #bbb;  /* light grey instead of black */
        width: 80%;                 /* shorter line */
        margin: 6px auto;           /* tighter spacing */
    }



    /* ===== NEXT button placement =====
       Fixed at bottom-right of the viewport.
       We set BOTH right and top in JS (top aligns with bottom of 2nd image).
       We also hard-reset left/margins so it never "centers" due to other CSS.
    */
    .btn-next-float {
        position: fixed !important;
        right: 18px !important;    /* CHANGE HERE to move button left/right */
        left: auto !important;     /* IMPORTANT: prevent centering rules */
        margin: 0 !important;      /* IMPORTANT: prevent auto-centering */
        z-index: 9998;
    }

    /* optional: stack on small screens */
    @media (max-width: 900px) {
        .layout-wrap {
            flex-direction: column;
            align-items: center;
        }

        .layout-right {
            width: auto;
            text-align: center;
        }

        .layout-right .answers-block {
            text-align: center;
        }

        .layout-right .answer-radios {
            align-items: center;
        }

        /* IMPORTANT FIX:
           Do NOT turn the button back to static on small screens,
           otherwise it goes back into the layout and can appear centered.
           If you really want different behavior on small screens, change it here,
           but don't set position: static.
        */
        /* .btn-next-float { position: static !important; } */
    }
</style>

<div class="layout-wrap">

    <div class="layout-left">
        <!-- Question image at natural size -->
        <img
            src="{% static q_path %}"
            alt="Question {{ item_id }}"
            class="stim-img"
            id="img-question"
        >

        <hr class="image-separator">
        <!-- Answers image at natural size -->
        <img
            src="{% static a_path %}"
            alt="Réponses {{ item_id }}"
            class="stim-img"
            id="img-answers"
        >
    </div>

    <div class="layout-right">
        <div class="answers-block">
            <p style="margin: 0 0 8px 0;">
                Choisissez la lettre correspondant à la bonne réponse :
            </p>

            <div class="answer-radios">
                <label><input type="radio" name="answer" value="1">A</label>
                <label><input type="radio" name="answer" value="2">B</label>
                <label><input type="radio" name="answer" value="3">C</label>
                <label><input type="radio" name="answer" value="4">D</label>
                <label><input type="radio" name="answer" value="5">E</label>
                <label><input type="radio" name="answer" value="6">F</label>
                <label><input type="radio" name="answer" value="7">G</label>
                <label><input type="radio" name="answer" value="8">H</label>
                <label><input type="radio" name="answer" value="9">I</label>
                <label><input type="radio" name="answer" value="10">J</label>
                <label><input type="radio" name="answer" value="11">K</label>
                <label><input type="radio" name="answer" value="12">L</label>
            </div>
        </div>
    </div>

</div>

<div id="wait-msg" class="timer-msg"></div>

<!-- big numeric countdown, last 30 seconds -->
<div id="end-countdown">
    <span id="end-countdown-number">30</span>
</div>

{% next_button %}

<script>
    (function() {
        // ===== GLOBAL COUNTDOWN SYNCED TO SERVER CONSTANT =====
        var TOTAL = {{ total_time }};
        var elapsedAtRender = {{ elapsed_at_render }};
        var jsPageLoadTime = Date.now();

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

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

            if (remaining <= 0) {
                if (endContainer && endNumber) {
                    endContainer.style.display = 'block';
                    endNumber.textContent = 0;
                }
                return;
            }

            if (remaining <= 30 && remaining >= 0 && endContainer && endNumber) {
                endContainer.style.display = 'block';
                endNumber.textContent = remaining;
            }
        }

        updateGlobalCountdown();
        setInterval(updateGlobalCountdown, 1000);

        // ===== 8-SECOND MINIMUM VIEW TIME PER PAGE =====
        var minViewTime = 10;
        var waitMsg = document.getElementById('wait-msg');

        // IMPORTANT FIX:
        // oTree sometimes renders next as <input type="submit"> depending on templates.
        // Add that fallback so we always grab the real next control.
        var btn =
            document.querySelector('button.otree-btn-next') ||
            document.querySelector('button[type="submit"]') ||
            document.querySelector('input[type="submit"]') ||
            document.querySelector('button.btn-primary');

        var allowSubmit = false;

        if (form) {
            form.addEventListener('submit', function (e) {
                if (!allowSubmit) {
                    e.preventDefault();
                }
            });
        }

        var remainingWait = minViewTime;

        if (btn) {
            btn.disabled = true;
        }

        if (waitMsg) {
            waitMsg.textContent =
                "Vous pourrez continuer dans " + remainingWait + " secondes.";
        }

        var waitInterval = setInterval(function() {
            remainingWait -= 1;
            if (remainingWait <= 0) {
                clearInterval(waitInterval);
                allowSubmit = true;
                if (btn) {
                    btn.disabled = false;
                }
                if (waitMsg) {
                    waitMsg.textContent = "";
                }
            } else {
                if (waitMsg) {
                    waitMsg.textContent =
                        "Vous pourrez continuer dans " + remainingWait + " secondes.";
                }
            }
        }, 1000);

        // ===== Position Next button bottom-right aligned with bottom of 2nd image =====
        var imgAnswers = document.getElementById('img-answers');

        function positionNextButton() {
            if (!btn || !imgAnswers) return;

            // force fixed positioning class every time
            btn.classList.add('btn-next-float');

            // Some templates apply centering via inline styles or CSS; hard-reset them.
            btn.style.left = 'auto';
            btn.style.margin = '0';

            var rect = imgAnswers.getBoundingClientRect();
            var bottomY = rect.bottom;

            // Align bottom of button with bottom of image
            var btnRect = btn.getBoundingClientRect();
            var top = bottomY - btnRect.height;

            // Keep it within viewport with a small margin
            var minTop = 8;
            var maxTop = window.innerHeight - btnRect.height - 8;
            if (top < minTop) top = minTop;
            if (top > maxTop) top = maxTop;

            btn.style.top = Math.round(top) + 'px';
        }

        // run after images load (important)
        function onReadyPosition() {
            positionNextButton();
            window.addEventListener('resize', positionNextButton);

            // Extra robustness: if fonts load late or layout shifts, re-run shortly after
            setTimeout(positionNextButton, 50);
            setTimeout(positionNextButton, 250);
        }

        if (imgAnswers && !imgAnswers.complete) {
            imgAnswers.addEventListener('load', onReadyPosition);
        } else {
            onReadyPosition();
        }
    })();
</script>

{% endblock %}