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

{% block title %} Entscheidung {{ player.round_number }} von 6 {% endblock %}

{% block content %}


<br>


<h5 class="text-center">
    <a href="#"
       class="info-link"
       data-title=""
       data-text="{% include 'Description_DCE.html' %}">
       Situationsbeschreibung nochmal lesen
    </a>
</h5>


<table class="table table-bordered text-center" style="width: 80%; margin: auto;">
    <thead>

    </thead>
    <tbody>
        <tr>
            <th class="text-end">
                Wetter
            </th>
            <td>
                {% if weather == "Sonnig" %}
                <img src="{% static 'Sun_new.png' %}" alt="Sun" style="height:70px;">
                {% elif weather == "Bewölkt" %}
                <img src="{% static 'Cloud_new.png' %}" alt="Cloud" style="height:70px;">
                {% elif weather == "Leichter Regen" %}
                <img src="{% static 'Rain_new.png' %}" alt="Rain" style="height:60px;">
                {% endif %}
                {{ weather }}      (22°)
            </td>

        </tr>



       <tr>
            <th class="text-end">Direkte Strecke zum Badesee</th>
            <td>

        {% if bikelane == "Separat abgegrenzter Fahrradweg" %}
        <img src="{% static 'SeparateBikeLane_new.png' %}" alt="BikeLane_sep" style="width:240px;">

        {% elif bikelane == "Fahrradstreifen direkt neben Hauptstrasse" %}
        <img src="{% static 'BikeLane_new.png' %}" alt="BikeLane_sep" style="width:240px;">

        {% elif bikelane == "Fahren im gemischten Verkehr" %}
        <img src="{% static 'NoBikeLane_new.png' %}" alt="NoBikeLane" style="width:240px;">

        {% endif %}
        <br>
        {{ bikelane }}
            </td>
        </tr>

         <tr>
            <th class="text-end">Entfernung zum Badesee (direkte Strecke)
            {% if distance == "1 km" %}
            <button type="button" class="info-icon info-btn"
                    data-title=""
                    data-text="Typischerweise benötigte Zeit für eine Strecke von {{ distance }}
                    <ul>
                    <li>  Zu Fuss gehend:  <b>10 Min</b> - <b>15 Min</b>
                    <li>  Mit dem Fahrrad:  <b>3 Min</b> - <b>4 Min</b>
                     </ul>">
                i
            </button>
            {% elif distance == "3 km" %}
            <button type="button" class="info-icon info-btn"
                    data-title=""
                    data-text="Typischerweise benötigte Zeit für eine Strecke von {{ distance }}
                    <ul>
                    <li>  Zu Fuss gehend:  <b>30 Min</b> - <b>45 Min</b>
                    <li>  Mit dem Fahrrad:  <b>9 Min</b> - <b>12 Min</b>
                     </ul>">
                i
            </button>
            {% elif distance == "5 km" %}
            <button type="button" class="info-icon info-btn"
                    data-title=""
                    data-text="Typischerweise benötigte Zeit für eine Strecke von {{ distance }}
                    <ul>
                    <li>  Zu Fuss gehend:  <b>45 Min</b> - <b>1:15 h</b>
                    <li>  Mit dem Fahrrad:  <b>15 Min</b> - <b>20 Min</b>
                     </ul>">
                i
            </button>

            {% elif distance == "12 km" %}
            <button type="button" class="info-icon info-btn"
                    data-title=""
                    data-text="Typischerweise benötigte Zeit für eine Strecke von {{ distance }}
                    <ul>
                    <li>  Zu Fuss gehend:  <b>2 h</b> - <b>3 h</b>
                    <li>  Mit dem Fahrrad:  <b>35 Min</b> - <b>50 Min</b>
                     </ul>">
                i
            </button>

            {% else %}
            <button type="button" class="info-icon info-btn"
                    data-title=""
                    data-text="Typischerweise benötigte Zeit für eine Strecke von {{ distance }}
                    <ul>
                    <li>  Zu Fuss gehend:  <b>3 h</b> - <b>4:30 h</b>
                    <li>  Mit dem Fahrrad:  <b>55 Min</b> - <b>1:15 h</b>
                     </ul>">
                i
            </button>
            {% endif %}
            </th>
            <td>
                {{ distance }}


            </td>
        </tr>

        <tr>
            <th class="text-end">Registrierung für Leihrad-Nutzung</th>
            <td>{{ bike_conv }}</td>
        </tr>

        <tr>
            <th class="text-end">Leihgebühren für E-Bike</th>
            <td>{{ bike_cost }}</td>
        </tr>


        <tr>
            <th class="text-end">Rückgabe von Leihrädern

            <button type="button" class="info-icon info-btn"
                    data-title="Rückgabe von Leihrädern"
                    data-text="Leihräder müsen entweder wieder zurück zur Unterkunft gebracht werden (Rückgabe nur bei der Unterkunft)
                    oder können auch beim Badesee abgestellt werden (Rückgabe beim Badesse möglich).
                    Falls Sie das Leihrad beim Badesse stehen lassen möchten,
                    bringt sie ein kostenloser Shuttle-Service zurück zur Unterkunft.">
                i
            </button>
            </th>

            <td>{{ bike_return }}</td>
        </tr>



        <tr>
            <th class="text-end">Parkgebühren</th>
            <td>{{ park_cost }}</td>
        </tr>
        <tr>
            <th class="text-end">Parkplätze direkt am See</th>
            <td>{{ park_aval }}</td>
        </tr>



         <tr>
            <th class="text-end">Alternative Strecke
            {% if detour == "+ 1 km" %}
            <button type="button" class="info-icon info-btn"
                    data-title=""
                    data-text="Sie können auf eine alternative Strecke ohne Autoverkehr ausweichen.
                                Diese verläuft durch Wiesen und Wälder. <br><br>

                    Typischerweise <b>zusätzlich</b> benötigte Zeit für eine Strecke von 1 km:
                    <ul>
                    <li>  Zu Fuss gehend:  <b>10 Min</b> - <b>15 Min</b>
                    <li>  Mit dem Fahrrad:  <b>3 Min</b> - <b>4 Min</b>
                     </ul>">
                i
            </button>
            {% elif detour == "+ 3 km" %}
            <button type="button" class="info-icon info-btn"
                    data-title=""
                    data-text="Sie können auf eine alternative Strecke ohne Autoverkehr ausweichen.
                                Diese verläuft durch Wiesen und Wälder. <br><br>

                    Typischerweise <b>zusätzlich</b> benötigte Zeit für eine Strecke von 3 km:
                    <ul>
                    <li>  Zu Fuss gehend:  <b>30 Min</b> - <b>45 Min</b>
                    <li>  Mit dem Fahrrad:  <b>9 Min</b> - <b>12 Min</b>
                     </ul>">
                i
            </button>
            {% elif detour == "+ 5 km" %}
            <button type="button" class="info-icon info-btn"
                    data-title=""
                    data-text="Sie können auf eine alternative Strecke ohne Autoverkehr ausweichen.
                                Diese verläuft durch Wiesen und Wälder. <br><br>

                    Typischerweise <b>zusätzlich</b> benötigte Zeit für eine Strecke von 5 km:
                    <ul>
                    <li>  Zu Fuss gehend:  <b>45 Min</b> - <b>1:15 h</b>
                    <li>  Mit dem Fahrrad:  <b>15 Min</b> - <b>20 Min</b>
                     </ul>">
                i
            </button>
            {% endif %}
            </th>
            <td>
                {{ detour }}

            </td>
        </tr>

    </tbody>
