@extends('mock-test.layouts.ielts-mock-test')
@section('title')
    Academic Writing - Level Assessment test
@endsection
@section('main')

    @if($taken === 'yes')
    <div class="alert alert-success mt-5">
        You Already Submitted the Test
    </div>
    @else
    <div class="container-fluid w-100">
        <div class="panel panel-grey mt-5" bis_skin_checked="1">
            <div class="panel-heading m-auto" bis_skin_checked="1">
                <h3 class="panel-title mt-5">Test your Level of English Grammar/Vocabulary</h3>
            </div>
            <div class="panel-body" bis_skin_checked="1">

                <div id="testheader" bis_skin_checked="1"> <span id="instructions">

                <div id="centreposition" class="" bis_skin_checked="1">
                    <form id="level-assessment-form" name="level-assessment-form">
                        <div class="container mt-4">
                            <div class="">  
                                <div class="card-body">
                                    {{-- <p class="question text-decoration-underline">Question 1 of 10 </p> --}}
                                    <p class="question">1. It's a great place to live apart from the increasing volume of ________ that passes under my window every day.</p>
                                    
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="1" id="choice0" value="traffic" >
                                        <label class="form-check-label" for="choice0">traffic</label>
                                    </div>
                        
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="1" id="choice1" value="vehicles" >
                                        <label class="form-check-label" for="choice1">vehicles</label>
                                    </div>
                        
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="1" id="choice2" value="circulation" >
                                        <label class="form-check-label" for="choice2">circulation</label>
                                    </div>
                        
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="1" id="choice3" value="transport" >
                                        <label class="form-check-label" for="choice3">transport</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="container mt-4">
                            <div class="">
                                <div class="card-body">
                                    {{-- <p class="question text-decoration-underline">Question 1 of 10 </p> --}}
                                    <p class="question">2. Jack's parents ________ and so I am sure they would love to go to the exhibition.</p>
                                    
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="2" id="choice4" value="like Picasso's paintings very much" >
                                        <label class="form-check-label" for="choice4">like Picasso's paintings very much</label>
                                    </div>

                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="2" id="choice5" value="much Picasso's paintings like" >
                                        <label class="form-check-label" for="choice5">much Picasso's paintings like</label>
                                    </div>

                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="2" id="choice6" value="much like Picasso's paintings" >
                                        <label class="form-check-label" for="choice6">much like Picasso's paintings</label>
                                    </div>

                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="2" id="choice7" value="like very much Picasso's paintings" >
                                        <label class="form-check-label" for="choice7">like very much Picasso's paintings</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="container mt-4">
                            <div class="">
                                <div class="card-body">
                                    {{-- <p class="question text-decoration-underline">Question 1 of 10 </p> --}}
                                    <p class="question">3. Please don't forget to ring me when you ________ home.</p>
                                    
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="3" id="choice8" value="get" >
                                        <label class="form-check-label" for="choice8">get</label>
                                    </div>

                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="3" id="choice9" value="are going to get" >
                                        <label class="form-check-label" for="choice9">are going to get</label>
                                    </div>

                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="3" id="choice10" value="are getting" >
                                        <label class="form-check-label" for="choice10">are getting</label>
                                    </div>

                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="3" id="choice11" value="will get" >
                                        <label class="form-check-label" for="choice11">will get</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="container mt-4">
                            <div class="">
                                <div class="card-body">
                                    {{-- <p class="question text-decoration-underline">Question 1 of 10 </p> --}}
                                    <p class="question">4. You should read this novel — it's been ________ recommended by all the critics.</p>
                                    
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="4" id="choice12" value="highly" >
                                        <label class="form-check-label" for="choice12">highly</label>
                                    </div>

                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="4" id="choice13" value="fully" >
                                        <label class="form-check-label" for="choice13">fully</label>
                                    </div>

                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="4" id="choice14" value="deeply" >
                                        <label class="form-check-label" for="choice14">deeply</label>
                                    </div>

                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="4" id="choice15" value="truly" >
                                        <label class="form-check-label" for="choice15">truly</label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="container mt-4">
                            <div class="">
                                <div class="card-body">
                                    {{-- <p class="question text-decoration-underline">Question 1 of 10 </p> --}}
                                    <p class="question">5. Carlos usually gets good marks at school ________ he doesn't seem to spend much time studying.</p>
                                    
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="5" id="choice16" value="although" >
                                        <label class="form-check-label" for="choice16">although</label>
                                    </div>

                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="5" id="choice17" value="unless" >
                                        <label class="form-check-label" for="choice17">unless</label>
                                    </div>

                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="5" id="choice18" value="because" >
                                        <label class="form-check-label" for="choice18">because</label>
                                    </div>

                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="5" id="choice19" value="even" >
                                        <label class="form-check-label" for="choice19">even</label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="container mt-4">
                            <div class="">
                                <div class="card-body">
                                    {{-- <p class="question text-decoration-underline">Question 1 of 10 </p> --}}
                                    <p class="question">6. Alex ________ judo after school every Friday.</p>
                                    
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="6" id="choice20" value="makes" >
                                        <label class="form-check-label" for="choice20">makes</label>
                                    </div>

                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="6" id="choice21" value="plays" >
                                        <label class="form-check-label" for="choice21">plays</label>
                                    </div>

                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="6" id="choice22" value="does" >
                                        <label class="form-check-label" for="choice22">does</label>
                                    </div>

                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="6" id="choice23" value="goes" >
                                        <label class="form-check-label" for="choice23">goes</label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="container mt-4">
                            <div class="">
                                <div class="card-body">
                                    {{-- <p class="question text-decoration-underline">Question 1 of 10 </p> --}}
                                    <p class="question">7. You must come quickly now or we won't ________ the bus.</p>
                                    
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="7" id="choice24" value="meet" >
                                        <label class="form-check-label" for="choice24">meet</label>
                                    </div>

                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="7" id="choice25" value="catch" >
                                        <label class="form-check-label" for="choice25">catch</label>
                                    </div>

                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="7" id="choice26" value="take" >
                                        <label class="form-check-label" for="choice26">take</label>
                                    </div>

                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="7" id="choice27" value="run" >
                                        <label class="form-check-label" for="choice27">run</label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="container mt-4">
                            <div class="">
                                <div class="card-body">
                                    {{-- <p class="question text-decoration-underline">Question 1 of 10 </p> --}}
                                    <p class="question">8. Have you been back to the house ________ you grew up?</p>
                                    
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="8" id="choice28" value="who" >
                                        <label class="form-check-label" for="choice28">who</label>
                                    </div>

                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="8" id="choice29" value="which" >
                                        <label class="form-check-label" for="choice29">which</label>
                                    </div>

                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="8" id="choice30" value="when" >
                                        <label class="form-check-label" for="choice30">when</label>
                                    </div>

                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="8" id="choice31" value="where" >
                                        <label class="form-check-label" for="choice31">where</label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="container mt-4">
                            <div class="">
                                <div class="card-body">
                                    {{-- <p class="question text-decoration-underline">Question 1 of 10 </p> --}}
                                    <p class="question">9. It's hot in here — would you mind ________ the window?</p>
                                    
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="9" id="choice32" value="open" >
                                        <label class="form-check-label" for="choice32">open</label>
                                    </div>

                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="9" id="choice33" value="opened" >
                                        <label class="form-check-label" for="choice33">opened</label>
                                    </div>

                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="9" id="choice34" value="opening" >
                                        <label class="form-check-label" for="choice34">opening</label>
                                    </div>

                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="9" id="choice35" value="to open" >
                                        <label class="form-check-label" for="choice35">to open</label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="container mt-4">
                            <div class="">
                                <div class="card-body">
                                    {{-- <p class="question text-decoration-underline">Question 1 of 10 </p> --}}
                                    <p class="question">10. Jack loves working in Tokyo but he can't ________ Japanese yet.</p>
                                    
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="10" id="choice36" value="speak" >
                                        <label class="form-check-label" for="choice36">speak</label>
                                    </div>

                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="10" id="choice37" value="talk" >
                                        <label class="form-check-label" for="choice37">talk</label>
                                    </div>

                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="10" id="choice38" value="say" >
                                        <label class="form-check-label" for="choice38">say</label>
                                    </div>

                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="10" id="choice39" value="tell" >
                                        <label class="form-check-label" for="choice39">tell</label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="writing-test container">
                            <strong class="my-5">IELTS Writing Task</strong>
                            <p>11. Write the advantages and disadvantages of living in a city versus living in a rural area.</p>
                            <p class="mx-5">Or</p>
                            <p>11. Problems with environmental pollution have become so serious that many countries are trying to solve these problems.</p>
                            <p>Suggest possible solutions and give your own opinion.</p>
                            <textarea name="writingPart" class="mytextarea" id="writingPart"></textarea>
                        </div>

                        <button class="btn btn-primary my-4 mx-auto w-25" type="submit" disabled>Submit
                            <div class="spinner-border spinner-border-sm" role="status" style="display: none">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                        </button>
                    </form>

                </div>


            </div>
        </div>


    </div>

    <div class="modal fade" id="exampleModalToggle" aria-hidden="false" aria-labelledby="exampleModalToggleLabel" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog modal-dialog-centered">
          <div class="modal-content">
            <div class="modal-header">
              <h1 class="modal-title fs-5" id="exampleModalToggleLabel">Level Assessment Test</h1>
            </div>
            <div class="modal-body">
                <p>How well do you understand English? Which exam should you study for? </p><p>
                    There are 11 questions in this test. This test contains grammar and vocabulary questions and your test result will help you choose a level to practise at. You <strong>will not be able to see the correct answers</strong> to the questions.</p><p>
                    You should complete this test in about 30 minutes.
                </p>
            </div>
            <div class="modal-footer">
              <button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal" onclick="startTest()">Start Test</button>
            </div>
          </div>
        </div>
    </div>
    @endif
