{% 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 Ihrer Person</b>
    </span>
    </p>


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



            <br>
            <b>Wie schätzen Sie sich persönlich ein? Sind Sie im Allgemeinen ein risikobereiter Mensch oder versuchen Sie, Risiken zu vermeiden?</b>

            <div class="slider-wrap">
            <input type="hidden" name="dem_risk" id="hidden_dem_risk">
            <input type="range"
                id="id_dem_risk"
                min="0"
                max="10"
                step="1"
                class="slider">

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

            <br>
            <b>Sind Sie jemand, der im Allgemeinen bereit ist, heute auf etwas zu verzichten,
                um in der Zukunft davon zu profitieren, oder sind Sie dazu nicht bereit?</b>

            <div class="slider-wrap">
            <input type="hidden" name="dem_time" id="hidden_dem_time">
            <input type="range"
                id="id_dem_time"
                min="0"
                max="10"
                step="1"
                class="slider">

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

            <br>
            <b>Sind Sie jemand, der im Allgemeinen bereit ist, mit anderen zu teilen,
                ohne dafür eine Gegenleistung zu erwarten, oder sind Sie dazu nicht bereit? </b>

            <div class="slider-wrap">
            <input type="hidden" name="dem_altruism" id="hidden_dem_altruism">
            <input type="range"
                id="id_dem_altruism"
                min="0"
                max="10"
                step="1"
                class="slider">

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

            <br><br>
            <b>Wie zufrieden sind Sie gegenwärtig, alles in allem, mit Ihrem Leben?</b>

            <div class="slider-wrap">
            <input type="hidden" name="dem_satisfaction" id="hidden_dem_satisfaction">
            <input type="range"
                id="id_dem_satisfaction"
                min="0"
                max="10"
                step="1"
                class="slider">

            <div class="slider-labels">
                <span>Ganz und gar unzufrieden</span>
                <span>Ganz und gar zufrieden</span>
            </div>
            </div>

             <br>
            {% formfield player.dem_health %}

            <br><br>
            <div>
              <b>Wie viele Personen leben derzeit mit Ihnen zusammen in einem Haushalt – Sie selbst mit eingerechnet?</b>
            </div>
            <div style="display: flex; align-items: center; gap: 12px;margin-top: -12px;">
                {% formfield player.dem_HH_adults %}
                <span>erwachsene Personen (18 Jahre und älter)</span>
            </div>

            <div style="display: flex; align-items: center; gap: 12px;margin-top: -30px;">
                {% formfield player.dem_HH_kids %}
                <span>Kinder (unter 18 Jahre)</span>
            </div>


        </div>
            {% formfield player.dem_income %}









        </div>





    </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;
    margin-top: 6px;
    font-size: 0.95rem;
}
.slider-labels span {
    flex: 1;               /* each label takes 50% width */
}
.slider-labels span:first-child {
    text-align: left;      /* left label anchored left */
}
.slider-labels span:last-child {
    text-align: right;     /* right label anchored right */
}
  </style>


    <style>
    .info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: -3px;
    margin-right: 4px;
    border: 1px solid #003360;
    border-radius: 50%;      /* force circle */
    background: white;
    color: #003360;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;

    vertical-align: top;
    position: relative;
    top: -3px;   /* fine-tune upward */
}

.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;
}
</style>

{% 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 %}


<!-- 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>
  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 = ['dem_satisfaction', 'dem_risk', 'dem_time', 'dem_altruism'];

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

    document.addEventListener("DOMContentLoaded", function () {
    const infoButtons = document.querySelectorAll(".info-btn");
    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"); });
});
</script>


{% endblock %}