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


{% block title %}
    <div style="text-align: center">EPC sound schedule for bad plate</div>
{% endblock %}

{% block content %}
<div style="text-align: center">
    <p>
        আপনি অন্য খেলোয়াড় কে কতক্ষণ শব্দ শুনাতে চান যদি সে নিজের জন্য ভাল বাটি বাছাই করে থাকে
        <br>
        এবং আপনার জন্য খারাপ বাটি বাছাই করে থাকে?
    </p>




    <input type="hidden" name="check_be01a" value="" id="id_check_be01a"/>
    <!-- text feedback
    <p id="feedback_be01a_man"><br></p>
    -->
    <p hidden>{{ form.check_be01a.errors}}</p>

    Select sound:
    <input type="range" name="be01a" value="None" step="1" style="width:500px" min="0" max="50" id="id_be01a" class="form-control">
    </p>
    <br>
    <p>
    <!--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>EPC sound schedule for bad lottery 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>
                <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>

    <!--Alternate implementation; activate listenser event code
    <p><button type="button" id="id_listenSelection">Play to listen to sound selected</button></p>
    -->



    <script>
            $(document).ready(function () {
            //Show slider pointer after click
            $('input[name=be01a]').on('input change', function () {
                $('input[name=be01a]').addClass('sliderDesign');
            });

            //feedback in seconds;mute in final version; keep change of id_check
    	    $('input[name=be01a]').on('input', function() {
        	    //document.getElementById("feedback_be01a_man").innerHTML = $(this).val();
                //change slider enforcer value
        	    $('#id_check_be01a').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/male_sound_confirmation_';
                url_suffix = '.m4a';
                url_source = url_prefix + temp_selection.toString() + url_suffix;
                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 == "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>

    /*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=be01a] {
        -webkit-appearance: none;
        margin-right: auto;
        margin-left: auto;
        width: 100%;
    }

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

    input[name=be01a]::-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=be01a]::-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: 75%
    }

    .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;
        width: 100%;
    }


    </style>







{% endblock %}