{{ extends "global/Page.html" }}
{{ block title }} {{ endblock }}

{{ block content }}


<style>

    
 body {
      font-family: Arial, sans-serif;
      margin: 40px auto;
      line-height: 1.6;
      max-width: 800px;
      padding: 0 20px;
    }
    
    
.exp-container {
        display: flex;
        justify-content: space-between;
        padding: 40px;
        font-family: Arial, sans-serif;
    }

    .exp-column {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 47%;
    }

    .exp-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border: 1px solid #ccc;
        padding: 8px 12px;
        border-radius: 6px;
        background-color: #f9f9f9;
        height: 50px; /* <-- fixed height for all rows */
        box-sizing: border-box;
    }
    
    .exp-row span {
        margin-right: 10px; /* or more if you want extra spacing */
        min-width: 60px;     /* to keep label width consistent */
    }

    .exp-label {
        font-weight: bold;
    }

    .exp-response {
        color: #333;
        min-width: 150px;
        text-align: right;
    }

    .exp-input-field {
        width: 150px;
        padding: 5px;
        font-size: 1em;
    }

    .exp-divider {
        width: 2px;
        background-color: #aaa;
        margin: 0 20px;
    }

    .left-column {
        align-items: flex-start;
    }

    .right-column {
        align-items: flex-end;
    }
    
    
</style>

{% if Role_Subject_or_Experimenter != 'Experimenter' %}


{{ formfields }}
<button id="confirm-button" onclick="sendConfirmSignal()" type="button">Confirm</button>



{%  else  %}

<p>
    Make sure that Participant Numbers were assigned correctly. In addition to the experimenter, we must have 21 participant computers active (22 computers total). They must each be assigned a unique Participant Number from 1-21.
</p>

<div class="exp-container">
    <!-- Left Column -->
    <div class="exp-column left-column">
        <div class="exp-row">
            <div class="exp-label">1</div>
            <div id="response-1" class="exp-response">
                -
            </div>
        </div>

        <div class="exp-row">
            <div class="exp-label">2</div>
            <div id="response-2" class="exp-response">
                -
            </div>
        </div>
        
        <div class="exp-row">
    <div class="exp-label">3</div>
    <div id="response-3" class="exp-response">
        -
    </div>
</div>

<div class="exp-row">
    <div class="exp-label">4</div>
    <div id="response-4" class="exp-response">
        -
    </div>
</div>

<div class="exp-row">
    <div class="exp-label">5</div>
    <div id="response-5" class="exp-response">
        -
    </div>
</div>

<div class="exp-row">
    <div class="exp-label">6</div>
    <div id="response-6" class="exp-response">
        -
    </div>
</div>

<div class="exp-row">
    <div class="exp-label">7</div>
    <div id="response-7" class="exp-response">
        -
    </div>
</div>

<div class="exp-row">
    <div class="exp-label">8</div>
    <div id="response-8" class="exp-response">
        -
    </div>
</div>

<div class="exp-row">
    <div class="exp-label">9</div>
    <div id="response-9" class="exp-response">
        -
    </div>
</div>

<div class="exp-row">
    <div class="exp-label">10</div>
    <div id="response-10" class="exp-response">
        -
    </div>
</div>

<div class="exp-row">
    <div class="exp-label">11</div>
    <div id="response-11" class="exp-response">
        -
    </div>
</div>

<div class="exp-row">
    <div class="exp-label">12</div>
    <div id="response-12" class="exp-response">
        -
    </div>
</div>

<div class="exp-row">
    <div class="exp-label">13</div>
    <div id="response-13" class="exp-response">
        -
    </div>
</div>

<div class="exp-row">
    <div class="exp-label">14</div>
    <div id="response-14" class="exp-response">
        -
    </div>
</div>

<div class="exp-row">
    <div class="exp-label">15</div>
    <div id="response-15" class="exp-response">
        -
    </div>
</div>

<div class="exp-row">
    <div class="exp-label">16</div>
    <div id="response-16" class="exp-response">
        -
    </div>
</div>

<div class="exp-row">
    <div class="exp-label">17</div>
    <div id="response-17" class="exp-response">
        -
    </div>
</div>

<div class="exp-row">
    <div class="exp-label">18</div>
    <div id="response-18" class="exp-response">
        -
    </div>
</div>

<div class="exp-row">
    <div class="exp-label">19</div>
    <div id="response-19" class="exp-response">
        -
    </div>
</div>

<div class="exp-row">
    <div class="exp-label">20</div>
    <div id="response-20" class="exp-response">
        -
    </div>
</div>
        
<div class="exp-row">
    <div class="exp-label">21</div>
    <div id="response-21" class="exp-response">
        -
    </div>
</div>
 
</div>

</div>


<button type="button" onclick="checkUpdates()">Refresh Data</button>
<button disabled id="proceed-button" onclick="sendProceedSignal()">Proceed</button>
<input type="hidden" name="Participant_Number" id="Participant_Number"> 


{% endif %}








{{ endblock }}

{{ block scripts }}
<script>
if (js_vars.Role_Subject_or_Experimenter == "Experimenter"){
        document.getElementById('Participant_Number').value = 999;
      }





