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

{% block title %}
{% endblock %}

{% block content %}
<style>
    /* Force 16pt font and Black color for text to ensure readability */
    #otree-content, p, li, div, h4, td, th, span, b, strong {
        font-size: 16pt !important;
        color: black !important;
    }

    /* Title box matching your image exactly: dark green text on light green */
    .custom-title-box {
        background-color: #d1e7dd;
        border: 1px solid #badbcc;
        color: #0f5132 !important;
        text-align: center;
        padding: 1rem;
        border-radius: 0.25rem;
        margin-bottom: 1.5rem;
    }

    .custom-title-box h2 {
        font-size: 24pt !important;
        font-weight: bold;
        color: #0f5132 !important;
        margin: 0;
    }

    /* Table styling: Center all data and token numbers */
    .table td, .table th {
        text-align: center;
        vertical-align: middle;
    }

    /* Custom header color to maintain consistency with the alert box */
    .table-success-custom {
        background-color: #d1e7dd !important;
    }
</style>

<div class="custom-title-box">
    <h2>CUMULATIVE PAYOFF {{ round_display }}</h2>
</div>
                        <p style="LINE-HEIGHT:0.5pt"><br></p>

<p style="margin-top: 0rem;">
  As a Customer, you have earned a total of
  <strong>{{ cumulative_payoff }} tokens</strong> in
  <strong>{{ round_number }}</strong> round(s).
</p>

<br> <h4 style="margin-top: 0rem;">Payoff Details by Round:</h4>

{% if comp == 'fixed_wage' %}
  <table class="table table-bordered mt-3">
    <thead>
      <tr class="table-success-custom">
        <th>Round</th>
        <th>Base Payoff</th>
        <th>Satisfaction from the Worker’s Service</th>
        <th>Total Payoff</th>
      </tr>
    </thead>
    <tbody>
      {% for r in rows %}
        <tr>
          <td>{{ r.round_index }}</td>
          <td>{{ r.base }} tokens</td>
          <td>{{ r.satisfaction }} tokens</td>
          <td>{{ r.total }} tokens</td>
        </tr>
      {% endfor %}
    </tbody>
  </table>

{% elif comp == 'service_charge' %}
  <table class="table table-bordered mt-3">
    <thead>
      <tr class="table-success-custom">
        <th>Round</th>
        <th>Base Payoff</th>
        <th>Satisfaction from the Worker’s Service</th>
        <th>Service Charge Paid to the Worker</th>
        <th>Total Payoff</th>
      </tr>
    </thead>
    <tbody>
      {% for r in rows %}
        <tr>
          <td>{{ r.round_index }}</td>
          <td>{{ r.base }} tokens</td>
          <td>{{ r.satisfaction }} tokens</td>
          <td>{{ r.service_charge }} tokens</td>
          <td>{{ r.total }} tokens</td>
        </tr>
      {% endfor %}
    </tbody>
  </table>

{% elif comp == 'pre_tip' or comp == 'post_tip' %}
  <table class="table table-bordered mt-3">
    <thead>
      <tr class="table-success-custom">
        <th>Round</th>
        <th>Base Payoff</th>
        <th>Satisfaction from the Worker’s Service</th>
        <th>Tip Paid to the Worker</th>
        <th>Total Payoff</th>
      </tr>
    </thead>
    <tbody>
      {% for r in rows %}
        <tr>
          <td>{{ r.round_index }}</td>
          <td>{{ r.base }} tokens</td>
          <td>{{ r.satisfaction }} tokens</td>
          <td>{{ r.tip }} tokens</td>
          <td>{{ r.total }} tokens</td>
        </tr>
      {% endfor %}
    </tbody>
  </table>

{% else %}
  <div class="alert alert-warning">Payoff details are not available.</div>
{% endif %}

<p style="LINE-HEIGHT:0.5pt"><br></p>
<p style="LINE-HEIGHT:0.5pt"><br></p>
<div class="my-4 text-start">
        <p style="font-size:16pt" class="mb-4">Please click ‘Next’ to continue.</p>
        {{ next_button }}
    </div>

{% endblock %}