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

{% block title %}
    <div style="text-align: center">SI 1</div>
{% endblock %}

{% block content %}
<div style="text-align: center">
<details>
    <summary>English</summary>
    <p>

    </p>
</details>

    <p>
        আমরা এখন আসল প্রশ্নগুলো শুরু করবো।
    </p>
    <p>
    {% if participant.vars.male == 1 %}
        আপনি আপনার অভিভাবক ছাড়া অন্তত কিছু সামাজিক অনুষ্ঠানে যান না
    {% else %}
        আপনি আপনার অভিভাবক ছাড়া অন্তত কিছু সামাজিক অনুষ্ঠানে যান না
    {% endif %}
    </p>



    <label>
        <input type="radio" name="si_1" value="0" unchecked>
        <img src="/static/agreeDisagree/ad0.jpg" height="60px" width="60px">
    </label>

    <label>
        <input type="radio" name="si_1" value="1" unchecked>
        <img src="/static/agreeDisagree/ad1.jpg" height="60px" width="60px">
    </label>

    <label>
        <input type="radio" name="si_1" value="2" unchecked>
        <img src="/static/agreeDisagree/ad2.jpg" height="60px" width="60px">
    </label>

    <label>
        <input type="radio" name="si_1" value="3" unchecked>
        <img src="/static/agreeDisagree/ad3.jpg" height="60px" width="60px">
    </label>

    <label>
        <input type="radio" name="si_1" value="4" unchecked>
        <img src="/static/agreeDisagree/ad4.jpg" height="60px" width="60px">
    </label>


    <p>
    <br><br><br>
        <!--pop-up (modal) button for confirmation modal-->
    <button id ="id_conf_modalOpen" type="button" class="class_modal_open" disabled>Confirmation</button>
    </p>

</div>
    <!-- the modal -->
    <div id = "id_conf_modal" class="big_modal">


    <!-- Modal content: Audio of selection; next button; refresh button -->
        <div class="modal-content">
            <!-- close button -->
            <div class="modal-header">
                <h5>SI 1 confirmation</h5>
            </div>

                <br>
                    <!-- Use javascript validation over otree form validation to prevent refresh and
                    preserve respondent input-->
                    Enter Enum Password:
                    <br>
                    <input type="text" id="id_pass_key" name="pass_key" style="margin-right: auto">
                    <br>
                    <button id="id_submit_password" type="button" style="margin-right: auto">Submit password</button>
                    <p id="feedback_password_correct"><br></p>
                <br>
            </div>
            <div class="modal-footer">
                <div>
                <!--next and close buttons enabled upon correct password input-->
                <button id="id_conf_modalClose" type="button" class="btn btn-secondary" data-dismiss="modal" disabled>Not Correct</button>

                <button class="otree-btn-next btn btn-primary" id="id_next" disabled>Submit and Next</button>
                </div>
            </div>
        </div>

    </div>


    <script>
            $(document).ready(function () {

            //feedback in seconds;mute in final version; keep change of id_check
    	    $('input[name=si_1]').on('input', function() {
                //confirmation button appears after selection
                var open_button_enable = document.getElementById("id_conf_modalOpen");
                open_button_enable.disabled=false;


                //modal scripts
                //get modal
                var modal = document.getElementById("id_conf_modal");
                //get modal open button
                var modal_open = document.getElementById("id_conf_modalOpen");
                //get modal close button
                var modal_close = document.getElementById("id_conf_modalClose");

                modal_open.onclick = function (){
                    modal.style.display = "block";
                }

                modal_close.onclick = function(){
                    window.location.reload();
                }

            $('#id_submit_password').on('click',function (){
                //get password field
                var password = document.getElementById("id_pass_key").value;
                //get password feedback field
                var feedback = document.getElementById("feedback_password_correct");
                //get close button
                var modal_close = document.getElementById("id_conf_modalClose");
                //get next button
                var next = document.getElementById("id_next");
                //if pass correct enable next and close button; else show wrong password
                if(password == "31"){
                    feedback.innerHTML = "Correct password!";
                    modal_close.disabled = false;
                    next.disabled = false;
                    password = null;
                }
                else{
                    feedback.innerHTML = "Wrong password! Try Again";
                    password = null;
                }

            });


        	    /*listen to selection
        	    $('#id_listenSelection').click(function (){
                    //get slider value
                    var temp_selection = $(this).val();

                    //url creation
                    url_prefix = 'https://www.soundjay.com/button/sounds/button-';
                    url_suffix = '.mp3';
                    url_source = url_prefix + temp_selection.toString() + url_suffix;

                    //load audio file
                    var audioElement = document.createElement('audio');
                    audioElement.setAttribute('src',url_source);

                    //play after loading
                    audioElement.addEventListener("canplay", function (){
                       this.play();
                    });

                });*/
    	    });
    	    //function for playing selection
            //not sure if I want to hide play button; remember to change html button style if not using
            //code not working; come back to this later
            //possibly use event listener instead
            //$('input[name=be01a_man]').on('input', function() {
            //    $('#id_listenSelection').style.visibility = "visible";
            //    $('#id_next').style.visibility = "visible";
            //});

        });
    </script>


    <style>




    /* HIDE RADIO */
    [type=radio] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

    /* IMAGE STYLES */
    [type=radio] + img {
        cursor: pointer;
    }
    /* UNCHECKED STYLES */
    img {
        border: 2px solid #0d0d0d;
        margin: 0 10px 0 10px
    }

    /* CHECKED STYLES */
    [type=radio]:checked + img {
        outline: 5px solid #FF0000;
    }

        /*Modal button CSS*/
    .class_modal_open{
        margin-left: auto;
        margin-right: auto;
        background-color: white;
        border: 4px solid #4CAF50;
        color: black;
        padding: 30px 30px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 20px;
        transition-duration: 0.4s;
    }
    .class_modal_open:hover{
        background-color: #4CAF50;
        color: white;
    }
    /*Modal CSS*/
    /* The Modal (background) */
    .big_modal {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 1; /* Sit on top */
        padding-top: 100px; /* Location of the box */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgb(0,0,0); /* Fallback color */
        background-color: rgba(255,255,255,1); /* Black w/ opacity */
    }

    /* Modal Content */
    .modal-content {
        background-color: #fefefe;
        margin: auto;
        padding: 0px 0px;
        border: 1px solid #888;
        width: 95%;
        height: 75%
    }

    .modal-header {
        padding:10px 15px;
        border-bottom:1px solid #eee;
        background-color: #add8e6;
    }
    .modal-footer {
        margin: auto;
        padding: 9px 15px;
        width: 95%;
        border-bottom:1px solid #eee;
        background-color: #add8e6;
    }

    </style>



{% endblock %}