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

@section('title', "Migration des notes")

@section('css')
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/libs/bootstrap-duallistbox/dist/bootstrap-duallistbox.min.css')}}">
	<link href="{{asset('assets/libs/select2/dist/css/select2.min.css')}}" rel="stylesheet" type="text/css">

	<style>
		.form-card {
			padding: 25px;
			width: 75%;
			margin: 0 auto;
		}

		.form-card .card-body {
			display: flex;
			flex-direction: column;
			gap: 25px;
		}

        .ps-step-1 .spinner-border {
            height: 2em;
            width: 2em;
            border-width: 2px;
            vertical-align: middle;
            margin-bottom: .5em;
        }

        .ps-step-1 p {
            font-size: .8rem;
        }

        .ps-step-2 {
            display: none;
        }

        .ps-step-2 .table, .ps-step-2 th, .ps-step-2 tr {
			border: 1px solid #b9b9b9 !important;
            border-width: 1px; 
		}

        .custom-opt {
            padding: 6px 12px;
            font-size: 1.09rem;
            font-family: auto;
            font-weight: bold;
        }

        /* select2 */
		.select2,
		.select2-container--default .select2-search--inline .select2-search__field,
		.select2-container--default .select2-selection--multiple .select2-selection__rendered {
			width: 100% !important;
		}

		.select2-container--default .select2-selection--multiple,
		.select2-container--default.select2-container--focus .select2-selection--multiple {
			border: 1px solid #e9ecef;
		}

		.select2-container--default .select2-selection--multiple .select2-selection__choice {
			background-color: #2cabe3;
    		border-color: #2cabe3;
		}

		.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
			color: #545454;
			margin-right: 5px;
		}

		/* hide selected items */
		/* .select2-results__option[aria-selected=true] {
			display: none;
		} */
	</style>
@endsection

