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



{% block content %}

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

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

  <h5 class="text-center">
    <a href="#"
       class="info-link"
       data-target="#situationText">
      Situationsbeschreibung nochmal lesen
    </a>
  </h5>

  <!-- Put the long situation text here (robust; avoids broken data-text attributes) -->
    <div id="situationText" style="display: none">
            {% include "Description_DCE.html" %}
    </div>

  <br>
  <div class="card-body p-2">
    {% formfield player.Ctrl_Holiday %}
    {% formfield player.Ctrl_Partner %}
    {% formfield player.Ctrl_Car %}
  </div>

  {% next_button %}
</div>

<!-- Modal (must exist on the page, because JS expects these IDs) -->
<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">Situationsbeschreibung</h4>
    <div id="infoModalText"></div>
  </div>
</div>

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

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

  /* Simple modal styling */
  .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 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(); // prevents jumping to top for href="#"

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

      // Preferred: read long HTML from a hidden div
      if (this.dataset.target) {
        const targetEl = document.querySelector(this.dataset.target);
        openModal(targetEl ? targetEl.innerHTML : "", title);
        return;
      }

      // Fallback: if you still want to use data-text
      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>
  #header {
    display: block;
    font-weight: normal;
    font-size: 14px;
    text-align: right;
    background-color: #003360;
    color: white;
  }
  .table{
    width: 800px;
  }
</style>
{% endblock %}