@extends('layouts.app')

@section('content')
<div class="login-register-area pb-90">
    <div class="container">
        <div class="row">
            <div class="col-lg-7 col-md-12 ms-auto me-auto">
                <div class="login-register-wrapper">
                    <div class="login-register-tab-list nav">
                        <a class="active" data-bs-toggle="tab" href="#lg1">
                            <h4> login </h4>
                        </a>
                        <a data-bs-toggle="tab" href="#lg2">
                            <h4> register </h4>
                        </a>
                    </div>
                    <div class="tab-content">
                        <div id="lg1" class="tab-pane active">
                            <div class="login-form-container">
                                <div class="login-register-form">
                                    <div class="login_success">
                                        @if(session()->has('success'))
                                            <div class="alert alert-success">
                                                {{ session()->get('success') }}
                                            </div>
                                        @endif
                                    </div>
                                    <div class="login_errors error">
                                        @if(session()->has('error'))
                                            <div class="alert alert-danger">
                                                {{ session()->get('error') }}
                                            </div>
                                        @endif
                                    </div>
                                    <form action="{{ route('login.post') }}" id="loginForm" method="post">
                                        @csrf
                                        @method('POST')
                                        <div>
                                            <label for="email">@lang('lang.label_email') <abbr class="required" title="required">*</abbr></label>
                                            <input type="text" name="email">
                                        </div>
                                        <div class="position-relative">
                                            <label for="email">@lang('lang.label_password') <abbr class="required" title="required">*</abbr></label>
                                            <input type="password" name="password" class="eye-password">
                                            <span class="password-icon"><i class="la la-eye-slash"></i></span>
                                        </div>
                                        {{-- <div class="policy-content">
                                            <p>Already experienced the power of vCarrd? Log in to purchase again or effortlessly customize your card details. Your information is safe and secure with us.</p>
                                        </div> --}}
                                        <div class="button-box">
                                            <div class="login-toggle-btn">
                                                <input type="checkbox" class="remember_me" name="remember_me" id="remember_me" checked>
                                                <label for="remember_me" class="remember_me_label">@lang('lang.remember_me')</label>
                                                <a href="{{route('forgot_password')}}">Forgot Password?</a>
                                            </div>
                                            <button type="submit" name="login" value="@lang('lang.login')">@lang('lang.login')</button>
                                        </div>
                                    </form>
                                    <div class="social-login mt-20">
                                        <h4 class="text-center">OR</h4>
                                        <a href="{{ route('google.login') }}"><img src="{{ asset('assets/images/g-btn.png') }}"  width="250" alt="Google" /></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="lg2" class="tab-pane">
                            <div class="login-form-container">
                                <div class="login-register-form">
                                    <div class="registration_success">
                                    </div>
                                    <div class="registration_errors error">
                                    </div>
                                    <form action="{{ route('register.post') }}" id="signupForm" method="post">
                                        @csrf
                                        @method('POST')
                                        <div class="form-row">
                                            <div class="col-md-6">
                                                <label for="first_name">@lang('lang.label_first_name') <abbr class="required" title="required">*</abbr></label>
                                                <input type="text" name="first_name" tabindex="1">
                                            </div>
                                            <div class="col-md-6">
                                            <label for="first_name">@lang('lang.label_last_name') <abbr class="required" title="required">*</abbr></label>
                                                <input type="text" name="last_name" tabindex="2">
                                            </div>
                                        </div>

                                        <label for="email">@lang('lang.label_email_address') <abbr class="required" title="required">*</abbr></label>
                                        <input type="email" name="email" tabindex="3">
                                        <div class="position-relative">
                                            <label for="password">@lang('lang.label_password') <abbr class="required" title="required">*</abbr></label>
                                            <input type="password" name="password" id="password" class="eye-password" tabindex="4">
                                            <span class="password-icon"><i class="la la-eye-slash"></i></span>
                                        </div>
                                        <div class="position-relative">
                                            <label for="password">@lang('lang.label_confirm_password') <abbr class="required" title="required">*</abbr></label>
                                            <input type="password" name="confirm_password" id="confirm_password" class="eye-password" tabindex="5">
                                            <span class="password-icon"><i class="la la-eye-slash"></i></span>
                                        </div>
                                        <div class="policy-content">
                                            <p>Please provide your personal information to enhance your shopping experience on our website. This information will be used to manage your account access. For questions about the security of your details, please refer to our <a href="{{route('privacy_policy')}}">privacy policy</a>.</p>
                                        </div>
                                        <div class="button-box">
                                            <button type="submit" name="register" value="@lang('lang.register')" tabindex="6">@lang('lang.register')</button>
                                        </div>
                                    </form>
                                    <div class="social-login mt-20">
                                        <h4 class="text-center">OR</h4>
                                        <a href="{{ route('google.login') }}"><img src="{{ asset('assets/images/g-btn.png') }}" alt="Google" width="250" /></a>
                                                                            </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade success-modal big" id="registerModal" tabindex="-1" aria-labelledby="registerModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
            <h5 class="modal-title" id="registerModalLabel">Verify your email</h5>
            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
            <img src="{{asset('assets/images/done.png')}}" alt="done">
            <p class="text-left">Congratulations, your account has been registered successfully.</p>
            <p class="text-left">We have sent the confirmation link to your registered email address (<a href="" class="userEmailAddress"></a>) to activate the account.</p>
            <form action="{{ route('check_user_verify.post') }}" id="checkUserVerifyForm" method="post">
                @csrf
                @method('POST')
                <input type="hidden" name="uuid" class="uuid" />
                <p class="text-left"><input type="checkbox" name="verify_user" class="verify_user"> Check this box, if you have already verified your email address.</p>
            </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script>
