@extends('layouts.frontend.app')
<style>
    .bell,
.cart {
 
      top: 5px;
}
</style>
@section('content')


<section class="about-section">

    <div class="container">
        <div class="row">
            <div class="col-md-6 about-frist-row">
                <a href="/" class="back-btn">
                    <span class="svg-ic">
                       <i class="bi bi-arrow-left-circle"></i>
                    </span>
                    Back to Home
                </a>
                <h1>Account</h1>
                <p>We're here to answer your questions and provide exceptional support</p>
            </div>
        </div>
    </div>
</section>
<section class='account setion-cform'>
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-4">
            @include('layouts.frontend.sidebar')
            </div>
            <div class="col-lg-9 col-md-8">
                <div class="leftsiderbar-account">
                    <div class="heading-h3">
                        <h3>Password Change</h3>

                    </div>
                    <div class='personal-info-form'>
                      <form class="dynamic-form" action="{{ route('change.password.update') }}" method="post">
                            @csrf
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class='form-label'>Current Password</label>
                                    <input type="password" name="current_password" class='form-control' placeholder='Enter Current Password'>
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label class='form-label'>New Password</label>
                                    <input type="password" name="password" class='form-control' placeholder='Enter New Password'>
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label class='form-label'>Confirm Password</label>
                                    <input type="password" name="password_confirmation" class='form-control' placeholder='Enter Confirm Password'>
                                </div>

                                <div class="col-12">
                                    <button type="submit" class="btn-save-changes">Save Changes</button>
                                </div>
                            </div>
                        </form>


                    </div>

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

@endsection





<!-- <div class="main-panel">
    <div class="row grid-margin">
        <div class="col-lg-12">
            <div class="card shadow-sm rounded-3">
                <div class="card-body">
                    <h4 class="card-title mb-4">Profile Update</h4>

                    <form class="dynamic-form" method="post" action="">
                        @csrf
                        <fieldset>
                            <div class="form-group mb-3">
                                <label>Current Password</label>
                               <input type="password" class="form-control toggle-password-input" name="current_password" placeholder="Current">
                              <span class="fa fa-eye toggle-password-icon" style="position:absolute; top:38px; right:15px; cursor:pointer;"></span>
                            </div>
                            <div class="form-group mb-3">
                                <label>New Password</label>
                                 <input type="password" class="form-control toggle-password-input" name="password" placeholder="New Password">
                                   <span class="fa fa-eye toggle-password-icon" style="position:absolute; top:38px; right:15px; cursor:pointer;"></span>
                            </div>
                            <div class="form-group mb-3">
                                <label>confirmation Password</label>
                                 <input type="password" class="form-control toggle-password-input" name="password_confirmation" placeholder="Confirm">
                                   <span class="fa fa-eye toggle-password-icon" style="position:absolute; top:38px; right:15px; cursor:pointer;"></span>
                            </div>
                            <button class="btn btn-success" type="submit">change Password</button>
                        </fieldset>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div> -->


<!-- jQuery preview script -->
 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function(){
  const $file = $('#avatarFile');
  const $avatar = $('#profileAvatar');
  const $img = $('<img id="avatarImage" alt="Profile">').css({display:'none'});
  const $placeholder = $('#avatarPlaceholder');

  // Append image element (hidden now)
  $avatar.prepend($img);

  // On file select -> preview
  $file.on('change', function(e){
    const file = this.files && this.files[0];
    if(!file) return;
    // Basic file type check
    if(!file.type.startsWith('image/')){
      alert('Please select an image file.');
      $file.val('');
      return;
    }
    const reader = new FileReader();
    reader.onload = function(ev){
      $img.attr('src', ev.target.result).show();
      $placeholder.hide();
    }
    reader.readAsDataURL(file);
  });

  // If you want a remove button to reset to placeholder
  $('#removeAvatar').on('click', function(){
    $img.attr('src','').hide();
    $placeholder.show();
    $file.val('');
  });

  // If you want to programmatically set an existing avatar (example)
  // $('#avatarImage').attr('src','https://t3.ftcdn.net/jpg/...').show();
});
</script>