@extends('layouts.base', [
	"breadcrumb" => [  // see partials/breadcrumb.blade.php for default options
		"title" => "GESTSTUDENT NG - COMPOSITION",
		"nav" => [
			"GESTSTUDENT NG" => "javaScript:void(0);",
			"COMPOSITION" => route('student.exam'),
		],
	]
])

@section('title', "Composition Etudiant")

@section('css')
	<!--Animate CSS -->
    <link href="{{ asset('dist/css/animate.css')}}" rel="stylesheet">
	<!--Google Font -->
    <link href="http://fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet" type="text/css">
	<link href="{{ asset('assets/extra-libs/Magnific-Popup-master/dist/magnific-popup.css')}}" rel="stylesheet">
	<!--Glide Core CSS -->
    <link href="{{ asset('dist/css/glide.core.min.css')}}" rel="stylesheet">
    <link href="{{ asset('dist/css/glide.theme.min.css')}}" rel="stylesheet">
    <!-- EnlighterJS CSS !-->
    <link rel="stylesheet" href="{{asset('/assets/libs/enlighterjs/dist/enlighterjs.min.css')}}" />
	
    <style>
        /*
        * JQUERY COUNTDOWN
        */
        .card.card-hover .card-body {
            /* background-image: url('../project/images/js-countdown/exam.jpg'); */
            background-color: #fff;
            background-image: none;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;	
        }

        .card.card-hover {
            background-color: rgba(235, 239, 242, 0.6);
            background-position: center;
            background-repeat: repeat;
            font-family: 'Raleway', 'Arial', sans-serif;
        }

        .countdown-container {
            position: relative;
            top: 0%;
            transform: translateY(0%);

        }

        .clock-item .inner {
            height: 0px;
            padding-bottom: 100%;
            position: relative;	
            width: 100%;
        }

        .clock-canvas {
            /* background-color: rgba(255, 255, 255, .1); */
            background-color: #f7fafc;
            border-radius: 50%;
            height: 0px;
            padding-bottom: 100%;
        }

        .text {
            color: #000;	
            font-size: 30px;
            font-weight: bold;	
            margin-top: -50px;
            position: absolute;
            top: 50%;
            text-align: center;
            text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
            width: 100%;
        }

        .text .val {
            font-size: 50px;
            color: black;
        }

        .text .type-time {
            font-size: 14px;
        }

        @media (min-width: 768px) and (max-width: 991px) {
            .clock-item {
                margin-top: 14px;		
            }

            .text .type-time {
                margin-top: 3.5rem;
                font-size: 14px;
            }

            .text .val {
                font-size: 25px;
                margin: 30px;
            }
        }

        @media (max-width: 767px) {
            .clock-item {
                margin: 0px 30px 30px 0px;
            }

            .text .type-time {
                font-size: 18px;
            }

            .text .val {
                font-size: 20px;
            }

            .clock.row {
                flex-direction: column!important;
            }
        }

        /*
        * GLIDE FORM STEPS
        */
        #compo_form
        {
            height:500px;
            overflow : auto;
        }

        .glide {
            position: relative;
            width: 100%;
            height: fit-content;
        }

        .glide__arrow.prev {
            color: #2cd07e !important;
            border-color: #2cd07e !important;
            border-radius: 50rem!important;
            font-size: 0.9em; 
        }

        .glide__arrow.next {
            color: #2cabe3 !important;
            border-color: #2cabe3 !important;
            border-radius: 50rem!important;
            font-size: 0.9em; 
        }

        /***************************\
        #NOTIFICATION_BLOCK
        \***************************/
        .notification_block
        {
            display:none;
            position:absolute;
            width:90%;
            height:100%;
            top:0px;
            background-color:rgba(0,0,0,0.0.8);
        }

        .notification_content
        {
            width:100%;
            height:50%;
            margin-top:50px;
            background-color:#f00;
        }

        @keyframes clock_anim
        {
            from {
                transform:scale(0);
            }
            5% {
                transform:scale(0.4);
            }
            15% {
                transform:scale(0.4);
            }
            17% {
                transform:scale(0.5);
            }
            22% {
                transform:scale(0.5);
            }
            24%{
                transform:scale(0.7);
            }
            36% {
                transform:scale(0.7);
            }
            38% {
                transform:scale(0.9);
            }
            to {
                transform:scale(1.2);
            }
        }

        @keyframes img_clock_anim
        {
            from {
                transform:rotate(0);
            }
            to {
                transform:rotate(360deg);
            }
        }

        .notification_text_center
        {
            display:block;
            width:150px;
            height:150px;
            font-size:80px;
            margin:auto;
            margin-top:10px;
            margin-bottom:20px;
            text-align:center;
            color:#00d648;
            text-align:center;
            background-color:#fff;
            border-radius:50%;
            border:10px solid #edede5;
            box-shadow : 0px 0px 5px #333 inset;
            text-shadow : 2px 2px 2px #ccc, 0px 2px 2px #ccc, 2px 0px 2px #ccc, 2px 2px 0px #ccc;
            animation : clock_anim 10s linear;
        }

        .noti_text
        {
            font-family:Calibri;
            font-size:30px;
            margin-top:15px;
        }

        .notification_text_tiny
        {
            display : inline-block;
            position:relative;
            left: 0;
            font-size: 12px;
            top: -1.8em;
            color:#333;
            font-weight : bold;
            text-shadow:none;
        }

        .notification_header img
        {
            display:block;
            width:20%;
            max-width:150px;
            margin:auto;
            animation: img_clock_anim 3s linear infinite;
        }
        /*****************************\
        #CHECKBOX
        \*****************************/
        .container {
            display: block;
            position: relative;
            padding-left: 55px;
            margin-bottom: 25px;
            cursor: pointer;
            font-size: 13px;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        /* Hide the browser's default checkbox */
        .container input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
        }

        /* Create a custom checkbox */
        .checkmark {
            position: absolute;
            top: 0;
            left: 0;
            height: 22px;
            width: 22px;
            background-color: #ffcccc;
            border-radius: 50%;
        }

        /* On mouse-over, add a grey background color */
        .container:hover input ~ .checkmark {
            background-color: #ccc;
        }

        /* When the checkbox is checked, add a blue background */
        .container input:checked ~ .checkmark {
            background-color: #2196F3;
        }

        /* Create the checkmark/indicator (hidden when not checked) */
        .checkmark:after {
            content: "";
            position: absolute;
            display: none;
        }

        /* Show the checkmark when checked */
        .container input:checked ~ .checkmark:after {
            display: block;
        }

        /* Style the checkmark/indicator */
        .container .checkmark:after {
            left: 9px;
            top: 5px;
            width: 5px;
            height: 10px;
            border: solid white;
            border-width: 0 3px 3px 0;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
        }

        @media (max-width: 991px) {
            .spinner-border {
                display: none !important;
            }
        }

        /*
        * CUSTOM STYLE
        */
        .text-styled {
            color: hsl(0, 0%, 0%);	
            font-size: 20px;
            font-weight: bold;	
            text-align: center;
            text-shadow: 1px 1px 1px rgb(0 0 0 / 9%);
            width: 100%;
            font-family: 'Raleway', 'Arial', sans-serif;
        }
    </style>
	{{-- include page's specific styles here  --}}
@endsection

@section('content')
    {{-- alert with content --}}
	@include('partials.alert')

    @if (!$data['evaluate'])
        <div class="row">
            <div class="col-sm-12">
                <div class="card card-body"  style="background-color: transparent;">
                    <div class="text-center">
                        <div class="alert customize-alert alert-dismissible text-primary border border-primary fade show" role="alert"  style="background-color: white;">
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                            <div class="d-flex align-items-center font-weight-medium">
                                <i data-feather="info" class="text-primary feather-sm me-2 flex-shrink-0"></i>
                                <span class="text-dark">
                                    Vous n'avez aucune composition en cours actuellement.
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- No exam found -->
            <div class="card card-body bg-transparent">
                <div class="single-list d-flex justify-content-center align-items-center align-self-center single-list w-75 mx-auto my-auto w-75 mx-auto">
                    <p class="text-center fs-5">
                        <span><i class="fa fa-inbox text-dark fa-3x"></i></span>
                        <br><br>
                        Aucun devoir en instance !
                    </p>
                </div>
            </div>
        </div>
    @else
        @php
            $exam = $data['exam'];
            $questions = $data['questions'];
            $responses = $data['responses'];
        @endphp
        <div class="row">
            <!-- <h1 id="progress">JavaScript Speed Test</h1> -->
            <div class="col-md-3 bg-transparent" style="position : relative !important;">
                <div class="text-white notification_block text-center" style="z-index: 1;">
                    <div class="notification_content">
                        <div class="notification_header">
                            <img src="{{ asset('project/images/007-hourglass-2.png')}}" alt="Clock img" />
                        </div>
                        <div class="notification_center">
                            <div class="text-white noti_text">Vous avez encore ...</div>
                            <div class="notification_text_center">
                                <span class="notification_text_number">30</span>
                                <span class="notification_text_tiny" style="">min(s)</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card exam-tips">
                    <div class="border-bottom title-part-padding">
                         <h4 class="card-title mb-0">Pour un examen réussi :</h4>
                    </div>
                    <div class="card-body p-0">
                        <div class="alert customize-alert exam-tips-alert alert-dismissible text-dark alert-light-info fade show ps-3 mb-0" role="alert">
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                            <span class="side-line bg-info"></span>
                            <div class="font-weight-medium" 
                                style="
                                    text-shadow: 1px 1px 1px rgb(0 0 0 / 9%); 
                                    color: hsl(0, 0%, 0%); 
                                    font-family: 'Raleway', 'Arial', sans-serif;"
                                >
                                <p>
                                    {{-- <i data-feather="info" class="text-primary feather-sm me-2 flex-shrink-0"></i> --}}
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-info fill-white feather-lg text-info ">
                                        <circle cx="12" cy="12" r="10"></circle>
                                        <line x1="12" y1="16" x2="12" y2="12"></line>
                                        <line x1="12" y1="8" x2="12" y2="8"></line>
                                    </svg>
                                    Assurez-vous d'avoir une connexion internet stable!
                                </p>
                                <p>
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-octagon fill-white feather-lg text-danger ">
                                        <polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon>
                                        <line x1="15" y1="9" x2="9" y2="15"></line>
                                        <line x1="9" y1="9" x2="15" y2="15"></line>
                                    </svg>
                                    Evitez toute action compromettante : actualisation de la page, ouverture d'un onglet de navigation !
                                </p>
                                <p>
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check-circle fill-white feather-lg text-success">
                                        <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                                        <polyline points="22 4 12 14.01 9 11.01"></polyline>
                                    </svg>
                                    Faîtes un bon usage du temps imparti
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-9" style="position : relative !important;">
                <div class="card card-hover mx-auto" style="width: 100%;">
                    <div class="card-header bg-light d-flex justify-content-center h5">
                        <h4 class="mb-0 text-dark">Temps restant</h4>
                    </div>
                    <div class="card-body" id="initipage">
                        <div class="countdown countdown-container container">
                            <div class="clock row d-flex" style="align-items: center;">
                                <!-- Column -->
                                <div class="clock-item clock-days countdown-time-value col-sm-6 col-md-3 d-none">
                                    <div class="wrap">
                                        <div class="inner">
                                            <div id="canvas-days" class="clock-canvas"></div>
                        
                                            <div class="text">
                                                <p class="val">0</p>
                                                <p class="type-days type-time">JOUR(S)</p>
                                            </div><!-- /.text -->
                                        </div><!-- /.inner -->
                                    </div><!-- /.wrap -->
                                </div><!-- /.clock-item -->
                                <!-- Column -->
                                <!-- Column -->
                                <div class="clock-item clock-hours countdown-time-value col-sm-6 col-md-3 mx-auto">
                                    <div class="wrap">
                                        <div class="inner">
                                            <div id="canvas-hours" class="clock-canvas"></div>
                        
                                            <div class="text">
                                                <p class="val">0</p>
                                                <p class="type-hours type-time">HEURE(S)</p>
                                            </div><!-- /.text -->
                                        </div><!-- /.inner -->
                                    </div><!-- /.wrap -->
                                </div><!-- /.clock-item -->
                                <!-- Column -->
                                <!-- Column -->
                                <div class="clock-item clock-minutes countdown-time-value col-sm-6 col-md-3 mx-auto">
                                    <div class="wrap">
                                        <div class="inner">
                                            <div id="canvas-minutes" class="clock-canvas"></div>
                        
                                            <div class="text">
                                                <p class="val">0</p>
                                                <p class="type-minutes type-time">MINUTE(S)</p>
                                            </div><!-- /.text -->
                                        </div><!-- /.inner -->
                                    </div><!-- /.wrap -->
                                </div><!-- /.clock-item -->
                                <!-- Column -->
                                <!-- Column -->
                                <div class="clock-item clock-seconds countdown-time-value col-sm-6 col-md-3 mx-auto">
                                    <div class="wrap">
                                        <div class="inner">
                                            <div id="canvas-seconds" class="clock-canvas"></div>
                        
                                            <div class="text">
                                                <p class="val">0</p>
                                                <p class="type-seconds type-time">SECONDE(S)</p>
                                            </div><!-- /.text -->
                                        </div><!-- /.inner -->
                                    </div><!-- /.wrap -->
                                </div><!-- /.clock-item -->
                                <!-- Column -->
                            </div><!-- /.clock -->
                        </div><!-- /.countdown-wrapper -->
                    </div>
                </div>
            </div>

            <div class="d-flex card card-body mx-auto p-0"  id="message" style="background-color: transparent; display: none; margin-bottom: 0px;">
                <div class="alert customize-alert alert-dismissible fade show" role="alert">
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    {{-- <img src="{{ asset('project/images/busy.gif')}}" /> --}}
                    <div class="d-flex align-items-center font-weight-medium">
                        <div class="spinner-border me-3" style="width: 2rem; height: 2rem;" role="status">
                            <span class="sr-only"></span>
                        </div>
                        {{-- <i data-feather="info" class="text-primary feather-sm me-2 flex-shrink-0"></i> --}}
                        <span style="font-size: 20px; font-weight : bold;">
                            {{-- <i class="fa fa-refresh fa-spin text-dark fa-3x"></i> --}}
                            Veuillez patientez !!!.......
                        </span>
                    </div>
                </div>
            </div>

            <div class="col-md-12 bg-transparent" style="position : relative !important;">
                <div style="background-color: transparent;" id="info"></div>
                <div class="card">
                    @if ($exam['formatepreuve'] == 0)
                        <div class="card-header box-title justify-content-center h4" id="int_quest" style="display: none;">
                            <span class="text-styled">QUESTION</span>&nbsp;
                            <span class="badge bg-info fs-4 fw-bold" id="countquestion" 
                                style="text-shadow: 1px 1px 1px rgb(0 0 0 / 9%);
                                color: hsl(0, 0%, 0%);
                                font-size: 22px !important;"
                            >0</span>
                             sur
                            <span class="badge bg-success fs-4 fw-bold"
                                style="text-shadow: 1px 1px 1px rgb(0 0 0 / 9%);
                                color: hsl(0, 0%, 0%);
                                font-size: 22px !important;"
                            >{{ count($questions) }}</span>
                        </div>
                        <div class="card-body">
                            <div>
                                <form id="compo_form" method="post" class="glide" action="{{ route('student.exam_update', [ "idExam" => $exam['idexamen']]) }}">
                                    @csrf
                                    <div class="glide__wrapper">
                                        <div class="glide__track">
                                            <div class="text-center glide__slide">
                                                <div class="row d-flex justifiy-content-center align-self-center">
                                                    <div class="col-md-12">
                                                        <div class="card text-center alert-dismissible fade show alert p-0 card-hover" role="alert">
                                                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                                            {{-- <span class="badge bg-light-success text-success rounded-pill mb-3 p-3">Evaluation en cours</span> --}}
                                                            <div class="p-2 d-block mt-3">
                                                                <h5 class="card-title ">
                                                                    <a href="#" class="btn btn-info text-dark font-weight-medium d-block w-50 mx-auto">Cliquez sur le bouton pour débuter la composition</a>
                                                                </h5>
                                                            </div>
                                                            <img class="img-circle" style="width:130px;height:130px;display:block;margin:auto;" src="{{ asset('project/images/compo.png')}}" alt="ImageComosition"/><br/><br/><br/><br/>
                                                        </div>
                                                    </div>
                                                </div>  
                                                <div class="mb-3">
                                                    <button class="btn rounded-pill px-4 btn-info text-dark font-weight-medium waves-effect waves-light" id="commencer">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-send feather-sm ms-2 fill-white"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
                                                        Commencer ma composition
                                                    </button>
                                                </div>
                                            </div>

                                            @foreach ($questions as $q => $question)
                                                <div class="glide__slide">
                                                    <span class="badge bg-info text-dark me-3 fs-4 fw-bold p-2">{{ $q + 1 }}-</span>

                                                    <span id="{{ $question['idquestion'] }}" class="fs-5 question-content me-2" style="font-family: 'Material Design Icons';">{!! $question['intitulequestion'] !!}</span>

                                                    <span>
                                                        <input type="radio" class="btn-check" id="check-{{ $question['idquestion'] }}" autocomplete="off" checked>
                                                        <label class="btn btn-outline-danger rounded-pill font-weight-medium" for="check-{{ $question['idquestion'] }}"><b>{{ $question['quota'] }} pts</b></label>
                                                    </span>
                                                    <br/><br/>

                                                    @if (isset($responses[$question['idquestion']]))
                                                        @php
                                                            $answers = $responses[$question['idquestion']][0];
                                                        @endphp

                                                        @foreach ($answers as $r => $response)
                                                            <label class='container' for='quest{{$q.$r}}[]'>
                                                                <span class="fw-bold me-3 fs-4" style="padding: 1.25rem !important;">{{  range('a', 'z')[$r] }}-)</span>
                                                                <span class="answer-content fs-5" style="font-family: 'Material Design Icons';">{!! $response['proporeponse'] !!}</span>
                                                                <input name='quest{{$q}}[]' id='quest{{$q.$r}}[]' type='checkbox' value='{{$response['idpropositionreponse']}}'/>
                                                                <span class='checkmark'></span>
                                                            </label>
                                                        @endforeach
                                                    @endif
                                                </div>

                                            @endforeach
                                            <div class="text-center glide__slide">
                                                
                                                <div class="card">
                                                    <div class="border-bottom title-part-padding">
                                                        <h4 class="card-title mb-0">FIN DE LA COMPOSITION</h4>
                                                    </div>
                                                    <div class="card-body" 
                                                        style="
                                                        align-self: center;
                                                        background: lightblue;
                                                        text-shadow: 1px 1px 1px rgb(0 0 0 / 9%);
                                                        color: hsl(0, 0%, 0%);
                                                        font-size: 22px !important;
                                                        margin: 5em 0;"
                                                    >
                                                        <div class="text-center">
                                                            <div class="bg-transparent p-2 mx-auto" style="width: fit-content; background-color: #00000012!important;">
                                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-info fill-white feather-lg"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="8"></line></svg>
                                                                <h4 class="mt-2">Informations !</h4>
                                                            </div>
                                                            <p class="mt-3 text-center">
                                                                Vous venez de finir la composition.
                                                                <br>
                                                                Cliquez sur le bouton suivant pour valider votre copie d'exam.
                                                            </p>
                                                            <button id="terminer" class="btn btn-light my-2 btn-rounded" 
                                                                style = "text-shadow: 1px 1px 1px rgb(0 0 0 / 9%);
                                                                    color: hsl(0, 0%, 0%);
                                                                    font-size: 15px !important;
                                                                    font-weight: bold;"
                                                                >
                                                                J'ai fini ma composition
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="glide__arrows" style="position: static;">
                                        @if ($exam['retourquestion'] == "O")
                                            <a href="#" id="precedent" class="glide__arrow prev btn font-weight-medium"  data-glide-dir="<">Précédent</a>
                                        @endif
                                        
                                        <a href="#" id="valider" class="glide__arrow next btn font-weight-medium" data-glide-dir=">">Valider</a>
                                    </div>
                                </form>
                            </div>
                        </div>
                    @else
                        <div class="card-header box-title d-flex justify-content-center h4">QUESTIONS</div>
                        <div class="card-body">
                            <div id="newform">
                                <form id="compo_form" method="post" action="{{ route('student.exam_update', [ "idExam" => $exam['idexamen']]) }}">
                                    @csrf
                                    @foreach ($questions as $q => $question)
                                        <span class="badge bg-info text-dark me-3 fs-4 fw-bold p-2">{{ $q + 1 }}-</span>

									    <span id="{{ $question['idquestion'] }}" class="fs-5 question-content me-2" style="font-family: 'Material Design Icons';"></span>

                                        <span>
                                            <input type="radio" class="btn-check" id="check-{{ $question['idquestion'] }}" autocomplete="off" checked>
                                            <label class="btn btn-outline-danger rounded-pill font-weight-medium" for="check-{{ $question['idquestion'] }}"><b>{{ $question['quota'] }} pts</b></label>
                                        </span>
                                        <br/><br/>

                                        @if (isset($responses[$question['idquestion']]))
                                            @php
                                                $answers = $responses[$question['idquestion']][0];
                                            @endphp

                                            @foreach ($answers as $r => $response)
                                                <label class='container' for='quest{{$q.$r}}[]'>
                                                    <span class="fw-bold me-3 fs-4" style="padding: 1.25rem !important;">{{  range('a', 'z')[$r] }}-)</span>
                                                    <span class="answer-content fs-5" style="font-family: 'Material Design Icons';">{!! $response['proporeponse'] !!}</span>
                                                    <input class='answer-box' name='quest{{$q}}[]' id='quest{{$q.$r}}[]' type='checkbox' value='{{$response['idpropositionreponse']}}' {{--onclick = 'attachCheckboxHandlers(this)'--}}/>
                                                    <span class='checkmark'></span>
                                                </label>

                                            @endforeach
                                        @endif
                                    @endforeach

                                    <div class="mb-3 text-center">
                                        <button class="btn rounded-pill px-4 btn-success text-dark font-weight-medium waves-effect waves-light" id="terminer">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-send feather-sm ms-2 fill-white"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
                                            Validez votre copie !!!
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="row">
            <a style="visiblity:hidden;" class="popup-with-form" href="#test-form"></a>
            <!-- form itself -->
            <form id="test-form" class="mfp-hide white-popup-block">
                <div class="card text-center">
                    <div class="border-bottom title-part-padding">
                        <h4 class="card-title mb-0">Fin de la composition</h4>
                    </div>

                    <div class="card-body">
                        <img src="{{ asset('project/images/clock.gif')}}" class="rounded-3 img-fluid" width="90" alt=""/>

                        <div class="row mt-3 justify-content-center">
                            <div class="text-center h5 my-2">
                                <div class="font-weight-medium" 
                                    style="
                                    text-shadow: 1px 1px 1px rgb(0 0 0 / 9%); 
                                    color: hsl(0, 0%, 0%); 
                                    font-family: 'Raleway', 'Arial', sans-serif;"
                                >
                                    <p>
                                        {{-- <i data-feather="info" class="text-primary feather-sm me-2 flex-shrink-0"></i> --}}
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-info fill-white feather-lg text-info ">
                                            <circle cx="12" cy="12" r="10"></circle>
                                            <line x1="12" y1="16" x2="12" y2="12"></line>
                                            <line x1="12" y1="8" x2="12" y2="8"></line>
                                        </svg>
                                        La composition est terminée</span>.
                                    </p>
                                    <p>
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-octagon fill-white feather-lg text-danger ">
                                            <polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon>
                                            <line x1="15" y1="9" x2="9" y2="15"></line>
                                            <line x1="9" y1="9" x2="15" y2="15"></line>
                                        </svg>
                                        Vous serez redirigé dans <label class="btn btn-outline-danger rounded-pill font-weight-medium"><b>3</b></label> secondes
                                    </p>
                                    <p>
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check-circle fill-white feather-lg text-success">
                                            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                                            <polyline points="22 4 12 14.01 9 11.01"></polyline>
                                        </svg>
                                        Vous pouvez consulté votre note à la fin de la composition
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    @endif


