@extends('layouts.base', [
	"breadcrumb" => [  // see partials/breadcrumb.blade.php for default options
		"title" => "ACCUEIL",
		"nav" => [
			"Accueil" => "javaScript:void(0);",
			"Page des cours" => "#",
		],
	]
])

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

@section('css')
	<link href="{{asset('assets/extra-libs/datatables.net-bs4/css/dataTables.bootstrap4.css')}}" rel="stylesheet">
	<style>
		form p {
			text-align: center;
		}

        #table-order tr td:nth-of-type(2) {
            color: red;
            font-weight: bold;
            background: #ffd8d0;
        }

        .delete-chapter-form p {
            text-align: left;
            font-size: 1.1em;
        }

        td.wrap-text {
			word-wrap: break-word;
			white-space: normal;
			text-align: justify
		}
	</style>
@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 chapitre </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["chaps"]}}</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="row">
		<div class="col-lg-10 col-md-8 col-sm-12 d-flex align-items-stretch">
			<div class="card w-100">
				<!-- Nav tabs -->
				<ul class="nav nav-tabs manage-tabs" role="tablist">
					<li class="nav-item">
						<a class="nav-link active" data-bs-toggle="tab" href="#chaps-list" role="tab">
							<span class="hidden-sm-up">
								<h4><i class="ti-lock"></i></h4>
							</span>
							<span class="d-none d-md-block">GESTION DES CHAPITRES</span>
						</a>
					</li>
				</ul>
				<!-- Tab panes -->
				<div class="tab-content">
					<div class="tab-pane active" id="chaps-list" role="tabpanel">
						<div class="row py-4 px-3 no-gutters mt-3">
							<div class="d-flex flex-column col-sm-12 col-md-6 d-flex justify-content-start" style="gap: 10px">
								<h2 class="card-title mb-0">{{$ec->intituleEcu}}</h2>
                                <p>{{"$ec->sigleFilieres | $ec->niveauformation $ec->annee"}}</p>
							</div>

							<div class="col-sm-12 col-md-6 justify-content-end d-flex">
								<a href="#add-chapter-modal" data-bs-toggle="modal" data-bs-tooltip="tooltip" title="ajouter">
									<button class="btn btn-circle btn-success text-white">
										<i class="ti-plus"></i>
									</button>
									<span class="ms-2 fw-normal fs-3 text-dark">Ajout de chapitre</span>
								</a>
								<div class="modal fade" id="add-chapter-modal" tabindex="-1" aria-labelledby="add-image-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">Ajouter un chapitre</h4>
												<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
											</div>
											<div class="modal-body">
												<form id="add-chapter-form" class="form-horizontal" method="POST" action="{{ route('teacher.ec_chap_store', [ "ecId" => $ec->idEC ]) }}" data-action="" enctype="multipart/form-data">
													@csrf
                                                    <div class="form-group mb-3">
                                                        <label for="title" class="control-label">Intitulé</label>
														<input type="text" class="form-control control-value" name="title" placeholder="Intitulé du chapitre" required>
													</div>
													<div class="form-group mb-5">
                                                        <label for="number" class="control-label">Numéro</label>
                                                        <input type="number" class="form-control" name="number" value="" placeholder="Numero du chapitre" required>
                                                    </div>
													<div class="d-flex justify-content-end mt-2">
														<button type="submit" class="btn btn-success fw-bold">
															Ajouter <i class="fa fa-plus-circle"></i>
														</button>
													</div>
												</form>
											</div>
										</div>
										<!-- /.modal-content -->
									</div>
									<!-- /.modal-dialog -->
								</div>
							</div>
						</div>
						<div class="bg-light">
                            <div class="table-responsive px-4 py-3">
                                <table class="table table-bordered no-wrap px-3" id="chaps-table">
									<thead>
										<tr>
											<th style="width: 5%; padding: 1rem;">N° d'ordre</th>
											<th style="width: 75%">Intitulé des chapitres</th>
											<th style="width: 20%">Actions</th>
										</tr>
									</thead>
									<tbody class="bg-white">
                                        @foreach ($chaps as $i => $chap)
                                            @php
                                                $href = route('teacher.chap_question', [
                                                    "ecId" => $ec->idEC,
                                                    "chapId" => $chap->idchapitre
                                                ]);
                                            @endphp
                                            <tr class="advance-table-row" data-item="{{$chap->idchapitre}}">
                                                <td class="p-2">{{$chap->chapitrenumero}}</td>
                                                <td class="wrap-text">
                                                    <a href="{{$href}}">{{$chap->chapitreintitule}}</a>
                                                </td>
                                                <td class="d-flex justify-content-center sorting">
                                                    <a class="me-2" href="#edit-chapter-modal{{$i}}" data-bs-toggle="modal" data-bs-tooltip="tooltip"><button type="button" class="btn border-info btn-outline btn-circle btn-lg m-r-5" id="btn"><i class="ti-pencil-alt text-info"></i></button></a>
                                                    <a class="me-2" href="#delete-chapter-modal{{$i}}" data-bs-toggle="modal" data-bs-tooltip="tooltip"><button type="button" class="btn border-info btn-outline btn-circle btn-lg m-r-5"><i class="icon-trash text-info"></i></button></a>
                                                    
                                                    {{-- edit modal --}}
                                                    <div class="modal fade" id="edit-chapter-modal{{$i}}" tabindex="-1" aria-labelledby="edit-chapter-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 ce chapitre</h4>
                                                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                                </div>
                                                                <div class="modal-body">
                                                                    <form 
                                                                        class="edit-chapter-form form-horizontal" 
                                                                        method="POST" 
                                                                        action="{{ route('teacher.ec_chap_update', [ "ecId" => $ec->idEC, "chapId" => $chap->idchapitre, ]) }}"
                                                                        data-old-number="{{$chap->chapitrenumero}}"
                                                                    >
                                                                        @csrf
                                                                        <div class="form-group mb-3">
                                                                            <label for="title" class="control-label">Intitulé</label>
                                                                            <input type="text" name="title" class="form-control control-value" value="{{$chap->chapitreintitule}}" required>
                                                                        </div>
                                                                        <div class="form-group mb-5">
                                                                            <label for="title" class="control-label">Numéro</label>
                                                                            <input type="number" name="number" class="form-control" value="{{$chap->chapitrenumero}}" required>
                                                                        </div>
                                                                        <div class="d-flex justify-content-end mt-2">
                                                                            <button type="submit" class="btn btn-warning text-dark fw-medium">
                                                                                Enregistrer <i class="fa fa-save"></i>
                                                                            </button>
                                                                        </div>
                                                                    </form>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    {{-- delete modal --}}
                                                    <div class="modal fade" id="delete-chapter-modal{{$i}}"  tabindex="-1" aria-labelledby="delete-chapter-modal" aria-hidden="true">
                                                        <div class="modal-dialog modal-dialog-centered">
                                                            <div class="modal-content">
                                                                <div class="modal-header bg-danger text-white d-flex align-items-center border-bottom">
                                                                    <h4 class="modal-title">Suppression de chapitre</h4>
                                                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                                </div>
                                                                <div class="modal-body">
                                                                    <form 
                                                                        class="delete-chapter-form form-horizontal" 
                                                                        method="DELETE" 
                                                                        action="{{ route('teacher.ec_chap_delete', ["ecId" => $ec->idEC, "chapId" => $chap->idchapitre]) }}"
                                                                        data-old-number="{{$chap->chapitrenumero}}"
                                                                    >
                                                                        @csrf
                                                                        <p>
                                                                            Voulez-vous vraiment définitivement supprimer le chapitre intitulé "<em class="text-danger fw-bold">{{$chap->chapitreintitule}}</em>" ?
                                                                        </p>
                                                                        <div class="d-flex justify-content-center mt-4">
                                                                            <button data-bs-dismiss="modal" class="btn btn-dark fw-medium me-2">
                                                                                Annuler
                                                                            </button>
                                                                            <button type="submit" class="btn btn-danger fw-medium">
                                                                                Oui <i class="fa fa-trash-alt"></i>
                                                                            </button>
                                                                        </div>
                                                                    </form>
                                                                </div>
                                                            </div>
                                                            <!-- /.modal-content -->
                                                        </div>
                                                        <!-- /.modal-dialog -->
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforeach
									</tbody>
								</table>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="col-lg-2 col-md-4 col-sm-12 d-flex align-items-stretch">
			<div class="card w-content h-content">
				<div class="card-body">
					<div class="d-flex mb-3">
						<a 
                            role="button" 
                            class="btn btn-circle btn-success text-white btn-lg d-inline-flex align-items-center justify-content-center"
							href="{{route('teacher.exam_index')}}"
						>
							<i class="ti-plus"></i>
						</a>
					</div>
					<div class="">
						<h3 class="display-8 mb-0">Composer</h3>
						<h6 class="fw-light">Une epreuve</h6>
					</div>
				</div>
			</div>
		</div>
	</div>
