{{ extends 'otree/Page.html' }}

{{ block title }}
💰 Payment Comprehension Check ({{qu_num}}/{{qu_rep}})
{{ endblock }}

{{ block content }}
<div class="card bg-mid m-0">
    <!-- Removed duplicate card-header h2 — the page title block already
         renders as a visible heading above the card. -->
    <div class="card-body">

        {{ block attempt_warning }}{{ endblock }}

        <h5><strong>{{ block intro_header }}Understanding Your Payment{{ endblock }}</strong></h5>

        {{ block intro_body }}
        <div class="process-box">
            <h6>📊 Payment Structure Review</h6>
            Before we begin the main task, let's make sure you fully understand how your round-by-round payment works.
            <br><br>
            Your payoff in each round = Sample Quality Payment - Revoting Penalty
        </div>

        <div class="decision-box">
            <h6>💡 How to Calculate Your Payoff</h6>
            <p>
                <strong>Step 1:</strong> Find the Sample Quality Payment from the left table.<br>
                <strong>Step 2:</strong> Find the Revoting Penalty from the right table.<br>
                <strong>Step 3:</strong> Add them together for your total payoff.
            </p>
        </div>
        {{ endblock }}

        <!-- Payment tables — identical across all tries, so not a block -->
        <div style="display: flex; gap: 20px; margin: 20px 0; flex-wrap: wrap;">
            <div style="flex: 1; min-width: 250px;">
                <h6 style="text-align: center; margin-bottom: 10px;"><strong>🪨 Sample Quality Payment</strong></h6>
                <table style="width: 100%; border-collapse: collapse; border: 2px solid #198754; border-radius: 8px; overflow: hidden;">
                    <thead>
                        <tr style="background-color: #198754; color: white;">
                            <th style="padding: 8px; text-align: center; border: 1px solid #fff;">Sample Quality Score</th>
                            <th style="padding: 8px; text-align: center; border: 1px solid #fff;">Your Payment</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr style="background-color: #f8f9fa;">
                            <td style="padding: 8px; text-align: center; border: 1px solid #dee2e6;">25</td>
                            <td style="padding: 8px; text-align: center; border: 1px solid #dee2e6;"><strong>{{ class_pay_dict.A.payoff }}¢</strong></td>
                        </tr>
                        <tr style="background-color: #ffffff;">
                            <td style="padding: 8px; text-align: center; border: 1px solid #dee2e6;">50</td>
                            <td style="padding: 8px; text-align: center; border: 1px solid #dee2e6;"><strong>{{ class_pay_dict.B.payoff }}¢</strong></td>
                        </tr>
                        <tr style="background-color: #f8f9fa;">
                            <td style="padding: 8px; text-align: center; border: 1px solid #dee2e6;">75</td>
                            <td style="padding: 8px; text-align: center; border: 1px solid #dee2e6;"><strong>{{ class_pay_dict.C.payoff }}¢</strong></td>
                        </tr>
                        <tr style="background-color: #ffffff;">
                            <td style="padding: 8px; text-align: center; border: 1px solid #dee2e6;">90</td>
                            <td style="padding: 8px; text-align: center; border: 1px solid #dee2e6;"><strong>{{ class_pay_dict.D.payoff }}¢</strong></td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div style="flex: 1; min-width: 250px;">
                <h6 style="text-align: center; margin-bottom: 10px;"><strong>⏱️ Revoting Penalty</strong></h6>
                <table style="width: 100%; border-collapse: collapse; border: 2px solid #007bff; border-radius: 8px; overflow: hidden;">
                    <thead>
                        <tr style="background-color: #007bff; color: white;">
                            <th style="padding: 8px; text-align: center; border: 1px solid #fff;">Decision Speed</th>
                            <th style="padding: 8px; text-align: center; border: 1px solid #fff;">Penalty</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr style="background-color: #f8f9fa;">
                            <td style="padding: 8px; text-align: center; border: 1px solid #dee2e6;">1 vote</td>
                            <td style="padding: 8px; text-align: center; border: 1px solid #dee2e6;"><strong>{{ speed_pay_dict.A.payoff }}¢</strong></td>
                        </tr>
                        <tr style="background-color: #ffffff;">
                            <td style="padding: 8px; text-align: center; border: 1px solid #dee2e6;">2 votes</td>
                            <td style="padding: 8px; text-align: center; border: 1px solid #dee2e6;"><strong>{{ speed_pay_dict.B.payoff }}¢</strong></td>
                        </tr>
                        <tr style="background-color: #f8f9fa;">
                            <td style="padding: 8px; text-align: center; border: 1px solid #dee2e6;">3 votes</td>
                            <td style="padding: 8px; text-align: center; border: 1px solid #dee2e6;"><strong>{{ speed_pay_dict.C.payoff }}¢</strong></td>
                        </tr>
                        <tr style="background-color: #ffffff;">
                            <!-- Removed <br> before the span; nowrap keeps the label
                                 on one line so this row matches the height of others. -->
                            <td style="padding: 8px; text-align: center; border: 1px solid #dee2e6; white-space: nowrap;">
                                No decision <span style="font-size: 11px; color: #666;">(random robot sent)</span>
                            </td>
                            <td style="padding: 8px; text-align: center; border: 1px solid #dee2e6;"><strong>{{ speed_pay_dict.D.payoff }}¢</strong></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <h5><strong>Comprehension Check</strong></h5>
        <p>
            Please answer the following question to confirm your understanding of the payment structure.
            Use the tables above to calculate the correct total payoff.
        </p>

        <div class="question-container">
            <p class="question-text"><strong>{{ question }}</strong></p>
            <ul style="list-style: none; padding: 0;">
                {% for value, answer_dict in shuffled_choices %}
                <li style="margin: 8px 0;">
                    <label for="choice_{{ value }}">
                        <!--
                            submit_control block governs whether the radio triggers
                            auto-submit (try1/2) or waits for an explicit Next button (try3).
                            The onchange attribute is injected per-child so the base stays neutral.
                        -->
                        <input
                            type="radio"
                            name="payment_quiz_answer"
                            value="{{ value }}"
                            id="choice_{{ value }}"
                            {{ block radio_onchange }}onchange="this.form.submit()"{{ endblock }}>
                        <strong>{{ answer_dict.total_payoff }}¢</strong>
                    </label>
                </li>
                {% endfor %}
            </ul>
        </div>

        {{ block submit_button }}{{ endblock }}

    </div>
