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



{% block content %}

<div class="alert alert-info my-3 px-3 py-3 rounded border">
    <div class="row">
        <div class="col">
            <h5 style="text-align:center;">
                <strong>
                    You can verify that 
                    your bonus is computed fairly and exactly as described.
                </strong>
            </h5>
            </br>
            <p style="text-align:left;">
                Verification is possible 
                after the experiment if you 
                download “Verification.pdf" below. 
                
                You receive the password to it
                after the experiment.
            </p>
        </div>
    </div>

    <div class="row justify-content-center" >
        <div class="col-6 d-flex justify-content-end">

            <!--Toogle button for visual effect-->            
            <button id="dwnldVerificationBtn" class="btn btn-primary mt-2" onclick="download()" disabled>
                Continue <strong>with</strong> download
            </button>
            
            <a id="verificationDwnld" href="{% static download_link %}" id="verification_download" 
                class="btn btn-primary mt-2 d-none"
                onclick="check_verification_download()" 
                target="_blank"
                download>
                Continue <strong>with</strong> download
            </a>
        
        </div>   

        <div class="col-6 d-flex justify-content-start">
            <!-- Proceeed buttons-->
            <button type="button" class="btn btn-primary mt-2" onclick="showVerificationModule();"
            data-toggle="modal" data-target="#verificationPopUp" id="test_verification" disabled>
                Continue <strong>without</strong> download
            </button>

            <button id="next_page_btn" class="btn btn-primary mt-2 d-none" disabled>
                Continue <strong>without</strong> download
            </button>
        </div>
    
    </div>
</div>


{% if testing %}
    <button type="button" onclick="document.getElementById('test_verification').disabled=false;showVerificationModule()" 
        class="btn btn-secondary mt-2">Skip waiting (test only)</button>
    {{ formfield 'feedback_dwnldVerification' }}
{% endif %}

<input type="hidden" id="verification_download_bool" name="verification_download_bool"
    value="False"></input>

<input type="hidden" id="verification_popup" name="verification_popup"
value="False"></input>

<script>
    function check_verification_download() {
        document.getElementById("verification_download_bool").value = "True"
        document.getElementById("test_verification").classList.add("d-none")
        document.getElementById("next_page_btn").classList.remove("d-none")
        
        //$("#next_page_btn").click()
    }

    let min_time_on_page = js_vars.minTime
    
    // Enables the buttons after set time
    setTimeout(
        function () {
            document.getElementById("test_verification").removeAttribute("disabled")
            document.getElementById("next_page_btn").removeAttribute("disabled")
            document.getElementById("dwnldVerificationBtn").removeAttribute("disabled")
            
            
            //document.getElementById("verificationDwnld").classList.remove("d-none")
        },
        min_time_on_page * 1000 // Seconds
    );

    function showVerificationModule() {
        document.getElementById("verification_popup").value = "True"
        $("#verificationPopUp").modal("toggle")
    }

    function download() {
        let elem = document.getElementById("verificationDwnld")
        elem.click();
    }


</script>

<!-- Modal for Verification -->
<div class="modal fade" id="verificationPopUp" tabindex="-1" role="dialog" aria-labelledby="verificationPopUpLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="submitPopUpLabel">You have not downloaded Verification.pdf</h5>
                <button type="button" class="close" onclick="showVerificationModule()" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="p-2 m-2" id="add_text_blog">
                    You do not have to download Verification.pdf, 
                    but doing so allows you to verify that your bonus is computed fairly and exactly as described.
                </div>
            </div>
            <div class="modal-footer justify-content-center">
                <div id="cond_modal_buttons_true">

                    <button type="button" class="btn btn-secondary" onclick="showVerificationModule()" data-dismiss="modal">
                        Go back and download
                    </button>

                    <button class="btn btn-primary" id="noVerification_btn">
                        Continue without downloading
                    </button>

                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}