@endsection


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

        $(function() {
            $('#chaps-table').DataTable({
				"autoWidth": false,
				"language": dtCustomLanguage({
					name: "Chapitre",
					plural: "Chapitres",
					gender: "M",
				}),
			});

            // register chaps
            $('#chaps-table [data-item]').each((i, tr) => {
                let tds = $(tr).find("td");
                let n = Number(tds.eq(0).text().trim());

                chaps[n] = {
                    "idchapitre" : $(tr).attr("data-item"),
                    "numero" : n,
                    "intitule" : tds.eq(1).text().trim(),
                }
            });

            if($('#chaps-table tbody tr:last-child').length) {
                maxNumero = Number($('#chaps-table tbody tr:last-child').find('td:eq(0)').text());
            }

            // control chap title input values
            $(".control-value").on("change", removeChar);
            // $(".control-value").on("keydown", controlInput);

            // add modal show event
            $('#add-chapter-modal').on('show.bs.modal', () => $('#add-chapter-form [name="number"]').val(maxNumero + 1) );

            // Add chapter
            $("#add-chapter-form").on("submit", async function (e){
				e.preventDefault();

                const form = $(this);
                
                let data = {
                    "title": form.find("[name='title']").val(),
                    "number": Number(form.find("[name='number']").val()),
                };

                if(data.number == 0 || data.title.length == 0){
                    Swal.fire({
						text: "Remplissez d'abord les champs pour continuer",
						icon: "error",
						confirmButtonText: "OK",
						confirmButtonColor: "#ec6c62"
					});

                    return false;
				}

                const autoReorder = await checkAutoReorder(Infinity, data.number);
                if(!autoReorder.apply) return false;

                data["auto_reorder"] = autoReorder.order;
                console.log(data);

                $.ajax({
                    type: "POST",
                    url: $(form).attr("action"),
                    data: data,
				    blockUI: true,
                    success: function(response) {
                        Swal.fire({
							icon: 'success',
							title: 'Succès',
							text: "Chapitre créé 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 l'insertion du nouveau chapitre.",
                                confirmButtonText: "OK",
                                confirmButtonColor: "#ec6c62"
                            });
                        }
                    }
                });
			});

            // Edit chapter
            $(".edit-chapter-form").on("submit", async function (e){
				e.preventDefault();
                const form = $(this);

                let data = {
                    "title": form.find("[name='title']").val(),
                    "number": Number(form.find("[name='number']").val()),
                };

                // inputs validation
                if(data.number == 0 || data.title.length == 0){
					Swal.fire({
						text: "Remplissez d'abord les champs pour continuer",
						icon: "error",
						confirmButtonText: "OK",
						confirmButtonColor: "#ec6c62"
					});

                    return false;
				}

                const oldNumber = Number(form.attr("data-old-number"));
                if(data.number == oldNumber && data.title == chaps[oldNumber].intitule ){
					Swal.fire({
						text: "Aucune modification n'a été faite !",
						icon: "info",
						confirmButtonText: "OK",
						confirmButtonColor: "#ec6c62"
					});

                    return false;
				}

                const autoReorder = await checkAutoReorder(oldNumber, data.number);
                
                console.log(autoReorder);

                if(!autoReorder.apply) return false;

                data["auto_reorder"] = autoReorder.order;

                console.log(data);

                $.ajax({
                    type: "POST",
                    url: $(form).attr("action"),
                    data: data,
				    blockUI: true,
                    success: function(response) {
                        Swal.fire({
							icon: 'success',
							title: 'Succès',
							text: "Chapitre modifié 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 l'insertion du nouveau chapitre.",
                                confirmButtonText: "OK",
                                confirmButtonColor: "#ec6c62"
                            });
                        }
                    }
                });
			});

            // Delete chapter
            $(".delete-chapter-form").on("submit", async function (e){
				e.preventDefault();
                const form = $(this);
                const oldNumber = Number(form.attr("data-old-number"));

                const autoReorder = await checkAutoReorder(oldNumber, Infinity);
                console.log(autoReorder);
                if(!autoReorder.apply) return false;

                let data = { "auto_reorder": autoReorder.order, }

                $.ajax({
                    type: "DELETE",
                    url: $(form).attr("action"),
                    data: data,
				    blockUI: true,
                    success: function(response) {
                        Swal.fire({
							icon: 'success',
							title: 'Succès',
							text: "Chapitre supprimé avec succès !",
						}).then(() => location.reload() ); // reload as auto_reorder is done and maxNumero is used !
                    },
                    error: function(err){
                        console.log(err);

                        Swal.fire({
                            icon: 'error',
                            title: 'Oops...',
                            text: "Petit souci lors de la suppression du chapitre.",
                            confirmButtonText: "OK",
                            confirmButtonColor: "#ec6c62"
                        });
                    }
                });
			});
        }());

        async function checkAutoReorder(oldPos = Infinity, newPos = Infinity) {
            // oldPos = Infinity => going to add new item in list
            // newPos = Infinity => item is going to be deleted from list

            let move, range, order = [];

            if (newPos < oldPos) { // Ajout ou Modification (déplacement vers le haut. Ex : 5 vers 2);
                move = 1; // move all affected elements one step down

                range = { // all affected positions are in range [newPos, oldPos[
                    "min": newPos,
                    "max": (oldPos != Infinity) ? (oldPos - 1) : maxNumero,
                };
            } else { // suppression ou Modification (déplacement vers le bas. Ex : 2 vers 5)
                move = -1; // move all affected elements one step up

                range = { // all affected positions are in range ]oldPos, newPos]
                    "min": oldPos + 1,
                    "max": (newPos != Infinity) ? newPos : maxNumero,
                }
            }

            for (let i = range.min; i <= range.max; i++) {
                // if (!chaps.hasOwnProperty(i)) break; // keep things as they are
                if (!chaps.hasOwnProperty(i)) continue; // cascade reorder even if not consecutive

                order.push({
                    "idchapitre" : chaps[i].idchapitre,
                    "intitule" : chaps[i].intitule,
                    "oldNumero" : chaps[i].numero,
                    "newNumero" : chaps[i].numero + move,
                });
            }

            let apply = true;

            if (order.length) {
                let html = "";
                order.forEach((c) => {
                    html += `
                        <tr>
                            <td class="text-start">${c.intitule}</td>
                            <td class="text-center">${c.oldNumero}</td>
                            <td class="text-center">${c.newNumero}</td>
                        </tr>
                    `;
                });

                html = `
                    <div class="table-responsive d-flex justify-content-center">
                        <table class="table-bordered w-100 h-100" id="table-order">
                            <thead>
                                <th class="text-start">Chapitre</th>
                                <th style="width: 20%">Ancien numéro</th>
                                <th style="width: 20%">Nouveau numéro</th>
                            </thead>
                            <tbody>${html}</tbody>
                        </table>
                    </div>
                `;

                const result = await Swal.fire({
                    title: 'Appliquer la reorganisation suivante ?',
                    html: html,
                    confirmButtonText: 'Oui',
                    cancelButtonText: 'Annuler',
                    showCancelButton: true,
                    focusConfirm: false,
                    width: "70vw",
                });

                apply = result.isConfirmed;
            }

            return {
                "apply": apply,
                "order": (move == 1) ? order.reverse() : order,
            };
        }

        function removeChar(e) {
            const input = this;
            let v = input.value;

            const charBlackList = [ // unauthorized chars
                { "char": "&", "regexp": /&| /g},
                { "char": "<", "regexp": /<| /g },
                { "char": ">", "regexp": />| /g },
                { "char": "/", "regexp": /\/| /g},
            ];

            let found = [];
            charBlackList.forEach((x) => {
                if (v.includes(x.char)) {
                    v = v.replace(x.regexp, ' ');
                    found.push(`<span class="text-danger fw-bold">${x.char}</span>`);
                }
            });

            if (found.length) {
                const suffix = found.length > 1 ? "s" : ""; 

                Swal.fire({
                    icon: 'error',
                    html: `<span class="fw-bold">L'intitulé du chapitre</span> a été automatiquement revu pour enlever le${suffix} caractère${suffix} non autorisé${suffix} ${found.join(", ")} que vous avez saisi.`,
                    confirmButtonText: "OK",
                });

                input.value = v;
            }
        }

        function controlInput(e) {
            const charBlackList = ["&", "<", ">", "/"];

            if (charBlackList.includes(e.key)) {
                showToastr("danger", `Le caractère "<b class="fw-bolder">${e.key}</b>" n'est pas autorisé dans l'intitulé`);
                return false;
            }
        }
	</script>
@endsection