@extends('mock-test.layouts.ielts-mock-test')

@section('main')
    <div class="row mt-5">
        <form id="writingTest" method="POST" action="{{ route('mock-test.ieltsTestSubmit') }}" class="my-5">
            {!! @$test->questions_data !!}
            <input type="hidden" name="test_type" value="Ielts">
            <input type="hidden" name="test_id" value="{{ $test->id }}">
            <button class="btn btn-primary m-auto my-4 w-25" type="submit">Submit Test</button>
        </form>
    </div>

    @if(in_array(['test_id' => $test->id], $results, true))
        <script>
            window.location.href = '{{ route('mock-test.ielts') }}';
        </script>
    @endif

@endsection


@section('css')
   
@endsection

@section('script')
<script src='https://cdn.tiny.cloud/1/4qy0yl0cjwb4z6uf0h9ucc7ug5xf8iup4xolj2onpk73ib9h/tinymce/5/tinymce.min.js' referrerpolicy="origin"></script>
    <script>

        tinymce.init({
            selector: '.mytextarea',
            menubar:false,
            statusbar: false,
            height: 300,
            plugins : "inlinepopups,insertdatetime,fullscreen,paste,wordcount",
            paste_preprocess: function (plugin, args) {
                console.log("Attempted to paste: ", args.content);
                // replace copied text with empty string
                args.content = '';
            },
        });


        $(document).ready(function () {
            $('#writingTest').on('submit', function (e) {
                e.preventDefault();

                // Create FormData object
                var formData = new FormData($(this)[0]);
                var _token = $('meta[name="csrf-token"]').attr('content');
                formData.append("_token", _token);
                formData.append("test_type", '3');
                formData.append("test_id", '{{ @$test->id }}');

                var mytextarea1Value = $('#mytextarea1').val();
                var mytextarea2Value = $('#mytextarea2').val();

                var textAreaValues = [
                    { name: "mytextarea1", value: mytextarea1Value },
                    { name: "mytextarea2", value: mytextarea2Value }
                ];

                formData.append("answer", JSON.stringify(textAreaValues));


                console.log(formData);

                // Perform AJAX request
                $.ajax({
                    type: 'POST',
                    url: '{{ route('mock-test.ieltsTestSubmit') }}',
                    data: formData,
                    cache: false,
                    processData: false,
                    contentType: false,
                    success: (res) => {
                        if (res.status) {

                            $(':input', '#writingTest').not(':button, :submit, :reset, :hidden').val('');

                            clearInterval(interval);
                            localStorage.removeItem('writingtimerEndTime');
                            localStorage.removeItem('timerEndTime');
                            
                            swal({
                                title: "Great Job!",
                                text: "Your Test is Submitted Successfully!",
                                type: "success",
                                confirmButtonText: "OK",
                                closeOnConfirm: true
                                },
                                function(){
                                    window.location.href = '{{ route('mock-test.ieltsTest', ['testId' => base64_encode($testId)]) }}';
                                }
                            );

                        }
                    }
                });
            });
        });


        var timerElement = document.getElementsByClassName('timer')[0];
        timerElement.classList.remove('d-none');

        function getCurrentTimePlus60Minutes() {
            var currentTime = new Date();
            currentTime.setMinutes(currentTime.getMinutes() + 60);
            return currentTime;
        }

        function setTimeInLocalStorage() {
            var currentTimePlus60 = getCurrentTimePlus60Minutes();
            localStorage.setItem('writingtimerEndTime', currentTimePlus60.getTime());
        }

        function getTimeFromLocalStorage() {
            var storedTime = localStorage.getItem('writingtimerEndTime');

            if (storedTime) {
                return parseInt(storedTime);
            } else {
                setTimeInLocalStorage();
                return getTimeFromLocalStorage();
            }
        }

        function updateTimer() {
            var currentTime = new Date().getTime();
            var timerEndTime = getTimeFromLocalStorage();

            var timeDifferenceInSeconds = Math.floor((timerEndTime - currentTime) / 1000);

            if (timeDifferenceInSeconds <= 0) {
                clearInterval(interval);
                
                $('#writingTest').submit();
                
                localStorage.removeItem('writingtimerEndTime');
                localStorage.removeItem('timerEndTime');
                console.log("Timer reached 0");
            } else {
                var minutes = Math.floor(timeDifferenceInSeconds / 60);
                var seconds = timeDifferenceInSeconds % 60;
                timerElement.textContent = (minutes < 10 ? '0' : '') + minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
            }
        }

        // Check if 'timerEndTime' is already present in localStorage
        if (!localStorage.getItem('writingtimerEndTime')) {
            setTimeInLocalStorage();
        }

        updateTimer();

        var interval = setInterval(updateTimer, 1000);

        
        $(document).ready(function () {
            $('body').on('copy paste', function (e) {
                e.preventDefault();
                alert('Copying and pasting is disabled for this field.');
            });

            // $(window).on('beforeunload', function() {
            //     // Display a confirmation message
            //     return 'Are you sure you want to leave?';
            // });
            $(document).keydown(function(e) {
                // Check for Ctrl key (key code 17) and Tab key (key code 9)
                if (e.ctrlKey && e.which === 9) {
                    // Display a confirmation message
                    var confirmation = confirm('Are you sure you want to Leave?');
                    if (!confirmation) {
                        e.preventDefault(); // Prevent default browser behavior
                    }
                }
            });

        });

        // Disable inspect element on the entire document
        document.addEventListener('keydown', function (e) {
            if ((e.key === 'F12') ||   // F12 
                (e.ctrlKey && e.shiftKey && e.key === 'I') ||      // Ctrl + Shift + I
                (e.ctrlKey && e.shiftKey && e.key === 'C')) {       // Ctrl + Shift + C
                e.preventDefault();
            }
        });

        document.addEventListener('mousedown', function (e) {
            if (e.button === 2) {
                e.preventDefault();
            }
        });

        $(document).on('contextmenu', function(e) {
            e.preventDefault();
        });

        window.addEventListener('beforeunload', function (e) {
            // Display a confirmation message
            var confirmationMessage = 'Are you sure you want to leave?';
            (e || window.event).returnValue = confirmationMessage; // Standard
            return confirmationMessage; // For some older browsers
        });


    </script>
@endsection