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

{% block title %}
    <div style="text-align: center">Ego 11 plate type 1</div>

{% endblock %}

{% block content %}
<div style="text-align: center">
<details>
    <summary>English</summary>
    <p>
        Likelihood of getting good/bad plate if chooser told RM/SI probability of being top 5 scorer
    </p>
</details>

    <p>
        NOT PRIVATE
    </p>
    <p>
        যদি অন্য খেলোয়াড়কে জনান হয় যে আপনি একটি
        {% if participant.vars.male == 1 %} সম্মানিত পুরুষ {% else %} নম্র স্বভাবের নারী {% endif %}
        প্রশ্নউত্তরে অংশগ্রহন করেছেন, এবং তাকে যদি নলা হয় যে আপনার আগে আর ১৯ জন, মানে আপনি সহ মট ২০ জন, এই প্রশ্নউত্তরে অংশগ্রহন করেছে,
        এবং অন্য খেলোয়াড়টি কে যদি বলা হয় আপনি একজন
        {% if participant.vars.male == 1 %} সম্মানিত পুরুষ {% else %} নম্র স্বভাবের নারী {% endif %} নারী নাকি না,
        অর্থাৎ যে পাচ জন সব চেয়ে বেশি নাম্বার পেয়েছে, তাদের মদ্ধে একজন নাকি না,
        আপনার মনে হয় অন্য খেলয়ারটির
        {% if participant.vars.ego_plate_good_first == 1 %} ভাল {% else %} খারাপ {% endif %}
        খাবারের বাটিটি আপনাকে দেয়ার সম্ভাবনা কখন বেশি
        <br>
        <br>

        যদি মনে করেন আপনি অন্য ২০ জন
        {% if participant.vars.male == 1 %} পুরুষের {% else %} নারীর {% endif %}
        মধ্যে যেই ৫ জন
        {% if participant.vars.male == 1 %} সম্মানিত পুরুষ {% else %} নম্র স্বভাবের নারী {% endif %},
        আপনি তাদের মধ্যে নেই, তাহলে
        {% if participant.vars.ego_plate_good_first == 1 %} ভাল {% else %} খারাপ {% endif %}
        বাটি দেয়ার সম্ভাবনা সবচেয়ে বেশি তাহলে একেবারে বাম দিকের গাড় রঙটি বাছাই করুন।
        <br>
        যদি মনে করেন আপনি অন্য ২০ জন
        {% if participant.vars.male == 1 %} পুরুষের {% else %} নারীর {% endif %}
        মধ্যে যেই ৫ জন
        {% if participant.vars.male == 1 %} সম্মানিত পুরুষ {% else %} নম্র স্বভাবের নারী {% endif %},
        আপনি তাদের মধ্যে নেই, তাহলে
        {% if participant.vars.ego_plate_good_first == 1 %} ভাল {% else %} খারাপ {% endif %}
        বাটি দেয়ার সম্ভাবনা একটু বেশি তাহলে তার পাশের হাল্কা রঙটি বাছাই করুন।
        <br>
        যদি মনে করেন আপনি অন্য ২০ জন
        {% if participant.vars.male == 1 %} পুরুষের {% else %} নারীর {% endif %}
        মধ্যে যেই ৫ জন
        {% if participant.vars.male == 1 %} সম্মানিত পুরুষ {% else %} নম্র স্বভাবের নারী {% endif %},
        আপনি তাদের মধ্যে থাকেন বা না থাকেন, অন্য খেলোয়াড়ের
        {% if participant.vars.ego_plate_good_first == 1 %} ভাল {% else %} খারাপ {% endif %}
        বাটি দেয়ার সম্ভাবনা সমান, তাহলে মাঝখানের গাড় রঙটি বাছাই করুন।
        <br>
        যদি মনে করেন আপনি অন্য ২০ জন
        {% if participant.vars.male == 1 %} পুরুষের {% else %} নারীর {% endif %}
        মধ্যে যেই ৫ জন
        {% if participant.vars.male == 1 %} সম্মানিত পুরুষ {% else %} নম্র স্বভাবের নারী {% endif %},
        আপনি তাদের মধ্যে থাকলে
        {% if participant.vars.ego_plate_good_first == 1 %} ভাল {% else %} খারাপ {% endif %}
        বাটি দেয়ার সম্ভাবনা একটু বেশি তাহলে ডান দিকের হাল্কা রঙটি বাছাই করুন।
        <br>
        এবং যদি মনে করেন আপনি অন্য ২০ জন
        {% if participant.vars.male == 1 %} পুরুষের {% else %} নারীর {% endif %}
        মধ্যে যেই ৫ জন
        {% if participant.vars.male == 1 %} সম্মানিত পুরুষ {% else %} নম্র স্বভাবের নারী {% endif %},
        আপনি তাদের মধ্যে থাকলে
        {% if participant.vars.ego_plate_good_first == 1 %} ভাল {% else %} খারাপ {% endif %}
        বাটি দেয়ার সম্ভাবনা সবচেয়ে বেশি তাহলে একেবারে ডান দিকের গাড় রঙটি বাছাই করুন।
        <br>
    </p>


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

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

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

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

    <label>
        <input type="radio" name="ego_plate_type_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>Ego 11 plate type 1</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=ego_plate_type_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 %}