{{ block title }}
<style>
    .header-bar {
        position: relative;
        text-align: center;
        padding: 10px 20px;
        font-size: 30px;
        font-weight: bold;
    }
    #timer {
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translateY(-50%);
        font-size: 16px;
        font-weight: bold;
        color: black;
    }
</style>

<div class="header-bar">
    <div class="header-title">
        Preissetzung - Runde {{ player.round_number }} von {{ C.NUM_ROUNDS }}
    </div>
    <div id="timer">
        Bitte absenden in:<br>
        <span id="time">180</span> Sekunden
    </div>
</div>
{{ endblock }}

{{ block content }}

<div class="otree-body">
    <div class="center-text">
        Bitte setzen Sie den Preis für Ihr Produkt. Begründen Sie anschließend ausführlich, weshalb dieser Preis angemessen ist. Ihre Erklärung wird anschließend von der KI in Bezug auf ihre Überzeugungskraft bewertet. Die Auswertung Ihrer Begründung erhalten Sie zum Ende des Experiments.<br>
        <br>
        {{ if group.optimization }}
            {{ if player.round_number < 6}}
                Der aktuelle Wert für <b> Ihr </b> ω beträgt <b>ω={{ player.omega_current }}</b>. <br> Der aktuelle Wert für das ω <b> aller anderen Produzenten </b>  beträgt <b>ω={{ player.omega_current }}</b>.
            {{ else }}
                {{ if group.clear }}
                    Der aktuelle Wert für <b> Ihr </b> ω  beträgt <b>ω={{ player.omega_current }}</b>.<br> Der aktuelle Wert für das ω <b> aller anderen Produzenten </b>  beträgt <b>ω={{ player.omega_current }}</b>.
                {{ else }}
                    Der aktuelle Wert für <b> Ihr </b> ω beträgt <b>ω={{ player.omega_current }}</b>.<br> Der aktuelle Wert für das ω <b> aller anderen Produzenten </b>  beträgt entweder <b>ω={{ player.omega_current }}</b> oder <b>ω={{ player.omega_small }}</b>.
                {{ endif }}
            {{ endif }}
        {{ else }}
            {{ if player.round_number < 6}}
                <b> Ihr </b> aktueller Zielpreis beträgt z = {{ player.price_aim_parameter_pre }} + 1/2&times;P</b>.<br> Der aktuelle Zielpreis <b> aller anderen Produzenten </b>  beträgt <b>z = {{ player.price_aim_parameter_pre }} + 1/2&times;P</b>.
            {{ else }}
                {{ if group.clear }}
                    <b> Ihr </b> aktueller Zielpreis beträgt <b>z = {{ player.price_aim_parameter_post }} + 1/2&times;P</b>.<br> Der aktuelle Zielpreis <b> aller anderen Produzenten </b>  beträgt <b>z = {{ player.price_aim_parameter_post }} + 1/2&times;P</b>.
                {{ else }}
                    <b> Ihr </b> aktueller Zielpreis beträgt <b>z = {{ player.price_aim_parameter_post }} + 1/2&times;P</b>.<br> Der aktuelle Zielpreis <b> aller anderen Produzenten </b>  beträgt entweder <b>z = {{ player.price_aim_parameter_post }} + 1/2&times;P</b> oder <b>z = {{ player.price_aim_parameter_small }} + 1/2&times;P</b>.
                {{ endif }}
            {{ endif }}
        {{ endif }}
    </div>

    <div class="center-box">
        <div class="center-text2">
            {{ formfield 'price' }}
        </div>
    </div>
<div class="textBox">
        <div id="chat_messages" style="font-size: large;">
        </div>
    </div>

    <!-- text input -->
<div class="inputBox" style="text-align: center; margin-top: 20px;">
    <div class="typeInputBox" style="display: flex; flex-direction: column; align-items: center;">
        <textarea name="explanation"
                  rows="10"
                  id="chat_input"
                  style="width: 600px; margin-bottom: 20px;"></textarea>

        <button id="combinedBtn"
                type="button"
                onclick="handleCombinedClick()"
                class="otree-btn-next btn btn-primary">
            Preis und Erklärung absenden
        </button>
    </div>
