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

{% block title %}
    Welcome to the experiment!
{% endblock %}

{% block content %}

<div class="row my-3 bg-light px-3 py-3 rounded border">
    <div class="col">
        <p>
        <strong>
            In this experiment, you can earn a bonus
        </strong>
        on top of the completion fee.
        Your bonus depends on your 
        choices            
        as well as on chance.
        It is thus important that you read the explanations carefully. 
        </p>

        {{ if attentionChecks }}
        <p>
            There will be attention checks.
            If you fail 
            these checks, you will be excluded from the study and receive no payment.
        </p> 

        <p>
            Some pages have built-in delays
            to ensure that all participants spend
            enough time reading the explanations. There is no upper time 
            limit—you can take as much time as you need.
        </p>
        {{ endif}}

        {{ formfield 'prolID' }}

        <p>
        <strong>
            To participate in this experiment, you must agree with our participation rules and privacy policy.
        </strong>
        </p>

        <!-- Button trigger modal -->
        <button type="button" class="btn btn-primary" onclick="trigger_modal()">
            Show participation rules and privacy policy
        </button>

        <!-- Modal -->
        <div class="modal fade bd-example-modal-lg" id="privacyModal" tabindex="-1" role="dialog" 
            aria-labelledby="privacyModalLabel" aria-hidden="true">

            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="privacyModalTitle">Participation rules and privacy policy </h5>
                    </div>
                    <div class="modal-body">
                        <div class="container">
                            <div class="row">
                                <div class="col-12 px-0"> 
                                    <p>
                                        Thank you for participating in this experiment, which is part of a scientific
                                        study at the University of Heidelberg, 
                                        ESCP Business
                                        School, and Frankfurt School of Finance & Management. 
                                        The responsible researchers are
                                    </p>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-4 px-0">
                                    <p>
                                        Prof. Dr. Sebastian Ebert </br>
                                        University of Heidelberg </br>
                                        Chair of Economic Theory I </br>
                                        Bergheimer Str. 58, 69115 Heidelberg, Germany </br>
                                        sebastian.ebert@awi.uni-heidelberg.de </br>
                                    <p>

                                    </p>
                                </div>
                                <div class="col-4 px-0">
                                    <p>
                                        Prof. Dr. Paul Karehnke </br>
                                        ESCP Business School </br>
                                        Finance Department </br>
                                        79 Avenue de la République, 75011 Paris, France </br>
                                        pkarehnke@escp.eu </br>
                                    </p>
                                </div>
                                <div class="col-4 px-0">
                                    <p>
                                        Maximilian Voigt </br>
                                        Frankfurt School</br>
                                        Department of Economics </br>
                                        Adickesallee 32-34, 60322 Frankfurt am Main, Germany </br>
                                        m.voigt@fs.de </br>
                                    </p>
                                </div>
                                
                            </div>
                            <div class="row">
                                <div class="col-12 px-0"> 
                                <p>
                                    The purpose of the experiment is to understand preferences regarding risks over
                                    money. The study will take about 10 minutes to complete. The data will be stored 
                                    and analyzed in full compliance with the highest standards of the European Union 
                                    data protection laws (GDPR).
                                </p>
                                <p>
                                    Your participation in this research is confidential. The experiment does not ask
                                    for any information that would identify who the responses belong to. In the
                                    event of any publication or presentation resulting from the research, no
                                    personally identifiable information will be shared because your name is in no
                                    way linked to your responses. Your confidentiality will be kept to the degree
                                    permitted by the technology used. No guarantees can be made regarding the
                                    interception of data sent via the internet by any third parties. Please contact
                                    the following body if you have any concerns about this matter or other
                                    complaints: Hessischer Beauftragter für Datenschutz und Informationsfreiheit:
                                    https://datenschutz.hessen.de
                                </p>
                                <p>
                                    Your decision to participate in this research is voluntary. You can choose to 
                                    withdraw from the experiment at any time. Refusal of consent or 
                                    leaving the experiment before it ends remains without any consequences for you. 
                                    As usual, however, if you do not complete the study, you do not 
                                    receive any payment. Once you have completed the study, your data 
                                    will be saved anonymously. You cannot request to have your anonymized data 
                                    deleted, corrected, have its processing limited, or refuse to have it 
                                    transferred to third parties. The dataset involving your anonymized 
                                    data may be made publicly available. You must be 18 years of age or 
                                    older to take part in this experiment.
                                </p>
                                <p>
                                    By accepting this privacy policy, you are implying that you have read the
                                    information above, understand it, and consent to take part in the research. 
                                    If you do not want to participate and wish to withdraw from this study, 
                                    please close this window and select option "No".
                                </p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="close_modal()">Close</button>
                    </div>
                </div>
            </div>
        </div>

            <br></br>

            <form>
                I have read the participation rules and privacy policy and consent with it:
                
                {{ form.consent_privacy}}

                <div id="noConsentInput" class="d-none" >
                    </br>
                    <p  class="option-error alert alert-danger">
                        Please state whether you agree to our participation rules and privacy policy using "Yes" or "No". 
                    </p>
                </div>
            </form> 
            </br>   
                
            <input type="hidden" id="exitExperiment" name="exitExperiment"
                value="False"></input>
        
        <button type="button" class="btn btn-primary mt-2" onclick="showStopModule();"
            data-toggle="modal" data-target="#submitPopUp" id="test_privacy">
            Proceed
        </button>

        <button id="next_page_btn" class="btn btn-primary mt-2 d-none">Proceed</button>
        
    </div>
