@extends('webUser.layouts.app')
@section('contents')
<!-- Header -->
<div
      class="relative changePasswordBG bg-no-repeat bg-cover bg-center py-48 w-full"
    >
      <!-- Back Button -->
      <a href="{{route('user.profile')}}" class="absolute top-6 left-6 text-white p-2">
        <img src="{{asset('user/images/backIcon.svg')}}" alt="Back Icon" class="w-10 h-10" />
      </a>
     
    </div>

    <!-- Heading & Form Section -->
     <div class="ProfilePageBottomBG bg-center bg-cover bg-no-repeat">
       <div
         class="relative z-10 -mt-56 flex flex-col items-center px-4"
       >
         <!-- Heading Outside Card -->
         <h2 class="text-2xl md:text-3xl font-bold text-white mb-3">
           Change Password
         </h2>
         <p class="text-sm md:text-base text-white mb-6">
           Create your new password
         </p>
        <form id="changePasswordForm" class="w-full max-w-lg bg-white rounded-xl changePasswordCardShadow p-6 md:p-8">
         <!-- <div class="w-full max-w-lg bg-white rounded-xl changePasswordCardShadow p-6 md:p-8"> -->
          <!-- New Password -->
           <div class="mb-4 relative">
             <label class="block text-sm font-medium mb-2" for="newPassword"
               >Old Password</label
             >
             <div class="flex items-center border rounded-2xl px-3 py-2">
               <img
                 src="{{asset('user/images/password.svg')}}"
                 alt="Lock Icon"
                 class="w-5 h-5 mr-2"
               />
               <input
                 id="old_password"
                 name="old_password"
                 type="password"
                 class="flex-1 outline-none bg-transparent"
                 placeholder="***********"
               />
                <i class="fa-solid fa-eye-slash w-5 h-5 cursor-pointer eye-icon showImg" data-toggle="old_password"></i>
             </div>
              <span class="text-red-500 text-sm mb-4 validations" id="old_password-error"></span>
           </div>
           <!-- New Password -->
           <div class="mb-4 relative">
             <label class="block text-sm font-medium mb-2" for="newPassword"
               >New Password</label
             >
             <div class="flex items-center border rounded-2xl px-3 py-2">
               <img
                 src="{{asset('user/images/password.svg')}}"
                 alt="Lock Icon"
                 class="w-5 h-5 mr-2"
               />
               <input
                 id="new_password"
                 name="new_password"
                 type="password"
                 class="flex-1 outline-none bg-transparent"
                 placeholder="***********"
               />
                <i class="fa-solid fa-eye-slash w-5 h-5 cursor-pointer eye-icon showImg" data-toggle="new_password"></i>
             </div>
              <span class="text-red-500 text-sm mb-4 validations" id="new_password-error"></span>
           </div>
   
           <!-- Confirm Password -->
           <div class="mb-2 relative">
             <label class="block text-sm font-medium mb-2" for="confirmPassword"
               >Confirm Password</label
             >
             <div class="flex items-center border rounded-2xl px-3 py-2">
               <img
                 src="{{asset('user/images/password.svg')}}"
                 alt="Lock Icon"
                 class="w-5 h-5 mr-2"
               />
               <input
                 id="confirm_password"
                 name="confirm_password"
                 type="password"
                 class="flex-1 outline-none bg-transparent"
                 placeholder="***********"
               />
                <i class="fa-solid fa-eye-slash w-5 h-5 cursor-pointer eye-icon showImg" data-toggle="confirm_password"></i>
             </div>
              <span class="text-red-500 text-sm mb-4 validations" id="confirm_password-error"></span>
           </div>
   
           <!-- Error Text -->
           
   
         <!-- </div> -->
         </form>
         <!-- Save Button -->
         <button
          id="changePasswordBtn"
           class="w-full max-w-md bg-[#009A94] text-white font-medium py-3 my-6 mt-10 rounded-2xl hover:bg-[#007f7a] transition flex justify-center items-center gap-2"
         >
           Change Password
         </button>
       </div>

     </div>
<script>
    $(document).ready(function() {
        $('.showImg').on('click', function() {
            const fieldId = $(this).data('toggle');
            const $passwordField = $('#' + fieldId);
            if ($passwordField.attr('type') === 'password') {
                $passwordField.attr('type', 'text');
                $(this).removeClass('fa-eye-slash').addClass('fa-eye'); // Change icon
            } else {
                $passwordField.attr('type', 'password');
                $(this).removeClass('fa-eye').addClass('fa-eye-slash'); // Revert icon
            }
        });
    });
</script>
<script>
    $(document).ready(function () {
        $("#changePasswordBtn").click(function (e) {
            e.preventDefault(); 
            $('#changePasswordForm').submit(); 
        });
        $('#changePasswordForm').on('submit', function (e) {
            e.preventDefault(); 
            $(".validations").text('');
            const formData = $(this).serialize();
            $.ajax({
                url: "{{ route('user.change-password-post') }}", 
                method: "POST",
                data: formData,
                beforeSend: function() {
                  $('#changePasswordBtn').prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i>');
                },
                headers: {
                  'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                success: function (response) {
                  $('#changePasswordBtn').prop('disabled', false).html(`Change Password`);
                  toastr.success(response.message);
                  $('#changePasswordForm')[0].reset();
                },
                error: function (xhr) {
                  $('#changePasswordBtn').prop('disabled', false).html(`Change Password`);
                  if (xhr.status === 422) {
                    var errors = xhr.responseJSON.error;
                    var errorMessages = '';
                    $.each(errors, function(key, value) {
                        errorMessages = value[0];
                        $('#' + key + '-error').html(errorMessages);
                    });
                    // toastr.warning("Validation error");
                  } else{
                    toastr.error(xhr.responseJSON.message);
                  }
                }
            });
        });
    });
</script>
@endsection