function liveRecv(data) {
    console.log("Received:", data); // Debug
    if (data === "advance") {
        setTimeout(function() {
        	document.forms[0].submit();
    	}, 1000);
    }
  	else {
      if (js_vars.Role_Subject_or_Experimenter == "Experimenter"){
        updateExperimenterPage(data);
      }
    }
}

function checkUpdates(){
    liveSend({
       "Participant_Number": 999
    });
}

function sendProceedSignal() {
        liveSend("Proceed");
    }

function sendConfirmSignal() {
  	const btn = document.getElementById('confirm-button');
    const number = document.querySelector('input[name="Participant_Number"]').value;
  
  	btn.disabled = true;
  
  
  	setTimeout(function() {
        liveSend({
        	"Participant_Number": number
    	});
    }, 1000);
  	
  
  	console.log("Participant_Number to be sent:", number);

    // Submit the page back to oTree
    setTimeout(function() {
        console.log("Submitting now.");
        document.querySelector('form').submit();
    }, 3000);
}

function updateExperimenterPage(data) {
  	if (data.Participant_Number_1 == "Confirmed") {
      document.getElementById('response-1').innerText = 'Confirmed';
    } 
 
  	if (data.Participant_Number_2 == "Confirmed") {
      document.getElementById('response-2').innerText = 'Confirmed';
    } 

  	if (data.Participant_Number_3 == "Confirmed") {
      document.getElementById('response-3').innerText = 'Confirmed';
    } 

  	if (data.Participant_Number_4 == "Confirmed") {
      document.getElementById('response-4').innerText = 'Confirmed';
    } 

  	if (data.Participant_Number_5 == "Confirmed") {
      document.getElementById('response-5').innerText = 'Confirmed';
    } 

  	if (data.Participant_Number_6 == "Confirmed") {
      document.getElementById('response-6').innerText = 'Confirmed';
    } 

  	if (data.Participant_Number_7 == "Confirmed") {
      document.getElementById('response-7').innerText = 'Confirmed';
    } 

  	if (data.Participant_Number_8 == "Confirmed") {
      document.getElementById('response-8').innerText = 'Confirmed';
    } 
 
  	if (data.Participant_Number_9 == "Confirmed") {
      document.getElementById('response-9').innerText = 'Confirmed';
    } 

  	if (data.Participant_Number_10 == "Confirmed") {
      document.getElementById('response-10').innerText = 'Confirmed';
    } 

  	if (data.Participant_Number_11 == "Confirmed") {
      document.getElementById('response-11').innerText = 'Confirmed';
    } 

  	if (data.Participant_Number_12 == "Confirmed") {
      document.getElementById('response-12').innerText = 'Confirmed';
    } 

  	if (data.Participant_Number_13 == "Confirmed") {
      document.getElementById('response-13').innerText = 'Confirmed';
    } 

  	if (data.Participant_Number_14 == "Confirmed") {
      document.getElementById('response-14').innerText = 'Confirmed';
    } 

  	if (data.Participant_Number_15 == "Confirmed") {
      document.getElementById('response-15').innerText = 'Confirmed';
    } 

  	if (data.Participant_Number_16 == "Confirmed") {
      document.getElementById('response-16').innerText = 'Confirmed';
    } 

  	if (data.Participant_Number_17 == "Confirmed") {
      document.getElementById('response-17').innerText = 'Confirmed';
    } 

  	if (data.Participant_Number_18 == "Confirmed") {
      document.getElementById('response-18').innerText = 'Confirmed';
    } 

  	if (data.Participant_Number_19 == "Confirmed") {
      document.getElementById('response-19').innerText = 'Confirmed';
    } 

  	if (data.Participant_Number_20 == "Confirmed") {
      document.getElementById('response-20').innerText = 'Confirmed';
    } 
  
  	if (data.Participant_Number_21 == "Confirmed") {
      document.getElementById('response-21').innerText = 'Confirmed';
    }
  	if (document.getElementById('response-1').innerText != '-' && document.getElementById('response-2').innerText != '-' && document.getElementById('response-3').innerText != '-' && document.getElementById('response-4').innerText != '-' && document.getElementById('response-5').innerText != '-' && document.getElementById('response-6').innerText != '-' && document.getElementById('response-7').innerText != '-' && document.getElementById('response-8').innerText != '-' && document.getElementById('response-9').innerText != '-' && document.getElementById('response-10').innerText != '-' && document.getElementById('response-11').innerText != '-' && document.getElementById('response-12').innerText != '-' && document.getElementById('response-13').innerText != '-' && document.getElementById('response-14').innerText != '-' && document.getElementById('response-15').innerText != '-' && document.getElementById('response-16').innerText != '-' && document.getElementById('response-17').innerText != '-' && document.getElementById('response-18').innerText != '-' && document.getElementById('response-19').innerText != '-' && document.getElementById('response-20').innerText != '-' && document.getElementById('response-21').innerText != '-'){
      document.getElementById('proceed-button').disabled = false;
    }
}










</script>
{{ endblock }}