@section('content')
    {{-- 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>

    {{-- form --}}
    <div class="card form-card">
        <h3 class="card-title">Migrer les notes vers le système de gestion des résultats...</h3>
        <form class="form-horizontal" id="migration-form">
            @csrf
            <div class="card-body">
                <div class="form-group row">
                    <label class="col-md-3 control-label text-md-end" for="cours">Cours :</label>
                    <div class="col-md-9">
                        <select id="cours" name="cours" class="form-select" required>
                            <option selected disabled>Selectionner un cours</option>
                            @foreach ($ecs as $i => $ec)
                                @php
                                    $value = $ec->idEC.'/'.$ec->code_ecu.'/'.$ec->code_unite.'/'.$ec->idFiliere.'/'.$ec->annee.'/'.$ec->niveauFormationId.'/'.$ec->annee_acad;
                                @endphp
                                <option value="{{$value}}">{{"$ec->intituleEcu ($ec->sigleFilieres | $ec->niveauformation $ec->annee)"}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-md-3 control-label text-md-end" for="cours">Type de l'examen :</label>
                    <div class="col-md-9">
                        <select id="type" name="type" class="form-select" required>
                            <option selected disabled value="ALL">Selectionner le type d'examen</option>
                            @foreach ($typesExamen as $type)
                                <option value="{{$type->id}}">{{$type->type_examen}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="form-group row" style="display: none;">
                    <div class="col-12">
                        <div class="card">
                            <div class="border-bottom title-part-padding">
                                <h4 class="card-title mb-0 text-center">Sélection des évaluations concernées par la migration</h4>
                            </div>
                        </div>
                    </div>
                    {{-- <select multiple="multiple" id="exam-multi-selection" name="examMigration"></select> --}}
                    <label class="col-md-3 control-label text-md-end" for="exams">Evaluations disponibles : </label>
                    <div class="col-md-9">
                        <select name="exams" id="exam-multi-selection" class="form-control select2"  multiple="multiple"></select>
                    </div>
                </div>
            </div>
            <div class="d-flex justify-content-center">
                <button type="submit" class="btn btn-info btn-lg">
                    Migrer <i class="feather" data-feather="upload-cloud"></i>
                </button>
            </div>
        </form>
    </div>

     <!-- MIGRATION UI -->
     <div class="d-none">
        <div class="w-100 p-3" id="migration-ui" style="background-color: #e1e1e1bf;">
            <div class="mb-3">
                <div class="card card-body mb-0 py-0 bg-transparent" id="chart-generation-step">
                    <h2 class="font-light font-weight-bold d-inline">
                        MIGRATION DES NOTES <i class="fas fa-cloud-upload-alt"></i>
                    </h2>
                    <div class="mb-3">
                        <div id="ps-course"></div>
                        <div id="ps-type"></div>
                    </div>
                </div>
                <!-- process's progression -->
                <div class="ps-step-2">
                    <h4 class="font-light" id="ps-stats">
                        <span id="ps-index" class="font-weigh-bold">0</span> /<span id="ps-total">0</span>
                    </h4>
                    <div class="progress mt-2 mx-auto bg-white" style="height: 30px;">
                        <div id="ps-progressbar" class="progress-bar bg-info active progress-bar-striped" style="width: 0%;" role="progressbar">
                        </div>
                    </div>
                </div>
            </div>
            <!-- process step detail -->
            <div class="mx-auto w-50">
                <div class="card card-body text-center mb-0 py-2">
                    <div class="ps-step-1 pt-3">
                        <span class="spinner-border"></span>
                        <p>Chargement des données à migrer</p>
                    </div>
                    <div class="ps-step-2">
                        <h1 class="font-light mb-0">
                            <i class="fa fa-user-circle"></i>
                        </h1>
                        <h6 id="ps-student" class="mb-0"></h6>
                        <table class="w-100 mt-2 table-bordered" id="ps-marks">
                            <thead class="bg-light text-center">
                                <th colspan="2">Notes</th>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>1</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="{{ asset('assets/libs/bootstrap-duallistbox/dist/jquery.bootstrap-duallistbox.min.js')}}"></script>
    <script src="{{asset('assets/libs/select2/dist/js/select2.min.js')}}"></script>

	<script>
        $(function() {
            //********************************//
            // Multi selection Dual Listbox
            //********************************//
            // $('#exam-multi-selection').bootstrapDualListbox({
            //     nonSelectedListLabel: 'Evaluation(s) non sélectionné(e)s',
            //     selectedListLabel: 'Sélectionné(e)s',
            //     preserveSelectionOnMove: 'moved',
            //     moveOnSelect: false,
            //     filterTextClear: "Voir la liste de selection",
            //     filterPlaceHolder: "Options de filtrage",
            //     infoText: 'Affichage des Option(s)',
            //     infoTextFiltered: '<span class="badge badge-info">Liste filtrée</span> {0} sur {1}',
            //     infoTextEmpty: 'Aucune option disponible',
            //     selectorMinimalHeight: 150,
            //     emptyOption: false,
            // });

            // $('.moveall i').removeClass().addClass('fas fa-angle-right');
            // $('.removeall i').removeClass().addClass('fas fa-angle-left');
            // $('.move i').removeClass().addClass('fas fa-angle-right');
            // $('.remove i').removeClass().addClass('fas fa-angle-left');

            //********************************//
            // Select2
            //********************************//
            $("#exam-multi-selection").select2({
                placeholder: "Liste des évaluations",
                closeOnSelect: false,
            });

            $("select.form-select:not(.select2)").on('change', function(e) {
                if (($('#cours').val() != null) && ($('#type').val() != null)) {
                    showExamSelectionUI();
                }
            });

            $("#migration-form").on('submit', async function(e){
                e.preventDefault();

                // form data
                const cours = $('#cours').val();
                const type = $('#type').val();
                let examIds = $('#exam-multi-selection').val();

                if ( examIds == null) {
                    Swal.fire({
                        icon: 'warning',
                        text: "Vous n'avez sélectionné aucune évaluation !.",
                    });

                    return false;
                } else {
                    // Remove all empty string values
                    examIds = examIds.filter(function(ids) {
                        return ids !== "";
                    });

                    if (examIds.length == 0) {
                        Swal.fire({
                            icon: 'warning',
                            text: "Vous n'avez sélectionné aucune évaluation !.",
                        });

                        return false;
                    }
                }


                // update UI
                updateUI("PS_INIT", {cours : cours, type: type});

                // get Migration data
                const resp = await getMigrationData(cours, type, examIds);
                if(!resp.continue) {
                    updateUI("PS_STOPPED");
                    return false;
                }

                console.log(resp);
                
                const mData = resp.data;
                
                // update UI
                updateUI("PS_DATA_GOTTEN", {nExam: mData.exams.length, nStudent : mData.students.length});

                // migrate data for each students
                for (let i = 0; i < mData.students.length; i++) {
                    const student = mData.students[i];
                    
                    let notes = [];
                    mData.exams.forEach((exam) => {
                        notes.push(exam.notes[student.matricule]);
                    });
    
                    // update UI
                    updateUI("PS_ITEM", {student: student, notes: notes, pos: i + 1, total: mData.students.length});
    
                    // migrate marks of student if not already done
                    if (mData.migrated.indexOf(student.matricule) === -1) {
                        const resp = await migrateStudentMarks({
                            cours: cours,
                            type: type,
                            matricule: student.matricule,
                            notes: notes,
                        });
                        if(!resp.continue) {
                            updateUI("PS_STOPPED");
                            return false;
                        }
                    }
                }

                updateUI("PS_DONE");
            });
        });

        // update migration UI
        function updateUI(step, meta = {}) {
            if (step == "PS_INIT") {
                // meta => {cours , type}
                $("#ps-course").text($(`#cours option[value="${meta.cours}"]`).text());
                $("#ps-type").text($(`#type option[value="${meta.type}"]`).text());
                
                // block UI
                $.blockUI({
                    message: $("#migration-ui"),
                    overlayCSS: {
                        backgroundColor: '#000',
                        opacity: 0.5,
                        cursor: 'wait'
                    },
                    css: {
                        top: '25%',
                        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) {},
                    onUnblock: function (el, options){
                        // insure some UI disposition 
                        $(".ps-step-2").hide();
                        $(".ps-step-1").show();
                    }
                });
            } else if (step == "PS_DATA_GOTTEN") {
                // meta => {nStudent , nExam}

                $("#ps-index").text(0);
                $("#ps-total").text(meta.nStudent);

                let tds = "";
                const w = (100 / meta.nExam).toFixed(2);
                for (let i = 0; i < meta.nExam; i++) {
                    tds += `<td width="${w}%">0</td>`;                   
                }
                $("#ps-marks tbody tr").html(tds);
                $("#ps-marks thead th").attr("colspan", meta.nExam);

                $(".ps-step-1").hide();
                $(".ps-step-2").show();
            } else if (step == "PS_ITEM") {
                // meta => {student, notes, pos, total}

                // set progress
                const p = (meta.pos * 100) / meta.total;
                $("#ps-index").text(meta.pos);
                $("#ps-progressbar").css("width", p.toFixed(2) + "%");

                // set student name & marks
                $("#ps-student").text(meta.student.nom + " " + meta.student.prenom);
                for (let i = 0; i < meta.notes.length; i++) {
                    $(`#ps-marks tbody td:eq(${i})`).text(meta.notes[i]);
                }
            } else if (step == "PS_STOPPED") {
                // meta => {}

                $.unblockUI();
            } else if (step == "PS_DONE") {
                // meta => {}
                
                $.unblockUI();
                
                Swal.fire({
                    icon: 'success',
                    text: "Notes migrées avec succès !",
                }).then(() => location.reload());
            } else {
                console.warn("PS step '"+ step +"' not declared !");
            }
        }

        function getMigrationData(cours, type, examIds) {
            return new Promise((resolve, reject) => {
                $.ajax({
                    type: "GET",
                    url: "{{route('teacher.migration_data')}}",
                    data: {
                        "cours" : cours,
                        "type" : type,
                        "exams" : examIds,
                    },
                    success: function(response) {
                        const data = response.data;

                        if (data.exams.length == 0) {
                            Swal.fire({
                                icon: 'info',
                                text: "Pas d'examens disponible !",
                            });

                            resolve({
                                continue: false,
                                data: data,
                            });
                        }

                        resolve({
                            continue: true,
                            data: data,
                        });
                    },
                    error: function(err){
                        console.log(err);

                        if (err.status == 400) {
                            Swal.fire({
                                icon: 'warning',
                                text: "Veuillez bien remplir les champs svp.",
                            });
                        } else if (err.status == 409) {
                            Swal.fire({
                                icon: 'warning',
                                title: "Action non permise",
                                text: "Une migration a déja été faite",
                            });
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Oops...',
                                text: "Petit souci lors de la récupération des données.",
                                confirmButtonText: "OK",
                                confirmButtonColor: "#ec6c62"
                            });
                        }

                        resolve({
                            continue: false,
                            data: null,
                        });
                    }
                });
            })
        }

        function migrateStudentMarks(data) {
            return new Promise((resolve,reject) => {
                $.ajax({
                    type: "POST",
                    url: "{{route('teacher.migration_process')}}",
                    data: data,
                    success: function(response) {
                        resolve({
                            continue: true,
                        });
                    },
                    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 migration. Veuillez réessayer !",
                                confirmButtonText: "OK",
                                confirmButtonColor: "#ec6c62"
                            });
                        }

                        resolve({
                            continue: false,
                        });
                    }
                });
            })
        }

        function showExamSelectionUI() {
            $.ajax({
				type: "GET",
				url: "{{route('teacher.migration_exam_lists')}}",
				blockUI: true,
				data: {
					"ecuId" : $('#cours').val().split('/')[0],
                    "typeExam" : $('#type').val()
				},
				success: function(response) {
                    $('.form-group:last').hide();
                    $('#exam-multi-selection').empty();

					console.log(response);

                    let exams = response.data;

                    switch (exams.length) {
                        case 0:
							showToastr("danger", `Aucune évaluation disponible pour cet EC !`);
                            break;

                        default:
                            let internalContent = [];

                            exams.forEach((exam, id) => {
                                let content = {
                                    text: `Examen du ${exam.formated_dateexam } |  ${exam.sigleFilieres} `,
                                    value: exam.idexamen,
                                }
                                // internalContent[id] = content;
                                $('#exam-multi-selection').append(`<option class="custom-opt" value="${content.value}" ${ (exams.length == 1) ? 'selected' : '' }> ${content.text} <option>`);
                            });

                            if (exams.length == 1) {
                                showToastr("info", `Une seule évaluation est disponible et sera considérée pour la migration !`);
                            } else {
                                // $('#exam-multi-selection').bootstrapDualListbox('setOptions', internalContent);
                                // $('#exam-multi-selection').bootstrapDualListbox('refresh', true);
    
                                $('.form-group:last').show();
                            }


                            break;

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

					Swal.fire({
						icon: 'error',
						title: 'Oops...',
						text: "Petit souci lors de la récupération des évaluations de cet EC.",
					});
				}
			});
        }
	</script>
@endsection