@endsection

@section('css')
<style>
    .panel{
        margin-top: 120px !important;
    }
    .alert-success{
        margin-top: 100px !important;
    }
</style>
@endsection

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

$('#level-assessment-form').on('submit', function(e){
    e.preventDefault();
    $('.spinner-border').show();
    $('.btn').prop('disabled', true);

    var formData = new FormData($(this)[0]);
    var _token = $('meta[name="csrf-token"]').attr('content');
    formData.append("_token", _token);

    var answers = {};

    $('input[type="radio"]:checked').each(function(){
        answers[$(this).attr('name')] = $(this).val();
    });

    var writingPartEditor = tinymce.get('writingPart');

    if (writingPartEditor) {
        var writingPartContent = writingPartEditor.getContent();
        answers['writingPart'] = writingPartContent;
    }


    var answersJson = JSON.stringify(answers);

    formData.append("answer", answersJson);

    $.ajax({
        type: 'POST',
        url: '{{ route('mock-test.levelAssessmentTestSubmit') }}',
        data: formData,
        cache: false,
        processData: false,
        contentType: false,
        success: (res) => {
            if (res.status) {
                $(':input', '#level-assessment-form').not(':button, :submit, :reset, :hidden').val('');

            $('.spinner-border').hide();
            $('.btn').prop('disabled', false);

                clearInterval(interval);
                localStorage.removeItem('levelAssessmentTime');
                
                swal({
                    title: "Great Job!",
                    text: "Your Test is Submitted Successfully!",
                    type: "success",
                    confirmButtonText: "OK",
                    closeOnConfirm: true
                    },
                    function(){
                        window.location.href = '{{ route('student.dashboard') }}';
                    }
                );
            }
        },
        error: function(xhr, status, error) {
            alert('Please Refresh the Page and Try Again');
        }
    });
});

$(document).ready(function() {
    if (!localStorage.getItem('levelAssessmentTime')) {
        $('#exampleModalToggle').modal('show');
    } else{
        timerElement = document.getElementsByClassName('timer')[0];
        timerElement.classList.remove('d-none');
        startTest()
    }
});

    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 = '';
        },
    });



var interval; // Declare interval in the outer scope
var timerElement; // Declare timerElement in the outer scope

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

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

    updateTimer();

    $('button').prop('disabled', false);

    interval = setInterval(updateTimer, 1000);
}


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

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

    if (timeDifferenceInSeconds <= 0) {
        clearInterval(interval);

        // Assuming the form has an ID of 'level-assessment-form'
        $('#level-assessment-form').submit();

        localStorage.removeItem('levelAssessmentTime');
        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;
    }
}

function setTimeInLocalStorage() {
    var currentTimePlus30 = getCurrentTimePlus30Minutes(); // Fixed the function name
    localStorage.setItem('levelAssessmentTime', currentTimePlus30.getTime());
}

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

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

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


</script>
@endsection
