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

{% block styles %}
<link rel="stylesheet" href="{% static 'global/css/basic_slider.css' %}">
<link rel="stylesheet" href="{% static 'global/css/confidence_mental_demand_slider.css' %}?v=1">
{% endblock %}

{% block title %}
{% if lang == 'fr' %}
Questionnaire Supplémentaire - Ronde {{ round_number }}
{% else %}
Additional Questionnaire - Round {{ round_number }}
{% endif %}
{% endblock %}

{% block content %}

<style>
/* Affective Slider CSS - Adapted from Betella & Verschure (2016) official implementation */
.AffectiveSlider {
    width: 100%;
    text-align: center;
    margin-top: 2em;
}

.emoticon_img {
    width: 110px;
    height: 110px;
    margin: 0px 20px;
    vertical-align: middle;
    display: inline-block;
}

.intensity_cue_img {
    width: 88%;
    max-width: 1200px;
    height: 60px;
    position: relative;
    top: 15px;
    display: block;
    margin: 0 auto;
}

.slider-row {
    margin-bottom: 5em;
    padding: 0 5%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

.slider-label {
    font-size: 1.0em;
    margin-bottom: 25px;
    font-weight: normal;
    text-align: center;
}

.slider-container {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    max-width: 1400px;
}

/* Cross-browser slider styling */
input[type=range]:focus {
    outline: none;
}

.AffectiveSlider input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    border: none;
    width: 88%;
    max-width: 1200px;
    margin: 0px auto;
    padding: 0px;
    background: transparent;
    display: block;
}

/* Firefox */
.AffectiveSlider input[type=range]::-moz-range-track {
    width: 100%;
    height: 24px;
    background: #ddd;
    border-radius: 12px;
    border: none;
}

.AffectiveSlider input[type=range]::-moz-range-thumb {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    background: white;
    border: 3px solid #505050;
    cursor: pointer;
}

.AffectiveSlider input[type=range]::-moz-range-thumb:hover {
    background: #505050;
    border: 2px solid white;
    box-shadow: 0px 0px 12px #212121;
}

/* Chrome/Safari/Edge */
.AffectiveSlider input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 24px;
    border: none;
    background: #ddd;
    border-radius: 12px;
}

.AffectiveSlider input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    background: white;
    border: 3px solid #505050;
    margin-top: -10px;
    cursor: pointer;
}

.AffectiveSlider input[type=range]::-webkit-slider-thumb:hover {
    background: #505050;
    border: 2px solid white;
    box-shadow: 0px 0px 12px #212121;
}

/* IE/Edge */
.AffectiveSlider input[type=range]::-ms-track {
    width: 100%;
    height: 24px;
    background: transparent;
    border-color: transparent;
    border-width: 18px 0;
    color: transparent;
}

.AffectiveSlider input[type=range]::-ms-fill-lower {
    background: #ddd;
    border-radius: 10px;
}

.AffectiveSlider input[type=range]::-ms-fill-upper {
    background: #ddd;
    border-radius: 10px;
}

.AffectiveSlider input[type=range]::-ms-thumb {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    background: white;
    border: 3px solid #505050;
    cursor: pointer;
}

.AffectiveSlider input[type=range]::-ms-thumb:hover {
    background: #505050;
    border: 2px solid white;
    box-shadow: 0px 0px 12px #212121;
}

@media (max-width: 768px) {
    .emoticon_img {
        width: 70px;
        height: 70px;
        margin: 0px 10px;
    }
    .AffectiveSlider input[type=range] {
        width: 85%;
    }
    .intensity_cue_img {
        width: 85%;
        height: 40px;
    }
    .slider-row {
        padding: 0 2%;
    }
}
</style>

{% if lang == 'fr' %}
<p style="margin-bottom: 2em;">Veuillez répondre aux questions suivantes sur votre expérience lors de ce bloc de décisions :</p>
{% else %}
<p style="margin-bottom: 2em;">Please answer the following questions about your overall experience during this block of decisions:</p>
{% endif %}

