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

{% block content %}
<div style="font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto; padding: 20px; border: 1px solid #ddd; border-radius: 8px; background-color: #f9f9f9;">
    <h2 style="text-align: center; color: #333;">Round Results</h2>

    <div style="margin-bottom: 20px;">
        <p>Your choice: {{ my_decision }}</p>
        <p>Other participant's choice: {{ other_decision }}</p>
        <p>Your payoff for this round: {{ player.payoff }}</p>
    </div>

    <table class="table" style="width: 100%; border-collapse: collapse; text-align: center;">
        <thead>
            <tr>
                <th colspan="2"></th>
                <th colspan="2" style="background-color: #e9ecef;">The Other Participant</th>
            </tr>
            <tr>
                <th colspan="2"></th>
                <th style="{% if other_decision == '1' %}background-color: #b3d7ff;{% endif %}">Choice 1</th>
                <th style="{% if other_decision == '2' %}background-color: #b3d7ff;{% endif %}">Choice 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th rowspan="2" style="background-color: #e9ecef; padding: 10px;">You</th>
                <td style="padding: 15px; {% if my_decision == '1' %}background-color: #b3d7ff;{% endif %}">
                    Choice 1
                </td>
                <td id="payoff_CC" style="padding: 10px; {% if my_decision == '1' and other_decision == '1' %}background-color: #ffcc00;{% endif %}">
                    <span class="payoff-num">{{ C.PayoffCC }}</span>, {{ C.PayoffCC }}
                </td>
                <td id="payoff_CD" style="padding: 10px; {% if my_decision == '1' and other_decision == '2' %}background-color: #ffcc00;{% endif %}">
                    <span class="payoff-num">{{ C.PayoffCD }}</span>, {{ C.PayoffDC }}
                </td>
            </tr>
            <tr>
                <td style="padding: 15px; {% if my_decision == '2' %}background-color: #b3d7ff;{% endif %}">
                    Choice 2
                </td>
                <td id="payoff_DC" style="padding: 10px; {% if my_decision == '2' and other_decision == '1' %}background-color: #ffcc00;{% endif %}">
                    <span class="payoff-num">{{ C.PayoffDC }}</span>, {{ C.PayoffCD }}
                </td>
                <td id="payoff_DD" style="padding: 10px; {% if my_decision == '2' and other_decision == '2' %}background-color: #ffcc00;{% endif %}">
                    <span class="payoff-num">{{ C.PayoffDD }}</span>, {{ C.PayoffDD }}
                </td>
            </tr>
        </tbody>
    </table>

    <div style="margin-bottom: 20px; padding: 10px; background-color: #f7f7f7; border-radius: 4px; text-align: center;">
        <p><strong>Game Continuation Condition:</strong></p>

        <p> The match continues if a die lands on one of the following faces: </p>

        <div style="display: flex; justify-content: center; align-items: center; gap: 10px;">
            {% for dice in needed %}
                <img src="{% static dice %}" style="max-width: 60px; height: auto;">
            {% endfor %}
        </div>

<!--        <p>The 6-sided dice roll needs to be at most <strong>{{ player.group.probability  }}</strong> for the game to continue.</p>-->
<!--        <button type="button" onclick="revealRoll()" id="revealButton" style="padding: 10px; margin-top: 10px; background-color: #0275d8; color: white; border: none; border-radius: 4px; font-size: 14px; cursor: pointer;">Reveal Dice Roll</button>-->
<!--        <div id="diceRollContainer" style="display: none; margin-top: 10px;">-->
<!--            <img id="diceRollImage" src="" alt="Dice Roll" style="width: 100px; height: 100px;">-->
<!--            <p id="diceRollResult" style="font-size: 16px; margin-top: 10px;"></p>-->
    </div>

    <form>
        <button type="submit" id="nextButton" style="display: block; width: 100%; padding: 12px; background-color: #0275d8; color: white; border: none; border-radius: 4px; font-size: 16px; cursor: pointer;">
            Next
        </button>
    </form>

</div>

<!--    <script>-->
<!--        function revealRoll() {-->
<!--            var roll = {{ player.group.dice }};-->
<!--            var probability = {{ player.group.probability }};-->
<!--            var resultText = "";-->
<!--            if (roll > probability) {-->
<!--                resultText = "<span style='color: #d9534f; font-size: 16px;'>This is the <strong>LAST round</strong>. Next, you will see the match result.</span>";-->
<!--            } else {-->
<!--                resultText = "<span style='color: #5cb85c; font-size: 16px;'>There is going to be <strong>another round</strong>.</span>";-->
<!--            }-->
<!--            document.getElementById("diceRollImage").src = "/static/images/dice-six-faces-" + roll + ".png";-->
<!--            document.getElementById("diceRollResult").innerHTML = resultText;-->
<!--            document.getElementById("diceRollContainer").style.display = "block";-->
<!--            document.getElementById("nextButton").disabled = false;-->
<!--            document.getElementById("nextButton").style.cursor = "pointer";-->
<!--            document.getElementById("nextButton").style.backgroundColor = "#0275d8";-->
<!--        }-->
<!--    </script>-->

</div>
{% endblock %}