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


{% block content %}
    <p>
        <span style="font-size: 1.2em;">
        <b>Bitte beantworten Sie noch ein paar Fragen zu Ihrem Urlaub im letzten Jahr</b>
    </span>
    </p>


     <div class="card mt-2 mb-4" >
        <div class="card-body p-2">
        {% formfield player.dem_holiday_days %}
    <div id="holiday-followups">


        <hr style="width:60%; margin:30px auto;">

        {% formfield player.dem_holiday_type %}

        <br>
        <p> <b>
            Wie oft machten Sie in den <b><span id="holiday-days-text">—</span></b> Tagen Urlaub im letzten Jahr mehr als 15 Minuten lang die folgenden Arten von Bewegung?</b>

            <br>

        <div class="card-body p-2">

            {% formfield player.dem_sport_heavy_h %}
            {% formfield player.dem_sport_moderate_h %}
            {% formfield player.dem_sport_easy_h %}
        </div>


</div>
</div>
</div>


  {% next_button %}

<style>
  #holiday-followups { display: none; }
</style>

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

    /* Centered 80% width block */
    .slider-wrap {
    width: 100%;
    max-width: 1000px;
    margin: 0px auto;
  }

    /* Base slider element */
    input[type="range"].slider {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 10px;
    border-radius: 999px;
    outline: none;

    /* neutral pre-interaction background (you can set to #003360 if you prefer) */
    background: #cfd8e3;
  }

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

  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;
  }

  /* 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;
  }

  /* Hide 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-scale {
    display:flex;
    justify-content:space-between;
    font-size: 12px;
    margin-top: 4px;
  }
  .slider-anchors {
    display:flex;
    justify-content:space-between;
    font-size: 12px;
    margin-top: 2px;
  }

/* center labels */
.mid-label {
  position: absolute;
  transform: translateX(+30%);
}

/* approximate slider positions */
.left-shift  { left: 29%; }
.right-shift { left: 65%; }

 .info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: 8px;
    border-radius: 50%;
    border: 1px solid #003360;
    background: white;
    color: #003360;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
}

.info-icon:hover {
    background: #f39200;
    border-color: #f39200;
    color: white;
}

/* Modal */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.modal-overlay.show {
    display: flex;
}

.modal-card {
    width: min(600px, 100%);
    background: white;
    border-radius: 12px;
    padding: 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    position: relative;
}

.modal-close {
    position: absolute;
    top: 10px;
    right: 12px;
    border: none;
    background: transparent;
    font-size: 1.5rem;
    cursor: pointer;
    color: #003360;
}

