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

{% block title %}
    {{ Lexicon.slider_title }}
    <link rel="stylesheet" href="{% static 'global/css/basic_slider.css' %}?v=14"/>
{% endblock %}

{% block content %}

<div class="container">
    {% if is_example %}
        <p>{{ Lexicon.slider_instruction_preamble_test | safe }}</p>
    {% else %}
        <p>{{ Lexicon.slider_instruction_preamble_real | safe }}</p>
    {% endif %}
    
    <p>{{ Lexicon.slider_instruction | safe }}</p>
    <div id="sliders_here"></div>

    <div class="bottom-row">
        <div class="interactive-text">
            <p id="interactive-feedback"></p>
        </div>
        <div class="static-image">
            <img src="{{ static 'global/lottery.png' }}" alt="Illustration">
        </div>
    </div>
</div>

<script src="{{ static 'global/mgslider.js' }}?v=14"></script>

<script>
    const lang = "{{ lang }}";

    {% if lang == 'fr' %}
        const decimalSeparator = ",";
    {% else %}
        const decimalSeparator = ".";
    {% endif %}

    const feedbackTemplate = `{{ Lexicon.feedback_template | safe }}`;

    const fmt = x => x.toFixed(1).replace('.', decimalSeparator);

    function updateSliderColor(val) {
    const sliderEl = document.getElementById(slider1.id());
    const percent = (val - slider1.min) / (slider1.max - slider1.min) * 100;
    sliderEl.style.backgroundImage = `linear-gradient(to right, #1e5bff 0%, #1e5bff ${percent}%, #ccc ${percent}%, #ccc 100%)`;
    }

    function generateFeedback(val) {
        const invested = val;
        const uninvested = {{ endowment }} - invested;
        const goodReturn = {{ good_return }};
        const badReturn = {{ bad_return }};

        const gainAmt = invested * goodReturn;
        const lossAmt = invested * badReturn;
        const gain = invested * (goodReturn - 1);
        const loss = invested * (1 - badReturn);
        const totalGain = uninvested + gainAmt;
        const totalLoss = uninvested + lossAmt;

        return feedbackTemplate
            .replace('{invested}', invested)
            .replaceAll('{gain_amt}', fmt(gainAmt))
            .replaceAll('{loss_amt}', fmt(lossAmt))
            .replaceAll('{gain}', fmt(gain))
            .replaceAll('{loss}', fmt(loss))
            .replaceAll('{uninvested}', uninvested)
            .replaceAll('{total_gain}', fmt(totalGain))
            .replaceAll('{total_loss}', fmt(totalLoss));
    }

    // Track slider interaction
    window.lotterySliderTouched = false;

    $(document).ready(function () {
    slider1 = new mgslider("investment", 0, 100, 1);
    slider1.recall = false;
    slider1.print(document.getElementById("sliders_here"));
    updateSliderColor(slider1.value());
    
   
    
    const fmt = x => x.toFixed(1).replace('.', decimalSeparator);

    slider1.feedback = function(val) {
        window.lotterySliderTouched = true;

        document.getElementById("interactive-feedback").innerHTML = generateFeedback(val);
        updateSliderColor(val);
        return "";
    };


});

</script>

<script>
    function validateLotteryForm() {
        const lang = "{{ lang }}";
        
        if (!window.lotterySliderTouched) {
            showValidationError(
                lang === 'fr' ? 
                'Veuillez déplacer le curseur pour choisir votre investissement' : 
                'Please move the slider to choose your investment',
                lang
            );
            return false;
        }
        
        clearValidationError();
        return true;
    }
    
    function showValidationError(message, lang) {
        clearValidationError();
        
        const errorDiv = document.createElement('div');
        errorDiv.id = 'client-validation-error';
        errorDiv.className = 'alert alert-danger';
        errorDiv.style.marginBottom = '20px';
        errorDiv.innerHTML = '<strong>' + message + '</strong>';
        
        const container = document.querySelector('.container');
        container.insertBefore(errorDiv, container.firstChild);
        
        errorDiv.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    }
    
    function clearValidationError() {
        const existingError = document.getElementById('client-validation-error');
        if (existingError) {
            existingError.remove();
        }
    }
</script>

{# Hidden submit button to allow form submission from footer #}
<button id="lottery-submit-btn" type="submit" style="display:none;"></button>
{% endblock %}

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