$(document).ready(function(){
    @if(session()->has('error') || session()->has('success'))
        setTimeout(() => {
            $('.login_errors').html('');
            $('.login_success').html('');
        }, 3000);
    @endif

    var currentValue = window.location.hash.substr(1);
    if(currentValue == 'register') {
        $('.login-register-tab-list a:last-child')[0].click()
        history.pushState("", document.title, window.location.pathname + window.location.search);
    }
});

var http_refer = '';
if(http_refer == '') {
    http_refer = "{{ route('my_account') }}";
}
var currentRequest = null;
$.validator.addMethod("email", function(value, element) {
                // Email regular expression allowing hyphens
                return this.optional(element) || /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(value);
              }, "Please enter a valid email address");
              
$("#signupForm").validate({
    rules: {
        first_name: {
            required: true
        },
        last_name: {
            required: true
        },
        password: {
            required: true,
            minlength: 6
        },
        confirm_password: {
            required: true,
            minlength: 6,
            equalTo: "#password"
        },
        email: {
            required: true,
            noSpace: true,
            email: true
        }
    },
    messages: {
        first_name: {
            required: "Please enter your first name",
            alpha: "Please enter alphabets only"
        },
        last_name: {
            required: "Please enter your last name",
            alpha: "Please enter alphabets only"
        },
        password: {
            required: "Please provide a password",
            minlength: "Your password must be at least 6 characters long"
        },
        confirm_password: {
            required: "Please provide a confirm password",
            minlength: "Your password must be at least 6 characters long",
            equalTo: "Please enter the same password as above"
        },
        email: {
            required: "Please enter a email address",
            email: "Please enter a valid email address"
        }
    },
    submitHandler: function(form) {
        $('#loading').show();
        var formData = new FormData(form);
        console.log(formData)
        currentRequest = jQuery.ajax({
            type: 'POST',
            data: formData,
            url: "{{ route('register.post') }}",
            dataType: 'JSON',
            processData: false,
            contentType: false,
            beforeSend : function()    {
                if(currentRequest != null) {
                    currentRequest.abort();
                }
            },
            success: function(data) {
                $('.registration_errors').html('');
                $('.registration_success').html('');
                if(data.errors) {
                    var errors = data.errors;
                    $.each(errors, function(i, val) {
                        $('.registration_errors').append('<div class="alert alert-danger alert-dismissible fade show" role="alert">'+val+'<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>');
                    })
                }
                else if(data.status == 0) {
                    $('.registration_errors').append('<div class="alert alert-danger alert-dismissible fade show" role="alert">'+data.message+'<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>');
                }
                else {
                    // $('.registration_success').html('<div class="alert alert-success alert-dismissible fade show" role="alert">'+data.message+'<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>');
                    $('.uuid').val(data.data.uuid)
                    $('.userEmailAddress').attr('href', 'mailto:'+data.data.email)
                    $('.userEmailAddress').text(data.data.email)
                    $('#registerModal').modal('show')
                    $("#signupForm")[0].reset();
                }
                $('#loading').hide();
                setTimeout(() => {
                    $('.registration_errors').html('');
                    $('.registration_success').html('');
                }, 3000);
            },
            error:function(e){
            // Error
                $('#loading').hide();
                return false;
            }
        });
        return false;
    }
});
$.validator.addMethod("email", function(value, element) {
                // Email regular expression allowing hyphens
                return this.optional(element) || /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(value);
              }, "Please enter a valid email address");
