@extends('webUser.layouts.auth')
@section('contents')
<div class="w-full lg:w-1/2 flex justify-center items-center px-3 sm:px-20 xl:px-36 pb-5 lg:pb-0">
    <div class="w-full rounded-xl h-[80%] relative card-shadow bg-white p-5 px-8 py-10">
        <img src="{{asset('user/images/smallCircle.svg')}}" alt="" class="w-16 h-16 absolute hidden sm:block -top-4 -right-4" />
        <img src="{{asset('user/images/forgetLock.svg')}}" alt="" class="mb-5" />
        <h2 class="text-3xl font-bold text-gray-800 mb-1">Reset password</h2>
        <p class="text-sm text-gray-500 mb-6">
            Create your new password below.
        </p>

        <form class="" id="resetPasswordForm">
            <input type="hidden" name="user_id" value="{{encrypt($user->id)}}">
            <div class="mb-5">
                <label for="password" class="block text-sm font-medium text-gray-700 mb-2">New Password</label>
                <div class="flex items-center border border-[#C4D0D0] rounded-xl px-3 py-3">
                    <img src="{{asset('user/images/password.svg')}}" alt="" class="w-5 h-5 mr-2" />
                    <input type="password" id="new_password" name="new_password" placeholder="********"
                        class="w-full focus:outline-none text-sm" />
                    <button type="button">
                        <i class="fa-solid fa-eye-slash w-5 h-5 ml-2 eye-icon showImg" data-toggle="new_password"></i>
                    </button>
                </div>
                <span class="text-red-500 text-sm mb-4 validations" id="new_password-error"></span>
            </div>

            <div class="mb-5">
                <label for="password" class="block text-sm font-medium text-gray-700 mb-2">Confirm
                    Password</label>
                <div class="flex items-center border border-[#C4D0D0] rounded-xl px-3 py-3">
                    <img src="{{asset('user/images/password.svg')}}" alt="" class="w-5 h-5 mr-2" />
                    <input type="password" id="confirm_password" name="confirm_password" placeholder="********"
                        class="w-full focus:outline-none text-sm" />
                    <button type="button">
                        <i class="fa-solid fa-eye-slash w-5 h-5 ml-2 eye-icon showImg" data-toggle="confirm_password"></i>
                    </button>
                </div>
                <span class="text-red-500 text-sm mb-4 validations" id="confirm_password-error"></span>
            </div>

            <!-- Login Button -->
            <button type="submit" id="resetBtn"
                class="w-full btn-shadow bg-[#009696] mt-10 hover:bg-teal-600 text-white py-3 rounded-lg font-semibold flex justify-center items-center gap-2">
                Reset
                <img src="{{asset('user/images/Arrow - Right.svg')}}" alt="Show" class="w-5 h-5" />
            </button>

            <div class="flex items-center justify-center gap-1 py-8 font-semibold">
                <img src="{{asset('user/images/grayArrow.svg')}}" alt="Main Logo" class="mt-1" />
                <p class="text-[#748383] text-sm">Back to</p>
                <a href="{{route('user.login')}}" class="text-sm underline text-[#009696]">Login</a>
            </div>
        </form>
    </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 () {
        $('#resetPasswordForm').on('submit', function (e) {
            e.preventDefault(); 
            $(".validations").text('');
            const formData = $(this).serialize();
            $.ajax({
                url: "{{ route('user.reset-post') }}", 
                method: "POST",
                data: formData,
                beforeSend: function() {
                  $('#resetBtn').prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i>');
                },
                headers: {
                  'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                success: function (response) {
                  $('#resetBtn').prop('disabled', false).html(`Reset <img src="{{asset('user/images/Arrow - Right.svg')}}" alt="Show" class="w-5 h-5" />`);
                  window.location.href = response.data.redirect_url || location.href;
                },
                error: function (xhr) {
                  $('#resetBtn').prop('disabled', false).html(`Reset <img src="{{asset('user/images/Arrow - Right.svg')}}" alt="Show" class="w-5 h-5" />`);
                  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