@extends('layouts.master')

@section('browserTitle')
{{ trans('menu.ex') }}
@endsection

@section('breadcrumb')
<li class="breadcrumb-item"><a href="{{ route('patientIndex') }}">{{ trans('menu.home') }}</a></li>
<li class="breadcrumb-item active" aria-current="page">{{ trans('menu.ex') }}</li>
@endsection



@section('exerciseBody')
<script type="text/javascript">
    $(document).ready(function() {
        $.ajax({
            type: 'GET',
            url: '/exercises/ajaxGetRandomExercise',

            success: function (data) {
                console.log("AJAX Ex Success");
                var exercise = data;
                $("#exTitle").append(exercise.name);
                console.log("Exercise: ", exercise);

                // Gestione apertura fullscreen
                $("button.open-fs-btn").click(function() {
                    $("button.close-fs-btn").removeClass("close-fs-selected");
                    $(".subtitle-container").removeClass("invisible");
                    // $(".instruction-container").removeClass("invisible");
                    $(".start-container").removeClass("invisible");

                    $(".esc-container").addClass("invisible");
                    $(".finish-button").addClass("invisible");
                    $(".exercise-container").addClass("invisible");
                    $(".fs-needed-container").addClass("invisible");
                    $(".countdown-container").addClass("invisible");

                    switch(exercise.name.trim()) {
                        case ("Button selection").trim():
                            if(typeof targetList !== 'undefined') {
                                buttonSelectionExercise(exercise, targetList);
                            } else {
                                buttonSelectionExercise(exercise, null);
                            }
                            break;
                        case ("Image-word").trim():
                            if(typeof input !== 'undefined') {
                                imageWordExercise(exercise, input);
                            } else {
                                imageWordExercise(exercise, null);
                            }
                            break;
                        case ("Text-completion").trim():
                            if(typeof input !== 'undefined') {
                                textCompletionExercise(exercise, input);
                            } else {
                                textCompletionExercise(exercise, null);
                            }
                            break;
                        case ("Text-completion V2").trim():
                            if(typeof input !== 'undefined') {
                                textCompletionV2Exercise(exercise, input);
                            } else {
                                textCompletionV2Exercise(exercise, null);
                            }
                            // textCompletionExercise(exercise);
                            break;
                        case ("Image reaction").trim():
                            // È SEMPRE UNDEFINED!?!
                            if(typeof input !== 'undefined') {
                                imageReactionExercise(exercise, input);
                            } else {
                                imageReactionExercise(exercise, null);
                            }
                            break;
                        default:
                            console.log("No exercise found");
                    }
                });

                // Gestione chiusura fullscreen
                $("button.close-fs-btn").click(function() {
                    $(this).addClass("close-fs-selected");
                    $(".fs-needed-container").removeClass("invisible");

                    $(".subtitle-container").addClass("invisible");
                    $(".start-container").addClass("invisible");
                    $(".exercise-container").addClass("invisible");
                    $(".esc-container").addClass("invisible");
                    $(".countdown-container").addClass("invisible");
                    $(".finish-button").addClass("invisible");
                    $(".instruction-container").addClass("invisible");
                    $(".instruction-container").addClass("text-center");
                    $(".instruction-container").addClass("offset-md-2");
                    // $(".finish-button").addClass("invisible");
                });

                // Gestione del tasto Escape
                $(document).on('fullscreenchange', function() {
                    if (document.fullscreenElement) {
                        // Quando entri in modalità fullscreen, aggiungi il listener per il tasto Escape
                        console.log("Entered fullscreen mode");
                        
                        $(window).on('keydown.fullscreen', function(event) {
                            if (event.key === "Escape" || event.keyCode === 27) {
                                console.log("Escape key pressed in fullscreen mode"); 
                            }
                        });
                    } else {
                        // Quando esci dalla modalità fullscreen, rimuovi il listener
                        console.log("Exited fullscreen mode");
                        $(window).off('keydown.fullscreen');

                        $("button.close-fs-btn").addClass("close-fs-selected");
                        $(".fs-needed-container").removeClass("invisible");
                        $(".countdown-container").addClass("invisible");
                        $(".finish-button").addClass("invisible");
                        $(".subtitle-container").addClass("invisible");
                        $(".instruction-container").addClass("invisible");
                        $(".start-container").addClass("invisible");
                        $(".exercise-container").addClass("invisible");
                        $(".esc-container").addClass("invisible");

                        // Disabilita il pulsante "Close" e abilita il pulsante "Open"
                        $(".close-fs-btn").prop('disabled', true);
                        $(".open-fs-btn").prop('disabled', false);
                    }
                });



                
            },

            error: function (xhr, status, error) {
                console.error("AJAX Error: ", status, error);
                console.log(xhr.responseText);
            }
        });




        var fsContainer = document.querySelector('.full-screen-container');
    
        function openFullscreen() {
            if (fsContainer.requestFullscreen) {
                fsContainer.requestFullscreen();
            } else if (fsContainer.webkitRequestFullscreen) { /* Safari */
                fsContainer.webkitRequestFullscreen();
            } else if (fsContainer.msRequestFullscreen) { /* IE11 */
                fsContainer.msRequestFullscreen();
            }

            // Disabilita il pulsante "Open" e abilita il pulsante "Close"
            $(".open-fs-btn").prop('disabled', true);
            $(".close-fs-btn").prop('disabled', false);
        }

        function closeFullscreen() {
            if (document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement) {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.webkitExitFullscreen) { /* Safari */
                    document.webkitExitFullscreen();
                } else if (document.msExitFullscreen) { /* IE11 */
                    document.msExitFullscreen();
                }
                
                // Disabilita il pulsante "Close" e abilita il pulsante "Open"
                $(".close-fs-btn").prop('disabled', true);
                $(".open-fs-btn").prop('disabled', false);
            } else {
                console.warn("Non sei in modalità fullscreen.");
            }
        }

        // Associa le funzioni ai pulsanti
        $(".open-fs-btn").on("click", openFullscreen);
        $(".close-fs-btn").on("click", closeFullscreen);


    });
