@extends('front.layouts.main')

@section('content')
<section class="pt-30">
    <div class="container">
        <div class="d-flex flex-wrap login-wrapper">
            <div class="col s6 mb-40">
                <h2 class="mb-20 text-gray">LOG IN</h2>
                <input type="hidden" id="signInotp" value="{{session()->has('signInotp')}}">
                @if (session()->has('signInError'))
                <div class="alert mb-15" style="color:#721c24;background-color:#f8d7da;border-color:#f5c6cb;">
                    <p> {!! session()->get('signInError') !!}</p>
                </div>
                @endif
                @if (session()->has('forgotPasswordSuccess'))
                <div class="m-alert m-alert--icon alert alert-danger" role="alert">
                    <div class="m-alert__icon">
                        <i class="la la-success"></i>
                    </div>
                    <div class="m-alert__text">
                        {!! session()->get('forgotPasswordSuccess') !!}
                    </div>
                    <div class="m-alert__close">
                        <button type="button" class="close" data-close="alert" aria-label="Close"></button>
                    </div>
                </div>
                @endif
                {!! Form::open(['action' => 'Front\UserLoginController@DoLogin', 'method' => 'POST']) !!}
                <div class="form-row mb-15">
                    <input name="email" type="text" class="form-input" placeholder="EMAIL ADDRESS" />
                </div>
                <div class="form-row mb-30">
                    <input name="password" type="password" class="form-input" placeholder="PASSWORD" />
                </div>

                <input name="fromcart" type="hidden" class="form-input" value="" />

                <div class="form-row mb-15">
                    <a href="#" class="text-gray" data-popup-open="forgot_password_popup">FORGOT PASSWORD</a>
                </div>
                <button type="submit" class="btn btn-green">LOGIN</button>
                {!! Form::close() !!}
                <div class="form-row mb-15 mt-20 text-center">
                    <h3 class="text-gray">Login With:</h3>
                </div>
                <!-- Display login status -->
                <div id="status"></div>
                <!-- Display user profile data -->
                <div id="userData"></div>
                <div class="form-row mb-15 mt-20">
                    <div class="d-flex">
                        <div class="s6 col">

                            <a href="javascript:void(0);" onclick="fbLogin()" id="fbLink" class="social-login-box d-flex flex-middle flex-center facebook">
                                <i class="icon-facebook mr-10" aria-hidden="true"></i>
                                Facebook
                            </a>
                        </div>
                        <div class="s6 col">
                            <!-- <div class="g-signin2 mb-15" data-onsuccess="onSignIn"></div> -->
                            <div id="g_id_onload"
                                data-client_id="1060174241968-qtk0vlv042j9f7v2f5pvjumep2j8u073.apps.googleusercontent.com"
                                data-context="signin"
                                data-callback="handleCredentialResponse"
                                data-auto_prompt="false">
                            </div>

                            <div class="g_id_signin" data-type="standard"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col s6 mb-40">
                <h2 class="mb-20 text-gray">CREATE ACCOUNT</h2>
                <form id="registerForm" name="registerForm">
                    <div class="alert alert-error mb-15" id="form_div" style="display:none"></div>
                    <div class="form-row mb-15">
                        <div class="profile-pic"><i class="icon-profile" aria-hidden="true"></i></div>
                    </div>
                    <div class="form-row mb-15">
                        <input type="text" name="first_name" id="first_name" class="form-input" placeholder="FIRST NAME" />
                    </div>
                    <div class="form-row mb-15">
                        <input type="text" name="last_name" id="last_name" class="form-input" placeholder="LAST NAME" />
                    </div>
                    <div class="form-row mb-15">
                        <input type="text" name="dob" id="u_dob" class="form-input datepicker" placeholder="BIRTHDAY" autocomplete="off" />
                    </div>
                    <div class="form-row mb-15">
                        <div class="d-flex">
                            <input type="text" name="country_code" id="country_code" class="form-input mr-5 country-code" value="+254" readonly="true" />
                            <input type="text" onkeypress="return isNumberKey(event)" name="mobil_num" id="mobil_num" class="form-input" placeholder="MOBILE NUMBER" />
                        </div>
                    </div>
                    <div class="form-row mb-15">
                        <input type="email" name="u_email" id="u_email" class="form-input" placeholder="EMAIL ADDRESS" />
                    </div>
                    <div class="form-row mb-15">
                        <input type="password" name="password" id="password" class="form-input" placeholder="PASSWORD" />
                    </div>
                    <div class="form-row mb-15">
                        <input type="password" name="conf_password" id="conf_password" class="form-input" placeholder="CONFIRM PASSWORD" />
                    </div>
                    <button type="submit" class="btn btn-green">SIGN UP</button>
                </form>
            </div>
        </div>
    </div>
