@extends('frontend.layouts.app')
@section('content')
    <section class="bg-gray-7">
        <div class="breadcrumbs-custom box-transform-wrap context-dark">
            <div class="container">
                <h3 class="breadcrumbs-custom-title">Forget Password</h3>
                <div class="breadcrumbs-custom-decor"></div>
            </div>
            <div class="box-transform" style="background-image: url(images/background/background-7.jpg);"></div>
        </div>
        <div class="container">
            <ul class="breadcrumbs-custom-path">
                <li><a href="{{route('index')}}">Home</a></li>
                <li class="active">Forget Password</li>
            </ul>
        </div>
    </section>
    <section class="section section-lg bg-default text-md-left">
        <div class="container">
            <div class="row row-60 justify-content-center">
                <div class="col-lg-6">
                    <div class="aside-contacts">
                        <img src="{{ asset('frontend/images/login.png') }}">
                    </div>
                </div>
                <div class="col-lg-6">
                    <form method="POST" class="sdw">
                        @csrf
                        <div class="row row-20 gutters-20" id="main_form_div">
                            <div class="col-md-12">
                                <div class="form-wrap floating-label">
                                    <input class="form-input" id="phone" type="text" name="phone" placeholder="Phone*" required>
                                    <label for="phone">Phone*</label>
                                </div>
                                <span id='phone_error'></span>
                            </div>
                        </div>
                        <div class="row row-20 gutters-20">
                            <div class="col-md-12">
                                <button class="button button-icon button-primary wow slideInUp w-100" id="send_otp_button" type="button" onclick="sendOtp()">Send OTP <i class="fa fa-chevron-circle-right"></i></button>
                                <button class="button button-icon button-primary w-100" style="display: none" id="verify_otp_button" type="button" onclick="verifyOtp()">Verify OTP <i class="fa fa-chevron-circle-right"></i></button>
                                <button class="button button-icon button-primary w-100" style="display: none" id="change_password_button" type="button" onclick="changePassword()">Change Password <i class="fa fa-chevron-circle-right"></i></button>
                                <p style="text-align:center">Not registered? <a href="{{route('register')}}"> Create an account</a></p>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <script>

        function sendOtp(){
            var phone = $('#phone').val();

            $.ajax({
                type: 'POST',
                url: "{{route('forget.password.send.otp')}}",
                data: {
                    _token: "{{csrf_token()}}",
                    phone:  phone
                },
                success: function(data) {
                    $('#phone_error').hide();
                    $('#phone').attr('readonly',true)
                    $('#main_form_div').append('<div class="col-md-12" id="otp_div">'+
                                                    '<div class="form-wrap floating-label">'+
                                                        '<input class="form-input" id="otp" type="text" name="otp" placeholder="OTP*" required>'+
                                                        '<label for="otp">OTP*</label>'+
                                                    '</div>'+
                                                    '<span id="otp_error"></span>'+
                                                '</div>');
                    $('#send_otp_button').hide();
                    $('#verify_otp_button').show();
                },error: function (request, status, error) {
                    if(request.responseJSON.errors.phone){
                        $('#phone_error').show();
                        $('#phone_error').addClass('text-danger');
                        $('#phone_error').removeClass('text-success');
                        $('#phone_error').text('✖ '+request.responseJSON.errors.phone);
                    }
                }
            });
        }

        function verifyOtp(){
            var otp = $('#otp').val();

            $.ajax({
                type: 'POST',
                url: "{{route('forget.password.verify.otp')}}",
                data: {
                    _token: "{{csrf_token()}}",
                    otp:  otp
                },
                success: function(data) {
                    $('#otp_error').hide();
                    $('#otp_div').hide()
                    $('#main_form_div').append('<div class="col-md-12">'+
                                                    '<div class="form-wrap floating-label">'+
                                                        '<input class="form-input" id="password" type="password" name="password" placeholder="Password*" required>'+
                                                        '<label for="password">Password*</label>'+
                                                    '</div>'+
                                                    '<span id="password_error"></span>'+
                                                '</div>');
                    $('#send_otp_button').hide();
                    $('#verify_otp_button').hide();
                    $('#change_password_button').show();
                },error: function (request, status, error) {
                    $('#otp_error').show();
                    $('#otp_error').addClass('text-danger');
                    $('#otp_error').removeClass('text-success');
                    $('#otp_error').text('✖ OTP Not Verified');
                }
            });
        }

        function changePassword(){
            var password = $('#password').val();

            $.ajax({
                type: 'POST',
                url: "{{route('forget.password')}}",
                data: {
                    _token: "{{csrf_token()}}",
                    password:  password
                },
                success: function(data) {
                    $('#password_error').hide();
                    window.location.replace("{{route('login')}}");
                },error: function (request, status, error) {
                    if(request.responseJSON.errors.password){
                        $('#password_error').show();
                        $('#password_error').addClass('text-danger');
                        $('#password_error').removeClass('text-success');
                        $('#password_error').text('✖ '+request.responseJSON.errors.password);
                    }
                }
            });
        }

    </script>

@endsection