@endsection

@section('script')
	{{-- include page's specific scripts here --}}
    <script type="text/javascript" src="{{ asset('project/libs/MathJax/MathJax.js')}}?config=TeX-AMS_HTML,{{asset('project/libs/MathJax/config/local/local.js')}}"></script>
    <!-- Magnific popup JavaScript -->
    <script class="remove" src="{{ asset('assets/extra-libs/Magnific-Popup-master/dist/jquery.magnific-popup.min.js')}}"></script>
    <script class="remove" src="{{ asset('assets/extra-libs/Magnific-Popup-master/dist/jquery.magnific-popup-init.js')}}"></script>
    <!--Style Switcher -->
    <script class="remove" src="{{ asset('assets/extra-libs/styleswitcher/jQuery.style.switcher.js')}}"></script>
    <!-- Wallop Required: Link to jquery.slides.js -->
    <script class="remove" type="text/javascript" src="{{ asset('dist/js/glide.min.js')}}"></script>
    <!-- Pour décompter le temps de compo -->
    <script class="remove" type="text/javascript" src="{{ asset('dist/js/kinetic.js')}}"></script>
    <script class="remove" type="text/javascript" src="{{ asset('dist/js/jquery.final-countdown.js')}}"></script>
    {{-- <!-- Block-UI -->
    <script src="{{ asset('assets/libs/block-ui/jquery.blockUI.js') }}"></script> --}}

    <!-- include Mobile -->
    <script class="remove" src="{{ asset('dist/js/mobile-detect.js')}}"></script>

    <!-- EnlighterJS -->
	<script type="text/javascript" src="{{asset('/assets/libs/enlighterjs/dist/enlighterjs.min.js')}}"></script>


    <script class="remove" type="text/javascript">
        /*=============> Sweet Alert init const <=============*/
        const swalWithBootstrapButtons = Swal.mixin({
            customClass: {
                confirmButton: 'btn btn-success',
                cancelButton: 'btn btn-danger'
            },
            buttonsStyling: false
        });

        const blockOptions = {
            message: $('#message').length ? $('#message') : '',
            fadeIn: 1000,
            // disable vertical centering
            centerY: false,
            // enable horizontal centering
            centerX: true,
            css: {
                border: 'none',
                backgroundColor: '#000',
                '-webkit-border-radius': '10px',
                '-moz-border-radius': '10px',
                opacity: .5,
                color: '#fff',
                // padding: '15px',
                // width: '100%',
                // margin: '20px'
            },
            // styles for the overlay
            overlayCSS:  {
                backgroundColor: '#000',
                opacity: .65,
                cursor: 'wait'
            },

            onUnblock: function () {
                $('.customize-alert:not(.exam-tips-alert)').attr('style', 'display : none;');
            },

            onBlock: function () {
                $('.customize-alert:not(.exam-tips-alert)').attr('style', 'display : block;');
            }
        };


        $('document').ready(function() {
            'use strict';

            $('pre, code').enlight({
                theme: 'bootstrap4'
            });

            console.log('temps restant', @json(isset($exam) ? $exam['duree_restant'] : 0, JSON_PRETTY_PRINT));

            $('#newform label.container').each(function ()  {
                let content = $(this).find('span.answer-content');
                let html = ReformatMessage(content.html());
                content.empty();
                content.html(html);
            });

            let alertDismissed = localStorage.getItem('alertDismissed');
            
            if (!alertDismissed) {
                // Alert has not been dismissed, set a timer to close it after 10 minutes
                let timer = setTimeout(function() {
                    $('.exam-tips .customize-alert').alert('close');
                    $('.exam-tips').remove();
                }, 600000); // 10 minutes in milliseconds
                
                // Attach an event handler to the 'closed.bs.alert' event
                $('.exam-tips .customize-alert').on('closed.bs.alert', function() {
                    // Alert has been dismissed, clear the timer and update the localStorage value
                    clearTimeout(timer);
                    localStorage.setItem('alertDismissed', true);
                    // Perform an action when the alert is closed
                    $('.exam-tips').remove();
                });
                localStorage.setItem('alertDismissed', false);
            }

            $('.exam-tips .customize-alert').on('closed.bs.alert', function() {
                // Perform an action when the alert is closed
                $('.exam-tips').remove();
            });

            /*
            window.onbeforeunload = function(e) {
                e.preventDefault();
                setTimeout(function(){
                    swalPopup(
                        'Actualisation !!!',
                        "Nous sommes dans l'obligation de mettre fin à votre composition!!!.",
                        'error'
                    );
                }, 5000)
            }
            */


            window.onblur = function (){
                //document.title='NOT FOCUSED'
                setTimeout(function(){
                    swalPopup(
                        'Tricherie !!!',
                        "Nous sommes dans l'obligation de mettre fin à votre composition!!!.",
                        'error'
                    );

                    $.blockUI(blockOptions);

                    updateExamData({'status' : 2});

                    document.location.href = "{{ route('student.index') }}";
                }, 5000)
            }

            window.onfocus = function (){
                //document.title='FOCUSED'
                setTimeout(function(){
                    //document.location.href="include/tricherie.php";
                },0)
            }

            // too make it complete, also add onblur to document.
            // For browsers using tabs (like firefox)
            document.onblur = window.onblur;
            document.focus = window.focus;

            function changeHashOnLoad() {
                // alert('ok');
                window.location.href += "#";
                setTimeout("changeHashAgain()", "50");
            }

            function changeHashAgain() {
                window.location.href += "1";
            }

            let storedHash = window.location.hash;
            window.setInterval(function () {
                if (window.location.hash != storedHash) {
                    window.location.hash = storedHash;
                }
            }, 50);

            // Mobile detection
            let md = new MobileDetect(window.navigator.userAgent);
            let compomobile = @json( isset($exam) ? $exam['composesurmobile'] : 'O', JSON_PRETTY_PRINT);
            if (md.mobile() && compomobile == 'N') {

                swalPopup(
                    '<strong>Information</strong>',
                    "Vous n'avez pas le droit de composer sur mobile!!!",
                    'error'
                );

                setTimeout(function(){
                    document.location.href = "{{ route('student.index') }}";
                },5000);
            }

            navigator.browserSpecs = (function(){
                var ua = navigator.userAgent, tem,
                    M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
                if(/trident/i.test(M[1])){
                    tem = /\brv[ :]+(\d+)/g.exec(ua) || [];
                    return {name:'IE',version:(tem[1] || '')};
                }
                if(M[1]=== 'Chrome'){
                    tem = ua.match(/\b(OPR|Edge)\/(\d+)/);
                    if(tem != null) return {name:tem[1].replace('OPR', 'Opera'),version:tem[2]};
                }
                M = M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
                if((tem = ua.match(/version\/(\d+)/i))!= null)
                    M.splice(1, 1, tem[1]);
                return {name:M[0], version:M[1]};
            })();

            console.log(navigator.browserSpecs); //Object { name: "Firefox", version: "42" }

            if (navigator.browserSpecs.name == 'Firefox') {
                // Do something for Firefox.
                if (navigator.browserSpecs.version < 77) {
                    // Do something for Firefox versions greater than 42.
                    swalPopup(
                        '<strong>Information</strong>',
                        "Veuillez mettre à jour votre navigateur!!!",
                        'error'
                    );

                    setTimeout(function(){
                        document.location.href = "{{ route('student.index') }}";
                    },2000);
                }
            } else if (navigator.browserSpecs.name == 'Chrome')  {
                // Do something for all other browsers.
                if (navigator.browserSpecs.version < 83) {
                    swalPopup(
                        '<strong>Information</strong>',
                        "Veuillez mettre à jour votre navigateur!!!",
                        'error'
                    );

                    setTimeout(function(){
                        document.location.href = "{{ route('student.index') }}";
                    },2000);
                }
            } else {
                swalPopup(
                    '<strong>Information</strong>',
                    "Vous ne pouvez pas composer avec ce navigateur. Veuillez utiliser Chrome ou bien Firefox!!!",
                    'error'
                );

                setTimeout(function(){
                    document.location.href = "{{ route('student.index') }}";
                },2000);
            }

            /*=============> Connection status <=============*/
            let html = `
            <div class="text-center">
                <div class="alert customize-alert alert-dismissible text-danger border border-danger fade show" role="alert"  style="background-color: white;">
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    <div class="d-flex align-items-center font-weight-medium">
                        <i data-feather="alert-triangle" class="text-danger feather-sm me-2 flex-shrink-0"></i>
                        <span class="text-dark">
                            VERIFIEZ VOTRE CONNECTION INTERNET!!!
                        </span>
                    </div>
                </div>
            </div>
            `;

            window.addEventListener("offline", function(){
                $('#info').html(html);
            });

            window.addEventListener("online", function(){
                $('#info').empty();
            });

            // Click event
            if (window.addEventListener) {
                    // window.addEventListener('click', attachCheckboxHandlers, true);
            } else if (window.attachEvent) {
                //window.attachEvent('onclick', attachCheckboxHandlers);
            }

            $.blockUI(blockOptions);

            window.addEventListener('load', (event) => {
                setTimeout(function(){
                    // unblock when remote call returns
                    $.unblockUI();
                },5000);
                //console.log('page is fully loaded');
            });

            window.addEventListener("keyup", function(e) {
                if (e.keyCode == 44) {
                    setTimeout(function(){
                        swalPopup(
                            'Tricherie !!!',
                            "Nous sommes dans l'obligation de mettre fin à votre composition!!!.",
                            'error'
                        );

                        $.blockUI(blockOptions);

                        updateExamData({'status' : 2});

                        document.location.href = "{{ route('student.index') }}";
                    }, 0)
                }
            });

            /*
            document.onkeydown = function(){
                switch (event.keyCode){
                    case 116 : //F5 button
                        event.returnValue = false;
                        event.keyCode = 0;
                        return false;
                    case 82 : //R button
                        if (event.ctrlKey){
                            event.returnValue = false;
                            event.keyCode = 0;
                            return false;
                        }
                }
            }*/

            $(document).on("keydown", function (e) {
                if ( e.key == "F5" || e.key == "F11" ||
                    (e.ctrlKey == true && (e.key == 'r' || e.key == 'R')) ||
                    e.keyCode == 116 || e.keyCode == 82
                ) {
                    e.preventDefault();
                }
            });

            /*
            window.onbeforeunload = function(e) {
                //swal("Information", "Votre évaluation n'est plus valide!!!", "error");
                // document.location.href="include/tricherie.php";

                setTimeout(function(){
                    swalPopup(
                        'Tricherie !!!',
                        "Votre évaluation n'est plus valide!!!.",
                        'error'
                    );

                    //TODO : UNCOMMENT THIS
                    // document.location.href = "{{ route('student.index') }}";
                }, 0)
            }
            // Anonymous function
            window.onbeforeunload = function(event) {
                var message = '';
                if (window.event) {
                    console.log(window.event);
                    console.log(event.currentTarget.performance);
                    console.log(event.currentTarget.performance.navigation);
                    console.log(event.currentTarget.performance.navigation.type);

                }

                event = event || window.event;
                event.preventDefault = false;
                event.cancelBubble = false;
                event.returnValue = message;
            }*/

            // JS Countdown
            $(".glide__arrow").hide();
            let c_q = $('#countquestion');
            $("#int_quest").hide();
            let numero = 0;

            let slideshow = $('#compo_form').glide({//carousel slideshow
                type: 'slideshow',
                autoplay : false,
                autoheight : true,
                animationDuration : 300,
                keyboard : false,
                beforeTransition : function(e){
                    //Après un click sur commencer on incrémente le numéro des questions et on affiche les boutons de nbavigation
                    //console.log(slideshow.data('glide_api').current());
                    if ( $('label.container').length ) {
                        $('label.container').each(function ()  {
                            let content = $(this).find('span.answer-content');
                            let html = ReformatMessage(content.html());
                            content.empty();
                            content.html(html);
                        });
                    }

                    if (event.target.id == "commencer") {
                        numero++;
                        $("#precedent").addClass('disabled');
                        $(".glide__arrow").show();

                    } else if (event.target.id == "valider") {
                        $("#"+event.target.id).blur();

                        //Validation de la réponse de l'étudiant
                        validateAnswer(event);

                        //Apres un click sur valider on active le bouton précédent au besoin et on vérifier si on est sur la dernière page pour désactiver next
                        numero++;
                        if ($("#precedent").hasClass('disabled')) {
                            $("#precedent").removeClass('disabled');
                        }
                        if (slideshow.data('glide_api').current() == @json( isset($questions) ? (count($questions) + 1) : 0, JSON_PRETTY_PRINT)) {
                            $("#valider").hide();
                            $("#int_quest").hide();
                        }
                    } else if (event.target.id == "precedent") {
                        $("#"+event.target.id).blur();
                        //Après un click sur précédent on désactive ce dernier pour ne pas retourner à la page "Démarrer ma composition"
                        numero--;
                        if (slideshow.data('glide_api').current() == 3) {
                            $("#precedent").addClass('disabled')
                        }

                        $("#int_quest").show();
                        $("#valider").show()
                    }

                    c_q.html(numero);
                    //debugger
                },
                afterTransition : function(e) {
                    // $.unblockUI();
                    // console.log(event.target.id);
                    //debugger
                }
            });

            /*
            // $('#compo_form').submit(
            //     function(e) {
            //         e.preventDefault();

            //         debugger
            //     }
            // );
            */

            $("#commencer").click(function(e){
                e.preventDefault();
                /*
                    $.blockUI(blockOptions);

                    setTimeout(function(){
                        // unblock when remote call returns
                        $.unblockUI();
                    }, 20000);
                */

                slideshow.data('glide_api').go(">");
                $("#int_quest").show();
                    //return false;
            });

            $("#terminer").on('click', function(e){
                e.preventDefault();

                $.blockUI(blockOptions);

                let serialized = $('input:checkbox').map(function() {
                    return {
                        name: this.name,
                        value : this.checked ? this.value : "false",
                    };
                });

				// console.log('serialized data', serialized);

                let data = {
                    'formData' : JSON.stringify(serialized),
                    'status' : 1,
                    'termine' : "O"
                };

                updateExamData(data)
                .then((resp) => {
                    console.log('ajax response on terminate', resp);

                    if (resp.message.trim() == "OK" ) {
                        swalPopup (
                            '<strong>Information!!!</strong>',
                            resp.info,
                            resp.info_state,
                            3000
                        );

                    } else {
                        swalPopup (
                            '<strong>Information!!!</strong>',
                            'Devoir terminé. Patientez jusqu\'à la fin de l\'examen pour consulter votre note !!!',
                            'info',
                            3000
                        );
                    }

                    $.unblockUI();

                    setTimeout(function(){

                        $.blockUI(blockOptions);

                        updateExamData({
                            "status" : 0,
                            "showNote" : ( @json( $exam['valide'], JSON_PRETTY_PRINT ) == 'N' ) ? true : false
                        })
                        .then((resp) => {
                            callView(resp);
                        });

                    }, 3000);
                })
                .catch((err) => {
                    // nothing to do.
                });
            });

            // $("#valider").on('click', function(e) {
            //     validateAnswer(e);
            // });

            // {{--
            // $("#countquestion").on('DOMSubtreeModified', function (){
            //     if((numero==0)){
            //         $(".glide__arrow").hide();
            //         $("#int_quest").hide();
            //     }else if(numero == @json( count($questions), JSON_PRETTY_PRINT)){
            //         $("#suivant").hide();
            //     }else{
            //         alert("Dedans2")
            //         $(".glide__arrow").show();
            //         $("#int_quest").show();
            //     }
            // });
            // --}}

            $('.countdown').final_countdown(
                {
                    'start': 0,
                    'end': @json(isset($exam) ? $exam['duree_restant'] : 0, JSON_PRETTY_PRINT),
                    'now': 0,
                    seconds: {
                        borderColor: '#ff6b4f',
                        borderWidth: '6'
                    },
                    minutes: {
                        borderColor: '#2985ff',
                        borderWidth: '6'
                    },
                    hours: {
                        borderColor: '#00d648',
                        borderWidth: '6'
                    },
                    days: {
                        borderColor: '#FF9900',
                        borderWidth: '6'
                    }
                }, function() {

                    if ($('#initipage').length) {
                        //Examen terminé

                        setTimeout( function () {
                            $.blockUI({
                                message: null,
                                onBlock: function () {
                                    // $('.popup-with-form').click();
                                    setTimeout( $('.popup-with-form').click(), 3000);

                                    updateExamData(
                                        {
                                            "status" : 0,
                                            "showNote" : false
                                        }
                                    ).then((resp) => {
                                        callView(resp);
                                    });
                                }
                            });
                        }, 2000);
                    }

                },
                function(h_restantes, m_restantes) {
                    // alert("Bien pour 2 minutes");
                    intercepteur_temporel(h_restantes, m_restantes, @json(isset($exam) ? $exam['duree'] : [] , JSON_PRETTY_PRINT));
                }
            );

        });

        $('#newform input[type=checkbox]').each(function ()  {
            $(this).on('change', function() {
                attachCheckboxHandlers(this);
            })
        });

        //Compteur de temps
        function intercepteur_temporel(heure_restante, minutes_restantes, totaltimeinminutes){
            let couleur_associee="#f25436";

            let x = ( parseInt( totaltimeinminutes, 10 ) ),
                y = heure_restante * 60 + minutes_restantes;


            // alert("La valeur de x est : "+x+" et celle de y est "+y);
            /*if(((y % 2)== 0) && (y>(x/2))){
                couleur_associee = "#0fb70b";
                animation(heure_restante,minutes_restantes,couleur_associee);

            }else if(((y%2)==0) && (y<=15)){
                couleur_associee = "#ed420e";
                animation(heure_restante,minutes_restantes,couleur_associee);
            }else if(((y%2)==0)){
                couleur_associee = "#f1a923";
                animation(heure_restante,minutes_restantes,couleur_associee);
            }*/

            if ( ( (y%2) == 0 ) && ( y <= x/2 ) ) {
                couleur_associee = "#ed420e";
                animation(heure_restante, minutes_restantes, couleur_associee);
            }
        }

        function animation(heure_restante, minutes_restantes, couleur_associee){
            //Animation des crénaux atteints
            //Style
            if($(".notification_block").hasClass("zoomOutDown")){
                $(".notification_block").removeClass("zoomOutDown");
            }
            $(".notification_block").css("display","block");
            $(".notification_block * ").css("display","block");
            $(".notification_text_tiny").css("display","block");

            //Content
            restant_formate = heure_restante * 60 + minutes_restantes;

            $(".notification_text_number").html(restant_formate);
            $(".notification_text_number").css("color",couleur_associee);

            $(".notification_content").css("background-color",couleur_associee);
            $(".notification_block").addClass("animated zoomInDown");

            setTimeout(function(){
                setTimeout(function(){
                    $(".notification_text_center").addClass("infinite flash");
                    setTimeout(function(){
                        $(".notification_block").removeClass("zoomInDown").addClass("zoomOutDown");
                    },10000);
                },2000);
            },1000);
        }

        function attachCheckboxHandlers(e) {
            let startTime = performance.now();
            const status = window.navigator.onLine;

            if (!status) {
                swalPopup(
                    '<strong>Réponse non validée!!!</strong>',
                    "Vérifier votre connexion internet!!!",
                    'error'
                );
            }

            $.blockUI(blockOptions);

            let content = $('#compo_form input').serializeArray();

            let serialized = $('input:checkbox').map(function() {
                return {
                    name: this.name,
                    value : this.checked ? this.value : false
                };
            });

            let data = {
                'formData' : JSON.stringify(serialized),
                'status' : 1
            };

            updateExamData(data)
            .then((resp) => {
                let endTime = performance.now();
                let executionTime = endTime - startTime;
                console.log("Temps d'exécution : " + executionTime + "ms");

                // console.log('ajax response attach box ', resp);

                if (resp.message.trim() == "NO" ) {
                    swalPopup (
                        '<strong>Information!!!</strong>',
                        "Composition terminée!!! Vous serez redirigé vers la page d'accueil dans 3 secondes",
                        'info',
                        5000
                    );

                    setTimeout(function(){
                        document.location.href = "{{ route('student.index') }}";
                    }, 3000);
                }
                $.unblockUI();
            })
            .catch((err) => {
                // nothing to do.
            });
        }

        function validateAnswer(e) {
            let startTime = performance.now();
            const status = window.navigator.onLine;

            if (!status) {
                swalPopup(
                    '<strong>Réponse non validée!!!</strong>',
                    "Vérifier votre connexion internet!!!",
                    'error'
                );
            }

            e.stopImmediatePropagation();

            let content = $('#compo_form input').serializeArray();

            let serialized = $('input:checkbox').map(function() {
                return {
                    name: this.name,
                    value : this.checked ? this.value : false
                };
            });

            let data = {
                'formData' : JSON.stringify(serialized),
                'status' : 1,
            };

            $.blockUI(blockOptions);

            updateExamData(data)
            .then((resp) => {
                let endTime = performance.now();
                let executionTime = endTime - startTime;
                console.log("Temps d'exécution : " + executionTime + "ms");

                // console.log('ajax response on validate', resp);

                if (resp.message.trim() == "NO" ) {
                    swalPopup (
                        '<strong>Information!!!</strong>',
                        "Votre évaluation n'est plus valide!!!",
                        'error',
                        3000
                    );

                    document.location.href = "{{ route('student.index') }}";

                } else if (resp.message.trim() == "NOR") {

                    showToastr("danger",'Erreur lors du traitement de votre requête. Veuillez réessayez. ');
                };

                $.unblockUI();
            })
            .catch((err) => {
                // nothing to do.
            });
        }

        function callView(data) {
            if (data.view == "index") {
                window.location = "{{ route('student.index') }}";
            } else {
                $('.remove').remove();
                $('.container-fluid page-content').remove();
                $('.page-wrapper').html(data.content);
                $.unblockUI({
                    onUnblock: function(){
                        $('.countdown').final_countdown({
                            'start': 0,
                            'end': 0,
                            'now': 0
                        });
                    }
                });
            }

        }
    </script>

    <script type="text/javascript">
        let evaluate = @json($data['evaluate'], JSON_PRETTY_PRINT);
        // console.log('evaluate', evaluate);
        if (!evaluate) {
            setTimeout(() => {
                $('.remove').remove();
            }, 3000);
        }
    </script>
@endsection