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

{{ block title }}
    {{ if player.practice == 1  }}
        Practice Round {{ practice_round_number }} out of {{ C.NUM_PRACTICE_ROUNDS }}
    {{ endif }}
    {{ if player.practice == 0  }}
        Round {{ payment_round_number }} out of {{ C.NUM_PAYMENT_ROUNDS }}
    {{ endif }}
{{ endblock }}

{{ block scripts }}
<script>
    // (A) PREVENT CONTEXT MENU FROM OPENING
    window.addEventListener("contextmenu", evt => evt.preventDefault(), false);
    // (B) PREVENT CLIPBOARD COPYING
    window.addEventListener("copy", evt => {
        evt.clipboardData.setData("text/plain", "Copying is not allowed on this page");
        evt.preventDefault();
    }, false);

    window.addEventListener("load", (event) => {  
        let startTime,submitTime
        startTime=Date.now()
        document.getElementById("instructions_clicked").value = 0
        const div = document.querySelectorAll('div')
        div.forEach(function(x){
            if (x.classList.contains('otree-form-errors')){
                x.innerHTML="Please make your choice and guess."
            }
        })

        // SLIDER
        const slider = document.getElementById('belief_slider');
        const leftSpan = document.getElementById('left-value');
        const rightSpan = document.getElementById('right-value');
        const hidden = document.getElementById('id_belief_1');
        const sliderContainer = document.getElementById('slider-container');

        if (slider) {
            slider.addEventListener('input', function() {
                // Show the thumb on first move
                sliderContainer.classList.remove('empty-slider');
                sliderContainer.classList.add('interacted');

                // Update text and hidden input
                let val = parseFloat(this.value);
                leftSpan.innerText = val.toFixed(1);
                rightSpan.innerText = (100 - val).toFixed(1);
                hidden.value = val.toFixed(1);
            });
        }

        document.getElementById("ok_button").addEventListener('click', function () {
            submitTime = Date.now()
            if (document.getElementById("time_spent").value) {
                document.getElementById("time_spent").value
            } else {
                document.getElementById("time_spent").value = submitTime - startTime;
            }
            document.getElementById("form").submit();
        })
    });

    function show_Instructions() {
        document.getElementById("instructions_clicked").value = 1
        let elem1 = document.getElementById("instructions_button"), text1 = elem1.innerText;
        if (text1 === "Show Instructions"){
            elem1.innerHTML = "Hide Instructions";}
        else{
            elem1.innerHTML = "Show Instructions";
        }
        let x1 = document.getElementById("Instructions");
        if (x1.style.display === "none") {
            x1.style.display = "block";
        }
        else {
            x1.style.display = "none";
        }
    };
          
    // Delay choices
    setTimeout(function () {
        document.getElementById("interface").style.visibility = "visible";
        document.getElementById("ok_button").style.visibility = "visible";
        document.getElementById("instructions_button").style.visibility = "visible";
    }, 2000);
</script>
{{ endblock }}

{{ block styles }}
<style>
    /* Slider No-Value Start */
    .empty-slider input[type=range]::-webkit-slider-thumb { visibility: hidden; }
    .empty-slider input[type=range]::-moz-range-thumb { visibility: hidden; }
    .interacted input[type=range]::-webkit-slider-thumb { visibility: visible; }
    .interacted input[type=range]::-moz-range-thumb { visibility: visible; }
    .form-range { width: 100%; cursor: pointer; }
</style>
{{ endblock }}

{{ block content }}
<input name="instructions_clicked" type="hidden" id="instructions_clicked">
<input name="time_spent" type="hidden" id="time_spent">

<br>
<div class="container">
    <div class="center">
        <p>
            Asset's worth: {{ player.value | to0 }} points.
            <br>
            Your baseline points: {{ player.cost | to1 }}.
            <br>
            Opponent's baseline points: a random number between 0 and 100, all equally likely.
            <br>
            You will not know your opponent's baseline points and your opponent will not know your baseline points.
        </p>
    </div>
</div>
<br><br><br>

<div id="interface" style="visibility: hidden;">
    <p>Which option do you choose?</p>
    <table id="alternatives" class="center">
        <tr>
            <td style="width:10%">
                <input class="form-check-input" type="radio" id="id_choice-0" name="decision" required="" value="0">
            </td>
            <td>Option A: Asset's worth if opponent chooses Option B.</td>
        </tr>
        <tr>
            <td style="width:10%">
                <input class="form-check-input" type="radio" id="id_choice-1" name="decision" required="" value="1">
            </td>
            <td>Option B: Baseline points.</td>
        </tr>
    </table>
    <br><br>
    
    <p>
        What do you think is the probability that your opponent chooses each option:
    </p>
    <div class="center" style="max-width: 600px; margin: 40px auto; margin-top: 0px;">
        <!-- <p>Please select a value by clicking on the bar below:</p> -->
        <div id="slider-container" class="empty-slider">
            <div style="display:flex; align-items:center; justify-content:space-between; gap:12px;">
                <div style="width:80px; text-align:left;">
                    Option A <br>
                    <span id="left-value">--</span>%
                    <!-- <br>Asset<br> -->
                </div>
                <div style="flex:1;">
                    <input type="range" class="form-range" id="belief_slider" min="0" max="100" step="0.1" value="50">
                </div>
                <div style="width:80px; text-align:right;">
                    Option B <br> 
                    <span id="right-value">--</span>%
                    <!-- <br>Opponent's <br> Baseline Points -->
                </div>
            </div>
        </div>
        <input type="hidden" name="belief_1" id="id_belief_1" value="">
    </div>
    
    {{ if player.practice == 1  }}
        <div class="container"><div class="centering"><button type="button" class="btn btn-primary" style="visibility: hidden;" id="ok_button">Receive feedback</button></div></div>
    {{ endif }}
    {{ if player.practice == 0  }}
        <div class="container"><div class="centering"><button type="button" class="btn btn-primary" style="visibility: hidden;" id="ok_button">Next</button></div></div>
    {{ endif }}
    
    <div class="container">
        <div class="centering">
            <button type="button" style="visibility: hidden;" class="btn btn-secondary" id="instructions_button" onclick="show_Instructions()">Show Instructions</button>
        </div>
    </div>
    
    <div id="Instructions" style="display: none" class="card bg-light instructions">
        <div class="card-body">
            {{ include "Task1/InstructionsBase.html"}}
        </div>
    </div>
</div>
{{ endblock }}