@extends('backend/include/layout')
<!-- title -->
@section('title') Enregistrement Utilisateur || {{env('APP_NAME')}} @endsection
<style>
    /* The message box is shown when the user clicks on the password field */
    #message {
       display: none;
       background: #f1f1f1;
       color: #000;
       position: relative;
       padding: 20px;
       margin-top: 10px;
    }

    #message p {
       padding: 10px 35px;
       font-size: 18px;
    }

    /* 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: ;
       "✖";
    }
 </style>
@section('fil-arial')
<div class="pagetitle">
    <h1>Utilisateurs</h1>
    <nav>
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#" style="text-decoration: none;">Accueil</a></li>
        <li class="breadcrumb-item"><a href="{{route('admin.parametres')}}" style="text-decoration: none;">Paramètres</a></li>
        <li class="breadcrumb-item"><a href="{{route('users.index')}}" style="text-decoration: none;">Utilisateurs</a> </li>
        <li class="breadcrumb-item active">Enregistrement </li>
      </ol>
    </nav>
  </div>
@endsection

@section('contenu')
<section class="section">
    <div class="row">
      <div class="col-lg-12">
    <div class="card">
        <div class="card-body">
        <h5 class="card-title">Enregistrement</h5>
          <!-- General Form Elements -->
          @if ($errors->any())
          <div class="alert alert-danger">
              <strong>Error!</strong>
              <ul>
                  @foreach ($errors->all() as $error)
                  <li>{{ $error }}</li>
                  @endforeach
              </ul>
          </div>
          @endif
          <form action="{{ route('users.store') }}" method="post">
            @csrf
            <div class="row mb-3">
              <div class="col-md-6">
                <label for="inputText" class=" col-form-label">Nom <i class="text-danger">*</i></label>
                <div>
                  <input type="text" class="form-control" required name="nom" id="nom" minlength="3" maxlength="100">
                </div>
              </div>
              <div class="col-md-6">
                <label for="inputText" class=" col-form-label">Prénoms <i class="text-danger">*</i></label>
                <div>
                  <input type="text" class="form-control" required name="prenoms" id="prenoms" minlength="3" maxlength="100">
                </div>
              </div>
            </div>
            <div class="row mb-3">
              <div class="col-md-6">
                <label for="inputText" class=" col-form-label">Téléphone <i class="text-danger">*</i></label>
                <div>
                  <input type="number" class="form-control" required name="telephone" id="telephone" >
                </div>
              </div>
              <div class="col-md-6">
                <label for="inputText" class=" col-form-label">E-mail <i class="text-danger">*</i></label>
                <div>
                  <input type="email" class="form-control" required name="email" id="email" minlength="5" maxlength="100" >
                </div>
              </div>
            </div>

            <div class="row mb-3">
              <div class="col-md-6">
                <label for="inputText" class=" col-form-label">Rôle <i class="text-danger">*</i></label>
                <div>
                    <select class="form-select" name="role_id" id="role_id" required>
                      <option selected value="">Sélectionnez un rôle</option>
                      @foreach ($roles as $item)
                      <option value="{{$item->id}}">{{$item->libelle}}</option>
                      @endforeach
                    </select>
                </div>
              </div>
              <div class="col-md-6">
                <label for="inputText" class=" col-form-label">Pays <i class="text-danger"></i></label>
                <div>
                    <select class="form-select" name="pays_id" id="pays_id">
                      <option value="">Sélectionnez un pays</option>
                      @foreach ($pays as $item)
                      <option value="{{$item->id}}">{{$item->nom_pays}}</option>
                      @endforeach
                    </select>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-6">
                <label for="inputText" class=" col-form-label">Mot de passe <i class="text-danger">*</i></label>
                <div class="input-group">
                    <input class="form-control password @error('password') is-invalid @enderror" type="password" placeholder=" " id="password" name="password" pattern="^(?=.{8,32}$)(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9]).*" autocomplete="new-password" required oninvalid="this.setCustomValidity('Le mot de passe doit contenir  : \nau moin 1 lettre majuscule \nau moin 1 lettre miniscule \nau moin 1 numéro \nMinimum 8 caractères ')" oninput="this.setCustomValidity('')" minlength="
                    8" maxlength="100">
                    <span class="input-group-text" onclick="password_show_hide();">
                       <i class="fas fa-eye" id="show_eye"></i>
                       <i class="fas fa-eye-slash d-none" id="hide_eye"></i>
                    </span>
                    @error('password')
                    <span class="invalid-feedback" role="alert">
                       <strong>{{ $message }}</strong>
                    </span>
                    @enderror
                    <div id="message" class="invalid-feedback">
                       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>
                    </div>
                 </div>
              </div>
            </div>
            <div class="row mb-3 mt-3">
                <div class="col-md-6">
                  <button type="submit" class="btn btn-primary">Enregistrer</button>
                </div>
            </div>
          </form><!-- End General Form Elements -->
        </div>
    </div>
</div>
</div>
</section>

  @endsection

<!-- jsScript -->
@section('script-js')
<script>
    $(document).ready(function() {
      // remove menu active
      $("ul").removeClass('show');
      $("ul li a").removeClass('active');
      // active menu
      $("#parametres").removeClass('collapsed');
    } );
</script>
<script>
    function password_show_hide() {
       var x = document.getElementById("password");
       var show_eye = document.getElementById("show_eye");
       var hide_eye = document.getElementById("hide_eye");
       hide_eye.classList.remove("d-none");
       if (x.type === "password") {
          x.type = "text";
          show_eye.style.display = "none";
          hide_eye.style.display = "block";
       } else {
          x.type = "password";
          show_eye.style.display = "block";
          hide_eye.style.display = "none";
       }
    }
 </script>
 <script>
    function password_show() {
       var x = document.getElementById("password_confirmation");
       var show_eye = document.getElementById("show_eyes");
       var hide_eye = document.getElementById("hide_eyes");
       hide_eye.classList.remove("d-none");
       if (x.type === "password") {
          x.type = "text";
          show_eye.style.display = "none";
          hide_eye.style.display = "block";
       } else {
          x.type = "password";
          show_eye.style.display = "block";
          hide_eye.style.display = "none";
       }
    }
 </script>
 <script>
    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() {
       document.getElementById("message").style.display = "block";
    }

    // When the user clicks outside of the password field, hide the message box
    myInput.onblur = function() {
       document.getElementById("message").style.display = "none";
    }

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

@endsection