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

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


{% block content %}

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

<p id="treatment-info-output"></p>

<script>
    const lang = "{{ lang }}";
    const decimalSeparator = (lang === 'fr') ? "," : ".";
    
    const fmt1 = x => x.toFixed(1).replace('.', decimalSeparator);
    const fmt0 = x => x.toFixed(0).replace('.', decimalSeparator);

    const blockType = "{{ block_type }}";
    const optimalAllocation = parseFloat("{{ optimal_allocation }}");
    const bestForecast = parseFloat("{{ best_forecast }}");
    const advisorAllocationHeader = "{{ Lexicon.advisor_info|safe }}";
    const advisorAdviceHeader = "{{ Lexicon.advisor_advice|safe }}";

    const blockTemplates = {
        'treatment_1': `{{ Lexicon.treatment_autonomous|safe }}`,
        'treatment_2': `{{ Lexicon.treatment_allocation|safe }}`,
        'treatment_3': `{{ Lexicon.treatment_allocation_forecast|safe }}`
    };

    function generateTreatmentInfo(){
        if (blockType === 'no-treatment' || !blockTemplates[blockType]) return '';
        
        let template = blockTemplates[blockType];
        if (template.includes('{allocation}')) {
            template = template.replace('{allocation}', `<strong>${fmt0(optimalAllocation)}</strong>`);
        }
        if (template.includes('{best_forecast}')) {
            template = template.replace('{best_forecast}', `<strong>${fmt1(bestForecast)}</strong>`);
        }
        const header = (blockType === 'treatment_1') ? advisorAllocationHeader : advisorAdviceHeader;
        return `<strong>${header}</strong> ` + template;
    }

    document.addEventListener("DOMContentLoaded", () => {
        document.getElementById("treatment-info-output").innerHTML = generateTreatmentInfo();
    });
</script>

<form method="post">
    {% if show_form %}
    <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>

    {% if show_allocation %}
    <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">
    {% endif %}
    
    <script src="{{ static 'global/mgslider.js' }}?v=14"></script>
  {% if show_allocation %}
  <script>
      $(document).ready(function () {
          // Track if allocation slider has been interacted with
          window.allocationTouched = false;
          
          // Create the allocation slider using the hidden input for form submission.
          var slider1 = new mgslider("portfolio_allocation_hidden", 0, 100, 1);
          slider1.recall = false;
          slider1.print(document.getElementById("slider_allocation_here"));

          // Function to update the slider color dynamically.
          function updateSliderColor(val) {
              const sliderEl = document.querySelector(`#${slider1.id()}`);
              if (sliderEl) {
                  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%)`;
              }
          }

          // Update the hidden input and the slider color dynamically as the slider moves.
          slider1.feedback = function(val) {
              window.allocationTouched = true;
              document.getElementById("portfolio_allocation_hidden").value = val;
              updateSliderColor(val);
          };
      });
  </script>
  {% endif %}
  {% endif %}

  {# Front-end validation #}
  <script>
      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));
      }

      const returnExpectationInput = document.querySelector('input[name="return_expectation"]');
      setupReturnExpectationInput(returnExpectationInput);

      function validateInvestmentForm() {
          const showForm = {% if show_form %}true{% else %}false{% endif %};
          const showAllocation = {% if show_allocation %}true{% else %}false{% endif %};
          const lang = "{{ lang }}";
          
          if (!showForm) {
              return true; // No form to validate
          }
          
          // Clear any previous errors
          clearValidationError();
          
          // Validate return expectation (first priority)
          const returnExpectation = document.querySelector('input[name="return_expectation"]');
          if (returnExpectation) {
              sanitizeReturnExpectationInput(returnExpectation, true);
              const value = returnExpectation.value.trim();
              if (value === '') {
                  showValidationError(lang === 'fr' ? 
                      'Veuillez entrer votre rendement attendu' : 
                      'Please enter your expected return');
                  return false;
              }

              const normalized = value.replace(',', '.');
              const oneDecimalOrInteger = /^-?\d+(?:\.\d)?$/;
              if (!oneDecimalOrInteger.test(normalized)) {
                  showValidationError(lang === 'fr' ? 
                      'Le rendement attendu doit être un nombre avec au plus une décimale' : 
                      'Expected return must be a number with at most one decimal place');
                  return false;
              }

              returnExpectation.value = normalized;
          }
          
          // Validate allocation slider (second priority, if shown)
          if (showAllocation) {
              const allocationValue = document.getElementById('portfolio_allocation_hidden');
              if (!window.allocationTouched || !allocationValue || allocationValue.value === '') {
                  showValidationError(lang === 'fr' ? 
                      'Veuillez définir votre allocation de portefeuille en utilisant le curseur' : 
                      'Please set your portfolio allocation using the slider');
                  return false;
              }
          }
          
          return true;
      }
      
      function showValidationError(errorMessage) {
          // 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.innerHTML = '<strong>' + errorMessage + '</strong>';
          
          // Insert at the top of the form
          const form = document.querySelector('form');
          form.insertBefore(errorDiv, form.firstChild);
          
          // Scroll to error
          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="investment-submit-btn" type="submit" style="display:none;"></button>
</form>
{% 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 %}