</div>
    <button class="otree-btn-next btn btn-primary" style="display: none;" id="hiddenNextBtn"></button>

<script>
function handleCombinedClick() {
    sendMsg();
     document.querySelector('form').submit();
}
</script>
    <input type='hidden' name='chatLog' value='' id='chatLog'/>
    <input type='hidden' name='receive' value='' id='receive'/>
    <input type='hidden' name='msg botText' value='' id='msg botText'/>


<!-- Hidden fields for keystroke tracking -->
<input type="hidden" name="keystroke_price_data" id="keystroke_price_data">
<input type="hidden" name="keystroke_data" id="keystroke_data">

<!-- Timer Script -->
<script>
    let totalSeconds = 180; // 2 minutes
    const timerDiv = document.getElementById('timer');
    const timerSpan = document.getElementById('time');
    let blinkInterval = null;

    // Hide the timer initially
    timerDiv.style.visibility = 'hidden';

    const countdown = setInterval(function() {
        totalSeconds--;

        if (totalSeconds <= 90) {
            // After first minute, show timer
            timerDiv.style.visibility = 'visible';
            timerSpan.textContent = totalSeconds; // update displayed time
        }

        if (totalSeconds === 10) {
            // Start blinking in the last 10 seconds
            blinkInterval = setInterval(function() {
                timerDiv.style.visibility = (timerDiv.style.visibility === 'hidden') ? 'visible' : 'hidden';
            }, 500);
        }

        if (totalSeconds <= 0) {
            clearInterval(countdown);
            if (blinkInterval) {
                clearInterval(blinkInterval);
                timerDiv.style.visibility = 'visible'; // Ensure it is visible at the end
            }
            timerDiv.textContent = 'Bitte jetzt absenden!';
        }
    }, 1000);
</script>

<!-- Keystroke Tracking Script -->
<script>
    document.addEventListener("DOMContentLoaded", function () {
        let priceBox = document.querySelector("input[name='price']");
        let explanationBox = document.querySelector("textarea[name='explanation']");
        let keystrokesPrice = [];
        let keystrokesExplanation = [];

        priceBox.addEventListener("input", function () {
            let timestamp = new Date().toISOString();
            keystrokesPrice.push({ time: timestamp, text: priceBox.value });
            document.getElementById("keystroke_price_data").value = JSON.stringify(keystrokesPrice);
        });

        explanationBox.addEventListener("input", function () {
            let timestamp = new Date().toISOString();
            keystrokesExplanation.push({ time: timestamp, text: explanationBox.value });
            document.getElementById("keystroke_data").value = JSON.stringify(keystrokesExplanation);
        });
    });
</script>

<!-- More Styling -->
<style>
    .center-box {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        margin-top: 20px;
    }
    .center-text2 {
        text-align: center;
        font-weight: bold;
    }
    .center-text {
        text-align: center;
    }
    .otree-body {
        background-color: lightgrey;
        border-radius: 10px;
        padding: 20px;
        margin-top: 10px;
    }
</style>

<script>
        // adapting chat from oTree snippets page
        var chat_input = document.getElementById('chat_input');

//        chat_input.addEventListener("keydown", function (event) {
//            if (event.key === "Enter") {
//                sendMsg();
//            }
//        });



        // function to append text in webpage
        function sendMsg() {
            document.getElementById('combinedBtn').style.display='none';
            var text = document.getElementById('chat_input').value.trim();
            document.getElementById('chat_input').style.display='none';
            if (text) {
                liveSend({'text': text});
                let msgSpan = document.createElement('span');
                msgSpan.textContent = text;
                // write chatLog to input field
                document.getElementById('chatLog').value = text;
                let row = `<div class="msg selfText">${msgSpan.innerHTML}</div><br>`;
                chat_messages.insertAdjacentHTML('beforeend', row);
            }
            chat_input.value = '';
        }

        // specify messages element
        var chat_messages = document.getElementById('chat_messages');

        // function for live receiving from server
        function liveRecv(data) {
            let msgSpan = document.createElement('span');
            msgSpan.textContent = data;
            document.getElementById('receive').value = data;

            document.getElementById('nextbtn').style.display='inline-block';
        }
</script>
{{ endblock }}