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

{% block title %}
いま{{player.round_number }}回目
{% endblock %}

{% block content %}

<div class="tab-wrap">
    <input id="TAB-01" type="radio" name="TAB" class="tabs" checked="checked">
    <label class="tab-label" for="TAB-01">実験（意思決定画面）</label>
     <div class="tab-content">
<table class="table-css">
    <br>
    <div class="d-flex align-content-around flex-wrap">
        <div class="container" >
            <button  id="N1" style="width: 4.2rem;" disabled='disabled'  type="button" data-toggle="button" class="Card p-4 btn-outline-dark">?</button>
            <button  id="N2" style="width: 4.2rem;" disabled='disabled'  type="button" data-toggle="button" class="Card p-4 btn-outline-dark">?</button>
            <button  id="N3" style="width: 4.2rem" disabled='disabled'  type="button" data-toggle="button" class="Card p-4 btn-outline-dark">?</button>
            <button  id="N4" style="width: 4.2rem" disabled='disabled'  type="button" data-toggle="button" class="Card p-4 btn-outline-dark">?</button>
        </div>
    </div>
    <div style="line-height: 0.4em"><br></div>
    <div class="d-flex align-content-around flex-wrap">
                <div class="container" >
            <button  id="N5" style="width: 4.2rem" disabled='disabled'  type="button" data-toggle="button" class="Card p-4 btn-outline-dark">?</button>
            <button  id="N6" style="width: 4.2rem" disabled='disabled'  type="button" data-toggle="button" class="Card p-4 btn-outline-dark">?</button>
            <button  id="N7" style="width: 4.2rem" disabled='disabled'  type="button" data-toggle="button" class="Card p-4 btn-outline-dark">?</button>
            <button  id="N8" style="width: 4.2rem" disabled='disabled'  type="button" data-toggle="button" class="Card p-4 btn-outline-dark">?</button>
        </div>
    </div>
    <div style="line-height: 0.4em"><br></div>
    <div class="d-flex align-content-around flex-wrap">
        <div class="container" >
            <button  id="N9" style="width: 4.2rem;" disabled='disabled'  type="button" data-toggle="button" class="Card p-4 btn-outline-dark">?</button>
            <button  id="N10" style="width: 4.2rem;" disabled='disabled' type="button" data-toggle="button" class="Card p-4 btn-outline-dark">?</button>
            <button  id="N11" style="width: 4.2rem" disabled='disabled'  type="button" data-toggle="button" class="Card p-4 btn-outline-dark">?</button>
            <button  id="N12" style="width: 4.2rem" disabled='disabled'  type="button" data-toggle="button" class="Card p-4 btn-outline-dark">?</button>
        </div>
    </div>
    <div style="line-height: 0.4em"><br></div>
    <div class="d-flex align-content-around flex-wrap">
                <div class="container" >
            <button  id="N13" style="width: 4.2rem" disabled='disabled'  type="button" data-toggle="button" class="Card p-4 btn-outline-dark">?</button>
            <button  id="N14" style="width: 4.2rem" disabled='disabled'  type="button" data-toggle="button" class="Card p-4 btn-outline-dark">?</button>
            <button  id="N15" style="width: 4.2rem" disabled='disabled'  type="button" data-toggle="button" class="Card p-4 btn-outline-dark">?</button>
            <button  id="N16" style="width: 4.2rem" disabled='disabled'  type="button" data-toggle="button" class="Card p-4 btn-outline-dark">?</button>
        </div>
    </div>


    <p class="mt-3" id="msg-new-value"></p>
    <p id="msg-my-num"></p>
    <p id="msg-my-status"></p>
    
    <p></p> 
    
    <p  id="msg-decision"></p>
    <button type="button" data-toggle="button"  id='conti-btn' onclick="contiMode()" >カードをめくる</button>
    <button type="button" data-toggle="button" id='end-btn' onclick="resultMode()" >この回を終了する</button>
    <table class="table-css"></table>
    <br>
    <br>
    <p id="msg-my-result"></p>
    <button id='next-btn'  disabled = 'disabled';>次へ</button>
    <style>
        .otree-body {
         max-width:1100px
        }
        .tab-wrap {
         display:flex;
         flex-wrap:wrap;
        }
        .tab-label {
         color:White;
         background:#d4dcda;
         margin-right:5px;
         padding:3px 12px;
         order: -1;
        }
        .tab-content {
         width: 100%;
         display: none;
        }
        .tabs:checked+ .tab-label {
         background: #89c3ed;
        }
        .tabs:checked+ .tab-label+ .tab-content {
         display: block;
        }
        .tabs {
         display: none;
        }
    </style>

    <style type="text/css">
        .table-css {
         border-collapse; collapse;
        }
        .border_lowzero {
         border: 1px solid black;
        }
        .border_topzero {
         border: 1px solid black;
         border-top-style:none;
        }
        .border_kakou {
        border: 1px solid black;
       }
    </style>
    </div>

     <input id="TAB-02" type="radio" name="TAB" class="tabs">
     <label class="tab-label" for="TAB-02">インストラクション</label>

    <div class="tab-content">
    	<iframe src="https://docs.google.com/presentation/d/e/2PACX-1vSYTpv7m4NYm2sbv3kgk9Ma8LOPMYm__b3reIPw4Ie-XDkOtUUHxgmcpMKt5p045dDKIEZuhIFUjhsj/embed?start=false&loop=false&delayms=3000" frameborder="0" width="1080" height="636" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
    </div>
