{% extends "otree/Session.html" %}


{% block content %}
  {{ super() }}

  {% if not published %}
    <p>
      The MTurk payments page will appear after you publish this
      session
      to MTurk.
    </p>
  {% else %}
    <div class="container" style='max-width:970px'>
      <br>
      <table class="table table-condensed">
        <tr>
          <th>MTurk HIT ID</th>
          <td class="codes">{{ session.mturk_HITId }}</td>
        </tr>

        <tr>
          <th>
            Participation fee
          </th>
          <td>
            {{ participation_fee }}
          </td>
        </tr>

      </table>

      {% if participants_not_reviewed %}
        <form action="" method="post" role="form" class="form"
              id="form">
          {% csrf_token %}
          <div class="modal" id="mturk-pay" tabindex="-1" role="dialog">
            <div class="modal-dialog">
              <div class="modal-content bg-warning">
                <div class="modal-header">
                  <h4 class="modal-title">Please
                    confirm</h4>
                </div>
                <div class="modal-body">
                  <p>
                    I understand that I am making this payment at my own risk.
                  </p>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary"
                          data-bs-dismiss="modal">Cancel
                  </button>
                  <button type="submit" class="btn btn-secondary"
                          id="pay-confirm-button"
                          formaction="{% url 'PayMTurk' session.code %}">
                    Pay
                  </button>
                </div>
              </div>
            </div>
          </div>

          <div class="modal" id="mturk-reject" tabindex="-1" role="dialog">
            <div class="modal-dialog">
              <div class="modal-content bg-warning">
                <div class="modal-header">
                  <h4 class="modal-title">Reject
                    assignments?</h4>
                </div>
                <div class="modal-body">
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary"
                          data-bs-dismiss="modal">Cancel
                  </button>
                  <button type="submit" class="btn btn-secondary"
                          id="reject-confirm-button"
                          formaction="{% url 'RejectMTurk' session.code %}">
                    Reject
                  </button>
                </div>
              </div>
            </div>
          </div>

          <h4>Participants to be reviewed</h4>
          {% with reviewable=True %}
            {% with participants=participants_not_reviewed %}
              {% include 'otree/includes/mturk_payment_table.html' %}
            {% endwith %}
          {% endwith %}
        </form>

        <div class="btn-group">
          <button type="button"
                  class="btn btn-primary"
                  data-bs-toggle="modal"
                  data-bs-target="#mturk-pay"
                  id="pay"
                  disabled>
            Pay via MTurk
          </button>
          <button type="button"
                  class="btn btn-primary"
                  data-bs-toggle="modal"
                  data-bs-target="#mturk-reject"
                  id="reject"
                  disabled>
            Reject
          </button>
        </div>
      {% endif %}

      {% if participants_approved %}
        <h4>Approved assignments</h4>
        {% with reviewable=False %}
          {% with participants=participants_approved %}
            {% include 'otree/includes/mturk_payment_table.html' %}
          {% endwith %}
        {% endwith %}
      {% endif %}
      {% if participants_rejected %}
        <h4>Rejected assignments</h4>
        {% with reviewable=False %}
          {% with participants=participants_rejected %}
            {% include 'otree/includes/mturk_payment_table.html' %}
          {% endwith %}
        {% endwith %}
      {% endif %}
      {% if not participants_not_reviewed and not participants_approved and not participants_rejected %}
        <p>No workers have submitted yet.</p>
      {% endif %}
      {% if auto_rejects %}
        <div class="alert alert-danger">
          oTree automatically rejected the following assignments because the participants submitted without even
          opening the link to the study: {{ auto_rejects }}
        </div>
      {% endif %}

      <script>
          $(document).ready(function () {
              /*
               "checkAll" checkbox
               in the table header
               */
              checkFunction('workers', 'checkAll');

              $('input[name=workers]').change(function () {
                  var sum = 0.00;
                  var numChecked = 0;
                  var $payButton = $('#pay');
                  var $rejectButton = $('#reject');
                  $('input[name=workers]:checked').each(function (index, element) {
                      sum += parseFloat($(this).data('value'));
                      numChecked += 1;
                  });
                  if (numChecked > 0) {
                      $payButton.attr('disabled', false).text('Pay via MTurk ($' + sum.toFixed(2) + ')');
                      $rejectButton.attr('disabled', false);
                  } else {
                      $payButton.attr('disabled', true).text('Pay via MTurk');
                      $rejectButton.attr('disabled', true);
                  }
              })
          });

          function checkFunction(checkName, checkAllName) {
              // code for "checkAll" checkbox
              $('input[name=' + checkAllName + ']').click(function () {
                  $('input[name=' + checkName + ']').prop('checked', $(this).prop('checked')).trigger("change")
              });
              // if all checkboxes are selected check also "checkAll" checkbox
              $('input[name=' + checkName + ']').change(function () {
                  var check = ($("input[name=" + checkName + "]:checked").length === $("input[name=" + checkName + "]").length);
                  $("input[name=" + checkAllName + "]").prop('checked', check);
              })
          }
      </script>


    </div>
  {% endif %}
  <br>
  {% include "otree/includes/messages.html" %}
{% endblock %}