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

{% block title %}
{% endblock %}

{% block content %}

    <div class="card mx-auto" style="max-width: 1000px;">
    <div class="card-body text-justify">

    <p>
        <span style="font-size: 1.6em;">
            <b>Herzlich Willkommen</b>
        </span>
    </p>

    <br>

    <p>
        Mit dieser Befragung möchten wir das Mobilitätsverhalten von Urlaubern untersuchen.
        Neben hypothetischen Fragen werden wir Ihnen auch einige allgemeine Fragen zu Ihrer Person stellen.
    </p>

    <p>
        Die Bearbeitung des Fragebogens wird etwa 8-10 Minuten dauern.
    </p>

    <p>
        Selbstverständlich ist die Befragung anonym, und Ihre Antworten werden streng vertraulich behandelt.
        Der anonymisierte Datensatz mit den Antworten aller Befragten wird im Anschluss der wissenschaftlichen Forschung
        zu nicht-kommerziellen Zwecken zur Verfügung gestellt.

        <a href="#" class="info-link" data-target="#DataText">
            Weitere Informationen zur Teilnahme hier.
        </a>
    </p>

    <div id="DataText" style="display: none">
        {% include "DataProtection.html" %}
    </div>

    <p>
        Wir sind an Ihren spontanen Einschätzungen und Meinungen interessiert.
        Bitte geben Sie daher, wenn möglich, immer eine Antwort, auch wenn Sie sich etwas unsicher sind.
    </p>

    <p>
        Im Rahmen der Befragung werden Ihnen unter anderem Entscheidungssituationen vorgestellt,
        in denen Sie zwischen verschiedenen Fortbewegungsmitteln wählen müssen.
        Dazu zählen beispielsweise auch Laufen oder Fahrradfahren.
        Sollten Sie diese Optionen aus persönlichen oder gesundheitlichen Gründen nicht nutzen können,
        steht es Ihnen selbstverständlich frei, die Befragung an dieser Stelle zu beenden.
    </p>

    <br>

    <div style="display: flex; align-items: center; gap: 12px;">
        {% formfield player.survey_participate %}
    </div>

    </div>
    </div>

    <input type="hidden" name="full_url" id="id_full_url">

    <br>
    {% next_button %}

    <!-- Modal -->
    <div id="infoModal" class="info-modal" aria-hidden="true">
      <div class="info-modal-content" role="dialog" aria-modal="true" aria-labelledby="infoModalTitle">
        <button type="button" id="infoModalClose" class="info-modal-close" aria-label="Schließen">×</button>
        <h4 id="infoModalTitle" class="mb-3">Probandeninformation</h4>
        <div id="infoModalText"></div>
      </div>
    </div>

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

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

      .info-modal {
        position: fixed;
        inset: 0;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 20px;
        background: rgba(0,0,0,0.5);
        z-index: 1050;
      }
      .info-modal.show {
        display: flex;
      }
      .info-modal-content {
        width: min(900px, 95vw);
        max-height: 85vh;
        overflow: auto;
        background: #fff;
        border-radius: 12px;
        padding: 18px 18px 14px 18px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.25);
        position: relative;
      }
      .info-modal-close {
        position: absolute;
        top: 10px;
        right: 12px;
        border: none;
        background: transparent;
        font-size: 26px;
        line-height: 1;
        cursor: pointer;
      }
    </style>

    <script>
    document.addEventListener("DOMContentLoaded", function () {

      const urlField = document.getElementById("id_full_url");
      if (urlField) {
        urlField.value = window.location.href;
      }

      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");

      if (!infoModal || !infoModalTitle || !infoModalText || !infoModalClose) {
        console.warn("Info modal elements not found. Check modal HTML IDs.");
        return;
      }

      function openModal(html, titleText) {
        infoModalTitle.textContent = titleText || "Information";
        infoModalText.innerHTML = html || "";
        infoModal.classList.add("show");
        infoModal.setAttribute("aria-hidden", "false");
      }

      function closeModal() {
        infoModal.classList.remove("show");
        infoModal.setAttribute("aria-hidden", "true");
      }

      infoButtons.forEach(btn => {
        btn.addEventListener("click", function (e) {
          e.preventDefault();

          const title = this.dataset.title || "Probandeninformation";

          if (this.dataset.target) {
            const targetEl = document.querySelector(this.dataset.target);
            openModal(targetEl ? targetEl.innerHTML : "", title);
            return;
          }

          openModal(this.dataset.text || "", title);
        });
      });

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

    });
    </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 %}