</div>

<br>
   <script>
        let contiBtn = document.getElementById('conti-btn');
        let endBtn = document.getElementById('end-btn');
        let nextBtn = document.getElementById('next-btn');
        let msgMyStatus = document.getElementById('msg-my-status');
        let msgMynum = document.getElementById('msg-my-num');
        let msgNewBalue = document.getElementById('msg-new-value');
        let msgDecision = document.getElementById('msg-decision');
        let msgMyResult = document.getElementById('msg-my-result');
        let cardState = document.getElementById('cards');
        

        // カード枚数（必須）
        card_num=16;


        for (let i = 1 ; i< card_num+1;i++ ){
            let id_num = "N"+i;
            let card = document.getElementById(id_num);
            if(card.innerText == '?'){
                card.disabled = 'disabled';
                card.style.fontWeight = "bold"
            }
        }
        
        function Lock(){
            for (let i = 1 ; i< card_num+1;i++ ){
                let id_num = "N"+i;
                let card = document.getElementById(id_num);
                card.disabled = 'disabled';
                }   
        }

        function resetCard(){
            for (let i = 1 ; i< card_num+1;i++ ){
                let id_num = "N"+i;
                let card = document.getElementById(id_num);
                card.disabled = '';
                card.innerText = '?';
                card.style.backgroundColor="";
                card.style.fontWeight = "bold"
                }   
        }

        function activateCard(){
            for (let i = 1 ; i< card_num+1;i++ ){
                let id_num = "N"+i;
                let card = document.getElementById(id_num);
                if (card.innerText=='?' )
                card.disabled = '';
                }   
        }
        
        function contiMode(){
            document.activeElement.blur();
            msgDecision.innerText = `カードを一枚クリックしてください`;
            contiBtn.disabled = 'disabled';
            activateCard()
            let count=0;
            for (let i = 1 ; i< card_num+1;i++ ){
                let id_num = "N"+i;
                let tmp = document.getElementById(id_num);
                if (tmp.innerText=='?'){
                    count = count + 1
                }
            }
            if(count==0){
                resetCard()
            }
        }

        function resultMode(){
            contiBtn.disabled = 'disabled';
            Lock()
            endBtn.disabled = 'disabled';
            msgMyResult.innerText = `しばらくお待ちください`;
            liveSend({conti:false,finish:true})
        }

        function sendValue(data){
            
            let id_name = data.id;
            document.activeElement.blur();
            msgMyStatus.innerText = `しばらくお待ちください`;
            liveSend({conti:true,card_position:id_name,finish:false});
        }

        function liveRecv(data){
            msgDecision.innerText = ``;
            document.activeElement.blur();
            for (let i = 1 ; i< card_num+1;i++ ){
                    let id_num = "N"+i;
                    let card = document.getElementById(id_num);
                    card.disabled = 'disabled';
                    if (card.innerText=="?"){
                        card.style.backgroundColor ="WhiteSmoke";
                    }else{
                        if(data.update==1){
                            card.style.fontWeight = "normal"
                        }
                    card.style.backgroundColor = 'white';
                    };
                }
            if (data.clicked) {
                let card = document.getElementById(data.index);
                card.innerText= String(data.current_value);
                card.style.backgroundColor = 'white';
                card.style.fontWeight = "normal"
                if(data.update==1){
                    card.style.fontWeight = "bold";
                }
                card.style.backgroundColor="rgba(183, 255, 255, 1)";
            } 

            msgMynum.innerText = `選択した回数（総費用）: ${data.search_num}`;
            msgMyStatus.innerText = `この回の最大ポイント： ${data.current_best_value} です`;
            
            if (data.end_frag!=1){
                contiBtn.disabled = '';
                endBtn.disabled = '';
            }else{
                contiBtn.disabled = 'disabled';
                endBtn.disabled = 'disabled';
                nextBtn.disabled = '';
                msgMyResult.innerText = `この回の結果は: ${data.result} になります。`;
            }
        }
    
    var li = document.getElementsByClassName('Card');
    for (var i=0; i < card_num; i++) {
        li[i].addEventListener('click', function() {
            Lock()
            sendValue(this);
    });
    };

    document.addEventListener("DOMContentLoaded", function (event) {
        Lock();
        liveSend({conti:false,finish:false});
    });
    
    </script>

{% endblock %}