</table>


<br><br>


<div id="choice-container" style="display: none;">

    <h5 class="text-center">
    Bitte wählen Sie ein Fortbewegungsmittel
    </h5>
    <br>

    <input type="hidden" name="DC_choice" id="DC_choice_input">

    <!-- UPDATED: removed inline flex; added class for responsive layout -->
    <div class="choice-buttons">
        <button type="button" class="choice-button" id="btnA">
            <img src="{% static 'Car_new.png' %}" alt="Car" style="height:80px;">
        </button>

        <button type="button" class="choice-button" id="btnB">
            <img src="{% static 'EBike_new.png' %}" alt="Bike" style="height:80px;">
        </button>

        <button type="button" class="choice-button" id="btnC">
            <img src="{% static 'Bike_new.png' %}" alt="Bike" style="height:80px;">
        </button>

        <button type="button" class="choice-button" id="btnD">
            <img src="{% static 'Walk1.png' %}" alt="Walk" style="height:80px;">
        </button>
    </div>
</div>

<style>
.choice-button {
    font-size: 1.0rem;
    padding: 18px 30px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    background-color: #003360;
    color: white;
    transition: 0.2s ease-in-out;
    /* REMOVED: invalid CSS line "style= display: none;" */
}

.choice-button:hover {
    background-color: #f39200;
    transform: scale(1.10);
}

/* UPDATED: container class for responsiveness */
.choice-buttons {
    display: flex;
    justify-content: center;
    gap: 40px;
}

/* UPDATED: stack buttons on phones */
@media (max-width: 768px) {
    .choice-buttons {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    .choice-button {
        width: 80%;
        max-width: 320px;
    }
}

.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>
const form = document.querySelector("form");
const hidden = document.getElementById("DC_choice_input");

document.getElementById("btnA").addEventListener("click", () => { hidden.value = "1"; form.submit(); });
document.getElementById("btnB").addEventListener("click", () => { hidden.value = "2"; form.submit(); });
document.getElementById("btnC").addEventListener("click", () => { hidden.value = "3"; form.submit(); });
document.getElementById("btnD").addEventListener("click", () => { hidden.value = "4"; form.submit(); });

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

// Delay showing choice buttons by 2 seconds
document.addEventListener("DOMContentLoaded", function () {
    setTimeout(function () {
        document.getElementById("choice-container").style.display = "block";
    }, 2000);  // 2000 ms = 2 seconds
});
</script>

{% endblock %}