@extends('layout.template')

@section('title', 'Certificat de scolarité')

@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;
        }
    </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 CERTIFICAT DE SCOLARITE </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">CERTIFICAT</h4>
                    <p class="text-muted">Ce formulaire permet d'imprimer les certificats de scolarité.</p>
                </div>
                <div class="card-body wizard-content">
                    <form action="{{ route('genPDFCertificate') }}" method="POST" target="_blank" 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="matricule" style="font-weight: bold;">
                                                Matricule </label></div>
                                        <div class="col-8"><input type="text" id="matricule" name="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" id="filiere" name="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="aca_year" style="font-weight: bold;">
                                                Année Académique </label>
                                        </div>
                                        <div class="col-8">
                                            <select class="form-select required" id="aca_year" name="aca_year"
                                                onchange="valider(this);">
                                                <option value>Choisir l'année académique</option>
                                                @foreach ($anneeAcads as $anneeAcad)
                                                    <option value="{{ $anneeAcad->annee_acad }}">
                                                        {{ $anneeAcad->periode }}
                                                    </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 Attestation </label>
                                        </div>
                                        <div class="col-8">
                                            <select class="form-select required" id="niv_etude" name="niv_etude"
                                                onchange="valider(this);">
                                                <option value="1">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>
                                        </div>
                                        <div class="col-8">
                                            <select class="form-select required" 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>
                                        </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" id="fonc_sign1" name="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" id="nom_sign1" name="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" id="fonc_sign2" name="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" id="nom_sign2" name="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" 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 certificat ' + $('#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: {
                matricule: "required",
                filiere: "required",
                aca_year: "required",
                niv_etude: "required",
                fonc_sign2: "required",
                nom_sign2: "required",
            }
        });

        $(document).ready(function() {
            var fil = function() {
                if ($('#filiere').val() == "") {
                    $('#y_e').css("display", "none");
                    $('#etude_year').css("display", "none");
                } else {
                    $('#y_e').css("display", "block");
                    $('#etude_year').css("display", "block");
                }
            };
            $("#filiere").change(fil);

            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")
            }
        }
    </script>
@endsection