@extends('layouts.base', [
	"breadcrumb" => [  // see partials/breadcrumb.blade.php for default options
		"title" => "GESTSTUDENT NOUVELLE GÉNÉRATION",
		"nav" => [
			"ACCUEIL" => "javaScript:void(0);",
			"LISTE DES COMPOSITIONS" => "javaScript:void(0);",
		],
	]
])

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

@section('css')
    <style>
        .list-wrapper .title {
            font-size: 15px;
            color: #212832;
            margin-bottom: 0;
            line-height: 1.5;
            text-align: start;
            /* background: white;
            border: 1px solid #d7d7d7;
            box-shadow: 2px 2px 0px 1px #edf1f5;
            padding: 5px;*/
            border-radius: 5px;
            margin-left: 5px;
            font-weight: 700;
        }

        .single-list {
            padding: 30px;
            border: 1px solid rgba(48, 146, 85, 0.2);
            border-radius: 10px;
            margin-top: 30px;
            position: relative;
            background-color: #fff;
            height: 32rem;
        }

        .single-list .card {
            display: flex;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center;
        }

        .single-list .card .item-content .name {
            font-size: 22px;
            font-weight: 500;
            color: #212832;
            box-shadow: -2px -4px 8px 3px #edf1f5;
        }

        .single-list .card .item-content .meta span {
            font-size: 14px;
            font-weight: 400;
            position: relative;
        }

        .single-list p {
            padding-top: 10px;
            margin-bottom: 0;
            font-size: 15px;
            font-weight: 400;
            color: #000;
        }

        .line-2 {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            height: 4.24rem;
            overflow: hidden;
        }

        .filieres {
            rotate: 90deg;
            position: absolute;
            left: -7em;
            top: 16em;
            border: 0;
            border-radius: 0;
            width: 10em;
        }

        /* Fraction */
        .denominator{
            border-top: 3px solid #000;
            display: block;
        }
        .fraction, .numerator, .denominator {
            /* padding: 0px 5px; */
            color: #000;
            font-size: 1.6rem;
        }

        /* Clock */
        .border-clock:after {
            /* background-color: #EBEB83;
            border: 10px solid #000000;
            box-shadow: 3px 2px 19px -10px #000000; */
            width: 300px;
            height: 300px;
            border-radius: 100%;
            position: absolute;
            content: '';
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .clock {
            border-radius: 50%;
            background: #fff url(/project/images/clock.svg) no-repeat center;
            background-size: 88%;
            height: 20em;
            padding-bottom: 31%;
            position: relative;
            width: 20em;
            box-shadow: 1px 1px 13px 1px;
        }

        .clock.simple:after {
            background: #000;
            border-radius: 50%;
            content: "";
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 5%;
            height: 5%;
            z-index: 10;
        }

        .clock h2, .clock h3 {
            font-size: 10px;
            letter-spacing: 2px;
            font-variant: small-caps;
            position: absolute;
            left: 50%;
            top: 68%;
            transform: translateX(-50%);
        }

        .clock h2 {
            font-size: 10px;
            top: 25%;
            /* letter-spacing: 3px; */
            font-weight: bold;
            background: #fff;
            z-index: 3;
        }

        .date {
            position: absolute;
            bottom: 27%;
            margin-top: 1em;
            transform: translateX(-50%);
            height: 20px;
            border-radius: 7px;
            background: #ccc;
            text-align: center;
            line-height: 20px;
            color: #000;
            font-size: 13px;
            left: 50%;
            font-family: "Poiret One";
            z-index: 3;
            letter-spacing: 1px;
        }

        .info {
            position: absolute;
            width: 120px;
            height: 20px;
            border-radius: 7px;
            background: ##bdb9b926;
            text-align: center;
            line-height: 20px;
            color: #000;
            font-size: 13px;
            top: 200px;
            left: 50%;
            font-family: "Poiret One";
            font-weight: 700;
            z-index: 3;
            letter-spacing: 2px;
        }

        .minutes-container, .hours-container, .seconds-container {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }

        .hours {
            background: #333;
            height: 20%;
            left: 48.75%;
            position: absolute;
            top: 30%;
            transform-origin: 50% 100%;
            width: 1.5%;
            border-top-left-radius: 50%;
            border-top-right-radius: 50%;
        }

        .minutes {
            background: #666;
            height: 30%;
            left: 49%;
            position: absolute;
            top: 20%;
            transform-origin: 50% 100%;
            width: 1.5%;
            border-top-left-radius: 50%;
            border-top-right-radius: 50%;
        }

        .seconds {
            background: gold;
            height: 45%;
            left: 49.5%;
            position: absolute;
            top: 14%;
            transform-origin: 50% 80%;
            width: 1%;
            z-index: 8;
            border-top-left-radius: 50%;
            border-top-right-radius: 50%;
        }

        @keyframes rotate {
            100% {
                transform: rotateZ(360deg);
            }
        }

        .hours-container {
            animation: rotate 43200s infinite linear;
        }
        .minutes-container {
            /* animation: rotate 3600s infinite  steps(60); */
            transition: all 2.5s 0.5s cubic-bezier(0.12, 1.03, 0.34, 1);
        }
        .seconds-container {
            /* animation: rotate 60s infinite  steps(60); */
            transition: all 2.5s 0.5s cubic-bezier(0.12, 1.03, 0.34, 1);
        }
    </style>
	{{-- include page's specific styles here  --}}
@endsection

@php
    $examens = $data['examens'];
    $notes = $data['defaultConfig'];
    $niveaux = $data['niveaux'];
    $semestres = $data['semestres'];
    $noData = true;
    $nbExamInvalid = 0;
    // dd($notes, $examens);
@endphp

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

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

	<div class="row">
		<div class="col-lg-4 col-sm-12">
            <div class="card bg-light">
                <div class="card-body">
                    <div style="background-color: transparent;" id="info"></div>
                    <div class="d-flex justify-content-center">
                        {{-- <canvas id="canvas" width="260" height="227" style="text-align:center;"></canvas> --}}
                        <article class="clock simple show">
                            <section class="border-clock">
                                <div class="hours-container">
                                  <div class="hours"></div>
                                </div>

                                <h2>GestStudent-NG</h2>
                                <h3 class="info day"></h3>

                                {{-- <output class="date"></output> --}}

                                <div class="minutes-container">
                                  <div class="minutes"></div>
                                </div>
                                <div class="seconds-container">
                                  <div class="seconds"></div>
                                </div>
                            </section>
                        </article>
                    </div>

				</div>
			</div>
		</div>
        <div class="col-lg-8 col-sm-12">
            <div class="card bg-transparent">
                <div class="card-body pt-0">
                    @php
                        $nbValidExams = count($examens['valide']['data']);
                        $nbNvExams = count($examens['non_valide']['data']);
                        $totalExams = $nbValidExams + $nbNvExams;
                    @endphp
                    <div class="row mb-3">
                        <div class="col-lg-4 col-md-6 col-sm-12">
                            <div class="card">
                                <div class="card-body">
                                    <h6 class="card-title">Total des examens</h6>
                                    <h3 class="font-weight-medium text-primary mb-0 mt-3 text-end">
                                        <i class="mdi mdi-bookmark-outline"></i>
                                        {{ $totalExams }}
                                    </h3>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-6 col-sm-12">
                            <div class="card">
                                <div class="card-body">
                                    <h6 class="card-title">À venir</h6>
                                    <h3 class="font-weight-medium text-info mb-0 mt-3 text-end">
                                        <i class="mdi mdi-calendar-multiple"></i> {{$nbValidExams}}<sub>/{{$totalExams}}</sub>
                                    </h3>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-6 col-sm-12">
                            <div class="card">
                                <div class="card-body">
                                    <h6 class="card-title">Passés</h6>
                                    <h3 class="font-weight-medium text-danger mb-0 mt-3 text-end">
                                        <i class="mdi mdi-calendar-clock"></i> {{$nbNvExams}}<sub>/{{$totalExams}}</sub>
                                    </h3>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="card">
                                <div class="card-body">
                                    <h6 class="card-title">Performance</h6>
                                    {{-- <div class="mx-2 my-2">
                                        <small class="badge badge-default form-text text-dark d-block text-muted">Taux d'examens validés :</small>
                                        <small class="badge badge-default form-text text-dark d-block text-muted">Taux d'examens non validés :</small>
                                    </div> --}}
                                    @if ($totalExams == 0)
                                        <button type="button" class="btn d-flex btn-light-info w-100 d-block text-primary font-weight-medium">
                                            Aucune donnée disponible pour les statistiques statistiques de performance sur les taux d'examens validés et non validés
                                        </button>
                                    @else
                                        <div class="progress mt-4" style="height: 18px;">
                                            <div id="perf1" class="progress-bar progress-bar-striped bg-success progress-bar-animated fw-bold" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div>
                                            <div id="perf2" class="progress-bar progress-bar-striped bg-danger progress-bar-animated fw-bold" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
				</div>
			</div>
		</div>
	</div>
    <!--
    =============================================
        Theme Inner Banner
    ==============================================
    -->

    <div class="list-wrapper">
        @foreach ($examens as $key => $examen)
            @if ( count($examen['data']))
                @php
                    $noData = false;
                @endphp
                <div class="card" style="background: #ecf0f4;">
                    <div class="card-header bg-{{$examen['class']}}">
                        <h3 class="title">
                            {{ count($examen['data']) }} devoir(s) 
                            <span id="{{ $key }}">
                                {{ $examen['title'] }}
                            </span>
                        </h3>
                    </div>
                    <div class="card-body">

                        <ul class="navbar-nav d-none">
                            <!-- ============================================================== -->
                            <!-- Search -->
                            <!-- ============================================================== -->
                            <li class="nav-item search-box">
                                <form class="app-search d-none d-lg-block">
                                    <input type="text" class="form-control" placeholder="Intitulé de l'EC, Session, Niveau">
                                    <a href="" class="active"><i class="fa fa-search"></i></a>
                                </form>
                            </li>
                            <li class="nav-item">
                                <span class="mx-2  my-2">
                                    <small class="badge badge-default form-text text-dark d-block text-left text-muted">Niveau de formation</small>
                                    <div class="newest-select">
                                        <select name="niveau" id="niveau">
                                            <option value="ALL">Tous</option>
                                            @foreach ($niveaux as $n)
                                                <option value="{{ $n['text'] }}" data-year="{{ $n['annee'] }}">{{ $n['text'] }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </span>
                            </li>
                            <li class="nav-item">
                                <span class="mx-2  my-2">
                                    <small class="badge badge-default form-text text-dark d-block text-left text-muted">Semestre</small>
                                    <div class="newest-select">
                                        <select name="semestre" id="semestre">
                                            <option value="ALL">Tous</option>
                                            @foreach ($semestres as $annee => $arr)
                                                @foreach ($arr as $s)
                                                    <option value="{{ $s }}" data-year="{{ $annee }}">{{ $s }}</option>
                                                @endforeach
                                            @endforeach
                                        </select>
                                    </div>
                                </span>
                            </li>
                            <li class="nav-item">
                                <span class="mx-2  my-2">
                                    <small class="badge badge-default form-text text-dark d-block text-left text-muted">Type examens</small>
                                    <div class="newest-select">
                                        <select name="type_cours" id="type_cours">
                                            <option value="ALL">Tous</option>
                                            <option value="normal">Session normale</option>
                                            <option value="reprise">Rattrapage</option>
                                            <option value="reprise">Reprise</option>
                                        </select>
                                    </div>
                                </span>
                            </li>
                        </ul>

                        <ul class="list-items list-unstyled row">
                            @foreach ($examen['data'] as $exam)
                                @php
                                    $note = $exam["note"];
                                    $noteValide = ($exam["echelle"] <= 20) ? 12 : 60;

                                    if ($exam['status'] == "NO" || $exam['valide'] == "N") {

                                        if (isset($notes[$exam['annee_acad']])) {
                                            $default = $notes[$exam['annee_acad']][0];
                                            if ($exam['type_ue'] == 1 || $exam['type_ue'] == 2) {
                                                $noteValide = $default['note'];   // Note requise par ue spécialité/méthodologie
                                            } else {
                                                $noteValide = $default['note2'];   // Note requise par ue Culture Générale/Connaissances Fondamentales
                                            }
                                        }

                                        if (($noteValide >= 50) && ($exam["echelle"] <= 20) ) {
                                            $note = $exam["note"] * 5;   // Note requise par ue spécialité/méthodologie
                                        }

                                        //Note de l'étudiant
                                        $note = floatval (str_pad($note, 2, "0", STR_PAD_LEFT));

                                        if ($note < $noteValide) {
                                            $nbExamInvalid += 1;
                                        }
                                    }
                                @endphp
                                <li class="col-lg-4 col-md-12">
                                    {{-- <div class="single-list {{ ($exam['status'] == "NO") ? 'border  border-'.(($note < $noteValide) ? 'danger' : 'info') : ''}}" style="height : {{ ($exam['status'] == "YES") ? 'fit-content' : '32rem'; }}"> --}}
                                    <div class="single-list" style="height : {{ ($exam['valide'] == "O" || $exam['status'] == "YES") ? 'fit-content' : '35rem'; }}">
                                        <div class="card">
                                            <div class="item-content ps-0">
                                                <h4 class="card-header name line-2">
                                                   {{ $exam['intituleEcu'] }}
                                                </h4>
                                                <div class="d-flex text-center justify-content-center mx-auto pt-3">
                                                    <button type="button" class="btn btn-dark d-block text-light fw-bold filieres">
                                                        {{ $exam['sigleFilieres']. ''. $exam['annee'] }}
                                                    </button>
                                                </div>
                                                <div class="d-flex align-items-center py-4 border-bottom">
                                                    <div>
                                                        <div class="meta">
                                                            <span class="badge bg-light text-dark designation p-2">
                                                                <i class="icon-calender fw-bold"></i>
                                                                {{ $exam['formated_dateexam'] }} à
                                                                <span class="fw-bold"> {{ $exam['heure'] }} </span>
                                                            </span>
                                                            <br>
                                                            <span class="time p-2">
                                                                <span class="">
                                                                    <i class="icon-clock text-dark fw-bold"></i>  Durée
                                                                </span> :
                                                                <span class="badge rounded-pill text-dark fw-bold bg-light-info label-rouded mt-2">
                                                                    {{ $exam['duree'] }} min
                                                                </span>
                                                            </span>
                                                            <br>
                                                            <span class="time p-2">
                                                                <span class="">
                                                                    <i class="fas fa-user-plus fw-bold"></i>  Vague n°
                                                                </span> :
                                                                <span class="badge rounded-pill text-dark fw-bold bg-warning label-rouded mt-2">
                                                                    {{ str_pad( ($exam['numeroVague'] + 1), 2, "0", STR_PAD_LEFT) }}
                                                                </span>
                                                            </span>
                                                        </div>
                                                    </div>
                                                    <div class="ms-auto">
                                                        <button class="btn btn-{{ $exam['sessionClass'] }} btn-rounded">{{ $exam['type_examen'] }}</button>
                                                    </div>
                                                </div>
                                            </div>
                                            <p>
                                                <span class="fw-bold">Description</span> :
                                                <div class="text-center align-self-center mx-auto line-2">
                                                    {{ $exam['description'] }}
                                                </div>
                                            </p>

                                            @if ($exam['valide'] == "O")
                                                {{-- Lorsque l'examen est valide ( toutes les vagues de composition n'ont pas encore composé ) --}}
                                                @if ($exam['status'] == "YES")
                                                    {{-- Si l'examen n'est pas encore passé --}}
                                                    <div>
                                                        <form action="{{ route('student.exam') }}" method="post">
                                                            @csrf
                                                            <a
                                                                href="javascript:void(0);"
                                                                data-type="{{ ($exam['termine'] == "O") ? 0 : 1 }}"
                                                                data-target="{{ route('student.'. (($exam['termine'] == "O") ? 'exam_update' : 'exam_state' ), [ "idExam" => $exam['idexamen'] ]) }}"
                                                                class="btn btn-outline-{{ ($exam['termine'] == "O") ? 'info' : 'success'}} btn-rounded waves-effect waves-light mt-2"
                                                                style="line-height: 2.5; padding: 0 0.8rem; font-size: 1rem;"
                                                                onclick="setActions(this);"
                                                                {{-- target="_blank" --}}
                                                                                                                            >
                                                                {{ ($exam['termine'] == "O" ) ? (($exam['valide'] == "N") ? "Voir ma note" : "Terminé") : "Débuter" }}
                                                                <i class="fa fa-external-link"></i>
                                                            </a>
                                                            <input type="hidden" name="exam" value="{{ $exam['idexamen'] }}">
                                                        </form>
                                                    </div>
                                                @else
                                                    <a
                                                        href="javascript:void(0);"
                                                        class="btn btn-outline-info btn-rounded waves-effect waves-light mt-2"
                                                        style="line-height: 2.5; padding: 0 0.8rem; font-size: 1rem;"
                                                    >
                                                        Patientez
                                                    </a>
                                                @endif
                                            @else
                                                {{-- Lorsque l'examen n'est plus valide ( toutes les vagues ont déjà composées ) --}}
                                                @if ($exam['status'] == "YES")
                                                    {{-- Si l'examen n'est pas encore passé --}}
                                                    <div>
                                                        <a
                                                            data-type="0"
                                                            data-target="{{ route('student.exam_update' , [ "idExam" => $exam['idexamen'] ]) }}"
                                                            class="btn btn-outline-success btn-rounded waves-effect waves-light mt-2"
                                                            style="line-height: 2.5; padding: 0 0.8rem; font-size: 1rem;"
                                                            data-bs-toggle="modal" data-bs-target="#exam-{{$exam['idexamen']}}"
                                                            onclick="setActions(this);"
                                                        >
                                                            Voir ma note
                                                        </a>

                                                        @if ( $exam['visualisecorrige'] != "N" )
                                                            <a
                                                                class="btn btn-outline-info btn-rounded waves-effect waves-light mt-2"
                                                                style="line-height: 2.5; padding: 0 0.8rem; font-size: 1rem;"
                                                                href="{{ route('student.exam_copy', [ "epreuve" => $exam['idepreuve'] ]) }}"
                                                            >
                                                                Voir le corrigé
                                                            </a>
                                                        @endif
                                                    </div>
                                                @else
                                                    <p>
                                                        <span class="fw-bold">Note de la composition</span> :
                                                        <div class="text-center align-self-center my-2 mx-auto">
                                                            <button class="btn btn-outline-{{ ($note < $noteValide) ? 'danger' : 'info'}} btn-rounded waves-effect waves-light" style="width: 7.2rem; height: 7.2rem;">
                                                                <span class="fraction" style="text-align: center;">
                                                                    <span class="numerator">{{ str_pad($exam["note"], 2, "0", STR_PAD_LEFT) }}</span>
                                                                    <span class="denominator">{{ $exam["echelle"] }}</span>
                                                                </span>
                                                                {{-- <span><sup>90</sup>&frasl;<sub>100</sub></span> --}}
                                                            </button>
                                                        </div>
                                                    </p>
                                                @endif
                                            @endif
                                        </div>
                                    </div>
                                </li>
                                @if ($exam['status'] == "YES")
                                    <div class="modal fade" id="exam-{{$exam['idexamen']}}" tabindex="-1" aria-labelledby="bs-example-modal-lg" aria-hidden="true" style="padding-left: 0 !important;">
                                        <div class="modal-dialog modal-fullscreen">
                                            <div class="modal-content">
                                                <div class="modal-header d-inline-block">
                                                    <div class="modal-title text-uppercase" id="exampleModalFullscreenLabel"></div>
                                                    {{-- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> --}}
                                                </div>
                                                <div class="modal-body">

                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-light-info text-dark font-weight-medium" data-bs-dismiss="modal">Fermer</button>
                                                    {{-- <button type="button" class="btn btn-light-success text-success font-weight-medium">Envoyer</button> --}}
                                                </div>
                                            </div>
                                            <!-- /.modal-content -->
                                        </div>
                                        <!-- /.modal-dialog -->
                                    </div><!-- /.modal -->
                                @endif
                            @endforeach
                        </ul>
                    </div>
                </div>
            @endif
        @endforeach

        @if ( $noData )
            <!-- No exam found -->
            <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>
        @endif

        <div id="erreur-examen-fini"></div>
    </div>
    <!-- Blog Details End -->
@endsection

@section('script')
	{{-- include page's specific scripts here --}}
    <!-- Block-UI -->
    <script src="{{ asset('assets/libs/block-ui/jquery.blockUI.js') }}"></script>

    <script>

        /*=============> Block UI default const <=============*/
        const blockOptions = {
            message: '<h5>Veuillez patienter... <i class="fa fa-refresh fa-spin text-dark"></i></h5>',
            css: {
                border: 'none',
                padding: '15px',
                width: '100%',
                left: '',
                backgroundColor: '#000',
                '-webkit-border-radius': '10px',
                '-moz-border-radius': '10px',
                opacity: .5,
                color: '#fff'
            },
            // styles for the overlay
            overlayCSS:  {
                backgroundColor: 'rgb(0 0 0 / 21%)',
                opacity:         0.6,
                cursor:          'wait'
            },

            // IE issues: 'about:blank' fails on HTTPS and javascript:false is s-l-o-w
            // (hat tip to Jorge H. N. de Vasconcelos)
            iframeSrc: /^https/i.test(window.location.href || '') ? 'javascript:false' : 'about:blank',
        };

        const targetDiv = $('.list-wrapper');

        /*=============> Sweet Alert init const <=============*/
        const swalWithBootstrapButtons = Swal.mixin({
            customClass: {
                confirmButton: 'btn-outline-success btn-rounded waves-effect waves-light',
                cancelButton: 'btn-outline-danger btn-rounded waves-effect waves-light'
            },
            buttonsStyling: false
        });

        /*=============> Default variable for connection status <=============*/
        let imageAddr = "https://progiciel.geststudent.net/Inscription/imageEtudiant/votrephoto.jpg";
        let downloadSize = 4995374; //bytes

        /*=============> Default variable for clock <=============*/
        /*
        let canvas = document.getElementById("canvas");
        let ctx = canvas.getContext("2d");
        let radius = canvas.height / 2;
        */

        $(function(){

            let nbNvExams = @json($nbNvExams, JSON_PRETTY_PRINT);
            let nbExamInvalid = @json($nbExamInvalid, JSON_PRETTY_PRINT);
            let nbExamValid = nbNvExams - nbExamInvalid;
            let startTime, endTime;


            if (nbNvExams) {
                progressBar( (nbExamValid > 0), nbExamValid, nbNvExams, 'perf1', 'validés');
                progressBar( nbExamInvalid, nbExamInvalid, nbNvExams, 'perf2', 'non validés')
            }

            window.onload = function(){
                params  = 'width='+screen.width;
                params += ', height='+screen.height;
                params += ', top=0, left=0'
                params += ', fullscreen=yes';
                params += ', directories=no';
                params += ', location=no';
                params += ', menubar=no';
                params += ', resizable=no';
                params += ', scrollbars=yes';
                params += ', status=no';
                params += ', toolbar=no';
            };

            /*=============> Clock content <=============*/
            /*
            ctx.translate(radius, radius);
            radius = radius * 0.90;

            setInterval(drawClock, 1000);
            */

            // Initialise any local time clocks
            initLocalClocks();
            // Start the seconds container moving
            moveSecondHands();
            // Set the intial minute hand container transition, and then each subsequent step
            setUpMinuteHands();

            /*=============> Connection status <=============*/
            let html = `
            <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="font-weight-medium">
                    <i data-feather="alert-triangle" class="text-danger feather-sm me-2 flex-shrink-0"></i>
                    <span class="text-dark">
                        VERIFIER VOTRE CONNECTION INTERNET!!!
                    </span>
                </div>
            </div>
            `;

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

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

            if (window.addEventListener) {
                window.addEventListener('load', InitiateSpeedDetection, false);
            } else if (window.attachEvent) {
                window.attachEvent('onload', InitiateSpeedDetection);
            }


            let intervalId = window.setInterval(function() {
                $('a[data-type="1"]').each(function() {
                    e = this;
                    updateExamStatus(e, false);
                });
            }, 5000);
        }());

        /*=============> Event Listener <=============*/
        function setActions(event) {
            // event.preventDefault();
            $(event).blur();
            if ($(event).attr('data-type') == "1") {
                targetDiv.block(blockOptions);

                updateExamStatus(event, true);
			} else {
                $($(event).attr('data-bs-target')).on('shown.bs.modal', function (e) {
                    targetDiv.block(blockOptions);

                    let el = e.currentTarget.id;
                    let modal = $(this);
                    modal.find('.modal-body').empty();

                    $.ajax({
                        url: $(event).attr('data-target'),
                        type: 'POST',
                        data: {
                            "status" : 0,
                            "showNote" : true
                        },
                        success: function(data) {
                            console.log('data', data);
                            modal.find('.modal-body').html(data.content);
                            modal.find('.modal-title').html( $('#note-breadcrumb') );
                            modal.find('.modal-body').find('#note-breadcrumb').remove();
                            $('.note-style').remove();
                            $('.note-script').remove();
                            $(event).unbind();

                            targetDiv.unblock();

                        },
                        error: function(error) {
                            console.log(error);
                            targetDiv.unblock();
                        }
                    });
                })
            }
        };

        function clock() {
            let weekday = ["Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi"],
            d = new Date(),
            h = d.getHours(),
            m = d.getMinutes(),
            s = d.getSeconds(),
            date = d.getDate(),
            month = d.getMonth() + 1,
            year = d.getFullYear(),

            hDeg = h * 30 + m * (360/720),
            mDeg = m * 6 + s * (360/3600),
            sDeg = s * 6,

            hEl = document.querySelector('.hour-hand'),
            mEl = document.querySelector('.minute-hand'),
            sEl = document.querySelector('.second-hand'),
            dateEl = document.querySelector('.date'),
            dayEl = document.querySelector('.day');

            let day = weekday[d.getDay()];

            if(month < 9) {
                month = "0" + month;
            }

            hEl.style.transform = "rotate("+hDeg+"deg)";
            mEl.style.transform = "rotate("+mDeg+"deg)";
            sEl.style.transform = "rotate("+sDeg+"deg)";
            dateEl.innerHTML = date+"/"+month+"/"+year;
            dayEl.innerHTML = day;
        }

        function MeasureConnectionSpeed() {
            let download = new Image();

            download.onload = function () {
                endTime = (new Date()).getTime();
                showResults();
            }

            download.onerror = function (err, msg) {
                ShowProgressMessage("Invalid image, or error downloading");
            }

            startTime = (new Date()).getTime();

            let cacheBuster = "?nnn=" + startTime;
            download.src = imageAddr + cacheBuster;

        }

        function showResults() {

            let duration = (endTime - startTime) / 1000;
            let bitsLoaded = downloadSize * 8;
            let speedBps = (bitsLoaded / duration).toFixed(2);
            let speedKbps = (speedBps / 1024).toFixed(2);
            let speedMbps = (speedKbps / 1024).toFixed(2);

            ShowProgressMessage(["Your connection speed is:", speedKbps + " kbps"]);

            if (speedKbps < 500) {
                //swal("La vitesse de connexion est faible : ", speedKbps + " kbps", "error");
            } else {
                //swal("La vitesse de votre connexion : ", speedKbps + " kbps", "info");
            }

            ShowProgressMessage(["Your connection speed is:", speedBps + " bps", speedKbps + " kbps", speedMbps + " Mbps"]);
        }

        function ShowProgressMessage(msg) {
            if (console) {
                if (typeof msg == "string") {
                    console.log(msg);
                } else {
                    for (let i = 0; i < msg.length; i++) {
                        console.log(msg[i]);
                    }
                }
            }
            /*var oProgress = document.getElementById("progress");
            if (oProgress) {
                var actualHTML = (typeof msg == "string") ? msg : msg.join("<br />");
                oProgress.innerHTML = actualHTML;
            }*/
        }

        function InitiateSpeedDetection() {
            ShowProgressMessage("Loading the image, please wait...");
            window.setTimeout(MeasureConnectionSpeed, 1);
        }

        function updateExamStatus(el, onclick = false) {
            $.ajax({
                url: $(el).attr('data-target'),
                type: 'GET',
                success: function(data) {

                    $("a[class*='btn-outline-']").removeClass (function (index, css) {
                        return (css.match (/(^|\s)ativo\S+/g) || []).join(' ');
                    });

                    switch (onclick) {
                        case true:
                            switch (data.status) {
                                case "OK":
                                    swalWithBootstrapButtons.fire({
                                        title: 'Attention!!!',
                                        text: "Vous êtes sur le point de débuter la composition! Assurez-vous de ne pas exécuter une action compromettante.",
                                        icon: 'warning',
                                        showCancelButton: false,
                                        confirmButtonText: 'Continuez!',
                                        reverseButtons: true

                                    }).then((result) => {

                                        targetDiv.unblock();

                                        if (result.isConfirmed) {
                                            targetDiv.block(blockOptions);
                                            $(el).parents('form').submit();
                                        }

                                    })

                                    break;

                                case "NO":
                                    $(el).text("Terminé");
                                    $(el).addClass('btn-outline-danger');
                                    $(el).attr('data-type', 0);

                                    swalPopup(
                                        '<strong>Information</strong>',
                                        "Evaluation terminée. Patientez pour voir votre note.",
                                        'success'
                                    );

                                    $($(el).attr('data-bs-target')).modal('toggle');

                                    $("#erreur-examen-fini").click();

                                    break;

                                case "NREADY":
                                    let timeleft = new Date(data.timeleft * 1000).toISOString().slice(11, 19);
                                    let hour = parseInt(timeleft.split(':')[0]);
                                    let minuts = parseInt(timeleft.split(':')[1]);
                                    let second = parseInt(timeleft.split(':')[2]);
                                    let message = '';
                                    
                                    if (hour != 0) {
                                        message = "Veuillez patienter. Il reste encore " +  hour + ' heure(s) ' + minuts + " minute(s) avant le début de l'évaluation."
                                    } else if (minuts != 0) {
                                        message = "Veuillez patienter. Il reste encore " + minuts + " minute(s) avant le début de l'évaluation."
                                    } else {
                                        message = "Veuillez patienter quelques secondes."
                                    }

                                    swalPopup(
                                        '<strong>Information</strong>',
                                        message,
                                        'warning'
                                    );

                                    break;

                                case "TRICHE_NUM":
                                    $(el).text("Terminé");
                                    $(el).addClass('btn-outline-danger');
                                    $(el).attr('data-type', 0);

                                    swalPopup(
                                        'Tricherie !!!',
                                        "Vous avez déjà terminée votre composition!!!.",
                                        'error'
                                    );

                                    $('#bs-fullscreen').toggle();

                                    break;

                                default:
                                    break;
                            }
                            break;

                        default:
                            switch (data.status) {
                                case "OK":
                                    if (data.difference < 0) {
                                        $(el).text("En cours");
                                        $(el).addClass('btn-outline-warning');
                                    } else if (data.difference == 0) {
                                        $(el).text("Débuter");
                                        $(el).addClass('btn-outline-success');
                                    }

                                    break;

                                case "NREADY":
                                    $(el).text("Patientez");
                                    $(el).addClass('btn-outline-info');

                                    break;

                                case "NO": case "TRICHE_NUM":
                                    $(el).text("Terminé");
                                    $(el).addClass('btn-outline-danger');
                                    // $(el).attr('data-type', 0);

                                    break;
                            }
                            break;

                    }
                    // targetDiv.unblock();

                },
                error: function(error) {
                    console.log(error);
                    targetDiv.unblock();
                }
            });
        }

        function drawClock() {
            drawFace(ctx, radius);
            drawNumbers(ctx, radius);
            drawTime(ctx, radius);
        }

        function drawFace(ctx, radius) {
            let grad;
            ctx.beginPath();
            ctx.arc(0, 0, radius, 0, 2*Math.PI);
            ctx.fillStyle = 'white';
            ctx.fill();
            grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);
            grad.addColorStop(0, '#333');
            grad.addColorStop(0.5, 'white');
            grad.addColorStop(1, '#333');
            ctx.strokeStyle = grad;
            ctx.lineWidth = radius*0.1;
            ctx.stroke();
            ctx.beginPath();
            ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);
            ctx.fillStyle = '#333';
            ctx.fill();
        }

        function drawNumbers(ctx, radius) {
            let ang;
            let num;
            ctx.font = radius*0.15 + "px arial";
            ctx.textBaseline="middle";
            ctx.textAlign="center";
            for(num = 1; num < 13; num++){
                ang = num * Math.PI / 6;
                ctx.rotate(ang);
                ctx.translate(0, -radius*0.85);
                ctx.rotate(-ang);
                ctx.fillText(num.toString(), 0, 0);
                ctx.rotate(ang);
                ctx.translate(0, radius*0.85);
                ctx.rotate(-ang);
            }
        }

        function drawTime(ctx, radius){
            let now = new Date();
            let hour = now.getHours();
            let minute = now.getMinutes();
            let second = now.getSeconds();
            //hour
            hour=hour%12;
            hour=(hour*Math.PI/6)+
            (minute*Math.PI/(6*60))+
            (second*Math.PI/(360*60));
            drawHand(ctx, hour, radius*0.5, radius*0.07);
            //minute
            minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
            drawHand(ctx, minute, radius*0.8, radius*0.07);
            // second
            second=(second*Math.PI/30);
            drawHand(ctx, second, radius*0.9, radius*0.02);
        }

        function drawHand(ctx, pos, length, width) {
            ctx.beginPath();
            ctx.lineWidth = width;
            ctx.lineCap = "round";
            ctx.moveTo(0,0);
            ctx.rotate(pos);
            ctx.lineTo(0, -length);
            ctx.stroke();
            ctx.rotate(-pos);
        }

        function progressBar(show, value, total, element, state) {
            if (show) {
                value = ((value * 100) / total).toFixed(2);
                $('#' + element).attr('style', 'width : ' + value   + '%;');

                if ($(window).width() < 992) {
                    $('#' + element).text(value + '% ');
			    } else {
                    if (value > 20) {
                        $('#' + element).text(' Taux d\'examens ' + state + ' : ' + value + '%');
                    } else {
                        $('#' + element).text(value + '% ' + state);
                    }
                }
            }
        }

        /*
        *  Main function to set the clock times
        */

        /*
        * Starts any clocks using the user's local time
        * From: cssanimation.rocks/clocks
        */
        function initLocalClocks() {
            // Get the local time using JS
            let d = new Date;
            let seconds = d.getSeconds();
            let minutes = d.getMinutes();
            let hours = d.getHours();

            // Create an object with each hand and it's angle in degrees
            let hands = [
                {
                    hand: 'hours',
                    angle: (hours * 30) + (minutes / 2)
                },
                {
                    hand: 'minutes',
                    angle: (minutes * 6)
                },
                {
                    hand: 'seconds',
                    angle: (seconds * 6)
                }
            ];
            // Loop through each of these hands to set their angle
            for (let j = 0; j < hands.length; j++) {
                let elements = document.querySelectorAll('.' + hands[j].hand);
                for (let k = 0; k < elements.length; k++) {
                    elements[k].style.webkitTransform = 'rotateZ('+ hands[j].angle +'deg)';
                    elements[k].style.transform = 'rotateZ('+ hands[j].angle +'deg)';
                    // If this is a minute hand, note the seconds position (to calculate minute position later)
                    if (hands[j].hand === 'minutes') {
                        elements[k].parentNode.setAttribute('data-second-angle', hands[j + 1].angle);
                    }
                }
            }

            let weekday = ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"],
            date = d.getDate(),
            month = d.getMonth() + 1,
            year = d.getFullYear(),

            // dateEl = document.querySelector('.date'),
            dayEl = document.querySelector('.day');

            let day = weekday[d.getDay()];

            if (month < 9) {
                month = "0" + month;
            }

            // dateEl.innerHTML = date + "/" + month + "/" + year;
            dayEl.innerHTML = date + "/" + month + "/" + year;
            // dayEl.innerHTML = day;
        }

        /*
        * Set a timeout for the first minute hand movement (less than 1 minute), then rotate it every minute after that
        */
        function setUpMinuteHands() {
            // Find out how far into the minute we are
            let containers = document.querySelectorAll('.minutes-container');
            let secondAngle = containers[0].getAttribute("data-second-angle");
            if (secondAngle > 0) {
                // Set a timeout until the end of the current minute, to move the hand
                let delay = (((360 - secondAngle) / 6) + 0.1) * 1000;
                setTimeout(function() {
                    moveMinuteHands(containers);
                }, delay);
            }
        }

        /*
        * Do the first minute's rotation
        */
        function moveMinuteHands(containers) {
            for (let i = 0; i < containers.length; i++) {
                containers[i].style.webkitTransform = 'rotateZ(6deg)';
                containers[i].style.transform = 'rotateZ(6deg)';
            }

            // Then continue with a 60 second interval
            setInterval(function() {
                for (let i = 0; i < containers.length; i++) {
                    if (containers[i].angle === undefined) {
                        containers[i].angle = 12;
                    } else {
                        containers[i].angle += 6;
                    }
                    containers[i].style.webkitTransform = 'rotateZ('+ containers[i].angle +'deg)';
                    containers[i].style.transform = 'rotateZ('+ containers[i].angle +'deg)';
                }
            }, 60000);
        }

        /*
        * Move the second containers
        */
        function moveSecondHands() {
            let containers = document.querySelectorAll('.seconds-container');
            setInterval(function() {
                for (let i = 0; i < containers.length; i++) {
                    if (containers[i].angle === undefined) {
                        containers[i].angle = 6;
                    } else {
                        containers[i].angle += 6;
                    }
                    containers[i].style.webkitTransform = 'rotateZ('+ containers[i].angle +'deg)';
                    containers[i].style.transform = 'rotateZ('+ containers[i].angle +'deg)';
                }
            }, 1000);
        }

    </script>
@endsection