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

{% block title %}
    Transfer Response Practice
{% endblock %}

{% block content %}
<details>
    <summary>English</summary>
    {% if participant.vars.game_role == 1 %}
    You can also choose to assign the other player an amount of taka between 0 to 100
    {% else %}
    The other player can also choose to assign you an amount of taka between 0 to 100
    {% endif %}
</details>

    {% if participant.vars.game_role == 1 %}
    আপনি অন্য খেলোয়াড়কে ০ থেকে ১০০ টাকা পর্যন্ত দিতে পারবেন।
    {% else %}
    অন্য খেলোয়াড়টি আপনাকে ০ থেকে ১০০ টাকা পর্যন্ত দিতে পারবে।
    {% endif %}

    <p>

    <input type="range" name="be01b_practice" value="None" step="1" style="width:500px" min="0" max="100" id="id_be01b_practice" class="form-control">
    </p>

    <input type="hidden" name="check_be01b_practice" value="" id="id_check_be01b_practice">
    <p hidden>{{form.check_be01b_practice.errors}}</p>

    <p>
    <!--pop-up (modal) button for confirmation modal-->
    <button id ="id_conf_modalOpen" type="button" class="class_modal_open" disabled>Confirmation</button>
    </p>
    <!-- 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>Practice Sound Schedule Confirmation</h5>
            </div>
            <div class="modal-body" style="text-align:left;">
                <audio controls id="id_temp_audio">
                    <source src="" type="audio/ogg">
                    <source src="" type="audio/mpeg">
                </audio>
                <details>
                    <summary>English</summary>
                    {% if participant.vars.game_role == 1 %}
                    Currently, you are hearing a *teet* sound, during the real selection you will hear the
                    exact amount. If you want to make the selection again you will tell me and I will turn
                    tab again towards you.
                    {% else %}
                    Currently, you are hearing a *teet* sound, during the real selection the other player will hear the
                    exact amount. If the other player wants to make the selection again they will tell it to the other enumerator
                    and the other enumerator will turn the tab towards them.
                    {% endif %}
                </details>
                <br>
                {% if participant.vars.game_role == 1 %}
                    বর্তমানে, আপনি একটি *টীট* শব্দ শুনতে পাচ্ছেন, কিন্তু আসল খেলার সময় আপনি জানতে পারবেন
                    আপনি কত সেকেন্ড শব্দ বাছাই করেছিলেন।
                    আপনি যদি শব্দের পরিমাণ আবার বাছাই করতে চান তাহলে আমাকে বলবেন এবং আমি ট্যাবটি আপনার দিকে ঘুরিয়ে দিব।
                {% else %}
                    বর্তমানে, আপনি একটি *টীট* শব্দ শুনতে পাচ্ছেন, কিন্তু আসল খেলার সময় অন্য খেলোয়াড় জানতে পারবেন
                    তিনি কত সেকেন্ড শব্দ বাছাই করেছিলেন।
                    তিনি যদি শব্দের পরিমাণ আবার বাছাই করতে চান তাহলে তিনি অন্য প্রশ্নকর্তাকে বলবেন এবং অন্য প্রশ্নকর্তা ট্যাবটি তার দিকে ঘুরিয়ে দিব।
                {% endif %}
                <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">
                    <br>
                    <button id="id_submit_password" type="button">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 () {

            //Show slider pointer after click
            $('input[name=be01b_practice]').on('input change', function () {
                $('input[name=be01b_practice]').addClass('sliderDesign');
            });

            //feedback in seconds;mute in final version; keep change of id_check
    	    $('input[name=be01b_practice]').on('input', function() {
        	    //document.getElementById("feedback_be01a_man").innerHTML = $(this).val();
                //change slider enforcer value
        	    $('#id_check_be01b_practice').val(1);
        	    //confirmation button appears after selection
                var open_button_enable = document.getElementById("id_conf_modalOpen");
                open_button_enable.disabled=false;
                //alternate implemention; with audio controls; activate html audio controls if using.

                //var temp_selection = $(this).val();
                //url_prefix = '../../../../../static/confirmation_stage_seconds/';
                //url_suffix = 'secconf.mp3';
                url_source = '../../../../../static/practice_round/xx_takaconf.mp3';
                document.getElementById("id_temp_audio").setAttribute('src', url_source);

                //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 == "56631"){
                    feedback.innerHTML = "Correct password!";
                    modal_close.disabled = false;
                    next.disabled = false;
                    password = null;
                }
                else{
                    feedback.innerHTML = "Wrong password! Try Again";
                    password = null;
                }

            });

    	    });

        });
    </script>
    <style>
    h1 {text-align: center;}
    p {text-align: center;}
    div {text-align: center;}

    /*slider css*/
    .sliderDesign::-webkit-slider-thumb {
        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #007afe;
        border: 1px solid #000000;
        height: 30px !important;
        width: 15px !important;
        border-radius: 0px !important;
        background: #ffffff !important;
        cursor: pointer !important !important;
        -webkit-appearance: none !important;
        margin-top: -7px !important;
    }

    input[name=be01b_practice] {
        -webkit-appearance: none;
        margin-right: auto;
        margin-left: auto;
        width: 100%;
    }

    input[name=be01b_practice]:focus {
        outline: none;
    }

    input[name=be01b_practice]::-webkit-slider-runnable-track {
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        height: 20px;
        cursor: pointer;
        animate: 0.2s;
        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
        background: #007afe;
        border-radius: 0px;
        border: 0.0px solid #ffffff;
    }

    input[name=be01b_practice]::-webkit-slider-thumb {
        border: 0px;
        height: 0px;
        width: 0px;
        border-radius: 0px;
        -webkit-appearance: none;
    }
    /*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: 95%
    }

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


    </style>



{% endblock %}