</div>
{{ endblock }}

{{ block styles }}
<style>
.green-box {
    margin-top: 20px;
    background-color: #d4edda;
    padding: 12px;
    border-left: 5px solid #28a745;
    border-radius: 4px;
}
.warning-box {
    margin: 15px 0;
    background-color: #fff3cd;
    padding: 15px;
    border-left: 5px solid #ffc107;
    border-radius: 6px;
    font-weight: bold;
}
.danger-box {
    margin: 15px 0;
    background-color: #f8d7da;
    padding: 15px;
    border-left: 5px solid #dc3545;
    border-radius: 6px;
    font-weight: bold;
}
.decision-box {
    margin: 15px 0;
    background-color: #e7f3ff;
    padding: 15px;
    border-left: 5px solid #007bff;
    border-radius: 6px;
}
.process-box {
    margin: 15px 0;
    background-color: #e8f5e8;
    padding: 15px;
    border-left: 5px solid #198754;
    border-radius: 6px;
}
.decision-box h6,
.process-box h6 {
    margin-top: 0;
    font-weight: bold;
    color: #333;
}
.responsive-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: auto;
    border-radius: 8px;
}
.question-container { margin: 20px 0; }
.question-text {
    font-size: 16px;
    margin-bottom: 15px;
    color: #333;
}
.question-container label {
    display: block;
    padding: 10px;
    margin: 5px 0;
    border-radius: 5px;
    background-color: #f8f9fa;
    cursor: pointer;
    transition: background-color 0.2s;
}
.question-container label:hover { background-color: #e9ecef; }
.question-container input[type="radio"]:checked + label {
    background-color: #d1ecf1;
    border: 2px solid #bee5eb;
}
.next-button {
    background-color: white;
    color: black;
    border: 2px solid #008CBA;
    font-size: 16px;
    padding: 10px 24px;
    text-align: center;
    display: inline-block;
    cursor: pointer;
    border-radius: 12px;
    margin-top: 20px;
}
.next-button:hover {
    background-color: #008CBA;
    color: white;
}
.next-button:active {
    background-color: #005f8b;
    color: white;
    border: 2px solid #005f8b;
}
@media (max-width: 600px) {
    .responsive-image { max-width: 90%; height: auto; }
    .question-container li { padding: 12px 8px; }
    .question-container label { font-size: 14px; padding: 8px; }
}
</style>
{{ endblock }}