{% extends "global/Page.html" %}
{% block content %}

<h2>Audio Chat</h2>

<div style="border: 2px solid #444; padding: 15px; border-radius: 8px; margin-bottom: 20px;">
    <p><strong>Important:</strong> The audio room will open in a separate popup window.</p>

    <ul>
        <li>Please allow microphone access if your browser asks for permission.</li>
        <li>Please make sure the popup window stays open for the whole experiment.</li>
        <li>Only click <strong>Continue</strong> after the audio room has opened successfully.</li>
    </ul>

    <p>
        If no popup appears, please check whether your browser blocked popups for this site.
    </p>
</div>

<button type="button" class="btn btn-primary" onclick="openTwilioWindow()">
    Open Audio Room
</button>

<p id="popupStatus" style="margin-top: 15px; color: darkred;">
    Audio room not opened yet.
</p>

<div style="margin-top: 20px;">
    <label>
        <input type="checkbox" id="confirmAudioWindow" onchange="updateContinueButton()" disabled>
        I confirm that the audio room popup is open and I allowed microphone access.
    </label>
</div>

<script>
let popupOpened = false;

function openTwilioWindow() {
    const token = encodeURIComponent("{{ twilio_token }}");
    const room  = encodeURIComponent("{{ room_name }}");

    const url = '/static/global/TwilioAudioPopupPage.html?token=' + token + '&room=' + room;

    const popupWidth = 560;
    const popupHeight = 420;

    const left = window.screenX + window.outerWidth - popupWidth - 30;
    const top = window.screenY + 80;

    const popup = window.open(
        url,
        'TwilioAudioRoom',
        'width=' + popupWidth +
        ',height=' + popupHeight +
        ',left=' + left +
        ',top=' + top +
        ',resizable=yes,scrollbars=yes'
    );

    const status = document.getElementById('popupStatus');
    const checkbox = document.getElementById('confirmAudioWindow');

    if (popup === null) {
        popupOpened = false;
        status.style.color = 'darkred';
        status.innerHTML =
            '<strong>Popup blocked.</strong> Please allow popups for this site and click "Open Audio Room" again.';
        checkbox.disabled = true;
        checkbox.checked = false;
    } else {
        popupOpened = true;
        status.style.color = 'darkgreen';
        status.innerHTML =
            'Audio room popup opened. Please allow microphone access in the popup, then tick the box below.';
        checkbox.disabled = false;
    }

    updateContinueButton();
}

function updateContinueButton() {
    const btn = document.getElementById('continueBtn');
    const checkbox = document.getElementById('confirmAudioWindow');

    btn.disabled = !(popupOpened && checkbox.checked);
}
</script>

<br><br>

<form method="post">
    <button id="continueBtn" class="btn btn-primary" disabled>
        Continue
    </button>
</form>

{% endblock %}