{% block title %}
Seven questions
{% endblock %}

{% block content %}

{{ if session.config.development }}
    <button class="btn btn-danger otree-btn-next" style="float: right; position: relative; z-index: 10;">Skip</button>
{{ endif }}

<style>
    #policyCarousel .card-body .form-check:last-child {
        margin-bottom: 0;
    }
</style>

<div class="container">
    <p>On this screen, we will ask you seven questions. In each question, something happens to someone, without their knowledge. We ask you to judge whether they are made better off or worse off, even though they are never aware of it. There are no right or wrong answers&mdash;we are interested in your genuine opinions.</p>

    <!-- Progress indicator -->
    <p class="text-muted text-center mb-2" id="carouselProgress">Question 1 of 7</p>

    <!-- Carousel -->
    <div id="policyCarousel" class="carousel slide" data-bs-interval="false" data-bs-wrap="false">

        <div class="carousel-inner">

            {% for q in questions %}
            <div class="carousel-item {{ if q.display_num == 1 }}active{{ endif }}">
                <div class="card">
                    <div class="card-body">
                        <svg class="float-end ms-3 mb-2" width="108" height="108" viewBox="0 0 108 108" style="flex-shrink:0;">
                            <rect width="108" height="108" rx="12" fill="{{ q.color }}"/>
                            <text x="54" y="69" text-anchor="middle" font-size="48">{{ q.emoji }}</text>
                        </svg>
                        <h6 class="card-title">{{ q.title }} {{ q.display_num }}</h6>
                        {% for para in q.paragraphs %}
                        <p>{{ para }}</p>
                        {% endfor %}
                        <p class="fw-bold">{{ q.prompt }}</p>
                        {% for val, label in policy_choices %}
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="{{ q.field }}" value="{{ val }}">
                            <label class="form-check-label">{{ label }}</label>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
            {% endfor %}

        </div><!-- /carousel-inner -->

        <!-- Validation warning -->
        <div class="alert alert-danger mt-2 py-2 text-center" id="validationWarning" style="display: none;">
            Please select an answer before continuing.
        </div>

        <!-- Navigation buttons -->
        <div class="d-flex justify-content-between mt-3">
            <button type="button" class="btn btn-outline-secondary" id="prevBtn" disabled>&laquo; Previous</button>
            <button type="button" class="btn btn-outline-primary" id="nextSlideBtn">Next question &raquo;</button>
        </div>

    </div><!-- /carousel -->

    <div class="text-end mt-3" id="submitContainer" style="display: none;">
        <button class="btn btn-primary btn-large" id="submitBtn">Next</button>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    var carousel = document.getElementById('policyCarousel');
    var bsCarousel = new bootstrap.Carousel(carousel, {interval: false, wrap: false});
    var prevBtn = document.getElementById('prevBtn');
    var nextSlideBtn = document.getElementById('nextSlideBtn');
    var submitContainer = document.getElementById('submitContainer');
    var submitBtn = document.getElementById('submitBtn');
    var progressText = document.getElementById('carouselProgress');
    var validationWarning = document.getElementById('validationWarning');
    var items = Array.from(carousel.querySelectorAll('.carousel-item'));
    var totalSlides = items.length;
    var devMode = {{ session.config.development | json }};

    // Measure the tallest card and lock the height
    function lockCardHeight() {
        var cards = carousel.querySelectorAll('.carousel-item .card');
        var maxH = 0;
        // Temporarily show all items to measure
        items.forEach(function(item) { item.classList.add('active'); });
        cards.forEach(function(card) {
            card.style.minHeight = '';
            var h = card.offsetHeight;
            if (h > maxH) maxH = h;
        });
        // Restore: only first active
        items.forEach(function(item, i) {
            if (i > 0) item.classList.remove('active');
        });
        cards.forEach(function(card) {
            card.style.minHeight = maxH + 'px';
        });
    }
    lockCardHeight();
    window.addEventListener('resize', lockCardHeight);

    function getActiveIndex() {
        var active = carousel.querySelector('.carousel-item.active');
        return items.indexOf(active);
    }

    function currentSlideAnswered() {
        var active = carousel.querySelector('.carousel-item.active');
        return active.querySelector('input[type="radio"]:checked') !== null;
    }

    function allAnswered() {
        for (var i = 0; i < items.length; i++) {
            if (!items[i].querySelector('input[type="radio"]:checked')) return false;
        }
        return true;
    }

    function hideWarning() {
        validationWarning.style.display = 'none';
    }

    function updateControls() {
        var idx = getActiveIndex();
        prevBtn.disabled = (idx === 0);
        progressText.textContent = 'Question ' + (idx + 1) + ' of ' + totalSlides;
        hideWarning();

        if (idx === totalSlides - 1) {
            nextSlideBtn.style.display = 'none';
            submitContainer.style.display = '';
        } else {
            nextSlideBtn.style.display = '';
            submitContainer.style.display = 'none';
        }
    }

    prevBtn.addEventListener('click', function() {
        hideWarning();
        bsCarousel.prev();
    });

    nextSlideBtn.addEventListener('click', function() {
        if (!devMode && !currentSlideAnswered()) {
            validationWarning.style.display = '';
            return;
        }
        hideWarning();
        bsCarousel.next();
    });

    // Intercept form submit (the "Next" page button)
    submitBtn.addEventListener('click', function(e) {
        if (!devMode && !allAnswered()) {
            e.preventDefault();
            // Find first unanswered and go there
            for (var i = 0; i < items.length; i++) {
                if (!items[i].querySelector('input[type="radio"]:checked')) {
                    bsCarousel.to(i);
                    setTimeout(function() {
                        validationWarning.style.display = '';
                    }, 400);
                    return;
                }
            }
        }
    });

    // Hide warning when a radio is selected on the current slide
    carousel.addEventListener('change', function(e) {
        if (e.target.type === 'radio') hideWarning();
    });

    carousel.addEventListener('slid.bs.carousel', updateControls);
    updateControls();
});
</script>

{% endblock %}