</section>

<!-- OTP Confirmation Popup -->
<div class="popup" id="signUpPopUp" data-popup="confirm_otp_popup">
    <div class="popup-inner text-center">
        <div class="popup-header">
            <h3 class="mt-0">OTP VERIFICATION</h3>
        </div>
        <div class="popup-max-hgt">
            <form>
                <div class="alert alert-error mb-15" id="otp_div" style="display:none"></div>
                <div class="alert alert-success mb-15" id="otp_success_div" style="display:none"></div>
                <div class="enter-otp-box d-flex">
                    <input type="password" id="otp_1" class="form-input" maxlength="4" placeholder="Enter your otp here" />
                </div>
            </form>
        </div>
        <div class="mb-15">
            <button type="button" onclick="otpCheck()" class="btn btn-green">CONFIRM OTP</button>
        </div>
        <div class="text-center mb-30">
            <a href="#" class="text-gray fs-18 font-brandon-text" onclick="resendOtp()">Resend OTP</a>
        </div>
        <a class="popup-close" data-popup-close="confirm_otp_popup" href="#"><i class="icon-cross"></i></a>
    </div>
</div>

<!-- Forgot Password Popup -->
<div class="popup" data-popup="forgot_password_popup">
    <div class="popup-inner">
        <div class="popup-header">
            <h3 class="mt-0 text-gray fs-20 mb-30">FORGOT PASSWORD</h3>
        </div>

        <div class="popup-max-hgt">
            <div class="alert alert-error mb-15" id="forgot_div" style="display:none"></div>
            <form>
                <div class="form-row mb-20">
                    <label>ENTER EMAIL ID</label>
                    <input type="email" class="form-input" name="forgot_email" id="forgot_email" />
                </div>
                <button type="submit" class="btn btn-green mt-10" onclick="forgotPassword(event)">SUBMIT</button>
            </form>
        </div>
        <a class="popup-close" data-popup-close="forgot_password_popup" href="#"><i class="icon-cross"></i></a>
    </div>
    <div class="overlay overlay-click"></div>
</div>

<!-- Social Media Login Popup -->
<div class="popup" data-popup="social_media_popup" id="social_media_popup">
    <div class="popup-inner">
        <div class="popup-header">
            <h3 class="mt-0 text-gray fs-20 mb-30">SOCIAL MEDIA REGISTER</h3>
        </div>
        <div class="popup-max-hgt">
            <div class="alert alert-error mb-15" id="s_forgot_div" style="display:none"></div>
            <form id="socialRegisterForm" name="socialRegisterForm">
                <div class="alert alert-error mb-15" id="s_form_div" style="display:none"></div>
                <div class="form-row mb-15">
                    <div class="profile-pic"><i class="icon-profile" aria-hidden="true"></i></div>
                </div>
                <div class="form-row mb-15">
                    <input type="text" name="s_first_name" id="s_first_name" class="form-input" placeholder="FIRST NAME" />
                </div>
                <div class="form-row mb-15">
                    <input type="text" name="s_last_name" id="s_last_name" class="form-input" placeholder="LAST NAME" />
                </div>
                <div class="form-row mb-15">
                    <input type="text" name="s_u_dob" id="s_u_dob" class="form-input datepicker" placeholder="BIRTHDAY" autocomplete="off" />
                </div>
                <div class="form-row d-flex mb-15">
                    <input type="text" name="s_country_code" id="s_country_code" class="form-input mr-5 country-code" value="+256" readonly="true" />
                    <input type="text" onkeypress="return isNumberKey(event)" name="s_mobil_num" id="s_mobil_num" class="form-input" placeholder="MOBILE NUMBER" />
                </div>
                <div class="form-row mb-15">
                    <input type="email" name="s_u_email" id="s_u_email" class="form-input" placeholder="EMAIL ADDRESS" />
                </div>
                <button type="submit" class="btn btn-green">SIGN UP</button>
            </form>
        </div>
        <a class="popup-close" data-popup-close="social_media_popup" href="#"><i class="icon-cross"></i></a>
    </div>
    <div class="overlay overlay-click"></div>