$("#loginForm").validate({
    rules: {
        password: {
            required: true,
            minlength: 6
        },
        email: {
            required: true,
            email: true
        },
    },
    messages: {
        password: {
            required: "Please provide a password",
            minlength: "Your password must be at least 6 characters long"
        },
        email: {
            required: "Please enter a email address",
            email: "Please enter a valid email address"
        }
    },
    submitHandler: function(form) {
        var formData = new FormData(form);

        currentRequest = jQuery.ajax({
            type: 'POST',
            data: formData,
            url: "{{ route('login.post') }}",
            dataType: 'JSON',
            processData: false,
            contentType: false,
            beforeSend : function()    {
                $('#loading').show();
                if(currentRequest != null) {
                    currentRequest.abort();
                }
            },
            success: function(data) {
                if(data.status != '2') {
                    $('.login_errors').html('');
                }
                $('.login_success').html('');

                if(data.errors) {
                    var errors = data.errors;
                    $.each(errors, function(i, val) {
                        $('.login_errors').append('<div class="alert alert-danger alert-dismissible fade show" role="alert">'+val[0]+'<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>');
                    })
                }
                else if(data.status == 0) {
                    $('.login_errors').html('<div class="alert alert-danger alert-dismissible fade show" role="alert">'+data.message+'<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>');
                    console.log(data.csrf_token)
                    if(data.csrf_token) {
                        $('#loginForm input[name="_token"]').val(data.csrf_token);
                    }
                }
                else if(data.status == 2) {
                    $('.login_errors').html(data.html+'<div class="alert alert-danger alert-dismissible fade show" role="alert">'+data.message+'<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>');
                    if(data.csrf_token) {
                        $('#loginForm input[name="_token"]').val(data.csrf_token);
                    }
                }
                else {
                    // $('.login_success').html('<div class="alert alert-success alert-dismissible fade show" role="alert">'+data.message+'<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>');
                    $("#loginForm")[0].reset();
                    window.location.href = http_refer;
                    return false;
                }
                $('#loading').hide();
                if(data.status != '2') {
                    setTimeout(() => {
                        $('.login_errors').html('');
                        $('.login_success').html('');
                    }, 3000);
                }
            },
            error:function(e){
            // Error
                return false;
            }
        });
        return false;
    }
});
$(document).on('click', '.resend_email_verify', function(){
    var formData = new FormData($('#resendEmailVerifyForm')[0]);

    currentRequest = jQuery.ajax({
        type: 'POST',
        data: formData,
        url: "{{ route('resend_email_verification.post') }}",
        dataType: 'JSON',
        processData: false,
        contentType: false,
        beforeSend : function()    {
            $('#loading').show();
            if(currentRequest != null) {
                currentRequest.abort();
            }
        },
        success: function(data) {
            $('.login_errors').html('');
            $('.login_success').html('');
            $('#loading').hide();
            if(data.status == 0) {
                $('.login_errors').html('<div class="alert alert-danger alert-dismissible fade show" role="alert">'+data.message+'<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>');
                if(data.csrf_token) {
                    $('#resendEmailVerifyForm input[name="_token"]').val(data.csrf_token);
                }
            }
            else {
                $('.login_success').html('<div class="alert alert-success alert-dismissible fade show" role="alert">'+data.message+'<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>');
            }
            setTimeout(() => {
                $('.login_errors').html('');
                $('.login_success').html('');
            }, 3000);
        },
        error:function(e){
        // Error
            return false;
        }
    });
    return false;
});

$(document).on('click', '.verify_user', function(){
    var formData = new FormData($('#checkUserVerifyForm')[0]);

    currentRequest = jQuery.ajax({
        type: 'POST',
        data: formData,
        url: "{{ route('check_user_verify.post') }}",
        dataType: 'JSON',
        processData: false,
        contentType: false,
        beforeSend : function()    {
            $('#loading').show();
            if(currentRequest != null) {
                currentRequest.abort();
            }
        },
        success: function(data) {
            $('#loading').hide();
            var is_verified = data.is_verified;
            if(is_verified == 1) {
                window.location.reload();
            }
            else {
                $('#checkUserVerifyForm .error').remove()
                $('#checkUserVerifyForm').append('<p class="text-left"><span class="error">You haven\'t verified your email address yet</span></p>');
                $('.verify_user').prop('checked', false);
                setTimeout(() => {
                    $('#checkUserVerifyForm .error').remove()
                }, 3000);
            }
        },
        error:function(e){
        // Error
            return false;
        }
    });
})
$(document).on('click', '.resend-mail-link', function() {
    $('.resend_email_verify').click()
})
</script>
@endsection