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

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

{% block content %}

<img src="{{ graph_url }}" alt="Investment Graph" width="900px" style="margin-bottom: 32px;">

<form method="post">
    
    <div style="margin-bottom: 20px;">
        <label>{{ Lexicon.return_expectation_label }}</label>
        <div style="display: flex; align-items: center; max-width: 150px;">
            {{ form.return_expectation }}
            <span style="margin-left: 5px;">%</span>
        </div>
    </div>

    <div style="margin-bottom: 20px;">
        <label>{{ Lexicon.portfolio_allocation_label }}</label>
        <div id="slider_allocation_here"></div>
    </div>

    <input type="hidden" name="portfolio_allocation" id="portfolio_allocation_hidden">

</form>

<script src="{{ static 'global/mgslider.js' }}?v=14"></script>
<script>
    // Track user interactions
    window.allocationTouched = false;

    function sanitizeReturnExpectationInput(inputEl, finalize) {
        if (!inputEl) {
            return;
        }

        let raw = inputEl.value.replace(',', '.');
        const isNegative = raw.startsWith('-');
        raw = raw.replace(/-/g, '');
        raw = raw.replace(/[^0-9.]/g, '');

        const pieces = raw.split('.');
        const integerPart = pieces[0] || '';
        const decimalPart = pieces.length > 1 ? pieces.slice(1).join('').slice(0, 1) : '';

        let sanitized = (isNegative ? '-' : '') + integerPart;
        if (pieces.length > 1) {
            sanitized += '.' + decimalPart;
        }

        if (finalize) {
            if (sanitized === '-' || sanitized === '') {
                sanitized = '';
            } else if (sanitized.endsWith('.')) {
                sanitized = sanitized.slice(0, -1);
            }
        }

        inputEl.value = sanitized;
    }

    function setupReturnExpectationInput(inputEl) {
        if (!inputEl) {
            return;
        }

        inputEl.setAttribute('step', '0.1');
        inputEl.setAttribute('inputmode', 'decimal');

        inputEl.addEventListener('input', () => sanitizeReturnExpectationInput(inputEl, false));
        inputEl.addEventListener('blur', () => sanitizeReturnExpectationInput(inputEl, true));
    }

    document.addEventListener("DOMContentLoaded", function () {
        const returnExpectationInput = document.querySelector('input[name="return_expectation"]');
        setupReturnExpectationInput(returnExpectationInput);

        const slider = new mgslider("portfolio_allocation_hidden", 0, 100, 1);
        slider.recall = false;
        slider.print(document.getElementById("slider_allocation_here"));

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

        slider.feedback = function (val) {
            window.allocationTouched = true;
            document.getElementById("portfolio_allocation_hidden").value = val;
            updateSliderColor(val);
        };
    });

    function validateInvestmentForm() {
        // Hide any existing errors
        const existingError = document.querySelector('.alert-danger');
        if (existingError) {
            existingError.remove();
        }

        // Check return expectation
        const returnExpectation = document.querySelector('input[name="return_expectation"]');
        if (!returnExpectation || returnExpectation.value.trim() === '') {
            showValidationError('Please enter your return expectation.');
            return false;
        }

        sanitizeReturnExpectationInput(returnExpectation, true);
        const value = returnExpectation.value.trim();
        const normalized = value.replace(',', '.');
        const oneDecimalOrInteger = /^-?\d+(?:\.\d)?$/;
        if (!oneDecimalOrInteger.test(normalized)) {
            showValidationError('Return expectation must be a number with at most one decimal place.');
            return false;
        }
        returnExpectation.value = normalized;

        // Check allocation slider
        if (!window.allocationTouched) {
            showValidationError('Please move the slider to set your portfolio allocation.');
            return false;
        }

        return true;
    }

    function showValidationError(message) {
        const form = document.querySelector('form');
        const errorDiv = document.createElement('div');
        errorDiv.className = 'alert alert-danger';
        errorDiv.role = 'alert';
        errorDiv.textContent = message;
        form.insertBefore(errorDiv, form.firstChild);
        
        // Scroll to the top of the form
        form.scrollIntoView({ behavior: 'smooth', block: 'start' });
        
        // Fallback for browsers that don't support scrollIntoView well
        setTimeout(() => {
            const cardBody = document.querySelector('.card-body');
            if (cardBody) {
                cardBody.scrollTop = 0;
            }
            window.scrollTo({ top: 0, behavior: 'smooth' });
        }, 100);
    }
</script>

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

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