@extends('layouts.base', [
	"breadcrumb" => [  // see partials/breadcrumb.blade.php for default options
		"title" => "COPIES",
		"nav" => [
			"Accueil" => route("teacher.index"),
			"Copies" => "#",
		],
	]
])

@section('title', "GestStudent NG Copies")

@section('css')
	<link href="{{asset('assets/extra-libs/datatables.net-bs4/css/dataTables.bootstrap4.css')}}" rel="stylesheet">

    <!-- Popup CSS -->
    <link href="{{asset('/assets/libs/magnific-popup/dist/magnific-popup.css')}}" rel="stylesheet">
@endsection

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

    {{-- alert settings with content --}}
	@include('partials.alert-settings')
    
	{{-- top stats --}}
	<div class="top-stats row no-gutters">
		<div class="card p-2 p-lg-3 col-lg-3 col-md-6 col-sm-12">
			<div class="p-lg-3 p-2">
				<div class="d-flex align-items-center">
					<button class="btn btn-circle btn-danger text-white btn-lg" href="javascript:void(0)">
					<i class="ti-clipboard"></i>
				</button>
					<div class="ms-4" style="width: 38%;">
						<h4 class="fw-normal">Nombre de Cours </h4>
						<div class="progress">
							<div class="progress-bar bg-danger" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="40"></div>
						</div>
					</div>
					<div class="ms-auto">
						<h2 class="display-7 mb-0">{{$stats["ec"]}}</h2>
					</div>
				</div>
			</div>
		</div>
		<div class="card p-2 p-lg-3 col-lg-3 col-md-6 col-sm-12">
			<div class="p-lg-3 p-2">
				<div class="d-flex align-items-center">
					<button class="btn btn-circle btn-cyan text-white btn-lg" href="javascript:void(0)">
					<i class="ti-wallet"></i>
				</button>
					<div class="ms-4" style="width: 38%;">
						<h4 class="fw-normal">Nombre de filière</h4>
						<div class="progress">
							<div class="progress-bar bg-cyan" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="40"></div>
						</div>
					</div>
					<div class="ms-auto">
						<h2 class="display-7 mb-0">{{$stats["filiere"]}}</h2>
					</div>
				</div>
			</div>
		</div>
		<div class="card p-2 p-lg-3 col-lg-3 col-md-6 col-sm-12">
			<div class="p-lg-3 p-2">
				<div class="d-flex align-items-center">
					<button class="btn btn-circle btn-success text-white btn-lg" href="javascript:void(0)">
						<i class="ti-pencil-alt"></i>
					</button>
					<div class="ms-4" style="width: 38%;">
						<h4 class="fw-normal">Total des épreuves</h4>
						<div class="progress">
							<div class="progress-bar bg-success" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="40"></div>
						</div>
					</div>
					<div class="ms-auto">
						<h2 class="display-7 mb-0">{{$stats["epreuve"]}}</h2>
					</div>
				</div>
			</div>
		</div>
		<div class="card p-2 p-lg-3 col-lg-3 col-md-6 col-sm-12">
			<div class="p-lg-3 p-2">
				<div class="d-flex align-items-center">
					<button class="btn btn-circle btn-warning text-white btn-lg" href="javascript:void(0)">
					<i class="ti-layout"></i>
				</button>
					<div class="ms-4" style="width: 38%;">
						<h4 class="fw-normal">Total des questions</h4>
						<div class="progress">
							<div class="progress-bar bg-warning" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="40"></div>
						</div>
					</div>
					<div class="ms-auto">
						<h2 class="display-7 mb-0">{{$stats["question"]}}</h2>
					</div>
				</div>
			</div>
		</div>
	</div>

    <div class="card" style="width: 90%; margin:0 auto">
        <div class="d-flex align-items-center p-4 mt-2">
            <div class="px-3 my-4 border-bottom pb-2">
                <h3 class="card-title mb-0">LISTES DES ÉTUDIANTS ET LEURS NOTES</h3>
                <div>
                    <i class="mdi mdi-book"></i>
                    <span class="fw-bold">{{$ec->intituleEcu}}</span>
                    {{"($ec->sigleFilieres | $ec->niveauformation $ec->annee)"}}
                </div>
                <div>
                    <i class="mdi mdi-calendar-clock"></i> Devoir surveillé du <span class="fw-bold">{{$exam->formated_date." à ".$exam->heure}}</span>
                </div>
            </div>
            <div class="ms-auto">
                <a  id="generate-copy"
                    href="{{ route('teacher.ec_epreuve_copies_print', [
                                "ecId" => $ec->idEC,
                                "epreuveId" => $exam->idepreuve
                            ]);
                        }}"
                    data-bs-toggle="tooltip"
                    title="Générer toutes les copies"
                >
                    <button class="btn btn-info text-white btn-rounded py-2 px-3">Générer <i class=" fas fa-spinner ms-2"></i></button>
                </a>

                <a
                    id="doc-download"
                    href="{{ route('teacher.ec_epreuve_copies_print', [
                            "ecId" => $ec->idEC,
                            "epreuveId" => $exam->idepreuve
                        ]);
                    }}"
                    data-bs-toggle="tooltip"
                    title="Télécharger toutes les copies"
                    style="display:none;"
                >
                    <button class="btn btn-success text-dark btn-rounded py-2 px-3">Télécharger <i class=" ti-download ms-2"></i></button>
                </a>
            </div>
        </div>

        <div class="container">
            <div class="card mb-1">
                <div class="card-header text-center">
                    <h3>Modèle d'affichage</h3>
                    <div class="card-subtitle">Choisissez un modèle d'affichage</div>
                </div>
                <div class="card-body">
                    <div class="container-fluid page-content">
                        <div id="carouselExampleIndicators" class="carousel slide mx-auto" data-bs-ride="carousel" style="width: 50% !important;">
                            <ol class="carousel-indicators" style="background: #0000001a;">
                                @foreach ($templates as $i => $template)
                                    @php
                                        $title = explode('.', $template['name'])[0];
                                    @endphp

                                    <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="{{ $i }}" class="{{ ($i == 0) ? 'active' : '' }}"></li>
                                @endforeach
                            </ol>
                            <div class="carousel-inner d-flex">

                                @foreach ($templates as $i => $template)
                                    @php
                                        $title = explode('.', $template['name'])[0];
                                    @endphp

                                    <div class="carousel-item {{ ($i == 0) ? 'active' : '' }}">
                                        <div class="card card-hover">
                                            <div class="el-element-overlay">
                                                <div class="el-card-item pb-3" data-toggle="tooltip" title="{{ $title }}">
                                                    <div class="el-card-avatar mb-3 el-overlay-1 w-75 overflow-hidden position-relative text-center mx-auto">
                                                        <img src="{{ asset('project/images/templates/'.$template['name']) }}" class="d-block position-relative w-50 mx-auto" alt="{{ $title }}">
                                                        <div class="el-overlay w-100 overflow-hidden">
                                                            <ul class="list-style-none el-info text-white text-uppercase d-inline-block p-0">
                                                                <li class="el-item d-inline-block my-0  mx-1">
                                                                    <a class="btn default btn-outline image-popup-vertical-fit el-link text-white border-white" href="{{ asset('project/images/templates/'.$template['name']) }}">
                                                                        <i class="icon-magnifier"></i>
                                                                    </a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                    <div class="el-card-content text-center">
                                                        <div class="form-check d-inline-block">
                                                            <input class="form-check-input" name="template" type="radio" id="template-{{ $i + 1}}" value="{{ $title }}" {{ ($i == 0) ? 'checked' : '' }}>
                                                            <label class="form-check-label" for="template-{{ $i + 1}}">
                                                                <span class="text-muted">Sélectionnez ce template</span>
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach

                                <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-bs-slide="prev">
                                    <span class="carousel-control-prev-icon" aria-hidden="true" style="background-color: #0000009c;"></span>
                                    <span class="visually-hidden">Previous</span>
                                </a>

                                <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-bs-slide="next">
                                    <span class="carousel-control-next-icon" aria-hidden="true" style="background-color: #0000009c;"></span>
                                    <span class="visually-hidden">Next</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card-body p-0">
            <div class="table-responsive px-4 py-3">
                <table class="table table-bordered no-wrap" id="copies-table">
                    <thead class="bg-light">
                        <tr>
                            <th width="5%" class="text-center"> N°</th>
                            <th width="70%"> Nom et prénoms de l'étudiant</th>
                            <th width="10%" class="text-center">Note</th>
                            <th width="15%" class="text-center">Action</th>
                        </tr>
                    </thead>

                    <tbody>
                        @foreach ($copies as $i => $copy)
                            @php
                                $showLink = route('teacher.ec_epreuve_copies_show', [
                                    "ecId" => $ec->idEC,
                                    "epreuveId" => $exam->idepreuve,
                                    "copyId" => $copy->idcomposition_etu
                                ]);
                            @endphp
                            <tr class="">
                                <td class="text-center">{{$i+1}}</td>
                                <td>
                                    <a
                                        class="text-dark copy-link"
                                        href="{{$showLink}}?template=1"
                                        data-bs-toggle="tooltip"
                                        title="Voir la copie de l'étudiant"
                                    >
                                        {{$copy->nom." ".$copy->prenom}}
                                    </a>
                                </td>
                                <td class="text-center">{{$copy->note}}</td>
                                <td>
                                    <a
                                        role="button"
                                        href="{{$showLink}}?template=1"
                                        data-bs-toggle="tooltip"
                                        title="Voir la copie de l'étudiant"
                                        class="btn btn-outline-info btn-circle btn-lg me-1 copy-link"
                                    >
                                        <i class="far fa-file-alt"></i>
                                    </a>
                                    @if ( $exam->modifierNote == "O" )
                                        <a
                                            role="button"
                                            href="#edit-note-modal{{$i}}"
                                            data-bs-toggle="modal"
                                            data-bs-tooltip="tooltip"
                                            title="Modifier la note de l'étudiant"
                                            class="btn btn-outline-info btn-circle btn-lg me-1"
                                        >
                                            <i class="ti-pencil-alt"></i>
                                        </a>
                                    @endif
                                    <a
                                        role="button"
                                        href="#edit-statut-modal{{$i}}"
                                        data-bs-toggle="modal"
                                        data-bs-tooltip="tooltip"
                                        title="Activer/désactiver la composition"
                                        class="btn btn-outline-info btn-circle btn-lg me-1"
                                    >
                                        <i class="ti-check-box"></i>
                                    </a>

                                    {{-- edit note modal --}}
                                    <div class="modal fade" id="edit-note-modal{{$i}}" tabindex="-1" aria-labelledby="edit-note-modal" aria-hidden="true">
                                        <div class="modal-dialog">
                                            <div class="modal-content">
                                                <div class="modal-header d-flex align-items-center border-bottom">
                                                    <h4 class="modal-title">Modifier la note de l'étudiant</h4>
                                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                </div>
                                                <div class="modal-body">
                                                    <form
                                                        class="edit-note-form form-horizontal"
                                                        method="POST"
                                                        action="{{
                                                            route('teacher.ec_epreuve_copies_update_note', [
                                                                "ecId" => $ec->idEC,
                                                                "epreuveId" => $exam->idepreuve,
                                                                "copyId" => $copy->idcomposition_etu
                                                            ])
                                                        }}"
                                                    >
                                                        @csrf
                                                        <div class="form-group mb-2">
                                                            <label for="nom-note">Nom et prénoms de l'étudiant :</label>
                                                            <input type="text" class="form-control" value="{{$copy->nom.' '.$copy->prenom}}" id="nom-note" readonly >
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="note">Note :</label>
                                                            <input type="number" name="note" class="form-control" value="{{$copy->note}}" required><br>
                                                        </div>
                                                        <div class="d-flex justify-content-end border-top mt-3 pt-2">
                                                            <button type="button" class="btn btn-dark border-light me-2" data-bs-dismiss="modal">Annuler</button>
                                                            <button type="submit" class="btn btn-danger">Modifier <i class="far fa-edit"></i></button>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    {{-- edit status modal --}}
                                    <div class="modal fade" id="edit-statut-modal{{$i}}" tabindex="-1" aria-labelledby="edit-compo-modal" aria-hidden="true">
                                        <div class="modal-dialog">
                                            <div class="modal-content">
                                                <div class="modal-header d-flex align-items-center border-bottom">
                                                    <h4 class="modal-title">Activer/Désactiver une composition</h4>
                                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                </div>
                                                <div class="modal-body">
                                                    <form
                                                        class="edit-statut-form form-horizontal"
                                                        method="POST"
                                                        action="{{
                                                            route('teacher.ec_epreuve_copies_update_statut', [
                                                                "ecId" => $ec->idEC,
                                                                "epreuveId" => $exam->idepreuve,
                                                                "copyId" => $copy->idcomposition_etu
                                                            ])
                                                        }}"
                                                    >
                                                        @csrf
                                                        <div class="form-group mb-2">
                                                            <label for="nom-status">Nom et prénoms de l'étudiant :</label>
                                                            <input type="text" class="form-control" value="{{$copy->nom.' '.$copy->prenom}}" id="nom-status" readonly >
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="activer">Statut composition :</label>
                                                            <select name="activer" id="activer" class="form-select" required>
                                                                <option value="N" {{ $copy->termine == 'N' ? 'selected' : '' }} >Activer</option>
                                                                <option value="O" {{ $copy->termine == 'O' ? 'selected' : '' }} >Désactiver</option>
                                                            </select>
                                                        </div>
                                                        <div class="d-flex justify-content-end border-top mt-3 pt-2">
                                                            <button type="button" class="btn btn-dark border-light me-2" data-bs-dismiss="modal">Annuler</button>
                                                            <button type="submit" class="btn btn-danger">Modifier <i class="far fa-edit"></i></button>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- GERERATION UI -->
    <div class="d-none">
        <div class="w-100 p-3 my-auto" id="pdfGeneration-ui" style="background-color: #e1e1e1bf;">
            <!-- PDF exportation ui -->
            <div class="w-100" id="pdf-generation">
                <div class="mb-3">
                    <div class="card mb-0 py-0 bg-transparent">
                        <div class="card-header p-3">
                            <h2 class="font-light font-weight-bold">
                                GÉNÉRATION DES COPIES AU FORMAT PDF <i class=" fas fa-file-pdf"></i>
                            </h2>
                            <p  style="font-size: .8rem;">Examen du {{ $exam->formated_date}}</p>
                        </div>
                        <div class="card-body"  id="pdf-generation-step">
                            <h4 class="font-light" id="tasks-stats">
                                <span id="tasks-index" class="font-weigh-bold">0</span>/<span id="tasks-total">0</span>
                            </h4>
                        </div>
                    </div>
                    <!-- global tasks progression -->
                    <div class="progress mt-2 mx-auto bg-white" style="height: 30px;">
                        <div id="tasks-progressbar" class="progress-bar bg-info active progress-bar-striped" style="width: 0%;" role="progressbar">
                        </div>
                    </div>
                </div>
                <!-- current task's details -->
                <div class="mx-auto w-50" id="task-details">
                    <div class="card card-body text-center mb-0 py-2 task-card">

                        <div class="card-header">
                            <h2 class="font-light font-weight-bold">
                                Génération de la copie de :
                            </h2>
                            <p  style="font-size: .8rem;" id="task-info"></p>
                        </div>

                        <div class="card-body">
                            <div class="row pt-2 pb-2">
                                <div class="col text-center align-self-center">
                                    <!-- step evolution -->
                                    <div class="d-flex justify-content-center">
                                        <div class="spinner-border" role="status">
                                          <span class="sr-only">Loading...</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- process actions -->
                <div class="mx-auto w-50">
                    <div class="card card-body text-center mb-0 pt-4 pb-0 bg-transparent">
                        <div class="row">
                            <div class="col text-center align-self-center">
                                <button class="btn btn-danger" id="task-stop" data-toggle="tooltip" title="Arrêter la génération">
                                    Arrêter &nbsp; <i class="fas fa-stop"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Doc generation-->
        </div>
    </div>
