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

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

{% block content %}

<br>

<table class="table table-bordered text-center" style="width: 80%; margin: auto;">
    <thead>
        <td></td>
        <td><b>Angebot A</b></td>
        <td><b>Angebot B</b></td>
    </thead>
    <tbody>

        <tr>
            <th class="text-end">Bike-Verleih</th>
            <td>{{ shop_a }}</td>
            <td>{{ shop_b }}</td>
        </tr>

        <tr>
            <th class="text-end">Leihkosten pro E-Bike</th>
            <td>{{ cost_a }}</td>
            <td>{{ cost_b }}</td>
        </tr>

        <tr>
            <th class="text-end">Notwendige Registrierung</th>
            <td>{{ registration_a }} <br> {{ payment_a }}</td>
            <td>{{ registration_b }}<br> {{ payment_b }}</td>
        </tr>

        <tr>
            <th class="text-end">Rückgabe</th>
            <td>{{ return_a }}</td>
            <td>{{ return_b }}</td>
        </tr>

    </tbody>
</table>

<br><br>

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

    <h5 class="text-center">
        Welches Angebot möchten Sie wählen?
    </h5>
    <br>

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

    <!-- UPDATED: removed inline flex styling; added class for responsive stacking -->
    <div class="choice-buttons">
        <button type="button" class="choice-button" id="btnA">
            Angebot A
        </button>

        <button type="button" class="choice-button" id="btnB">
            Angebot B
        </button>

        <button type="button" class="choice-button choice-alt" id="btnC">
            Keines der beiden Angebote
        </button>
    </div>

</div>

<style>
/* Container for buttons */
.choice-buttons{
    display: flex;
    justify-content: center;
    gap: 40px;
}

/* Buttons */
.choice-button {
    font-size: 1.0rem;
    padding: 18px 0;
    width: 200px;
    height: 60px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    background-color: #003360;
    color: white;
    transition: 0.2s ease-in-out;

    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Different color for the third button */
.choice-alt {
    background-color: #888888;
}

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

/* UPDATED: stack buttons on phones */
@media (max-width: 768px) {
    .choice-buttons{
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }
    .choice-button{
        width: 90%;
        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;
}
</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(); });

// Generic info modal logic (currently unused unless you add .info-btn buttons)
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"); });

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

{% endblock %}