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

{% block internal_scripts %}
    {{ block.super }}
    <style type="text/css" media="screen">
        .codes {
            font-family: 'Courier New'
        }
    </style>
{% endblock %}
{% block content %}
    {{ block.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'>
            <h3>Session</h3>
            <table class="table table-condensed">
                <tr>
                    <th>Session type</th>
                    <td>{{ session.config.name }}</td>
                </tr>

                <tr>
                    <th>Session code</th>
                    <td class="codes">{{ session.code }}</td>
                </tr>

                <tr>
                    <th>MTurk Hit Id</th>
                    <td class="codes">{{ session.mturk_HITId }}</td>
                </tr>

                <tr>
                    <th>Experimenter name</th>
                    <td>{{ session.experimenter_name|default_if_none:"" }}</td>
                </tr>

            </table>

            {% if participants_not_reviewed %}
                <form action="" method="post" role="form" class="form"
                      id="form">
                {% csrf_token %}

                <h3>Assignments to be reviewed</h3>

                <table class="table table-striped">
                    <tr>
                        <th>Participant code</th>
                        <th>Assignment Id</th>
                        <th>Worker Id</th>
                        <th>Progress</th>
                        <th>
                            Participation fee (Reward)
                        </th>
                        <th>
                            Variable pay (Bonus)
                        </th>
                        <th>Total pay</th>
                        <th>
                            Select
                            <div class="checkbox">
                                <label>
                                    <input name="checkAll" type="checkbox"
                                           value="">
                                </label>
                            </div>
                        </th>
                    </tr>

                    {% for p in participants_not_reviewed %}
                        <tr>
                            <td class="codes">{{ p.code }}</td>
                            <td class="codes">{{ p.mturk_assignment_id|default_if_none:"" }}</td>
                            <td class="codes">{{ p.mturk_worker_id|default_if_none:"" }}</td>
                            <td>{{ p.current_page_ }}</td>
                            <td>
                                {{ participation_fee }}
                            </td>
                            <td>
                                {{ p.payoff_in_real_world_currency }}
                            </td>
                            <td>{{ p.payoff_plus_participation_fee }}</td>
                            <td>
                                <div class="checkbox-inline">
                                    <label>
                                        <input type="checkbox"
                                               name="workers"
                                               data-value="{{ p.payoff_plus_participation_fee|json }}"
                                               value="{{ p.mturk_worker_id }}">
                                    </label>
                                </div>
                            </td>
                        </tr>
                    {% endfor %}
                </table>
                <div class="btn-group" style="float: right;">
                    <button type="button"
                            class="btn btn-primary"
                            data-toggle="modal"
                            data-target="#mturk-pay"
                            id="pay"
                            disabled>
                        Pay via MTurk
                    </button>
                    <button type="button"
                            class="btn btn-primary"
                            data-toggle="modal"
                            data-target="#mturk-reject"
                            id="reject"
                            disabled>
                        Reject
                    </button>
                </div>
                                    <!--Modal windows to confirm payment/rejection -->
                <!-- Removed fade because the delay seemed to be interfering with PhantomJS -->
                <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-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-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>
                </form>

                <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>
            {% endif %}


            {% if participants_approved %}
            <h3>Approved assignments</h3>
            <table class="table table-striped">
                <tr>
                    <th>Participant code</th>
                    <th>Assignment Id</th>
                    <th>Worker Id</th>
                    <th>
                        Participation fee (Reward)
                    </th>
                    <th>
                        Variable pay (Bonus)
                    </th>
                    <th>Total pay</th>
                </tr>

                {% for p in participants_approved %}
                    <tr>
                        <td class="codes">{{ p.code }}</td>
                        <td class="codes">{{ p.mturk_assignment_id|default_if_none:"" }}</td>
                        <td class="codes">{{ p.mturk_worker_id|default_if_none:"" }}</td>
                        <td>
                            {{ participation_fee }}
                        </td>
                        <td>
                            {{ p.payoff_in_real_world_currency }}
                        </td>
                        <td>{{ p.payoff_plus_participation_fee }}</td>
                    </tr>
                {% endfor %}
            </table>
            {% endif %}
            {% if participants_rejected %}
                <h3>Rejected assignments</h3>
                <table class="table table-striped">
                    <tr>
                        <th>Participant code</th>
                        <th>Assignment Id</th>
                        <th>Worker Id</th>
                        <th>
                            Participation fee (Reward)
                        </th>
                        <th>
                            Variable pay (Bonus)
                        </th>
                        <th>Total pay</th>
                    </tr>

                    {% for p in participants_rejected %}
                        <tr>
                            <td class="codes">{{ p.code }}</td>
                            <td class="codes">{{ p.mturk_assignment_id|default_if_none:"" }}</td>
                            <td class="codes">{{ p.mturk_worker_id|default_if_none:"" }}</td>
                            <td>
                                {{ participation_fee }}
                            </td>
                            <td>
                                {{ p.payoff_in_real_world_currency }}
                            </td>
                            <td>{{ p.payoff_plus_participation_fee }}</td>
                        </tr>
                    {% endfor %}
                </table>
            {% endif %}
            {% if not participants_not_reviewed and not participants_approved and not participants_rejected %}
                <p>You have no participants who finished the
                    experiment.</p>
            {% endif %}
        </div>
    {% endif %}
    {% include "otree/includes/messages.html" %}
{% endblock %}
