@extends('layouts.app')

@section('content')
<section id="login-section" class="login-wrapper">
    <div class="left-side">
        <div class="left-wrapper">
            <div class="logo-box">
                <a href="{{route('index')}}"><img src="{{asset('assets/images/logo/logo-1.svg')}}" alt="Logo" class="img-fluid"></a>
            </div>
            <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 class="left-inner-content">
                    <h2>Log In</h2>
                    <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="google-signup-btn">
                    <a href="{{route('google.login')}}" class="google-btn">
                        <div class="spinner-button">
                            <span><img src="{{asset('assets/images/google.svg')}}" alt="Google"></span> Continue with Google
                        </div>
                    </a>
                </div>
                <div class="form-divider">
                    <h3>OR</h3>
                </div>
                <div class="left-input-box">
                    <label>@lang('lang.label_email') <abbr class="required" title="required">*</abbr></label>
                    <input type="email" name="email" class="form-control" placeholder="@lang('lang.label_email')" tabindex="1">
                </div>
                <div class="left-input-box position-relative">
                    <label>@lang('lang.label_password') <abbr class="required" title="required">*</abbr></label>
                    <input type="password" name="password" class="form-control eye-password" placeholder="@lang('lang.label_password')" tabindex="2">
                    <span class="password-icon"><i class="la la-eye-slash"></i></span>
                </div>
                <div class="left-input-box mb-3 text-right">
                    <a href="{{route('forgot_password')}}">Forgot Password?</a>
                </div>
                <div class="left-form-submit-btn">
                    <button type="submit" name="login" value="@lang('lang.login')" tabindex="3">@lang('lang.login')</button>
                </div>
                <div class="left-footer-btn mt-2">
                    <p>New to vCarrd? <a href="{{route('card_profile_with_signup')}}" tabindex="4">Create Account</a></p>
                </div>
            </form>
        </div>
    </div>
    <div class="right-side">
        <div class="right-side-wrapper">
            <div class="banner">
                <img src="{{asset('assets/images/vcarrd-login-banner.png')}}" class="img-fluid" alt="vCarrd Banner Image">
            </div>
        </div>
    </div>
</section>
@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");
              
$("#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()    {
                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