{{ extends 'global/Page.html' }}
{{ block title }}Round {{ subsession.round_number }}{{ endblock }}

{{ block content }}

<script>
// Initialize startTime as soon as the script loads
var startTime = new Date();

function sendVolunteer() {
    var endTime = new Date(); // Capture the end time when "I invest" is clicked
    var timeSpent = endTime - startTime; // Calculate time spent in milliseconds

    // Set the calculated time spent in the hidden input field
    document.getElementById('time_spent').value = timeSpent;

    // Then proceed with sending the volunteer action and time spent to the server
    liveSend({'volunteer': true, 'timeSpent': timeSpent});
}
    
function liveRecv(data) {
    if (data.finished) {
    document.getElementById('form').submit();
    }
}
    
document.addEventListener('DOMContentLoaded', (event) => {
    // Reset startTime to ensure accuracy if the page takes time to load
    startTime = new Date();
    liveSend({});
});
</script>

<input type="hidden" name="time_spent" id="time_spent" value="">
{{ formfield_errors 'time_spent' }}


<p>Please click the button below if you want to invest.<p>
<br><br>
    
<center>
<button type="button" class="btn btn-primary" onclick="sendVolunteer()">I invest</button>
</center>
 
    
<br><br><br>
<p>If someone invests in this round,
   the investor will get <b><i>${{ subsession.investor_payoff }}</i></b>, 
    while other members in the group will get <b>${{ C.REWARD_NONINVESTOR }}</b>. If nobody invests within the 60 seconds, every group member will get <b>${{ C.REWARD_FAIL }}</b>.</p> 

<div style="display: flex; justify-content: space-between;">
    <div style="width: 25%; border: 1px solid red; padding: 6px; box-sizing: border-box; text-align: center; margin-left: 10px; margin-right: 10px;">
        <h3 style="margin-top: 0; font-weight: bold; font-size: larger; color:red;">You</h3>
        <p style="margin: 0;color:red;">Age: {{player.participant.age}}</p>
        <p style="margin: 0;color:red;">Gender: {{player.participant.gender}}</p>
        <p style="margin: 0;color:red;">Born in US: {{player.participant.born_in_us}}</p>
    </div> 
    
    {{ for partner in partners}} 
    <div style="width: 25%; border: 1px solid black; padding: 6px; box-sizing: border-box; text-align: center; margin-left: 10px; margin-right: 10px;">
        <h3 style="margin-top: 0; font-weight: bold; font-size: larger;">Group Member</h3>
        <p style="margin: 0;">Age: {{partner.participant.age}}</p>
        <p style="margin: 0;">Gender: {{partner.participant.gender}}</p>
        <p style="margin: 0;">Born in US: {{partner.participant.born_in_us}}</p>
    </div>
    {{ endfor }}


{{ endblock }}

{{ block scripts }}
<script>
function submitFormWithTimeSpent() {
    const timeSpentValue = document.getElementById('time_spent').value;
    const formData = new FormData();
    formData.append('time_spent', timeSpentValue);
    // Append other form data as needed

    fetch('YOUR_FORM_SUBMISSION_ENDPOINT', {
        method: 'POST',
        body: formData
    }).then(response => {
        // Handle response
        console.log('Form submitted with time spent:', timeSpentValue);
    }).catch(error => console.error('Error:', error));
}



</script>
{{ endblock }}