@extends('admin.layouts.index')

@push('style')
<style type="text/css">
     span ul {

          list-style: none;
          padding: 0;
          margin: 0;
          /* font-weight: bold; */

     }
</style>
@endpush

@section('content')
<section class="content home">
     <div class="block-header">
          <!-- Start Content-->
          <div class="container-fluid" style="width: 50%;">
               <div class="body">

                    <div class="row">
                         <div class="col-lg-12 mt-3 mb-3">
                              <h2 class="text-center">CHANGE PASSWORD</h2>
                              

                         </div>
                    </div>
                    
                    <div class="row">
                         <div class="col-12">
                              <div class="card">
                                   <div class="card-body">

                                   @include('admin.common.flash')
                                        <form class="form" name="changePassowrd" id="changePassowrd" method="post" action="{{route('admin.update_password')}}" data-parsley-validate="">

                                             @csrf

                                             <div class="form-group form-float">
                                                  <div class="form-line">
                                                       <input type="password" id="current_password" name="current_password" class="form-control" value="" pattern="^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$" data-parsley-required="true" data-parsley-required-message="Please enter a current password" data-parsley-pattern-message="Please enter a valid password. It should contain at least one uppercase letter, one digit, one special character, and have a minimum length of 8 characters." data-parsley-errors-container="#passworderror">
                                                       <label class="form-label">Current password</label>
                                                       <span id="passworderror" class="text-danger"></span>
                                                  </div>
                                             </div>

                                             <div class="form-group form-float">
                                                  <div class="form-line">
                                                       <input type="password" id="new_password" name="new_password" class="form-control" value="" pattern="^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$" data-parsley-required="true" data-parsley-required-message="Please enter a new password" data-parsley-pattern-message="Please enter a valid password. It should contain at least one uppercase letter, one digit, one special character, and have a minimum length of 8 characters." data-parsley-errors-container="#newpassworderror">
                                                       <label class="form-label">New password</label>
                                                       <span id="newpassworderror" class="text-danger"></span>
                                                  </div>
                                             </div>

                                             <div class="form-group form-float">
                                                  <div class="form-line">
                                                       <input type="password" id="c_password" name="c_password" class="form-control" value="" data-parsley-required="true" data-parsley-required-message="Please enter a confirm password" data-parsley-equalto="#new_password" data-parsley-equalto-message="Passwords do not match." data-parsley-errors-container="#cpassworderror">
                                                       <label class="form-label">Confirm password</label>
                                                       <span id="cpassworderror" class="text-danger"></span>
                                                  </div>
                                             </div>



                                             <div>

                                                  <input type="submit" class="btn btn-success" class="update_cafe" value="Change">

                                             </div>
                                        </form>

                                   </div>
                              </div> <!-- end card-->
                         </div> <!-- end col-->
                    </div>

               </div>
          </div>
     </div>
</section>

@endsection

@push('script')
<script src="{{asset('assets/plugins/jquery-validation/jquery.validate.js')}}"></script> <!-- Jquery Validation Plugin Css -->
<script src="{{asset('assets/plugins/jquery-steps/jquery.steps.js')}}"></script> <!-- JQuery Steps Plugin Js -->

<script src="{{asset('assets/js/pages/forms/form-validation.js')}}"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/parsleyjs@2.9.2/dist/parsley.min.js"></script>

<script>
     //WHEN EDIT FORM WILL OPEN

     document.addEventListener('DOMContentLoaded', function() {
          // Get all the form inputs
          const formInputs = document.querySelectorAll('.form-control');

          // Iterate over each input
          formInputs.forEach(function(input) {
               // Check if the input has a predefined value
               if (input.value !== '') {
                    // Add a class to the parent form-group to show the label
                    input.parentElement.classList.add('focused');
               }

               // Add event listener for input focus
               input.addEventListener('focus', function() {
                    // Add a class to the parent form-group to show the label
                    this.parentElement.classList.add('focused');
               });

               // Add event listener for input blur
               input.addEventListener('blur', function() {
                    // Check if the input value is empty
                    if (this.value === '') {
                         // Remove the class from the parent form-group to hide the label
                         this.parentElement.classList.remove('focused');
                    }
               });
          });
     });
</script>
@endpush