</div>


@endsection
@section('js')
<!-- <script src="https://apis.google.com/js/platform.js" async defer></script> -->
<script src="https://accounts.google.com/gsi/client" async defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
<script type="text/javascript">
    function isNumberKey(evt) {
        var charCode = (evt.which) ? evt.which : event.keyCode
        if (charCode > 31 && (charCode < 48 || charCode > 57))
            return false;
        return true;
    }
    var profileDetail = [];
    profileDetail['social_id'] = '';
    profileDetail['social_name'] = '';
    profileDetail['social_url'] = '';
    profileDetail['social_email'] = '';
    profileDetail['social_phone'] = '';
    profileDetail['social_type'] = '';
    window.fbAsyncInit = function() {
        // FB JavaScript SDK configuration and setup
        FB.init({
            appId: '554156153082201', // FB App ID
            cookie: true, // enable cookies to allow the server to access the session
            xfbml: true, // parse social plugins on this page
            version: 'v5.0' // use graph api version 2.8
        });

        // Check whether the user already logged in
        FB.getLoginStatus(function(response) {
            if (response.status === 'connected') {
                //display user data
                getFbUserData();
            }
        });
    };

    // Load the JavaScript SDK asynchronously
    (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s);
        js.id = id;
        js.src = "//connect.facebook.net/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));

    // Facebook login with JavaScript SDK
    function fbLogin() {
        FB.login(function(response) {
            if (response.authResponse) {
                // Get and display the user profile data
                getFbUserData();
            }
        }, {
            scope: 'email'
        });
    }

    // Fetch the user profile data from facebook
    function getFbUserData() {
        FB.api('/me', {
                locale: 'en_US',
                fields: 'id,first_name,last_name,email,link,gender,locale,picture'
            },
            function(response) {
                console.log(response);
                console.log('ID: ' + response.id);
                console.log('Name: ' + response.first_name + ' ' + response.last_name);
                console.log('Image URL: ' + response.picture.data.url);
                console.log('Email: ' + response.email); // This is null if the 'email' scope is not present.

                profileDetail['social_id'] = response.id;
                profileDetail['social_name'] = response.first_name + ' ' + response.last_name;
                profileDetail['social_url'] = response.picture.data.url;
                profileDetail['social_email'] = response.email;
                profileDetail['social_type'] = '2';
                //      return false;
                signInCheck(profileDetail['social_id'], profileDetail['social_email'], profileDetail['social_phone'], profileDetail['social_type']);

            });
    }

    function handleCredentialResponse(response) {
        // This is a JWT token
        const idToken = response.credential;
        console.log("ID Token: ", idToken);

        // Optionally decode it to get user info
        const userInfo = parseJwt(idToken);
        console.log("User Info: ", userInfo);

        const profileDetail = {
            social_id: userInfo.sub,
            social_name: userInfo.name,
            social_url: userInfo.picture,
            social_email: userInfo.email,
            social_type: '1',
            social_phone: '' // Add if your app collects it separately
        };

        signInCheck(profileDetail.social_id, profileDetail.social_email, profileDetail.social_phone, profileDetail.social_type);
    }

    // Helper function to decode JWT token (for client-side use only)
    function parseJwt(token) {
        const base64Url = token.split('.')[1];
        const base64 = decodeURIComponent(atob(base64Url).split('').map(function (c) {
            return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
        }).join(''));

        return JSON.parse(base64);
    }
    
    function onSignIn(googleUser) {
        var profile = googleUser.getBasicProfile();
        console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
        console.log('Name: ' + profile.getName());
        console.log('Image URL: ' + profile.getImageUrl());
        console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.

        profileDetail['social_id'] = profile.getId();
        profileDetail['social_name'] = profile.getName();
        profileDetail['social_url'] = profile.getImageUrl();
        profileDetail['social_email'] = profile.getEmail();
        profileDetail['social_type'] = '1';

        signInCheck(profileDetail['social_id'], profileDetail['social_email'], profileDetail['social_phone'], profileDetail['social_type']);

    }
    //Function to check if user already exists or not
    function signInCheck(userSocialId, userSocialEmail, userSocialPhone, userSocialType) {
        console.log(userSocialId);
        console.log(userSocialEmail);
        console.log(userSocialPhone);
        console.log(userSocialType);
        if (userSocialId != '' && (userSocialEmail != '' || userSocialPhone != '') && userSocialType != '') {
            $.ajax({
                url: "{{ route('is.registered') }}",
                type: "POST",
                data: {
                    "_token": "{{ csrf_token() }}",
                    "user_social_id": userSocialId,
                    "user_social_email": userSocialEmail,
                    "user_social_phone": userSocialPhone,
                    "user_social_type": userSocialType,
                },
                success: function(result) {
                    console.log(result);
                    //                  alert("response");
                    //                  return false;
                    $('#s_first_name').val('');
                    $('#s_last_name').val('');
                    $('#s_u_dob').val('');
                    $('#s_mobil_num').val('');
                    $('#s_u_email').val('');
                    if ('userRegister' in result) {

                        if (profileDetail['social_name'] != '') {
                            var name = profileDetail['social_name'].split(' ');
                            console.log(name);
                            $('#s_first_name').val(name[0]);
                            if (name.length > 1) {
                                $('#s_last_name').val('');
                                $('#s_last_name').val(name[1]);
                            }
                        }
                        if (profileDetail['social_email'] != '') {
                            $('#s_u_email').val(profileDetail['social_email']);
                            $("#s_u_email").attr('disabled', 'disabled');
                        }
                        if (profileDetail['social_phone'] != '') {
                            $('#s_mobil_num').val(profileDetail['social_phone']);
                            $("#s_mobil_num").attr('disabled', 'disabled');
                        }
                        //open register popup
                        $('#social_media_popup, #social_media_popup > .overlay').fadeIn(350);
                        $('body').addClass('popup-open');
                    }
                    if ('socialLogin' in result) {
                        window.location.href = "{{ url('user/home') }}";
                    }
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    alert("Status: " + textStatus);
                    alert("Error: " + errorThrown);
                    console.log(errorThrown);
                }
            });
        } else {
            console.log("Provide proper input");
        }
    }
    var userDetail = [];
    var socialUserDetail = [];
    $(function() {
        $("form[name='registerForm']").validate({
            // Specify validation rules
            rules: {
                first_name: {
                    lettersonly: true,
                    required: true
                },
                last_name: {
                    lettersonly: true,
                    required: true
                },
                dob: {
                    required: true
                },
                country_code: {
                    required: true
                },
                mobil_num: {
                    required: true,
                    digits: true
                },
                u_email: {
                    required: true,
                    emailonly: true
                },
                password: {
                    required: true,
                    minlength: 8,
                    maxlength: 16
                },
                conf_password: {
                    required: true,
                    equalTo: '#password'
                }
            },
            // Specify validation error messages
            messages: {
                first_name: {
                    required: "Please enter your firstname ",
                    lettersonly: "Please enter only characters"
                },
                last_name: {
                    required: "Please enter your lastname",
                    lettersonly: "Please enter only characters"
                },
                dob: {
                    required: "Please enter your date of birth"
                },
                country_code: {
                    required: "Please enter your country"
                },
                mobil_num: {
                    required: "Please enter your mobile number",
                    digits: "Please enter only digits"
                },
                password: {
                    required: "Please provide a password",
                    minlength: "Enter password between 8 to 16 length!"
                },
                conf_password: {
                    required: "Please provide confirm password",
                    equalTo: "Confirm password doesnot match with password entered!"
                },
                u_email: {
                    required: "Please enter your email address",
                    emailonly: "Please enter valid email!"
                }
            },
            submitHandler: function(form) {
                //              alert("form verified !");
                userDetail['f_n'] = $('#first_name').val();
                userDetail['l_n'] = $('#last_name').val();
                var b_date = ($('#u_dob').val()).split('/');
                //changing date format form dd/mm/yyyy to mm-dd-yyyy
                userDetail['dob'] = b_date[2] + '-' + b_date[1] + '-' + b_date[0];
                userDetail['c_code'] = $('#country_code').val();
                userDetail['mob'] = $('#mobil_num').val();
                userDetail['email'] = $.trim($("input[name='u_email']").val());

                userDetail['pwd'] = $('#password').val();
                userDetail['c_pwd'] = $('#conf_password').val();
                console.log(userDetail);
                $.ajax({
                    url: "{{ route('user.register') }}",
                    type: "POST",
                    data: {
                        "_token": "{{ csrf_token() }}",
                        'f_n': userDetail['f_n'],
                        'l_n': userDetail['l_n'],
                        'dob': userDetail['dob'],
                        'c_code': userDetail['c_code'],
                        'mob': userDetail['mob'],
                        'email': userDetail['email'],
                        'pwd': userDetail['pwd'],
                        'c_pwd': userDetail['c_pwd']
                    },
                    success: function(result) {
                        console.log(result);
                        $("#form_div").empty();
                        $.each(result.error, function(key, value) {
                            $('#form_div').css({
                                display: "block"
                            });
                            $('#form_div').append('<p>' + value + '</p>');
                        });

                        if ('signUpError' in result) {
                            $('#form_div').css({
                                display: "block"
                            });
                            $('#form_div').append('<p>' + result.signUpError + '</p>');
                        }
                        if ('success' in result) {
                            var modal = document.getElementById('signUpPopUp');
                            modal.style.display = "block";
                        }
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        alert("Status: " + textStatus);
                        alert("Error: " + errorThrown);
                        console.log(errorThrown);
                    }
                });
                return false;
            }
        });
        jQuery.validator.addMethod("lettersonly", function(value, element) {
            return this.optional(element) || /^[a-z\s]+$/i.test(value);
        }, "Letters only please");
        jQuery.validator.addMethod("emailonly", function(value, element) {
            return this.optional(element) || /[a-zA-Z0-9_.+-]+@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/.test(value);
        }, " ");

        $("form[name='socialRegisterForm']").validate({
            // Specify validation rules
            rules: {
                s_first_name: {
                    lettersonly: true,
                    required: true
                },
                s_last_name: {
                    lettersonly: true,
                    required: true
                },
                s_u_dob: {
                    required: true
                },
                s_country_code: {
                    required: true
                },
                s_mobil_num: {
                    required: true,
                    digits: true
                },
                s_u_email: {
                    required: true,
                    emailonly: true
                },
            },
            // Specify validation error messages
            messages: {
                s_first_name: {
                    required: "Please enter your firstname ",
                    lettersonly: "Please enter only characters"
                },
                s_last_name: {
                    required: "Please enter your lastname",
                    lettersonly: "Please enter only characters"
                },
                s_u_dob: {
                    required: "Please enter your date of birth"
                },
                s_country_code: {
                    required: "Please enter your country"
                },
                s_mobil_num: {
                    required: "Please enter your mobile number",
                    digits: "Please enter only digits"
                },
                s_u_email: {
                    required: "Please enter your email address",
                    emailonly: "Please enter valid email!"
                }
            },
            submitHandler: function(form) {
                //              alert("form verified !");
                socialUserDetail['f_n'] = $('#s_first_name').val();
                socialUserDetail['l_n'] = $('#s_last_name').val();
                var b_date = ($('#s_u_dob').val()).split('/');
                //changing date format form dd/mm/yyyy to mm-dd-yyyy
                socialUserDetail['dob'] = b_date[2] + '-' + b_date[1] + '-' + b_date[0];
                socialUserDetail['c_code'] = $('#s_country_code').val();
                socialUserDetail['mob'] = $('#s_mobil_num').val();
                socialUserDetail['email'] = $.trim($("input[name='s_u_email']").val());
                console.log(socialUserDetail);
                console.log(profileDetail);
                $.ajax({
                    url: "{{ route('user.social.register') }}",
                    type: "POST",
                    data: {
                        "_token": "{{ csrf_token() }}",
                        'f_n': socialUserDetail['f_n'],
                        'l_n': socialUserDetail['l_n'],
                        'dob': socialUserDetail['dob'],
                        'c_code': socialUserDetail['c_code'],
                        'mob': socialUserDetail['mob'],
                        'email': socialUserDetail['email'],
                        'social_type': profileDetail['social_type'],
                        'social_url': profileDetail['social_url'],
                        'social_id': profileDetail['social_id'],
                    },
                    success: function(result) {
                        console.log(result);
                        //                      alert('social register response');
                        $("#s_form_div").empty();
                        $.each(result.error, function(key, value) {
                            $('#s_form_div').css({
                                display: "block"
                            });
                            $('#s_form_div').append('<p>' + value + '</p>');
                        });

                        if ('signUpError' in result) {
                            $('#s_form_div').css({
                                display: "block"
                            });
                            $('#s_form_div').append('<p>' + result.signUpError + '</p>');
                        }
                        if ('success' in result) {
                            $('#social_media_popup').hide();
                            var modal = document.getElementById('signUpPopUp');
                            modal.style.display = "block";
                        }
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        alert("Status: " + textStatus);
                        alert("Error: " + errorThrown);
                        console.log(errorThrown);
                    }
                });
                return false;
            }
        });
    });


    $(document).ready(function() {

        $('.datepicker').datepicker({
            'format': 'd/m/yyyy',
            'autoclose': true,
            'todayHighlight': true,
            'orientation': "bottom left",
            'endDate': '+0d',
            //          'onClose': function(){   $("#registerForm").valid(); }
        });
        if ($('#signInotp').val() == 1) {
            var modal = document.getElementById('signUpPopUp');
            modal.style.display = "block";
        } else {
            var modal = document.getElementById('signUpPopUp');
            modal.style.display = "none";
        }
    });

    //Function used to verify the otp sent to a new user
    function otpCheck() {
        var otp = $('#otp_1').val();
        console.log(otp);
        if (otp != '') {
            $.ajax({
                url: "{{route('otp.verify')}}",
                type: "POST",
                data: {
                    "_token": "{{ csrf_token() }}",
                    'otp': otp
                },
                success: function(result) {
                    console.log(result);
                    if ('error' in result) {
                        $("#otp_div").empty();
                        $('#otp_div').css({
                            display: "block"
                        });
                        $('#otp_div').append('<p>' + result.error + '</p>');
                    } else if ('success' in result) {
                        location.reload();
                    }
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    alert("Status: " + textStatus);
                    alert("Error: " + errorThrown);
                    console.log(errorThrown);
                }
            });
        } else {
            $("#otp_div").empty();
            $('#otp_div').css({
                display: "block"
            });
            $('#otp_div').append('<p>' + 'Please enter your otp!' + '</p>');
        }
    }
    //Function used to send new password to a valid user
    function forgotPassword(e) {
        e.preventDefault();
        var email = $('#forgot_email').val();
        if (email != '') {
            if (isEmail(email)) {
                $.ajax({
                    url: "{{route('forgot.password')}}",
                    type: "POST",
                    data: {
                        "_token": "{{ csrf_token() }}",
                        'email': email
                    },
                    success: function(result) {
                        console.log(result);
                        if ('error' in result) {
                            $("#forgot_div").empty();
                            $('#forgot_div').css({
                                display: "block"
                            });
                            $('#forgot_div').append('<p>' + result.error + '</p>');
                        } else if ('success' in result) {
                            location.reload();
                        }
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        alert("Status: " + textStatus);
                        alert("Error: " + errorThrown);
                        console.log(errorThrown);
                    }
                });
            } else {
                $("#forgot_div").empty();
                $('#forgot_div').css({
                    display: "block"
                });
                $('#forgot_div').append('<p>' + 'Please enter a valid email!' + '</p>');
            }

        } else {
            $("#forgot_div").empty();
            $('#forgot_div').css({
                display: "block"
            });
            $('#forgot_div').append('<p>' + 'Please enter your email first!' + '</p>');
        }
    }
    //Function used to check email
    function isEmail(email) {
        var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        return regex.test(email);
    }
    //Function used to resend an otp
    function resendOtp() {
        $.ajax({
            url: "{{route('otp.resend')}}",
            type: "POST",
            data: {
                "_token": "{{ csrf_token() }}"
            },
            success: function(result) {
                console.log(result);
                if ('error' in result) {
                    $("#otp_div").empty();
                    $('#otp_div').css({
                        display: "block"
                    });
                    $('#otp_div').append('<p>' + result.error + '</p>');
                } else if ('success' in result) {
                    $("#otp_success_div").empty();
                    $('#otp_success_div').css({
                        display: "block"
                    });
                    $('#otp_success_div').append('<p>' + result.success + '</p>');
                }
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                alert("Status: " + textStatus);
                alert("Error: " + errorThrown);
                console.log(errorThrown);
            }
        });
    }
</script>
@endsection