<style>
/* Hide the auto-generated form fields since we're using custom sliders */
#id_arousal_block_end, #id_valence_block_end, #id_slider_order_block_end {
    display: none;
}
/* Hide the labels for hidden fields */
label[for="id_arousal_block_end"], label[for="id_valence_block_end"], label[for="id_slider_order_block_end"], label[for="id_mental_demand_block_end"] {
    display: none;
}
/* Hide the mental demand field (we use custom slider) */
#id_mental_demand_block_end {
    display: none;
}
</style>

<form method="post" id="affective-form" action="">
    
    <div class="AffectiveSlider">
        <div id="affective-sliders-container">
            <!-- Sliders will be inserted here by JavaScript with randomized order -->
        </div>
    </div>
    
    <!-- NASA TLX Mental Demand -->
    <div class="mental-demand-slider" style="margin: 3em auto; max-width: 600px;">
        {% if lang == 'fr' %}
        <label><strong>Dans quelle mesure cette tâche était-elle mentalement exigeante?</strong></label>
        {% else %}
        <label><strong>How mentally demanding was this task?</strong></label>
        {% endif %}
        
        <div id="slider_mental_demand_here"></div>
    </div>
    
    {{ formfields }}
    
    <button id="affective-submit-btn" type="submit" style="display:none;"></button>
</form>

<script src="{{ static 'global/confidence_mental_demand_slider.js' }}?v=1"></script>
<script>
    // Track slider interactions
    window.mentalDemandTouched = false;
    
    $(document).ready(function () {
        var mentalDemandSlider = new ConfidenceMentalDemandSlider({
            hiddenInputId: "id_mental_demand_block_end",
            min: 0,
            max: 100,
            step: 5,
            widthPercent: 80,
            leftLabel: "{% if lang == 'fr' %}Faible{% else %}Low{% endif %}",
            rightLabel: "{% if lang == 'fr' %}Élevé{% else %}High{% endif %}",
            showLiveValue: false,
            onChange: function () {
                window.mentalDemandTouched = true;
            }
        });

        mentalDemandSlider.mount(document.getElementById("slider_mental_demand_here"));
    });
</script>

<script>
window.onload = function() {
    // Track affective slider interactions
    window.arousalTouched = false;
    window.valenceTouched = false;
    
    const lang = "{{ lang }}";
    const container = document.getElementById('affective-sliders-container');
    
    // Pre-render image paths using Django template tags
    const sleepyImg = "{% static 'affective_slider/AS_sleepy.png' %}";
    const wideawakeImg = "{% static 'affective_slider/AS_wideawake.png' %}";
    const unhappyImg = "{% static 'affective_slider/AS_unhappy.png' %}";
    const happyImg = "{% static 'affective_slider/AS_happy.png' %}";
    const intensityCueImg = "{% static 'affective_slider/AS_intensity_cue.png' %}";
    
    // Define slider HTML templates
    const arousalHTML = 
        '<div class="slider-row arousal-row">' +
            '<div class="slider-label">' + (lang === 'fr' ? 
                'Déplacez le curseur pour évaluer votre niveau d\'activation' : 
                'Move the slider to rate your level of Arousal') + '</div>' +
            '<div class="slider-container">' +
                '<img class="emoticon_img" src="' + sleepyImg + '" alt="Sleepy">' +
                '<div style="flex-grow: 1; max-width: 1200px;">' +
                    '<input type="range" id="AS-arousal" value="0.5" min="0" max="1" step="0.01">' +
                    '<img class="intensity_cue_img" src="' + intensityCueImg + '" alt="">' +
                '</div>' +
                '<img class="emoticon_img" src="' + wideawakeImg + '" alt="Wide-awake">' +
            '</div>' +
        '</div>';
    
    const valenceHTML = 
        '<div class="slider-row valence-row">' +
            '<div class="slider-label">' + (lang === 'fr' ? 
                'Déplacez le curseur pour évaluer votre niveau de plaisir' : 
                'Move the slider to rate your level of Pleasure') + '</div>' +
            '<div class="slider-container">' +
                '<img class="emoticon_img" src="' + unhappyImg + '" alt="Unhappy">' +
                '<div style="flex-grow: 1; max-width: 1200px;">' +
                    '<input type="range" id="AS-valence" value="0.5" min="0" max="1" step="0.01">' +
                    '<img class="intensity_cue_img" src="' + intensityCueImg + '" alt="">' +
                '</div>' +
                '<img class="emoticon_img" src="' + happyImg + '" alt="Happy">' +
            '</div>' +
        '</div>';
    
    // Randomize order (per Betella & Verschure 2016 specification)
    if (Math.random() > 0.5) {
        container.innerHTML = arousalHTML + valenceHTML;
        document.getElementById('id_slider_order_block_end').value = 'arousal_first';
    } else {
        container.innerHTML = valenceHTML + arousalHTML;
        document.getElementById('id_slider_order_block_end').value = 'valence_first';
    }
    
    // Get slider elements after insertion
    const arousalSlider = document.getElementById('AS-arousal');
    const valenceSlider = document.getElementById('AS-valence');
    
    // Update oTree hidden fields when sliders change (only on user interaction)
    arousalSlider.addEventListener('input', function() {
        window.arousalTouched = true;
        document.getElementById('id_arousal_block_end').value = this.value;
    });
    
    valenceSlider.addEventListener('input', function() {
        window.valenceTouched = true;
        document.getElementById('id_valence_block_end').value = this.value;
    });
    
    // Don't set default values - force user to interact with sliders
};
</script>

