@extends('layouts.login')
@section('title')
All Brands
@endsection
@section('content')
<style>
  form #togglePassword, #toggleConfirmPassword {
    margin-right: 7px;
    cursor: pointer;
    float: right;
    margin-top: -25px;
    position: relative;
}
</style>
<div class="card card-white mb-4">
    <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
        <h6 class="m-0 font-weight-normal text-head-color head-color"><i class="fa fa-edit"></i> Reset password</h6>
    </div>

        <div class="card-body">
            <div class="login-5">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-lg-12 form-section">
                        @if (session('error'))
                          <div class="alert alert-danger alert-block">   
                              <strong>{{ session('error')}}</strong>
                          </div>
                          @endif

                          @if (session('success'))
                          <div class="alert alert-success alert-block">
                              <strong>{{ session('success')}}</strong>
                          </div>
                          @endif
                            <div class="form-inner">
                                <h6>Please choose your new password:</h6><br>
                                <form id="reset-password-form" autocomplete="off" action="{{route('reset.password.post')}}" method="post">
                                    @csrf
                                    <div class="col-sm-12 form-group tooltipmsgreset">
                                        <div class="form-group field-Password">
                                            <input type="hidden" name="token" value="{{ $token }}">
                                            <input type="hidden" name="applicationnumber" value="{{ $applicationnumber }}">
                                            <label class="form-label" for="Password">Password</label>
                                            <input type="password" id="Password" name="Password" class="form-control form-control-sm"  maxlength="13" autofocus="" placeholder="Enter Password"><i class="fa fa-eye-slash toggle-password" id="togglePassword"></i>
                                            <input type="hidden" id="Password1"  name="Password1" autofocus="" placeholder="Enter Password">
                                            @error('Password')
                                            <div class="text-danger">{{ $message }}</div>
                                            @enderror
                                        </div>


                                    </div>
                                    <div class="form-group field-ConfirmPassword ">
                                        <label class="form-label" for="ConfirmPassword">Confirm Password</label>
                                        <input type="password" id="ConfirmPassword" name="ConfirmPassword" class="form-control form-control-sm"  maxlength="13" placeholder="Enter Confirm Password" oncopy="return false" onpaste="return false"><i class="fa fa-eye-slash toggle-password" id="toggleConfirmPassword"></i>
                                        <input type="hidden" id="ConfirmPassword1"  name="ConfirmPassword1"  autofocus="" placeholder="Enter Password">
                                        @error('ConfirmPassword')
                                         <div class="text-danger">{{ $message }}</div>
                                       @enderror
                                    </div>
                                    <div class="form-group">
                                        <button type="submit" onclick="encryptAndSubmit()" id="resetButton" class="btn btn-sm btn-success btn-lg btn-theme">Save</button>
                                    </div>

                                </form>
                                <div class="clearfix"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


        </div>
    
</div>
@endsection
@push('js')
<script>
  function passwordSet(){
    let valueToEncrypt = $('#Password').val(); // this could also be object/array/whatever
    let password = '123456'
    let encrypted = CryptoJSAesJson.encrypt(valueToEncrypt, password);
    $('#Password').val(encrypted); 
  }
  function ConfirmpasswordSet(){
    let valueToEncrypt = $('#ConfirmPassword').val(); // this could also be object/array/whatever
    let password = '123456'
    let encrypted = CryptoJSAesJson.encrypt(valueToEncrypt, password);
    $('#ConfirmPassword').val(encrypted);
    //document.cookie = "identity_password = " + encrypted;
  }

  function encryptAndSubmit() {
    let valueToEncrypt = $('#Password').val();
    let valueToEncrypt2 = $('#ConfirmPassword').val();
    let password = '123456'
    let encrypted = CryptoJSAesJson.encrypt(valueToEncrypt, password);
    let encrypted2 = CryptoJSAesJson.encrypt(valueToEncrypt2, password)
    $('#Password').val(encrypted);
    $('#ConfirmPassword').val(encrypted2);
    // Submit the form
    document.getElementById('reset-password-form').submit();
}
$(document).ready(function() {

  $.validator.addMethod("passwordFormat", function(value, element) {
      // Define a regular expression for password format
      var passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@#$%^&!*])[A-Za-z\d@#$%^&!*]{8,}$/;
      return this.optional(element) || passwordRegex.test(value);
  }, "Old Password is not valid Ex.(Nta@2023).");

  
/*password */ 
const togglePassword = document.querySelector("#togglePassword");
const password = document.querySelector("#Password");
togglePassword.addEventListener("click", function () {
    // toggle the type attribute
    const type = password.getAttribute("type") === "password" ? "text" : "password";
    password.setAttribute("type", type);

    // toggle the icon
    $(this).toggleClass("fa-eye-slash");
    $(this).toggleClass("fa-eye");
});

// for confirm password
const toggleConfirmPassword = document.querySelector("#toggleConfirmPassword");
const ConfirmPassword = document.querySelector("#ConfirmPassword");

toggleConfirmPassword.addEventListener("click", function () {
    // toggle the type attribute
    const type = ConfirmPassword.getAttribute("type") === "password" ? "text" : "password";
    ConfirmPassword.setAttribute("type", type);

    // toggle the icon
    this.classList.toggle("fa-eye-slash");
    this.classList.toggle("fa-eye");
});


    // $("#reset-password-form").validate({
    //   rules: {
    //     Password: {
    //       required: true,
    //       minlength: 8,
    //       maxlength: 13,
    //       passwordFormat: true
    //     },
    //     ConfirmPassword: {
    //       required: true,
    //       equalTo: '#Password'
    //     }
    //   },
    //   messages: {
    //     Password: {
    //       required: "Please enter your password.",
    //       minlength: "Password should contain at least 8 characters.",
    //       maxlength: "Password should contain at most 13 characters.",
    //       pattern:  "Password is not valid Ex. (Nta@2023)."
    //     },
    //     ConfirmPassword: {
    //       required: "Please enter your confirm password.",
    //       equalTo: 'Passwords do not match'
    //     },
    //   },
    //   errorElement: 'span',
    //   errorPlacement: function(error, element) {
    //     error.addClass('invalid-feedback');
    //     element.closest('.form-group').append(error);
    //   },
    //   highlight: function(element, errorClass, validClass) {
    //     $(element).addClass('is-invalid');
    //   },
    //   unhighlight: function(element, errorClass, validClass) {
    //     $(element).removeClass('is-invalid');
    //   },
    //   success: function(label, element) {
    //     // Add the is-valid class to the successfully validated element
    //     $(element).addClass("is-valid");
    //   }
    // });
  });
  </script>

@endpush