@extends('frontend.inc.layout-front')
@section('title')
    BIBLIOTHEQUE - EPA
@endsection
@section('container')
    
    <style>
       /* Add a green text color and a checkmark when the requirements are right */
       .valid {
         color: green;
      }
      .valid:before {
         position: relative;
         left: -35px;
         content: ;
         "✔";
      }
      /* Add a red text color and an "x" when the requirements are wrong */
      .invalid {
         color: red;
      }
      .invalid:before {
         position: relative;
         left: -35px;
         content: ;
         "✖";
      }
        .hidden {
            display: none;
        }

        .iti {
            width: 100%;
        }

        .iti__arrow {
            border: none;
        }

        input {
            font-size: 15px;
            color: #333;
        }

        ::placeholder {
            color: #BDBDBD;
            opacity: 1;
            font-weight: 300
        }

        :-ms-input-placeholder {
            color: #BDBDBD;
            font-weight: 300
        }

        ::-ms-input-placeholder {
            color: #BDBDBD;
            font-weight: 300
        }

        input,
        textarea {
            padding: ;
            10px 12px 10px 12px;
            border: 1px solid lightgrey;
            border-radius: 2px;
            margin-bottom: 5px;
            margin-top: 2px;
            width: 100%;
            box-sizing: border-box;
            color: #2C3E50;
            font-size: 14px;
            letter-spacing: 1px
        }

        input:focus,
        textarea:focus {
            -moz-box-shadow: none !important;
            -webkit-box-shadow: none !important;
            box-shadow: none !important;
            border: 1px solid #304FFE;
            outline-width: 0
        }

        button:focus {
            -moz-box-shadow: none !important;
            -webkit-box-shadow: none !important;
            box-shadow: none !important;
            outline-width: 0
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>

    <!-- Pour afficher le recaptcha sur le site -->
    {!! ReCaptcha::htmlScriptTagJsApi() !!}

    <!-- formulaire d'inscription -->
    <section class="services-w3l-block py-5" id="features">
        <div class="container py-md-5 py-4" style=" margin-top: 5rem;">
            <div class="row">
                <div class="col-md-12  d-flexx align-items-stretch">
                    <div class="">

                        <div style="text-align: left;">
                            <div class="row">
                                <div class="col-md-2">
                                    &nbsp;
                                </div>
                                <div class="col-md-8 icon-boxx icon-box-clr-1">
                                    <div class="icon text-center"><i
                                            class="fas fa-user-friendsx fa fa-user-lock text-warning"></i></div>
                                    <h4 class="title text-center mb-3">S'inscrire</h4>
                                    <form method="POST" action="{{ route('register.custom') }}">
                                        @csrf
                                        <div class="form-row">

                                            <div class="row" id="show_name">
                                                <div class="col-md-6">
                                                    <div class="mb-3 form-group">
                                                        <label for="exampleInputEmail1" class="form-label"
                                                            style="text-align: ;left;">Nom <i class="text-danger"
                                                                id="required_nom">*</i></label>
                                                        <input type="text" name="nom" class="form-control"
                                                            minlength="" maxlength="" id="nom"
                                                            aria-describedby="emailHelp" value="{{ old('nom') }}"
                                                            required autocomplete="nom" autofocus style="text-transform: uppercase;">
                                                        @error('nom')
                                                            <span class="invalid-feedback" role="alert">
                                                                <strong>{{ $message }}</strong>
                                                            </span>
                                                        @enderror
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="mb-3 form-group">
                                                        <label for="exampleInputEmail1" class="form-label"
                                                            style="text-align: ;left;">Prénoms <i class="text-danger"
                                                                id="required_prenoms">*</i></label>
                                                        <input type="text" name="prenoms" class="form-control"
                                                            minlength="3" maxlength="100" id="prenoms"
                                                            aria-describedby="emailHelp" value="{{ old('prenoms') }}"
                                                            required autocomplete="prenoms" autofocus>
                                                        @error('prenoms')
                                                            <span class="invalid-feedback" role="alert">
                                                                <strong>{{ $message }}</strong>
                                                            </span>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="mb-3 form-group">
                                                        <label for="exampleInputEmail1" class="form-label"
                                                            style="text-align: ;left;">E-mail <i
                                                                class="text-danger">*</i></label>
                                                        <input type="email" name="email" class="form-control"
                                                            minlength="3" maxlength="100" id="exampleInputEmail1"
                                                            aria-describedby="emailHelp" value="{{ old('email') }}"
                                                            required autocomplete="email" autofocus>
                                                        @error('email')
                                                            <span class="invalid-feedback" role="alert">
                                                                <strong>{{ $message }}</strong>
                                                            </span>
                                                        @enderror
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="mb-3 form-group">
                                                        <label for="exampleInputEmail1" class="form-label"
                                                            style="text-align: ;left;">Téléphone <i
                                                                class="text-danger">*</i></label>
                                                        <input id="telephone" type="tel" style="width: 100%;"
                                                            pattern="^[\ +]?\d*?\d+$"
                                                            class="form-control  @error('telephone') is-invalid @enderror"
                                                            name="telephones" value="{{ old('telephone') }}" required
                                                            autocomplete="telephone" autofocus>
                                                        <input type="hidden" name="telephone" id="telephones"
                                                            value="">
                                                        @error('telephone')
                                                            <span class="invalid-feedback" role="alert">
                                                                <strong>{{ $message }}</strong>
                                                            </span>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="mb-3 form-group">
                                                        <label for="exampleInputEmail1" class="form-label">Profil <i
                                                                class="text-danger">*</i></label>
                                                        <select class="form-select form-control" name="profil"
                                                            id="profil_id">
                                                            <option selected disabled>Sélectionnez une valeur</option>
                                                            @foreach ($profilusagers as $profilusager)
                                                                <option value="{{ $profilusager->id }}">
                                                                    {{ $profilusager->libelle }}</option>
                                                            @endforeach
                                                        </select>
                                                        @error('profil_id')
                                                            <span class="invalid-feedback" role="alert">
                                                                <strong>{{ $message }}</strong>
                                                            </span>
                                                        @enderror
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="mb-3 form-group hidden" id="show_filiere">
                                                        <label for="" class="form-label"
                                                            style="text-align: ;left;">Filière<i class="text-danger"
                                                                id="required_filiere"></i></label>
                                                        <input type="text" name="filiere" class="form-control"
                                                            minlength="3" maxlength="100" id="filiere" value="{{ old('filiere') }}"
                                                            autocomplete="filiere">
                                                        @error('filiere')
                                                            <span class="invalid-feedback" role="alert">
                                                                <strong>{{ $message }}</strong>
                                                            </span>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>

                                            <!--  -->
                                            <div class="row hidden" id="show_profession_fonction">
                                                <div class="col-md-6">
                                                    <div class="mb-3 form-group">
                                                        <label for="exampleInputEmail1" class="form-label"
                                                            style="text-align: ;left;">Profession <i class="text-danger"
                                                                id="required_profession"></i></label>
                                                        <input type="text" name="profession" class="form-control"
                                                            minlength="3" maxlength="100" id="profession"
                                                            aria-describedby="emailHelp"
                                                            value="{{ old('profession') }}" required
                                                            autocomplete="profession" autofocus>
                                                        @error('profession')
                                                            <span class="invalid-feedback" role="alert">
                                                                <strong>{{ $message }}</strong>
                                                            </span>
                                                        @enderror
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="mb-3 form-group">
                                                        <label for="" class="form-label"
                                                            style="text-align: ;left;">Fonction <i class="text-danger"
                                                                id="required_fonction"></i></label>
                                                        <input id="fonction" type="text" style="width: 100%;"
                                                            class="form-control  @error('fonction') is-invalid @enderror"
                                                            name="fonction" value="{{ old('fonction') }}" required
                                                            autocomplete="fonction" autofocus>
                                                        @error('fonction')
                                                            <span class="invalid-feedback" role="alert">
                                                                <strong>{{ $message }}</strong>
                                                            </span>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-6 hidden" id="show_organisation">
                                                    <div class="mb-3 form-group">
                                                        <label for="" class="form-label"
                                                            style="text-align: ;left;">Organisation <i class="text-danger"
                                                                id="required_organisation"></i></label>
                                                        <input type="text" name="organisation" class="form-control"
                                                            minlength="3" maxlength="100" id="organisation"
                                                            value="{{ old('organisation') }}" required
                                                            autocomplete="organisation" autofocus>
                                                        @error('organisation')
                                                            <span class="invalid-feedback" role="alert">
                                                                <strong>{{ $message }}</strong>
                                                            </span>
                                                        @enderror
                                                    </div>
                                                </div>
                                                <div class="col-md-6 hidden" id="show_niveau">
                                                    <div class="mb-3 form-group">
                                                        <label for="" class="form-label"
                                                            style="text-align: ;left;">Niveau <i class="text-danger"
                                                                id="required_niveau"></i></label>
                                                        <input id="niveau" type="text"
                                                            class="form-control  @error('niveau') is-invalid @enderror"
                                                            name="niveau" value="{{ old('niveau') }}" required
                                                            autocomplete="niveau" autofocus>
                                                        @error('niveau')
                                                            <span class="invalid-feedback" role="alert">
                                                                <strong>{{ $message }}</strong>
                                                            </span>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row hidden" id="show_etablissement">
                                                <div class="col-md-12">
                                                    <div class="mb-3 form-group">
                                                        <label for="" class="form-label"
                                                            style="text-align: ;left;">Etablissement <i
                                                                class="text-danger"
                                                                id="required_etablissement"></i></label>
                                                        <input type="text" name="etablissement" class="form-control"
                                                            minlength="3" maxlength="100" id="etablissement"
                                                            value="{{ old('etablissement') }}" required
                                                            autocomplete="etablissement" autofocus>
                                                        @error('etablissement')
                                                            <span class="invalid-feedback" role="alert">
                                                                <strong>{{ $message }}</strong>
                                                            </span>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>
                                            <!--  -->
                                            <div class="row px-0 mb-3">
                                                <div class="col-md-6 col-sm-12">
                                                    <label class="mb-1">
                                                        Mot de Passe <i id="obligatoire" class="text-danger">*</i>
                                                    </label>
                                                    <div class="input-group">
                                                        <input type="password"
                                                            pattern="^(?=.{8,32}$)(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9]).*"
                                                            class="form-control mb-0 password @error('password') is-invalid @enderror"
                                                            required id="password" name="password"
                                                            autocomplete="new-password"
                                                            minlength="
                                                            8"
                                                            maxlength="100">
                                                        <div class="input-group-prepend">
                                                            <span class="input-group-text"
                                                                id="validationTooltipUsernamePrepend"
                                                                onclick="showPassword()"><button type="button"
                                                                    class="btn btn-light btn-sm"><i id="eye-password"
                                                                        class="fa fa-eye"></i></button></span>
                                                        </div>
                                                        @error('password')
                                                            <span class="invalid-feedback" role="alert">
                                                                <strong>{{ $message }}</strong>
                                                            </span>
                                                        @enderror
                                                        <div class="invalid-feedback">
                                                            Mot de passe invalide
                                                        </div>
                                                    </div>
                                                    <span class="hidden" id="message-password">
                                                        Le mot de passe doit contenir :
                                                        <li id="capital" class="invalid">au moins 1 lettre majuscule
                                                        </li>
                                                        <li id="letter" class="invalid">au moins 1 lettre miniscule
                                                        </li>
                                                        <li id="number" class="invalid">au moins 1 chiffre</li>
                                                        <li id="char" class="invalid">au moins 1 caractère spécial
                                                        </li>
                                                        <li id="length" class="invalid">au moins 8 caractères</li>
                                                    </span>
                                                </div>
                                                <div class="col-md-6 col-sm-12">
                                                    <label class="mb-1">
                                                        Confirmation <i id="obligatoire" class="text-danger">*</i>
                                                    </label>
                                                    <div class="input-group">
                                                        <input type="password"
                                                            pattern="^(?=.{8,32}$)(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9]).*"
                                                            class="form-control mb-0" required id="confirm-password"
                                                            name="conf_password" required autocomplete="new-password">
                                                        <div class="input-group-prepend">
                                                            <span class="input-group-text"
                                                                id="validationTooltipUsernamePrepend"
                                                                onclick="showPasswordConfirm()"><button type="button"
                                                                    class="btn btn-light btn-sm"><i
                                                                        id="eye-confirm-password"
                                                                        class="fa fa-eye"></i></button></span>
                                                        </div>
                                                        <div class="invalid-feedback">
                                                            Mot de passe invalide
                                                        </div>
                                                    </div>
                                                    <span class="hidden" id="message-confirm-password">
                                                        Le mot de passe doit contenir :
                                                        <li id="cp-capital" class="invalid">au moins 1 lettre majuscule
                                                        </li>
                                                        <li id="cp-letter" class="invalid">au moins 1 lettre miniscule
                                                        </li>
                                                        <li id="cp-number" class="invalid">au moins 1 chiffre</li>
                                                        <li id="cp-char" class="invalid">au moins 1 caractère spécial
                                                        </li>
                                                        <li id="cp-length" class="invalid">au moins 8 caractères</li>
                                                    </span>
                                                    <input type="hidden" name="email_verified_at">
                                                </div>
                                            </div>
                                            <div class="row mb-2">
                                                {!! htmlFormSnippet() !!}
                                                @if ($errors->has('g-recaptcha-response'))
                                                    <span class="help-block">
                                                        <strong>{{ $errors->first('g-recaptcha-response') }}</strong>
                                                    </span>
                                                @endif
                                            </div>

                                            <button type="submit" style="text-align: center;"
                                                class="btn btn-warning">Valider</button>
                                        </div>
                                    </form>
                                </div>
                                <div class="col-md-2">
                                    &nbsp;
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- end formulaire d'inscription -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
    <script>
        const phoneInputField = document.querySelector("#telephone");
        const phoneInput = window.intlTelInput(phoneInputField, {
            preferredCountries: ["bj", "fr", "us", "ca"],
            utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",

        });

        $("form").submit(function() {
            var full_number = phoneInput.getNumber(intlTelInputUtils.numberFormat.E164);
            $("input[name='telephone'").val(full_number);

        });
    </script>
    <script>
        // Script pour la classe .select2      
        //$('.js-slect2').select2();
        $(document).ready(function() {

            //affichage dynamique des champs pour infos complémentaires selon le profil
            $('#profil_id').change(function() {
                var choix = $(this).val();
                //alert(choix);
                if (choix == "1") {

                    //Afficher le div contenant le input
                    $("#show_filiere").removeClass("hidden");
                    $("#show_niveau").removeClass("hidden");
                    $("#show_etablissement").removeClass("hidden");
                    $("#show_profession_fonction").addClass("hidden");
                    $("#show_organisation").addClass("hidden");
                    //Afficher * a coté de la balise <i>*</i>
                    $("#required_filiere").text("*");
                    $("#required_etablissement").text("*");
                    $("#required_niveau").text("*");
                    //Mettre le input sur required
                    $("#filiere").attr("required", true);
                    $("#etablissement").attr("required", true);
                    $("#niveau").attr("required", true);
                    $("#organisation").attr("required", false);
                    $("#fonction").attr("required", false);
                    $("#profession").attr("required", false);


                } else if (choix == "2") {

                    $("#show_filiere").addClass("hidden");
                    $("#show_niveau").addClass("hidden");
                    $("#show_organisation").addClass("hidden");
                    $("#show_etablissement").removeClass("hidden");
                    $("#show_profession_fonction").removeClass("hidden");

                    $("#filiere").attr("required", false);
                    $("#niveau").attr("required", false);
                    $("#etablissement").attr("required", true);
                    $("#organisation").attr("required", false);
                    $("#fonction").attr("required", true);
                    $("#profession").attr("required", true);

                    $("#required_profession").text("*");
                    $("#required_etablissement").text("*");
                    $("#required_fonction").text("*");

                } else if (choix == "3") {

                    $("#show_filiere").addClass("hidden");
                    $("#show_niveau").addClass("hidden");
                    $("#show_etablissement").removeClass("hidden");
                    $("#show_profession_fonction").removeClass("hidden");
                    $("#show_organisation").removeClass("hidden");
                    $("#filiere").attr("required", false);

                    $("#niveau").attr("required", false);
                    $("#etablissement").attr("required", true);
                    $("#organisation").attr("required", true);
                    $("#fonction").attr("required", true);
                    $("#profession").attr("required", true);

                    $("#required_profession").text("*");
                    $("#required_etablissement").text("*");
                    $("#required_fonction").text("*");
                    $("#required_organisation").text("*");
                }
            });

        });

        // afficher le mot de passe en claire
        function showPassword() {
            var x = document.getElementById("password");
            if (x.type === "password") {
                x.type = "text";
                $("#eye-password").removeClass("fa fa-eye");
                $("#eye-password").addClass("fa fa-eye-slash");
            } else {
                x.type = "password";
                $("#eye-password").removeClass("fa fa-eye-slash");
                $("#eye-password").addClass("fa fa-eye");
            }
        }
        // cacher le mot de passe 
        function showPasswordConfirm() {
            var x = document.getElementById("confirm-password");
            if (x.type === "password") {
                x.type = "text";
                $("#eye-confirm-password").removeClass("fa fa-eye");
                $("#eye-confirm-password").addClass("fa fa-eye-slash");
            } else {
                x.type = "password";
                $("#eye-confirm-password").removeClass("fa fa-eye-slash");
                $("#eye-confirm-password").addClass("fa fa-eye");
            }
        }
        // vérifier la saisie du mot de passe
        var myInput = document.getElementById("password");
        var letter = document.getElementById("letter");
        var capital = document.getElementById("capital");
        var number = document.getElementById("number");
        var length = document.getElementById("length");
        var char = document.getElementById("char");

        // When the user clicks on the password field, show the message box
        myInput.onfocus = function() {
            $("#message-password").removeClass("hidden");
        }
        // When the user clicks outside of the password field, hide the message box
        myInput.onblur = function() {
            $("#message-password").addClass("hidden");
        }
        // When the user starts to type something inside the password field
        myInput.onkeyup = function() {
            // Validate lowercase letters
            var lowerCaseLetters = /[a-z]/g;
            if (myInput.value.match(lowerCaseLetters)) {
                letter.classList.remove("invalid");
                letter.classList.add("valid");
            } else {
                letter.classList.remove("valid");
                letter.classList.add("invalid");
            }
            // Validate capital letters
            var upperCaseLetters = /[A-Z]/g;
            if (myInput.value.match(upperCaseLetters)) {
                capital.classList.remove("invalid");
                capital.classList.add("valid");
            } else {
                capital.classList.remove("valid");
                capital.classList.add("invalid");
            }
            // Validate numbers
            var numbers = /[0-9]/g;
            if (myInput.value.match(numbers)) {
                number.classList.remove("invalid");
                number.classList.add("valid");
            } else {
                number.classList.remove("valid");
                number.classList.add("invalid");
            }
            // Validate char
            var chars = /[ `!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~]/g;
        if (myInput.value.match(chars)) {
            char.classList.remove("invalid");
            char.classList.add("valid");
        } else {
            char.classList.remove("valid");
            char.classList.add("invalid");
        }
        // Validate length
        if (myInput.value.length >= 8) {
            length.classList.remove("invalid");
            length.classList.add("valid");
        } else {
            length.classList.remove("valid");
            length.classList.add("invalid");
        }
    }

    // confirm password 
    // vérifier la saisie du mot de passe
    var cp_myInput = document.getElementById("confirm-password");
    var cp_letter = document.getElementById("cp-letter");
    var cp_capital = document.getElementById("cp-capital");
    var cp_number = document.getElementById("cp-number");
    var cp_length = document.getElementById("cp-length");
    var cp_char = document.getElementById("cp-char");

    // When the user clicks on the password field, show the message box
    cp_myInput.onfocus = function() {
        $("#message-confirm-password").removeClass("hidden");
    }
    // When the user clicks outside of the password field, hide the message box
    cp_myInput.onblur = function() {
        $("#message-confirm-password").addClass("hidden");
    }
    // When the user starts to type something inside the password field
    cp_myInput.onkeyup = function() {
        // Validate lowercase letters
        var cp_lowerCaseLetters = /[a-z]/g;
        if (cp_myInput.value.match(cp_lowerCaseLetters)) {
            cp_letter.classList.remove("invalid");
            cp_letter.classList.add("valid");
        } else {
            cp_letter.classList.remove("valid");
            cp_letter.classList.add("invalid");
        }
        // Validate capital letters
        var cp_upperCaseLetters = /[A-Z]/g;
        if (cp_myInput.value.match(cp_upperCaseLetters)) {
            cp_capital.classList.remove("invalid");
            cp_capital.classList.add("valid");
        } else {
            cp_capital.classList.remove("valid");
            cp_capital.classList.add("invalid");
        }
        // Validate numbers
        var cp_numbers = /[0-9]/g;
        if (cp_myInput.value.match(cp_numbers)) {
            cp_number.classList.remove("invalid");
            cp_number.classList.add("valid");
        } else {
            cp_number.classList.remove("valid");
            cp_number.classList.add("invalid");
        }
        // Validate char
        var cp_chars = /[ `!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~]/g;
            if (cp_myInput.value.match(cp_chars)) {
                cp_char.classList.remove("invalid");
                cp_char.classList.add("valid");
            } else {
                cp_char.classList.remove("valid");
                cp_char.classList.add("invalid");
            }
            // Validate length
            if (cp_myInput.value.length >= 8) {
                cp_length.classList.remove("invalid");
                cp_length.classList.add("valid");
            } else {
                cp_length.classList.remove("valid");
                cp_length.classList.add("invalid");
            }
        }
    </script>
@endsection