{{ extends "_static/global/Page.html" }}
{{ load otree static }}
{{ block title }}
    Welcome!
{{ endblock }}

{{ block content }}
<style>
    html {
      scroll-behavior: smooth;
    }
    .popup {
        display: none;
        position: fixed;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.4);
    }

    .popup-content {
        background-color: #fefefe;
        margin: 5% auto;
        padding: 20px;
        border: 1px solid #888;
        width: 80%;
        height: 80%;
        overflow: auto;
    }

    .close {
        color: #aaaaaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    .close:hover,
    .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }

    iframe {
        border: none;
    }
    .information_sheet_button {
        color: blue;
        text-decoration: underline;
        cursor: pointer;
    }
    .information_sheet_button:hover {
        color: darkblue;
    }
    .information_sheet_button:active {
        color: darkblue;
    }
    .information_sheet_button:focus {
        color: darkblue;
    }

</style>


<div>
    <p>Thank you for participating in this study.</p>
    <p>
        In this study, we will ask you to make choices.
        You will get {{session.config.currency_symbol}}{{participation_fee|to2}} when completing the study.
        <br>
        You can earn an additional bonus payment of up to {{session.config.currency_symbol}}{{max_payment|to2}}, depending on your choices.
    </p>
    <p>
        This study is conducted under a strict policy of no deception. You will never be lied to during this study.
        The instructions will detail how the study works and how you are paid.
    </p>
    {{ if use_captchas == 1 }}
        <h3>
            'Bot'-Detection
        </h3>
        <p>
            This study is designed for humans and cannot be fulfilled using automated answers. You will be asked to transcribe easily legible words in this study. If you fail to transcribe a word three times, the study will be immediately terminated and you will not be able to complete it nor receive payment.
        </p>
    </p>
    {{ endif }}
</div>
<div class="form-group required">
    <h2>Informed Consent</h2>
    <p>
        Your participation in this study is voluntary. You can withdraw consent or discontinue participation at any time.
        All data and published work resulting from this study will be anonymised and maintain your individual privacy.
    </p>
    <p>
        Please read this <span class="information_sheet_button">information sheet</span> to decide if you want to participate in this study.
        You need to open this document to proceed. Should you have any questions or concerns, please contact the researchers or the UCL Research Ethics Office.
    </p>

    Participant's statement: I confirm that:
    <ol type="a">
        <li>I have read and understood the <span class="information_sheet_button">information sheet</span>; </li>
        <li>I understand that I can refuse or withdraw from this study at any time without affecting my rights or status; </li>
        <li>I am 18 or older and I freely consent to participate in this study; </li>
        <li>I may ask the researchers for a copy of these documents for my records.</li>
    </ol>

    <p>
        Do you agree with the statement above and consent to participate in the study?<br>
        <label>
            <input type="radio" name="consent" value="Yes"> Yes, I agree and wish to participate in the study.
        </label><br>
        <label>
            <input type="radio" name="consent" value="No"> No, I do not agree and do not wish to participate in the study.
        </label><br>
        <span id="consent_error" style="color: #b94a48; visibility: hidden">Please indicate whether you agree to participate in the study.</span>
    </p>
</div>

<div class="otree-form-errors alert alert-danger" id="no_consent_error" style="display: none">
    You have chosen not to participate in the study. Please close this page.
</div>

<div>
    <p>
        Next, we will provide instructions explaining how the study works and how you will be paid. 
        As a reminder, you will never be lied to during this or any study at the UCL Experimental Laboratory for Finance and Economics (UCL ELFE). 
    </p>
    <p>When you are ready, please click "Next" to go on. </p> 
</div>

<div style="justify-content: center; align-items: center; text-align: center;">
    <button class="otree-btn-next btn btn-primary next-button otree-next-button" type="button" id="next_button" style="margin:auto;" onclick="checkConsent()">Next</button>
</div>

<div class="popup" id="popup">
    <div class="popup-content">
        <span class="close">&times;</span>
        <iframe src="https://uclelfe.github.io/documents/UCL%20ELFE.%20Information%20Sheet.pdf#toolbar=0" width="100%" height="100%"></iframe>
    </div>
</div>

<script>
    let popup = document.getElementById("popup");
    let information_sheet_button_1 = document.getElementsByClassName("information_sheet_button")[0];
    let information_sheet_button_2 = document.getElementsByClassName("information_sheet_button")[1];
    let close = document.getElementsByClassName("close")[0];

    information_sheet_button_1.onclick = function() {
        popup.style.display = "block";
    }

    information_sheet_button_2.onclick = function() {
        popup.style.display = "block";
    }

    close.onclick = function() {
        popup.style.display = "none";
    }

    window.onclick = function(event) {
        if (event.target === popup) {
            popup.style.display = "none";
        }
    }

    function checkConsent() {
        let consent = document.querySelectorAll('input[name="consent"]');
        let consent_error = document.getElementById("consent_error");
        let no_consent_error = document.getElementById("no_consent_error");
        
        if (consent[0].checked === false && consent[1].checked === false) {
            consent_error.style.visibility = "visible";
            consent_error.scrollIntoView();
        } else if (consent[1].checked === true) {
            no_consent_error.style.display = "block";
            no_consent_error.scrollIntoView();
        } else {
            document.getElementById("form").submit();
        }
    }
</script>
{{ endblock }}