</script>









<div class="container-fluid full-screen-container">

    <header class="header-sezione">

    <!-- NON ESCE ALLINEATO AL CENTRO! -->
        <div class="title-container row align-items-center">
            <div class="col-md-6">
                <h1 id="exTitle"><span></span></h1>
            </div>
            <div class="col-md-6 d-grid gap-2 d-sm-flex justify-content-sm-end fs-btn-container">
                <button class="my-btn my-blue-btn open-fs-btn">{{ trans('btn.openFs') }}</button>
                <button class="my-btn my-blue-btn close-fs-btn" disabled>{{ trans('btn.closeFs') }}</button>
            </div>
        </div>


        <div class="subtitle-container invisible row d-flex justify-content-between">
            <div class="col-md-8 offset-md-2 text-center instruction-container">
                <!-- Il testo verrà inserito dinamicamente tramite JS -->
            </div>

            <div class="col-md-3 d-flex align-items-center justify-content-end">
                <button class="my-btn my-green-btn my-big-btn finish-button invisible" id="finish-button">{{ trans('btn.finish') }}</button>
            </div>
        </div>

        <!-- <div class="subtitle-container invisible row">
            <div class="col-md-8 offset-md-2 text-center instruction-container">
                
            </div>
        
            <div class="col-md-3 d-flex align-items-center justify-content-end">
                <button class="my-btn my-green-btn my-big-btn finish-button invisible" id="finish-button">{{ trans('btn.finish') }}</button>
            </div>
        </div>         -->
    </header>


    <div class="start-container invisible">
        <br>
        <br>
        <div class="text-center">
            <h3>{{ trans('ex.startMsg') }}</h3>
            <button class="my-btn my-green-btn my-big-btn start-btn">{{ trans('btn.start') }}</button>
        </div>
    </div>

    <!-- <div class="countdown-container invisible">
        <div class="row justify-content-end">
            <div class="countdown-circle"></div>
        </div>
    </div> -->
    <div class="countdown-container invisible">
        <div class="row justify-content-center">
            <div class="col-auto">
                <div class="countdown-circle"></div>
            </div>
        </div>
    </div>

    <div class="esc-container invisible">
        <br>
        <br>
        <br>
        <br>
        <div class="row">
            <div class="col-4 offset-4 alert alert-info feedback-container text-center d-flex flex-column justify-content-center"
                style="word-wrap: break-word; max-width: 100%; height: auto;" role="alert">
            </div>
            <div class="col-2 feedback-img-container d-flex align-items-center" style="max-width: 100%;">
            </div>
        </div>

        <div class="text-center">
            <h3>{{ trans('ex.repeatMsg') }}</h3>
            <a class="my-btn my-blue-btn btn-lg repeat-btn">{{ trans('btn.repeat') }}</a>
        </div>
        <br>
        <div class="text-center">
            <h3>{{ trans('ex.exitMsg') }}</h3>
            <a class="my-btn my-red-btn btn-lg" href="{{ route('exercises.exercisePage') }}">{{ trans('btn.exit') }}</a>
        </div>
    </div>
    


    <div class="exercise-container invisible">
        <meta name="csrf-token" content="{{ csrf_token() }}">
    </div>

    <div class="container-fluid fs-needed-container">
        <div class="my-darkred-text message device-message text-center">
            <br>
            <br>
            <br>
            <br>
            <p>
            <h2><b>{{ trans('ex.fsNeeded') }}</b></h2>
            <br>
            <h2><b>{{ trans('ex.fsMsg') }}</b></h2>
            </p>
        </div>
    </div>


            


            
            





    <!-- FULL SCREEN -->
    <script type="text/javascript">
        // var elem = document.documentElement;
        var fsContainer = document.querySelector('.full-screen-container');
        function openFullscreen() {
            if (fsContainer.requestFullscreen) {
                fsContainer.requestFullscreen();
            } else if (fsContainer.webkitRequestFullscreen) { /* Safari */
                fsContainer.webkitRequestFullscreen();
            } else if (fsContainer.msRequestFullscreen) { /* IE11 */
                fsContainer.msRequestFullscreen();
            }
            // $("open-fs-btn").disabled = true;
            // $("close-fs-btn").disabled = false;
        }

        function closeFullscreen() {
            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.webkitExitFullscreen) { /* Safari */
                document.webkitExitFullscreen();
            } else if (document.msExitFullscreen) { /* IE11 */
                document.msExitFullscreen();
            }
            // $("close-fs-btn").disabled = true;
            // $("open-fs-btn").disabled = false;
        }

        // function isFullscreen() {
        //     return document.fullscreenElement || 
        //         document.webkitFullscreenElement || 
        //         document.mozFullScreenElement || 
        //         document.msFullscreenElement;
        // }
        
        // if (isFullscreen()) {
        //     $("open-fs-btn").disabled = TRUE;
        //     $("close-fs-btn").disabled = FALSE;
        // } elseif(!isFullscreen()) {
        //     $("close-fs-btn").disabled = TRUE;
        //     $("open-fs-btn").disabled = FALSE;
        // }
        
    </script>
        



</div>

@endsection