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

{% block title %}
<div id="header" class="card mb-2">
  <div class="card-body p-2">

  </div>
</div>
{% endblock %}

{% block content %}

<p>
  <span style="font-size: 1.2em;">
    <b>Bitte beantworten Sie noch ein paar Fragen zur vorherigen Entscheidungsaufgabe.</b>
  </span>
</p>

<div class="card mt-2 mb-4">
  <br>

  <p>
    <b>Welche Merkmale haben Ihre Wahl des Fortbewegungsmittels am stärksten beeinflusst?</b><br>
    (Bitte ordnen Sie diese von 1 bis 3, wobei 1 das wichtigste Merkmal ist, 2 das zweitwichtigste, ...)
  </p>

  <div style="display: flex; flex-direction: column; gap: 12px;">
    <div style="display: flex; align-items: center; gap: 20px;">
      <span>1:</span>
      {{ form.DCE_MIA1 }}
    </div>

    <div style="display: flex; align-items: center; gap: 20px;">
      <span>2:</span>
      {{ form.DCE_MIA2 }}
    </div>

    <div style="display: flex; align-items: center; gap: 20px;">
      <span>3:</span>
      {{ form.DCE_MIA3 }}
    </div>
  </div>

  <br><br>
  <b>Wie realistisch war die beschriebene Situation für Sie?</b>

  <div class="slider-wrap">
    <input type="hidden" name="DCE_REALITY" id="hidden_DCE_REALITY">

    <!-- NOTE: no name here; hidden field submits. Also no value attr (prevents explicit default). -->
    <input type="range"
           id="id_DCE_REALITY"
           min="0"
           max="10"
           step="1"
           class="slider">

    <div class="slider-labels">
      <span>Gar nicht realistisch</span>
      <span>Sehr realistisch</span>
    </div>
  </div>

  <br><br>
    <b>In wiefern stimmen Sie der folgenden Aussage zu oder nicht zu?</b>
    <b>Ich habe bereits Urlaube gemacht, die ähnlich der vorher beschriebenen Situation waren.</b>

  <div class="slider-wrap">
    <input type="hidden" name="DCE_REALITY2" id="hidden_DCE_REALITY2">

    <!-- NOTE: no name here; hidden field submits. Also no value attr (prevents explicit default). -->
    <input type="range"
           id="id_DCE_REALITY2"
           min="0"
           max="10"
           step="1"
           class="slider">

    <div class="slider-labels">
      <span>Stimme überhaupt nicht zu</span>
      <span>Stimme voll und ganz zu</span>
    </div>
  </div>

  <br>

  <div class="card-body p-2">
    {% formfield player.DCE_OA %}

  </div>

{% next_button %}


<style>
  .btn-primary {
    background-color: #003360 !important;
    border-color: #003360 !important;
  }
  .btn-primary:hover {
    background-color: #001f3f !important;
    border-color: #001f3f !important;
  }

  .slider-wrap {
    width: 90%;
    max-width: 800px;
    margin: 6px auto 0 auto;
  }

  /* Base slider appearance (grey before interaction) */
  input[type="range"].slider {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 10px;
    border-radius: 999px;
    outline: none;
    background: #cfd8e3; /* grey pre-click */
  }

  /* WebKit track */
  input[type="range"].slider::-webkit-slider-runnable-track {
    height: 10px;
    border-radius: 999px;
    background: transparent; /* we paint the input itself */
  }

  /* Thumb normal */
  input[type="range"].slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #001f3f;
    cursor: pointer;
    margin-top: -6px;
    opacity: 1;
  }

  /* Firefox */
  input[type="range"].slider::-moz-range-track {
    height: 10px;
    border-radius: 999px;
    background: transparent;
  }

  input[type="range"].slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #001f3f;
    cursor: pointer;
    opacity: 1;
  }

  /* Hidden thumb until first interaction */
  input[type="range"].slider.unmoved::-webkit-slider-thumb { opacity: 0; pointer-events: none; }
  input[type="range"].slider.unmoved::-moz-range-thumb { opacity: 0; pointer-events: none; }

  .slider-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
    font-size: 0.95rem;
  }
</style>

<script>
  function paintSlider(el) {
    const min = Number(el.min);
    const max = Number(el.max);
    const val = Number(el.value);
    const pct = ((val - min) / (max - min)) * 100;

    el.style.background =
      `linear-gradient(to right,
        #f39200 0%,
        #f39200 ${pct}%,
        #003360 ${pct}%,
        #003360 100%)`;
  }

  function applySliderStyle(slider) {
    slider.classList.remove('unmoved');
    paintSlider(slider);
  }

  document.addEventListener('DOMContentLoaded', function () {
    const sliderIds = ['DCE_REALITY', 'DCE_REALITY2'];

    sliderIds.forEach(function (name) {
      const slider = document.getElementById(`id_${name}`);
      const hidden = document.getElementById(`hidden_${name}`);
      if (!slider || !hidden) return;

      // start hidden + grey
      slider.classList.add('unmoved');
      slider.style.background = '#cfd8e3';


      // When they interact, write value to hidden field + paint
      const commit = function () {
        hidden.value = slider.value;
        applySliderStyle(slider);
      };

      slider.addEventListener('input', commit);
      slider.addEventListener('change', commit);
      slider.addEventListener('pointerup', commit);
      slider.addEventListener('click', commit);

      // reveal thumb on pointerdown (even before value changes)
      slider.addEventListener('pointerdown', function () {
        slider.classList.remove('unmoved');
      });
    });
  });
</script>

{% endblock %}

{% block styles %}
<style xmlns="http://www.w3.org/1999/html">
  #header {
    display: block;
    font-weight: normal;
    font-size: 14px;
    text-align: right;
    background-color: #003360;
    color: white;
  }
  .table{
    width: 800px;
  }
</style>
{% endblock %}