{% block title %}Watch the Video{% endblock %}

{% block content %}

<style>
    .video-container {
        position: relative;
        width: 100%;
        max-width: 900px;
        margin: 0 auto;
        padding-bottom: 56.25%; /* 16:9 aspect ratio */
        height: 0;
        overflow: hidden;
    }

    .video-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none;
    }

    .instructions {
        text-align: center;
        margin: 20px auto;
        max-width: 800px;
        padding: 15px;
        background-color: #f8f9fa;
        border-radius: 5px;
    }

    #nextButton {
        display: block;
        margin: 20px auto;
        opacity: 0.5;
    }
    #nextButton:enabled {
        opacity: 1;
    }
</style>

<form method="post">
    <div class="instructions">
        <p><strong>Please watch the following video carefully.</strong></p>
        <p>If you want to watch the video in full screen, double-click on the video.</p>
        <p>The "Next" button will appear automatically when you can proceed.</p>
    </div>

    <div class="video-container">
        <iframe id="videoPlayer"
                src="{{ video_url }}?enablejsapi=1&rel=0&modestbranding=1&fs=1&controls=1"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"
                allowfullscreen>
        </iframe>
    </div>

    <div class="text-center">
        <button type="submit" class="btn btn-primary btn-lg" id="nextButton" disabled>
            Next
        </button>
    </div>

    <!-- Hidden form fields -->
    <input type="hidden" name="time_on_page" id="id_time_on_page" value="0">
    <input type="hidden" name="pause_count" id="id_pause_count" value="0">
    <input type="hidden" name="video_watched" id="id_video_watched" value="false">
    <input type="hidden" name="hidden_count" id="id_hidden_count" value="0">
</form>

<script src="https://www.youtube.com/iframe_api"></script>

<script>
    let pageLoadTime = Date.now();
    let pauseCount = 0;
    let player;
    let hiddenCount = 0;

    function onYouTubeIframeAPIReady() {
        player = new YT.Player('videoPlayer', {
            events: {
                'onStateChange': onPlayerStateChange
            }
        });
    }

    function onPlayerStateChange(event) {
        if (event.data === YT.PlayerState.PAUSED) {
            pauseCount++;
            document.getElementById('id_pause_count').value = pauseCount;
        }

        if (event.data === YT.PlayerState.ENDED) {
            document.getElementById('id_video_watched').value = 'True';
            document.getElementById('nextButton').disabled = false;
        }
    }

    document.querySelector('form').addEventListener('submit', function () {
        const secondsOnPage = Math.floor((Date.now() - pageLoadTime) / 1000);
        document.getElementById('id_time_on_page').value = secondsOnPage;
    });

    document.addEventListener('visibilitychange', function () {
        if (document.hidden) {
            hiddenCount++;
            document.getElementById('id_hidden_count').value = hiddenCount;
        }
    });
</script>

{% endblock %}