@extends('layouts.app')
@section('title')
All Brands
@endsection
@section('content')
<div class="content-body">
    <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">Change Password</h6>
        </div>
        <div class="card-body">
            @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

            <form id="change-password-form" action="{{route('change.password.post')}}" method="post" autocomplete="off">
                @csrf
                <div class="row mb-3">
                    <label class="col-sm-4 text-end col-form-label required-asterisk" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Letters: At least one upper case letter [A-Z], At least one lower case letter [a-z]. Numbers: At least one number [0-9], Special Characters: At least one symbol [@$!%*#?&_] Password Length: Minimum 8 characters.">Old Password</label>
                    <div class="col-sm-6 form-group">
                        <div class="form-group field-OldPassword">
                            <input type="password" id="OldPassword" class="form-control form-control-sm"  autocomplete="off" onchange="OldpasswordSet()"><i class='fa fa-eye-slash toggle-password' id='toggleOldPassword' ></i>
                             <input type="hidden" id="OldPassword1"  name="OldPassword" autocomplete="off" >
                            @error('OldPassword')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>


                <div class="row mb-3">
                    <label class="col-sm-4 text-end col-form-label required-asterisk" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Letters: At least one upper case letter [A-Z], At least one lower case letter [a-z]. Numbers: At least one number [0-9], Special Characters: At least one symbol [@$!%*#?&_] Password Length: Minimum 8 characters.">Password<i class="fa fa-info-circle"></i></label>
                    <div class="col-sm-6 form-group">
                        <div class="form-group field-Password ">
                            <input type="password" id="Password" class="form-control form-control-sm" maxlength="13" autocomplete="off" aria-required="true" onchange="passwordSet()"><i class='fa fa-eye-slash toggle-password' id='togglePassword'></i>
                            <input type="hidden" id="Password1"  name="Password"  autocomplete="off"  >
                            @error('Password')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <div class="row mb-3">
                    <label class="col-sm-4 text-end col-form-label required-asterisk">Confirm Password</label>
                    <div class="col-sm-6 form-group-confirm">
                        <div class="form-group field-ConfirmPassword required">

                            <input type="password" id="ConfirmPassword" class="form-control form-control-sm"  onchange="ConfirmpasswordSet()" autocomplete="off"><i class='fa fa-eye-slash toggle-password' id='toggleConfirmPassword'></i>
                        <input type="hidden" id="ConfirmPassword1"  name="ConfirmPassword"  autocomplete="off"  >

                            @error('ConfirmPassword')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <div class="form-group" align="center">
                    <button type="submit" class="btn btn-sm btn-warning btn-theme" id="changePasswordSubmitBtn">Submit</button>
                </div>
            </form>
            <div class="clearfix"></div>
        </div>
    </div>
</div>
@endsection
@push('js')
<script>
    
function OldpasswordSet(){
    let valueToEncrypt = $('#OldPassword').val(); // this could also be object/array/whatever
        let password = '123456'
        let encrypted = CryptoJSAesJson.encrypt(valueToEncrypt, password);
        $('#OldPassword1').val(encrypted);
}
function passwordSet(){
    let valueToEncrypt = $('#Password').val(); // this could also be object/array/whatever
        let password = '123456'
        let encrypted = CryptoJSAesJson.encrypt(valueToEncrypt, password);
        $('#Password1').val(encrypted);
}
    function ConfirmpasswordSet(){
    let valueToEncrypt = $('#ConfirmPassword').val(); // this could also be object/array/whatever
        let password = '123456'
        let encrypted = CryptoJSAesJson.encrypt(valueToEncrypt, password);
        $('#ConfirmPassword1').val(encrypted);
}

  
$(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).");
  
   $('#change-password-form').validate({
    rules: {
      "OldPassword": {
        required: true,
        minlength: 8,
        maxlength: 13,
        passwordFormat: true
      },
      "Password": {
        required: true,
        minlength: 8,
        maxlength: 13,
        passwordFormat: true
      },
      "ConfirmPassword": {
        required: true,
        minlength: 8,
        maxlength: 13,
        passwordFormat: true,
        equalTo: "#Password" // Make sure ConfirmPassword matches Password field
      }
    },
    messages: {
      "OldPassword": {
        required: "Old Password cannot be blank.",
        minlength: "Old Password should contain at least 8 characters.",
        maxlength: "Old Password should contain at most 13 characters.",
        pattern: "Old Password is not valid Ex. (Nta@2023)."
      },
      "Password": {
        required: "Password cannot be blank.",
        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: "Confirm Password cannot be blank.",
        minlength: "Confirm Password should contain at least 8 characters.",
        maxlength: "Confirm Password should contain at most 13 characters.",
        pattern: "Confirm Password is not valid Ex. (Nta@2023).",
        equalTo: "Password Not Matched."
      }
    },
    errorPlacement: function(error, element) {
      error.insertAfter(element); // Display error message next to the input field
      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');
    }
    
  });


   /* Old password */ 
document.getElementById("toggleOldPassword").addEventListener("click", toggleOldPassword);
const OldPassword = document.querySelector("#OldPassword");

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

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


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

});
</script>
@endpush