@extends('layout.template')

@section('title', 'Relevé mode 2')

@section('style')
    <link href="{{ asset('assets/libs/jquery-steps/jquery.steps.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/libs/jquery-steps/steps.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="{{ asset('assets/css/dropify.min.css') }}">
    <style>
        .wizard-content .wizard>.steps>ul>li.current .step {
            border-color: #fff;
            background-color: #2cabe3;
            color: #fff;
        }

        .dropify-wrapper .dropify-message p {
            text-align: center;
        }

        .wizard-content .wizard>.steps>ul>li.done .step {
            background-color: #53e69d;
            border-color: #fff;
            color: #fff;
        }

        .bulleAide {
            position: relative;
            display: inline-block;
        }

        .bulleAide .bulleAide_text {
            content: "";
            visibility: hidden;
            width: 20em;
            background-color: #dfffb1;
            //color: #fff;
            font-size: 0.8em;
            text-align: center;
            border-radius: 6px;
            //padding: 5px 0;
            margin-left: 5px;

            /* Position the tooltip */
            position: absolute;
            z-index: 1;
        }

        .bulleAide:hover .bulleAide_text {
            visibility: visible;
        }
    </style>
@endsection

@section('page_breadcrumb')
    <div class="col col-xs-12 justify-content-start d-flex align-items-center">
        <h5 class="font-weight-medium text-uppercase mb-0"> IMPRESSION DU RELEVE DE NOTES </h5>
    </div>
@endsection