.info-link{
    color: #003360;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}
.info-link:hover{
    color: #f39200;
}



</style>


<!-- Reusable info modal -->
<div class="modal-overlay" id="infoModal">
    <div class="modal-card" role="dialog" aria-modal="true">
        <button type="button" class="modal-close" id="infoModalClose">×</button>
        <h5 id="infoModalTitle"></h5>
        <p id="infoModalText"></p>
    </div>
</div>



<script>
document.addEventListener('DOMContentLoaded', function () {
  const followups = document.getElementById('holiday-followups');

  const radios = document.querySelectorAll('input[name="dem_holiday_days"]');
  const select = document.getElementById('id_dem_holiday_days');
  const daysText = document.getElementById('holiday-days-text');

  function getDaysCodeAndLabel() {
    // radio case
    if (radios && radios.length) {
      for (const r of radios) {
        if (r.checked) return { code: Number(r.value), label: r.nextElementSibling?.innerText?.trim() ?? r.value };
      }
      return { code: null, label: "—" };
    }
    // select case
    if (select) {
      const idx = select.selectedIndex;
      const opt = select.options[idx];
      const v = select.value;
      return { code: v === "" ? null : Number(v), label: v === "" ? "—" : (opt?.text ?? v) };
    }
    return { code: null, label: "—" };
  }

  function toggleFollowups() {
    const { code, label } = getDaysCodeAndLabel();

    // show number (or label)
    if (daysText) daysText.textContent = label;

    const show = code !== null && code >= 1;
    followups.style.display = show ? 'block' : 'none';

    if (!show) {
      followups.querySelectorAll('input, select, textarea').forEach(el => {
        if (el.type === 'radio' || el.type === 'checkbox') el.checked = false;
        else el.value = '';
        el.dispatchEvent(new Event('change', { bubbles: true }));
      });
    }
  }

  toggleFollowups();

  if (radios && radios.length) radios.forEach(r => r.addEventListener('change', toggleFollowups));
  if (select) {
    select.addEventListener('change', toggleFollowups);
    select.addEventListener('input', toggleFollowups);
  }
});
</script>


<script>

// Generic info modal logic
const infoButtons = document.querySelectorAll(".info-btn, .info-link");
const infoModal = document.getElementById("infoModal");
const infoModalTitle = document.getElementById("infoModalTitle");
const infoModalText = document.getElementById("infoModalText");
const infoModalClose = document.getElementById("infoModalClose");

infoButtons.forEach(btn => {
    btn.addEventListener("click", function () {
        infoModalTitle.textContent = this.dataset.title;
        infoModalText.innerHTML = this.dataset.text;
        infoModal.classList.add("show");
    });
});

infoModalClose.addEventListener("click", () => infoModal.classList.remove("show"));
infoModal.addEventListener("click", e => { if (e.target === infoModal) infoModal.classList.remove("show"); });
document.addEventListener("keydown", e => { if (e.key === "Escape") infoModal.classList.remove("show"); });



document.addEventListener('DOMContentLoaded', function () {
  const followups = document.getElementById('holiday-followups');

  const radios = document.querySelectorAll('input[name="dem_holiday_days"]');
  const select = document.getElementById('id_dem_holiday_days');

  function getDaysCode() {
    // radio case
    if (radios && radios.length) {
      for (const r of radios) {
        if (r.checked) return Number(r.value);
      }
      return null;
    }
    // select case
    if (select) {
      const v = select.value;
      return v === "" ? null : Number(v);
    }
    return null;
  }

  function toggleFollowups() {
    const code = getDaysCode();          // 0..5
    const show = code !== null && code >= 1;  // show if 2+

    followups.style.display = show ? 'block' : 'none';

    // If hiding, clear follow-up answers
    if (!show) {
      followups.querySelectorAll('input, select, textarea').forEach(el => {
        if (el.type === 'radio' || el.type === 'checkbox') {
          el.checked = false;
        } else {
          el.value = '';
        }
        el.dispatchEvent(new Event('change', { bubbles: true }));
      });
    }
  }

  // initial
  toggleFollowups();

  // listeners
  if (radios && radios.length) {
    radios.forEach(r => r.addEventListener('change', toggleFollowups));
  }
  if (select) {
    select.addEventListener('change', toggleFollowups);
    select.addEventListener('input', toggleFollowups);
  }
});
</script>

<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 sliders = document.querySelectorAll('input[type="range"].slider');

    sliders.forEach(function (slider) {
      // initial state: thumb hidden + neutral track
      slider.classList.add('unmoved');
      slider.style.background = '#cfd8e3';

      // Dragging updates continuously
      slider.addEventListener('input', function () {
        applySliderStyle(slider);
      });

      // Clicking a discrete value may only fire 'change' (or nothing until release)
      slider.addEventListener('change', function () {
        applySliderStyle(slider);
      });

      // Covers “click on track” edge cases where input/change timing is weird
      slider.addEventListener('pointerup', function () {
        applySliderStyle(slider);
      });

      // Fallback for some browsers / devices
      slider.addEventListener('click', function () {
        applySliderStyle(slider);
      });

      // Optional: reveal thumb immediately on touch/click (even before value updates)
      slider.addEventListener('pointerdown', function () {
        slider.classList.remove('unmoved');
      });
    });
  });
</script>









{% endblock %}

{% block styles %}
<style>
  #header {
    display: block;
    font-weight: normal;
    font-size: 14px;
    text-align: right;
    background-color: #003360;
    color: white;
  }
</style>
{% endblock %}