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

{% block app_styles %}
    <style>
        .otree-timer {
            display: none;
        }
    </style>
{% endblock %}

{% block title %}
{% endblock %}


{% block content %}
    {{ if shown }}
    <div style="text-align: center">
        <p>This is the end of the experiment.</p>
        {{ if completionlink }}
        <div id="submissionSection">
            {{ if submitted }}
            <p>You have submitted the study. If you experience issues, you can manually submit using the code {{ submission_code }}</p>
            {{ else }}
            <p>You can click the button below to submit the study. </p>
            <div style="text-align: center; margin-top: 20px;">
                <button type="button" id="submitLink" class="btn btn-primary">Submit</button>
            </div>
            {{ endif }}
        </div>
        {{ endif }}


        <hr>
        <p> <strong> Payment Information </strong> </p>
        <p>Participation fee: {{ participation_fee }}</p>
        <p>Earnings from Parts 1&2: {{ part12_points|to0 }}</p>
        <p>Earnings from Part 3: {{ part3_points|to0 }}</p>
        <p>Total Bonus Payment:  {{ real_currency }}{{ bonus_payment|to2 }}</p>
        <p>Total Payment: {{ real_currency }}{{ final_payment|to2 }}</p>
        <p>You can expect to receive your payment within 24 hours.</p>
        <hr>
    </div>
{#    <p>You can click the following button to submit the study.</p>#}
{#    <div style="text-align:center">#}
{#        <button class="btn btn-success btn-lg text-center">Submit</button>#}
{#    </div>#}
    {{ endif }}

{% endblock %}

{% block scripts %}
<script>
    (function () {
        const link = document.getElementById('submitLink');
        const section = document.getElementById('submissionSection');
        if (!link || !section) return;

        const message = "You have submitted the study. If you experience issues, you can manually submit using the code {{ submission_code }}";
        link.addEventListener('click', function () {
            section.innerHTML = '<p>' + message + '</p>';
            if (typeof liveSend === 'function') {
                liveSend({type: 'submitted'});
            }
            window.open('{{ completionlink }}', '_blank', 'noopener');
        });
    })();
</script>
{% endblock %}