@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="border-bottom title-part-padding">
                    <h4 class="card-title mb-0">RELEVÉ</h4>
                    <p class="text-muted">Ce formulaire permet d'imprimer le relevé de notes.</p>
                </div>
                <div class="card-body wizard-content">
                    <form action="{{ route('genPDFMode2') }}" target="_blank" method="POST" class="tab-wizard wizard-circle" enctype="multipart/form-data">
                        @csrf
                        <!-- Step 1 -->
                        <h1>STEP</h1>
                        <section>
                            <div class="row justify-content-center text-start m-3">
                                <div class="col-md-7">
                                    <div class="row mb-3">
                                        <div class="col-4 text-center"><label for="format_imp"
                                                style="font-weight: bold;">
                                                Format du relevé: </label>
                                        </div>
                                        <div class="col-8">
                                            <select class="form-select required" id="format_imp" name="format_imp"
                                                onchange="valider(this);">
                                                <option value>Selectionner un format de relevé</option>
                                                <option value="1">Annuel</option>
                                                <option value="2">Semestriel</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row justify-content-center text-start m-3">
                                <div class="col-md-7">
                                    <div class="row mb-3">
                                        <div class="col-4 text-center"><label for="matricule" style="font-weight: bold;">
                                                Matricule: </label></div>
                                        <div class="col-8"><input type="text" name="matricule" id="matricule"
                                                class="form-control required" placeholder="m1-m2 ou m1;m2;m3..."
                                                oninput="valider(this);">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group" style="width: 72%; margin-left: 41.5%; margin-top: -2%">
                                <label class="control-label col-md-3"></label>
                                <div class="col-sm-6">
                                    <table  width = "100%" id="infofiliere" border = "1">
                                       <tr style='background-color: #FEF5E7;'>
                                            <td><strong>m1-m2</strong> : <strong>m1</strong> la borne inférieure doit être un matricule d'étudiant tandisque <strong>m2</strong> la borne supérieure doit-être aussi un matricule d'étudiant avec <strong>m1 < m2</strong>. </td>
                                       </tr>   
                                    </table>
                                </div>
                            </div>
                                <div class="row justify-content-center text-start m-3">
                                    <div class="col-md-7">
                                        <div class="row mb-3">
                                            <div class="col-4 text-center"><label for="filiere"
                                                    style="font-weight: bold;"> Filière: </label></div>
                                            <div class="col-8">
                                                <select class="form-select required" name="filiere" id="filiere"
                                                    onchange="valider(this);">
                                                    <option value>Selectionner la filière</option>
                                                    @foreach ($filieres as $filiere)
                                                        <option value="{{ $filiere->idFiliere }}">
                                                            {{ $filiere->intituleFilieres }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row justify-content-center text-start m-3">
                                    <div class="col-md-7">
                                        <div class="row mb-3">
                                            <div class="col-4 text-center"><label for="niv_etude"
                                                    style="font-weight: bold;"> Niveau Relevé: </label>
                                            </div>
                                            <div class="col-8">
                                                <select class="form-select required" name="niv_etude" id="niv_etude"
                                                    onchange="valider(this);">
                                                    <option value="1">{{ session('formationbase', 'Licence') }}</option>
                                                    <option value="2">Master</option>
                                                    <option value="3">Doctorat</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row justify-content-center text-start m-3">
                                    <div class="col-md-7">
                                        <div class="row mb-3">
                                            <div class="col-4 text-center">
                                                <label for="etude_year" id="y_e" style="font-weight: bold;"> Année
                                                    d'étude: </label>
                                                <label for="semestre" style="display:none" id="s_m"
                                                    style="font-weight: bold;"> Semestre: </label>
                                            </div>
                                            <div class="col-8">
                                                <select class="form-select" name="etude_year" id="etude_year" onchange="valider(this);">
                                                    <option value="1">Première année</option>
                                                    <option value="2">Deuxième année</option>
                                                    <option value="3" class="niv">Troisième
                                                        année
                                                    </option>
                                                </select>
                                                <select class="form-select" style="display:none" name="semestre" id="semestre" disabled>
                                                    <option value="0" selected>Choisir un semestre</option>
                                                    <option value="1">1</option>
                                                    <option value="2">2</option>
                                                    <option value="3">3</option>
                                                    <option value="4">4</option>
                                                    <option value="5" class="niv">5</option>
                                                    <option value="6" class="niv">6</option>
                                                </select>
                                                
                                            </div>
                                        </div>
                                    </div>
                                </div>
                        </section>

                        <!-- Step 2 -->
                        <h1>STEP</h1>
                        <section>
                            <div class="row justify-content-center text-start m-3">
                                <div class="col-md-7">
                                    <div class="row mb-3">
                                        <div class="col-4 text-center"><label for="fonc_sign1"
                                                style="font-weight: bold;"> Fonction Signature 1:
                                            </label></div>
                                        <div class="col-8">
                                            <select class="form-select" name="fonc_sign1" id="fonc_sign1"
                                                onchange="valider(this);">
                                                <option value=""> Choisir une fonction...</option>
                                                @foreach ($fonctions as $fonction)
                                                    <option value="{{ $fonction->nomFonction }}">
                                                        {{ $fonction->nomFonction }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row justify-content-center text-start m-3">
                                <div class="col-md-7">
                                    <div class="row mb-3">
                                        <div class="col-4 text-center"><label for="nom_sign1" style="font-weight: bold;">
                                                Nom Signature 1:
                                            </label></div>
                                        <div class="col-8">
                                            <select class="form-select" is-valid name="nom_sign1" id="nom_sign1"
                                                onchange="valider(this);">
                                                <option value>Ce champ est optionnel (Signatuire à gauche du relevé)
                                                </option>
                                                @foreach ($nomSignatures as $nomSignature)
                                                    <option
                                                        value="{{ $nomSignature->sigleGrade }} {{ $nomSignature->prenom }} {{ $nomSignature->nom }}">
                                                        {{ $nomSignature->sigleGrade }} {{ $nomSignature->prenom }}
                                                        {{ $nomSignature->nom }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row justify-content-center text-start m-3">
                                <div class="col-md-7">
                                    <div class="row mb-3">
                                        <div class="col-4 text-center"><label for="fonc_sign2"
                                                style="font-weight: bold;"> Fonction
                                                Signature 2: </label></div>
                                        <div class="col-8">
                                            <select class="form-select required" name="fonc_sign2" id="fonc_sign2"
                                                onchange="valider(this);">
                                                <option value=""> Choisir une fonction...</option>
                                                @foreach ($fonctions as $fonction)
                                                    <option value="{{ $fonction->nomFonction }}">
                                                        {{ $fonction->nomFonction }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row justify-content-center text-start m-3">
                                <div class="col-md-7">
                                    <div class="row mb-3">
                                        <div class="col-4 text-center"><label for="nom_sign2" style="font-weight: bold;">
                                                Nom
                                                Signature 2: </label></div>
                                        <div class="col-8">
                                            <select class="form-select required" name="nom_sign2" id="nom_sign2"
                                                onchange="valider(this);">
                                                <option value>Ce champ est obligatoire</option>
                                                @foreach ($nomSignatures as $nomSignature)
                                                    <option
                                                        value="{{ $nomSignature->sigleGrade }} {{ $nomSignature->prenom }} {{ $nomSignature->nom }}">
                                                        {{ $nomSignature->sigleGrade }} {{ $nomSignature->prenom }}
                                                        {{ $nomSignature->nom }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row justify-content-center text-start m-3">
                                <div class="col-md-7">
                                    <div class="row mb-3">
                                        <div class="col-4 text-center"><label for="comp_ue" style="font-weight: bold;">
                                                Complément UE</label>
                                            <i class="bulleAide mdi mdi-help-circle-outline">:
                                                <span class="bulleAide_text">Concerne
                                                    uniquement les étudiants inscrits
                                                    directement en L2 ou L3 ou M2 (Entrez le nombre d'UEs correspondant de
                                                    l'établissement)</span>
                                            </i>
                                        </div>
                                        <div class="col-8"><input type="number" class="form-control" name="comp_ue" id="comp_ue"
                                                placeholder="Complèter mécaniquement la validation des UEs...."
                                                oninput="valider(this);"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="row justify-content-center text-start m-3">
                                <div class="col-md-7">
                                    <div class="row mb-3">
                                        <div class="col-4 text-center"><label for="credit_cap"
                                                style="font-weight: bold;"> Crédit capitalisé UE</label>
                                            <i class="bulleAide mdi mdi-help-circle-outline">:
                                                <span class="bulleAide_text">Concerne
                                                    uniquement les étudiants  en L2 ou L3 ou M2 (Entrer le nombre de crédit correspondant
                                                    au nombre d'UEs entré précédemment)</span>
                                            </i>
                                        </div>
                                        <div class="col-8"><input type="number" class="form-control"
                                                name="credit_cap" id="credit_cap"
                                                placeholder="Crédit capitalisé pour les années antérieures...."
                                                oninput="valider(this);"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="row justify-content-center text-start m-3">
                                <div class="col-md-7">
                                    <div class="row mb-3">
                                        <div class="col-4 text-center"><label for="ue_restant"
                                                style="font-weight: bold;"> UE restant à
                                                valider</label>
                                            <i class="bulleAide mdi mdi-help-circle-outline">:
                                                <span class="bulleAide_text">Concerne
                                                    uniquement les étudiants en L2 ou L3 ou M2 ()</span>
                                            </i>
                                        </div>
                                        <div class="col-8"><input type="number" class="form-control"
                                                name="ue_restant" id="ue_restant" placeholder="Le nombre total d'UEs restants à valider...."
                                                oninput="valider(this);"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="row justify-content-center text-start m-3" id="imageContener">
                                <div class="col-md-7">
                                    <div class="row mb-3">
                                        <div class="col-4 text-center"><label for="imageUpload"
                                                style="font-weight: bold;"> Photo de
                                                l'étudiant: </label></div>
                                        <div class="col-8"><input type="file" name="imageUpload" id="imageUpload"
                                                class="dropify" data-allowed-file-extensions="png jpg jpeg"
                                                data-max-file-size="2M" oninput="valider(this);" /></div>
                                    </div>
                                </div>
                            </div>
                        </section>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="{{ asset('assets/libs/jquery-steps/build/jquery.steps.min.js') }}"></script>
    <script src="{{ asset('assets/libs/jquery-validation/dist/jquery.validate.min.js') }}"></script>
    <script src="{{ asset('assets/js/dropify.min.js') }}"></script>

    <script>
        //Dropify
        $(document).ready(function() {
            // Basic
            $('.dropify').dropify();
        });

        var form = $(".tab-wizard").show();

        $(".tab-wizard").steps({
            headerTag: "h1",
            bodyTag: "section",
            transitionEffect: "fade",
            titleTemplate: '<span class="step">#index#</span> #title#',
            labels: {
                previous: "Back",
                finish: "Finish"
            },
            onStepChanging: function(event, currentIndex, newIndex) {
                if (currentIndex > newIndex) {
                    return true;
                }
                if (currentIndex < newIndex) {
                    let mat = document.getElementById("matricule").value;
                    let img = document.getElementById("imageContener");
                    img.setAttribute("style", "visibility:visible");
                    if((mat.search('-') != -1 || mat.search(';') != -1) && validerStep(currentIndex))
                    {
                            img.setAttribute("style", "visibility:hidden; width:0em; height:0em");
                    }
                    return validerStep(currentIndex);
                }
            },
            onFinishing: function(event, currentIndex) {
                if (!validerStep(currentIndex)) {
                    return false;
                }
                Swal.fire({
                    title: 'Confirmer l\'opération?',
                    text: "Pour continuer...",
                    icon: 'warning',
                    iconColor: '#cfcfcf',
                    showCancelButton: true,
                    reverseButtons: true,
                    confirmButtonColor: '#ec6c62',
                    cancelButtonColor: '#cfcfcf',
                    confirmButtonText: 'Yes, confirm it!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        Swal.fire({
                            title: 'Impression du relevé ' + $('#matricule').val(),
                            text: 'réalisée avec succès. Cliquer sur OK pour télécharger le fichier pdf',
                            icon: 'success',
                            confirmButtonColor: '#8cd4f5'
                        }).then((result) => {
                            $('.tab-wizard').submit();
                        })
                    }
                });
            }
        }), 
        $(".tab-wizard").validate({
            ignore: "input[type=hidden]",
            errorClass: "text-danger",
            successClass: "text-success",
            highlight: function(element, errorClass) {
                $(element).removeClass(errorClass)
            },
            unhighlight: function(element, errorClass) {
                $(element).removeClass(errorClass)
            },
            errorPlacement: function(error, element) {
                error.insertAfter(element)
            },
            rules: {
                format_imp: "required",
                matricule: "required",
                filiere: "required",
                niv_etude: "required",
                fonc_sign2: "required",
                nom_sign2: "required",
            }
        });

        $(document).ready(function() {

            var formatImp = function() {
                if ($('#format_imp').val() == "1") {
                    $('#y_e').css("display", "block");
                    $('#s_m').css("display", "none");
                    $('#etude_year').css("display", "block");
                    $('#semestre').css("display", "none");
                } else if ($('#format_imp').val() == "2") {
                    $('#y_e').css("display", "none");
                    $('#s_m').css("display", "block");
                    $('#etude_year').css("display", "none");
                    $('#semestre').css("display", "block");
                }
            };
            $("#format_imp").change(formatImp);

            var niveau_etude = function() {
                if ($('#niv_etude').val() == "1") {
                    $('.niv').css("display", "block");
                } else {
                    $('.niv').css("display", "none");
                }
            };
            $("#niv_etude").change(niveau_etude);
        });

        function validerStep(curIndex) {
            let valid = true;
            let x = document.getElementsByTagName("section")[curIndex].getElementsByClassName("required");
            for (let i = 0; i < x.length; i++) {
                if (!x[i].value.length) {
                    if (valid) {
                        valid = false;
                    }
                    x[i].classList.remove("is-valid");
                    x[i].classList.add("is-invalid");
                } else {
                    x[i].classList.remove("is-invalid")
                    x[i].classList.add("is-valid")
                }
            }
            return valid;
        }

        function valider(champ) {
            if (champ.value.length) {
                champ.classList.remove("is-invalid")
                champ.classList.add("is-valid")
            } else {
                champ.classList.remove("is-valid")
                champ.classList.add("is-invalid")
            }
        }

        document.getElementById('format_imp').addEventListener('change', function () {
    const semestreSelect = document.getElementById('semestre');
    if (this.value === '2') { // Si l'utilisateur choisit le format semestriel
        semestreSelect.style.display = 'block';
        semestreSelect.disabled = false;
    } else {
        semestreSelect.style.display = 'none';
        semestreSelect.disabled = true;
    }
});

    </script>
@endsection