@extends('theme::layouts.app')

@section('content')
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <div class="flex flex-col justify-center py-20 px-2 sm:px-6 lg:px-8 min-h-screen main-wrapper login-signup-page" style="background-image: url({{ asset('themes/tailwind/images/login-bg.png') }})">
        <div class="form-steps" data-step="1">
            <div class="mx-auto login-signup-card">
                <form action="{{ route('forgot-password.send-otp') }}" method="POST" id="sendOtpFrm">
                    @csrf

                    <img class="logo mb-6 mx-auto" src="{{ asset('themes/tailwind/images/Lock.png') }}">
                    <h3 class="form-title mb-6">Recover Your Password</h3>

                    <div class="form-group mb-6">
                        <label for="email">Email</label>
                        <input id="email" type="email" name="email" required class="w-full form-input no-radius" autofocus>

                        @if ($errors->has('email'))
                            <div class="mt-1 text-red-500">
                                {{ $errors->first('email') }}
                            </div>
                        @endif
                    </div>

                    <div class="mb-6">
                        <span class="block w-full rounded-md shadow-sm">
                            <button type="submit" class="flex justify-center w-full px-4 py-3 text-sm font-medium text-black transition duration-150 ease-in-out border primary-button change-form-step submit-btn" data-target="2">
                                Recover Password
                            </button>
                        </span>
                    </div>

                    <p class="bottom-desc">
                        Go back to <a href="{{ route('login') }}" class="blue-link d-inline-block">Sign in</a>
                    </p>

                    <div class="mx-auto bottom-links-wrapper pb-0" style="bottom: 30px;">
                        <a href="{{ route('user-terms-and-conditions') }}" class="link">Terms and Conditions</a>
                        <a href="{{ route('user-privacy-policy') }}" class="link">Privacy Policy</a>
                    </div>
                </form>
            </div>
        </div>
        <div class="form-steps" data-step="2" style="display: none;">
            <div class="mx-auto login-signup-card">
                <form action="{{ route('forgot-password.submit-otp') }}" method="POST" id="submitOtpFrm">
                    @csrf

                    <img class="logo mb-6 mx-auto" src="{{ asset('themes/tailwind/images/Lock.png') }}">
                    <h3 class="form-title mb-6">OTP sent to your email</h3>

                    <div class="form-group mb-6">
                        <label for="otp">OTP</label>
                        <input id="otp" type="password" name="otp" required class="w-full form-input no-radius" autofocus>

                        @if ($errors->has('otp'))
                            <div class="mt-1 text-red-500">
                                {{ $errors->first('otp') }}
                            </div>
                        @endif
                    </div>

                    <div class="mb-6">
                        <span class="block w-full rounded-md shadow-sm">
                            <button type="submit" class="flex justify-center w-full px-4 py-3 text-sm font-medium text-black transition duration-150 ease-in-out border primary-button change-form-step submit-btn" data-target="3">
                                Recover Password
                            </button>
                        </span>
                    </div>

                    <p class="bottom-desc">
                        Go back to <a href="{{ route('login') }}" class="blue-link d-inline-block">Sign in</a>
                    </p>
                </form>
            </div>

            <div class="mx-auto bottom-links-wrapper">
                <a href="{{ route('user-terms-and-conditions') }}" class="link">Terms and Conditions</a>
                <a href="{{ route('user-privacy-policy') }}" class="link">Privacy Policy</a>
            </div>
        </div>
        <div class="form-steps" data-step="3" style="display: none;">
            <div class="mx-auto login-signup-card">
                <form action="{{ route('forgot-password.reset-password') }}" method="POST" id="submitResetPasswordFrm">
                    @csrf
                    <input type="hidden" name="user_id" id="user_id">
                    
                    <img class="logo mb-6 mx-auto" src="{{ asset('themes/tailwind/images/Lock.png') }}">
                    <h3 class="form-title mb-6">Reset Your Password</h3>

                    <div class="form-group mb-6">
                        <label for="password">
                            New Password
                        </label>

                        <div class="password-wrapper">
                            <input id="password" type="password" name="password" required class="w-full form-input no-radius">
                            <img class="mx-auto password-hide-show" src="{{ asset('themes/tailwind/images/password-hide-show.png') }}">
                        </div>

                        @if ($errors->has('password'))
                            <div class="mt-1 text-red-500">
                                {{ $errors->first('password') }}
                            </div>
                        @endif
                    </div>

                    <div class="form-group mb-6">
                        <label for="password_confirmation">
                            Confirm Password
                        </label>

                        <div class="password-wrapper">
                            <input id="password_confirmation" type="password" name="password_confirmation" required class="w-full form-input no-radius">
                            <img class="mx-auto password-hide-show" src="{{ asset('themes/tailwind/images/password-hide-show.png') }}">
                        </div>

                        @if ($errors->has('password_confirmation'))
                            <div class="mt-1 text-red-500">
                                {{ $errors->first('password_confirmation') }}
                            </div>
                        @endif
                    </div>

                    <div class="mb-6">
                        <span class="block w-full rounded-md shadow-sm">
                            <button type="submit" class="flex justify-center w-full px-4 py-3 text-sm font-medium text-black transition duration-150 ease-in-out border primary-button submit-btn">
                                Reset Password
                            </button>
                        </span>
                    </div>

                    <p class="bottom-desc">
                        Go back to <a href="{{ route('login') }}" class="blue-link d-inline-block">Sign in</a>
                    </p>
                </form>
            </div>

            <div class="mx-auto bottom-links-wrapper">
                <a href="{{ route('user-terms-and-conditions') }}" class="link">Terms and Conditions</a>
                <a href="{{ route('user-privacy-policy') }}" class="link">Privacy Policy</a>
            </div>
        </div>
    </div>

    {{-- Validation Modal --}}
    <div class="modal fade validation-modal style2" id="validationModal" tabindex="-1" aria-labelledby="validationModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content mx-auto w-100">
                <div class="modal-body p-0">
                    <p class="text-center error-message">Account Not Excise</p>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">OK</button>
                </div>
            </div>
        </div>
    </div>
    {{-- Success Modal --}}
    <div class="modal fade validation-modal style1" id="successModal" tabindex="-1" aria-labelledby="successModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content mx-auto w-100">
                <div class="modal-body p-0">
                    <p class="text-center error-message">Password has successfully reset</p>
                    <a href="{{ route('login') }}" class="btn btn-secondary">Sign in</a>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <script>
        $(function() {
            $('.password-hide-show').click(function() {
                var type = $(this).parent().find('input').attr('type');

                if (type == 'password') {
                    $(this).parent().find('input').attr('type', 'text');
                }
                else {
                    $(this).parent().find('input').attr('type', 'password');
                }
            });
            $('form').submit(function(e) {
                e.preventDefault();
                var button = $(this).find('button[type="submit"]');
                var buttonHtml = button.html();
                var action = $(this).attr('action');
                var frmId = $(this).attr('id');

                if (!button.is(':disabled') && action) {
                    button.attr('disabled', 'disabled');
                    button.html('<i class="fa fa-spinner fa-spin" style="font-size:24px"></i>');

                    $.ajax({
                        url: action,
                        type:"post",
                        data:$(this).serialize(),
                        dataType:'json',
                        success:function(data) {
                            button.removeAttr('disabled');
                            button.html(buttonHtml);

                            if (data.success) {
                                if (frmId == 'submitOtpFrm') {
                                    $('#submitResetPasswordFrm #user_id').val(data.user_id);
                                }
            
                                var target = button.attr('data-target');

                                if (target) {
                                    $('.form-steps').hide();
                                    $('.form-steps[data-step="' + target + '"]').show();
                                }
                                else {
                                    $('#successModal .error-message').html(data.message);
                                    $('#successModal').modal('show');
                                }
                            }
                            else {
                                $('#validationModal .error-message').html(data.message);
                                $('#validationModal').modal('show');
                            }
                        },
                        error: function(data) {
                            var errors = data.responseJSON.errors;
                            var errorMessage = '<ul>';
                            $.each(errors, function(index, error) {
                                console.log(error);
                                errorMessage += '<li>' + error[0] + '</li>';
                            });
                            errorMessage += '</ul>';

                            $('#validationModal .error-message').html(errorMessage);
                            $('#validationModal').modal('show');
                            button.removeAttr('disabled');
                            button.html(buttonHtml);
                        }
                    });
                }
            });
            // $('.change-form-step').click(function() {
            //     var target = $(this).attr('data-target');

            //     if (target) {
            //         $('.form-steps').hide();
            //         $('.form-steps[data-step="' + target + '"]').show();
            //     }
            // });
        });
    </script>
@endsection