<script>
    function validateAffectiveForm() {
        const lang = "{{ lang }}";
        
        // Clear any previous errors
        clearValidationError();
        
        // Validate arousal slider (first priority)
        if (!window.arousalTouched) {
            showValidationError(lang === 'fr' ? 
                'Veuillez interagir avec le curseur d\'activation (Arousal)' : 
                'Please interact with the arousal slider', lang);
            return false;
        }
        
        // Validate valence slider (second priority)
        if (!window.valenceTouched) {
            showValidationError(lang === 'fr' ? 
                'Veuillez interagir avec le curseur de plaisir (Valence)' : 
                'Please interact with the valence slider', lang);
            return false;
        }
        
        // Validate mental demand slider (third priority)
        if (!window.mentalDemandTouched) {
            showValidationError(lang === 'fr' ? 
                'Veuillez interagir avec le curseur de demande mentale' : 
                'Please interact with the mental demand slider', lang);
            return false;
        }
        
        return true;
    }
    
    function showValidationError(errorMessage, lang) {
        // Remove any existing error display
        clearValidationError();
        
        // Create error message HTML
        const errorDiv = document.createElement('div');
        errorDiv.id = 'client-validation-error';
        errorDiv.className = 'alert alert-danger';
        errorDiv.style.marginBottom = '20px';
        errorDiv.style.marginTop = '10px';
        errorDiv.innerHTML = '<strong>' + errorMessage + '</strong>';
        
        // Insert at the top of the content area
        const form = document.getElementById('affective-form');
        if (form) {
            form.insertBefore(errorDiv, form.firstChild);
            // Scroll to top of form to see error
            form.scrollIntoView({ behavior: 'smooth', block: 'start' });
        } else {
            // Fallback: insert into content block
            const contentBlock = document.querySelector('.card-body') || document.body;
            contentBlock.insertBefore(errorDiv, contentBlock.firstChild);
            errorDiv.scrollIntoView({ behavior: 'smooth', block: 'center' });
        }
    }
    
    function clearValidationError() {
        const existingError = document.getElementById('client-validation-error');
        if (existingError) {
            existingError.remove();
        }
    }
</script>

{% endblock %}

{% block footer_buttons %}
{% if lang == 'fr' %}
  <button class="btn btn-primary" type="button" onclick="if(validateAffectiveForm()) document.getElementById('affective-submit-btn').click();">Suivant</button>
{% else %}
  <button class="btn btn-primary" type="button" onclick="if(validateAffectiveForm()) document.getElementById('affective-submit-btn').click();">Next</button>
{% endif %}
{% endblock %}