@extends('layouts.app')

@section('content')
<section class="my_account_sec">
         <div class="container">
            <div class="my_account_list_tab_h">
             <ul class="nav nav-pills mb-3" role="tablist">

    <li class="nav-item">
        <a 
            class="nav-link {{ request()->routeIs('user.profile.edit') ? 'active' : '' }}"
            href="{{ route('user.profile.edit') }}"
        >
            <i class="bi bi-person-fill"></i>&nbsp;My Profile
        </a>
    </li>

    <li class="nav-item">
        <a 
            class="nav-link {{ request()->routeIs('user.orders*') ? 'active' : '' }}"
            href="{{ route('user.orders') }}"
        >
            <i class="bi bi-list-ul"></i>&nbsp;All Orders
        </a>
    </li>

    <li class="nav-item">
        <a 
            class="nav-link {{ request()->routeIs('user.password.form') ? 'active' : '' }}"
            href="{{ route('user.password.form') }}"
        >
            <i class="bi bi-lock-fill"></i>&nbsp;Change Password
        </a>
    </li>

</ul>

            </div>
@if(session('success'))
    <p style="color:green">{{ session('success') }}</p>
@endif
 <div class="change_password_form">
                  <h3 class="my_accout_default_head">Change Password</h3>
                  <form action="{{ route('user.password.update') }}" method="post">
				   @csrf
                     <div class="form-group">
                        <div class="password-box">
                        <input type="password" name="current_password" id="currentPassword" class="form-control" placeholder="Current Password">
                        <i class="bi bi-eye-fill" onclick="togglePassword('currentPassword', this)"></i>
                     </div>
                     </div>
                     <div class="form-group">
                        <div class="password-box">
                        <input type="password" name="password" id="newPassword" class="form-control" placeholder="New Password">
                        <i class="bi bi-eye-fill" onclick="togglePassword('newPassword', this)"></i>
                     </div>
                     </div>
                     <div class="form-group">
                        <div class="password-box">
                        <input type="password" name="password_confirmation" id="confirmPassword" class="form-control" placeholder="Confirm Password">
                        <i class="bi bi-eye-fill" onclick="togglePassword('confirmPassword', this)"></i>
                     </div>
                     </div>
                     <div class="password_submit">
                        <button type="submit" class="my_act_btn_btn float-end">Update Password</button>
                     </div>
                  </form>
                 </div>
                 </div>
				 </section>
<script>
function togglePassword(id, icon){
    const input = document.getElementById(id);

    if(input.type === "password"){
        input.type = "text";
        icon.classList.remove("bi-eye-fill");
        icon.classList.add("bi-eye-slash-fill");
    } else {
        input.type = "password";
        icon.classList.remove("bi-eye-slash-fill");
        icon.classList.add("bi-eye-fill");
    }
}
</script>
@endsection