</div>

{% if testing %}
    <div class="alert alert-warning">
        This switch allows to toggle the treament. Treatment 'verification' allows to/'no verification'
        does not allow to 
        download the verification.pdf.
    </div>
    {{form.selectTreatment}}
    <br></br>

    {{ formfield 'feedback_welcomePage' }}
{% endif %}


<script>
    function trigger_modal() {
        $("#privacyModal").modal("show")
    }

    function close_modal() {
        $("#privacyModal").modal("hide")
    }

</script>
        
<script>
    // Add Functions to Radio Button for Privacy Consent
    document.getElementById("id_consent_privacy-0").setAttribute("onclick","update_privacy_policy('True');");
    document.getElementById("id_consent_privacy-1").setAttribute("onclick","update_privacy_policy('False');");
    
    function update_privacy_policy(input) {
        console.log(input)
        document.getElementById("noConsentInput").classList.add("d-none")
        
        if (input == "True") {
            document.getElementById("test_privacy").classList.add("d-none")
            document.getElementById("next_page_btn").classList.remove("d-none")
        } 
        else {
            document.getElementById("test_privacy").classList.remove("d-none")
            document.getElementById("next_page_btn").classList.add("d-none")
        }
    }

    function showStopModule() {

        if (!$("input[name='consent_privacy']").is(':checked')) {
            document.getElementById("noConsentInput").classList.remove("d-none")
        } else {
            $("#submitPopUp").modal("toggle")

            document.getElementById("next_page_modal_btn").onclick= function() {
                // Use a fake ProlificId if not supplied - Avoids error message after modal
                if (!document.getElementById("id_prolID").value) {
                        document.getElementById("id_prolID").value = "NoPrivacyConsent"
                    }
                }
        }             
        
    }
</script>

<!-- Modal for Submit -->
<div class="modal fade" id="submitPopUp" tabindex="-1" role="dialog" aria-labelledby="submitPopUpLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="submitPopUpLabel">Are you sure? </h5>
                <button type="button" class="close" onclick="showStopModule()" 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 have not consented to our participation rules and privacy policy. 
                    Consenting to it is necessary for participating in this study. 
                    Are you sure you want to withdraw from this study?
                </div>
            </div>
            <div class="modal-footer justify-content-center">
                <div id="cond_modal_buttons_true">
                    <button type="button" class="btn btn-secondary" onclick="showStopModule()" data-dismiss="modal">
                        Go back
                    </button>

                    <button class="btn btn-primary" id="next_page_modal_btn"> 
                        Yes, I want to withdraw from this study
                    </button>
                    
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}