@endsection

@section('script')
	<script src="{{asset('assets/extra-libs/datatables.net/js/jquery.dataTables.min.js')}}"></script>

    <!--This page JavaScript -->
    <script src="{{asset('/assets/libs/magnific-popup/dist/jquery.magnific-popup.min.js')}}"></script>
	<script>
		$(function() {
            const swalWithBootstrapButtons = Swal.mixin({
                customClass: {
                    confirmButton: 'btn btn-success',
                    cancelButton: 'btn btn-danger'
                },
                buttonsStyling: false
            });


            let TASKS = {
                index: 0,
                url : $('#generate-copy').attr('href'),
                xhr: {},
                delay: 500, // ms
                maxTry: 2,
                tried: 0,
            };

            let copies = @json($copies, JSON_PRETTY_PRINT);
            let nbCopy = @json(count($copies), JSON_PRETTY_PRINT); //Object.values(copies).length

            $('.image-popup-vertical-fit').magnificPopup({
                type: 'image',
                closeOnContentClick: true,
                mainClass: 'mfp-img-mobile',
                image: {
                    verticalFit: true
                }

            });

            $('input[name="template"]').on('click', function() {

                const temp = $('input[name="template"]:checked').val().slice(-1);

                setUrl($('#generate-copy'), temp);

                $('.copy-link').each((i, e) => {
                    setUrl($(e), temp);
                });

            });

			$('#copies-table').DataTable({
                "autoWidth": false,
				"order": [[1, "asc"]],
				"language": dtCustomLanguage({
					name: "copie",
					plural: "copies",
					gender: "F",
				}),
			})

            $('.edit-note-form').on('submit', function(e) {
                e.preventDefault();
                const form = $(this);

                $.ajax({
                    type: "POST",
                    url: form.attr("action"),
                    data: { "note": form.find("[name='note']").val() },
                    blockUI: true,
                    success: function(response) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Succès',
                            text: "Note modifiée avec succès !",
                        }).then(() => location.reload() );
                    },
                    error: function(err){
                        console.log(err);

                        if (err.status == 400) {
                            Swal.fire({
                                icon: 'warning',
                                text: "Veuillez bien remplir les champs svp.",
                            });
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Oops...',
                                text: "Petit souci lors de la modification de la note.",
                                confirmButtonText: "OK",
                                confirmButtonColor: "#ec6c62"
                            });
                        }
                    }
                });
            })

            $('.edit-statut-form').on('submit', function(e) {
                e.preventDefault();
                const form = $(this);

                $.ajax({
                    type: "POST",
                    url: form.attr("action"),
                    data: { "statut" : $('[name="activer"]').val() },
                    blockUI: true,
                    success: function(response) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Succès',
                            text: "Statut modifiée avec succès !",
                        }).then(() => location.reload() );
                    },
                    error: function(err){
                        console.log(err);

                        if (err.status == 400) {
                            Swal.fire({
                                icon: 'warning',
                                text: "Veuillez bien remplir les champs svp.",
                            });
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Oops...',
                                text: "Petit souci lors de la modification du statut.",
                                confirmButtonText: "OK",
                                confirmButtonColor: "#ec6c62"
                            });
                        }
                    }
                });
            })

            // stop task process event
            $("#task-stop").on("click", function(e) {
                e.preventDefault();

                updateUI("PROCESS_STOPPED");
            });

            $('#generate-copy').on('click', function(e) {
                e.preventDefault();

                updateUI("PDFS_GENERATION");

                makeAction("NEXT");
            });

            $('#doc-download').on('click', function(e) {

                updateUI('DOWNLOAD_DONE');
            });


            function updateUI(section) {
                if (section == "PDFS_GENERATION") {
                    $("#tasks-total").text(nbCopy);
                    $("#tasks-index").text(0);
                    $("#tasks-progressbar").css("width","0%");

                    // block ui and show charts' exportation evolution
                    $.blockUI({
                        message: $("#pdfGeneration-ui"),
                        // timeout: 2000, //unblock after 2 seconds
                        overlayCSS: {
                            backgroundColor: '#000',
                            opacity: 0.5,
                            cursor: 'wait'
                        },
                        css: {
                            top: 0,
                            left: 0,
                            right: 0,
                            width: '80vw',
                            marginLeft: 'auto',
                            marginRight: 'auto',
                            padding: "1rem",
                            border: 0,
                            backgroundColor: 'transparent',
                            display: 'flex',
                            justifyContent: 'center',
                        },
                        focusInput: false, // prevent focus on inputs of blockUI
                        onBlock: function(el, options) {

                            $("#pdfGeneration-ui").get(0).scrollIntoView();

                            $('html, body').animate({
                                scrollTop: $("#pdfGeneration-ui").offset().top - 400
                            }, 800);
                        },
                        onUnblock: function (el, options){
                            //insure some UI disposition
                            $("#pdf-generation").show();
                        }
                    });
                } else if (section == "TASKS") {
                    const p = ((TASKS.index + 1) * 100) / nbCopy;
                    $("#tasks-index").text(TASKS.index + 1);
                    $("#tasks-progressbar").css("width",p.toFixed(2) + "%");

                } else if (section == "TASK_DETAILS") {
                    let taskInfo = copies[TASKS.index];

                    $("#task-info").text(taskInfo.nom + " " + taskInfo.prenom);

                } else if(section == "TASK_REDO") {
                    let taskInfo = copies[TASKS.index];

                    let info = "Petit souci lors de la génération de la copie de " + response.infos.nom + " " + response.infos.prenom;

                    Swal.fire({
                        title: 'Oops...?',
                        text: info,
                        icon: 'error',
                        showCancelButton: false,
                        confirmButtonText: 'Réessayer',
                    }).then((result) => {
                        if (result.isConfirmed) {
                            makeAction("NEXT");
                        }
                    })
                } else if (section == "COPY_GENERATION") {

                    $("#pdfGeneration-ui").hide();

                    makeAction("DOWNLOAD");

                    showToastr("info", "Veuillez cliquer sur le bouton télécharger!");

                    $.unblockUI();

                } else if (section == "DOWNLOAD_DONE") {
                    $('#generate-copy').show();

                    $('#doc-download').hide();
                    // unblock the UI
                    $.unblockUI();

                    // alert user
                    showToastr("info", "Les copies ont été téléchargées avec succès !");

                } else if (section == "PROCESS_STOPPED") {

                    if (Object.values(TASKS.xhr).length > 0) {
                        TASKS.xhr.abort();
                    }
                    // unblock the UI
                    $.unblockUI();

                    // alert user
                    showToastr("success", "Processus arrêter avec succès !");
                } else {
                    console.warn("UI section '"+ section +"' to update not declared !");
                }

                return;
            }

            /**
            * Helps to make an action
            * @param {String} action - action to make. Is among ["NEXT", "REDO"]
            */
            function makeAction(action) {
                if (action == "NEXT") {

                    if ( TASKS.index < nbCopy ) { // not reached the end

                        updateUI("TASK_DETAILS"); // update UI for tasks

                        // exec the current tasks after delay

                        setTimeout(
                            function() {
                                execTodo();
                            }, TASKS.delay
                        );

                    } else {
                        // update UI & trigger doc generation
                        updateUI("COPY_GENERATION");

                        return;
                    }
                } else if (action == "REDO") {

                    if (TASKS.tried == TASKS.maxTry) {
                        showToastr("danger", "Des erreurs ont été rencontrées !");
                        console.error("Stopping process as max number of try ("+ TASKS.maxTry +") reached !");

                        // update ui to enable redo btn
                        updateUI("TASK_REDO");

                        return;
                    }

                    // increment number of tries
                    TASKS.tried = TASKS.tried + 1;
                } else if (action == "DOWNLOAD") {
                    execTodo( action );
                } else {
                    console.error("[makeAction] unkown action provided : " + action);
                    return;
                }
            }

            function execTodo( section = "GENERATE" ) {

                if (section == "GENERATE") {
                    TASKS.xhr = $.ajax({
                        type: "GET",
                        url: TASKS.url,
                        data: {
                            "index" :  TASKS.index,
                            "action" : section,
                            "template" : $('input[name="template"]:checked').val().slice(-1)
                        },
                        success: function(response) {

                            let copyDetail = copies[TASKS.index];

                            if (response.isStored === true) {

                                TASKS.index += 1;

                                updateUI("TASKS");

                                makeAction("NEXT");

                            } else {

                                makeAction("REDO");
                            }

                        },
                        error: function(err){

                            if (section == "GENERATE") {

                                console.log(err);

                                makeAction("REDO");
                            } else {
                                console.log(err);

                                execTodo( section );
                            }
                        }

                    });
                } else {
                    TASKS.index = 0;
                    TASKS.tried = 0;

                    // $('#doc-download').trigger('click');

                    $('#generate-copy').hide();

                    $('#doc-download').show();
                }
            }

            function setUrl(element, temp) {
                const url_str = element.attr("href");
                // Create a new URL object so we can work with it
                const url = new URL(url_str);

                // Check if the anchor tag should be affected or not
                if (url.searchParams.get('template')) {
                    // Set the redirect parameter to the value of current_url
                    const redirect = url.searchParams.set("template", temp);
                    // Replace the href attribute with the new url
                    element.attr("href", url.href);
                } else {
                    element.attr("href", url_str+'?template='+temp);
                }
            }
        }());
	</script>
@endsection