@extends('layouts.app')
@section('content')
<style>
.profile-card-social__item {
    margin: 0;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 8px;
}
.profile-card-social__item img{
    max-width:30px;
}
</style>
<section id="signup-section" class="signup-wrapper">
   <div class="left-side">
       <nav>
            <div class="nav nav-tabs" id="nav-tab" role="tablist">
                <a class="nav-item nav-link active" id="nav-home-tab" role="tab" aria-controls="nav-home" aria-selected="true">
                    <span>1</span>
                    <p>Get started</p>
                </a>
                <a class="nav-item nav-link" id="nav-profile-tab" role="tab" aria-controls="nav-profile" aria-selected="false">
                    <span>2</span>
                    <p>Company info</p>
                </a>
                <a class="nav-item nav-link" id="nav-contact-tab" role="tab" aria-controls="nav-contact" aria-selected="false">
                    <span>3</span>
                    <p>Card details</p>
                </a>
                <a class="nav-item nav-link" id="nav-digital-card-tab" role="tab" aria-controls="nav-digital-card" aria-selected="false">
                    <span>4</span>
                    <p>Get your digital card</p>
                </a>
            </div>
        </nav>
        <form action="" id="signupForm" method="POST">
            @csrf
            @method('POST')
            <input type="hidden" name="seller_code" value="" />
            <div class="tab-content" id="nav-tabContent">
                <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
                    <div class="tab-wrapper">
                        <div class="tab-logo">
                            <a href="{{route('index')}}"><img src="{{asset('assets/images/logo/logo-1.svg')}}" alt="Logo" class="img-fluid"></a>
                        </div>
                        <div class="tab-inner-content">
                            <h2>Let’s get started</h2>
                            <p>Create your vCarrd digital business card in 3 simple steps. First, let’s start with your name.</p>
                        </div>
                            <div class="tab-box">
                                <label>Name <abbr class="required" title="required">*</abbr></label>
                                <input type="text" name="first_name" class="form-control first_name-field" data-field_name="first_name" placeholder="Name" tabindex="1">
                                <a href="javascript:void(0);" class="disabled step1-btn" tabindex="2">Continue</a>
                            </div>
                        <div class="tab-footer-btn">
                            <p>Already a member? <a href="{{route('login')}}" tabindex="3">Login</a></p>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
                    <div class="tab-wrapper">
                        <div class="tab-inner-content">
                            <h2>Whom do you work for?</h2>
                            <p>Add job title and company to your digital business card.</p>
                        </div>
                        <div class="tab-box">
                            <label>Job Title</label>
                            <input type="text" name="designation" class="form-control designation-field" placeholder="Job Title" data-field_name="designation" tabindex="4">
                        </div>
                        <div class="tab-box">
                            <label>Company</label>
                            <input type="text" name="company" class="form-control company-field" placeholder="Company" data-field_name="company" tabindex="5">
                            <a href="javascript:void(0);" class="step2-btn" tabindex="6">Continue</a>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
                    <div class="tab-wrapper">
                        <div class="tab-inner-content">
                            <h2>Additional Info</h2>
                            <p>Let’s add some more info to your card. You can add contact info, social media, and more.</p>
                        </div>
                        <div class="tab-box">
                            <label>Email</label>
                            <input type="text" name="company_email" class="form-control company_email-field" placeholder="Email" data-field_name="company_email" tabindex="7">
                        </div>
                        <div class="tab-box">
                            <label>Phone Number</label>
                            <input type="text" name="phone" class="form-control phone-field company_phone" placeholder="Phone Number" data-field_name="phone" tabindex="8">
                            <div class="btn-wrapper">
                                <a href="javascript:void(0);" class="add-more-social" data-toggle="modal" data-target="#exampleModalCenter" tabindex="9"><i class="fa fa-plus"></i> Add More Social Links</a>
                                <a href="javascript:void(0);" class="step3-btn" tabindex="10">Continue</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="nav-digital-card" role="tabpanel" aria-labelledby="nav-digital-card-tab">
                    <div class="tab-wrapper">
                        <div class="registration_success">
                        </div>
                        <div class="registration_errors error">
                        </div>
                        <div class="tab-inner-content">
                            <h2>Sign Up</h2>
                            <p>Your vCarrd is ready and looking great. Sign up now to save your card. Welcome to the vCarrd family!</p>
                        </div>
                        <div class="google-signup-btn">
                            <a href="javascript:void(0);" class="google-btn google-login-btn">
                                <div class="spinner-button"><span><img src="{{asset('assets/images/google.svg')}}" alt="Google"></span>Continue with Google</div>
                            </a>
                        </div>
                        <h4 class="form-divider">OR</h4>
                        <div class="tab-box">
                            <label>@lang('lang.label_email') <abbr class="required" title="required">*</abbr></label>
                            <input type="email" name="email" class="form-control user_email" placeholder="@lang('lang.label_email')" data-field_name="email" tabindex="11">
                        </div>
                        <div class="tab-box  position-relative">
                            <label>@lang('lang.label_password') <abbr class="required" title="required">*</abbr></label>
                            <input type="password" name="password" class="form-control user_password eye-password" placeholder="@lang('lang.label_password')" data-field_name="password" tabindex="12">
                            <span class="password-icon"><i class="la la-eye-slash"></i></span>
                        </div>
                        <div class="tab-inner-content">
                            <p>By signing up, you confirm that you've read and accepted our <a href="{{route('terms_conditions')}}" class="theme-color" target="_blank">Terms of Service</a> and <a href="{{route('privacy_policy')}}" class="theme-color" target="_blank">Privacy Policy</a>.</p>
                        </div>
                        <div class="tab-box">
                            <a href="javascript:void(0);" class="step4-btn" tabindex="13"><span class="spinner-button">Continue</span></a>
                            <button type="submit" name="submit" class="formSubmitBtn d-none">Submit</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </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 class="mobile-mockup d-none">
            <div class="mobile-wrapper">
                <div class="card-wrapper">
                    <div class="card-img-box user-first-letter">
                        <span></span>
                    </div>
                    <div class="card-title">
                        <h3 class="first_name-preview"></h3>
                        <p class="designation-preview"></p>
                    </div>
                    {{-- <div class="card-links">
                        <ul>
                            <li class="phone-preview d-none"><a href=""><i class="fa fa-phone" aria-hidden="true"></i> <span></span></a></li>
                            <li class="company_email-preview d-none"><a href=""><i class="fa fa-envelope" aria-hidden="true"></i> <span></span></a></li>
                        </ul>
                    </div> --}}
                    <div class="card-save-btn">
                        <button>Save Contact</button>
                    </div>
                    <div class="card-icons">
                        <ul>
                            <li class="phone-preview profile-card-social__item d-none">
                                <a href="">
                                    <img src="{{ asset('social_icons/phone-round.png') }}" alt="Phone">
                                </a>
                            </li>
                            <li class="company_email-preview profile-card-social__item d-none">
                                <a href="">
                                    <img src="{{ asset('social_icons/mail-round.png') }}" alt="Email">
                                </a>
                            </li>
                            <li class="twitter_link-preview profile-card-social__item d-none">
                                <a href="javascript:void(0);" target="_blank">
                                    <img src="{{ asset('social_icons/twitter-round.png') }}" alt="Twitter">
                                </a>
                            </li>
                            <li class="linkedin_link-preview profile-card-social__item d-none">
                                <a href="javascript:void(0);" target="_blank">
                                    <img src="{{ asset('social_icons/linkedin-round.png') }}" alt="Linkedin">
                                </a>
                            </li>
                            <li class="instagram_link-preview profile-card-social__item d-none">
                                <a href="javascript:void(0);" target="_blank">
                                    <img src="{{ asset('social_icons/instagram-round.png') }}" alt="Instagram">
                                </a>
                            </li>
                            <li class="facebook_link-preview profile-card-social__item d-none">
                                <a href="javascript:void(0);" target="_blank">
                                    <img src="{{ asset('social_icons/facebook-round.png') }}" alt="Facebook">
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="card-bio"></div>
                </div>
            </div>
        </div>
    </div>
   </div>
</section>
<!-- Modal -->
<div class="modal fade big social-links-modal" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenterTitle">Add Social Links</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
      </div>
      <form action="">
            <div class="modal-body">
                <div class="social-link-warapper">
                    <div class="user-profile-info">
                        <label>
                            <img src="{{asset('images/social/twittar.png')}}" alt="Twitter">
                            <span>Twitter Profile Link <span class="more-info" data-toggle="tooltip" data-placement="top" title="" data-bs-original-title="Once logged in, click on your profile picture or the &quot;Profile&quot; icon located at the top right corner of the Twitter homepage. You should see the URL of your Twitter profile displayed there." aria-label="Once logged in, click on your profile picture or the &quot;Profile&quot; icon located at the top right corner of the Twitter homepage. You should see the URL of your Twitter profile displayed there."><i class="fas fa-exclamation"></i></span></span>
                        </label>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text" id="basic-addon3">https://twitter.com/</span>
                            </div>
                            <input type="text" class="form-control border-left-0 card-social_links" id="twitter-link" data-id="twitter" name="twitter_link" value="" data-field_name="twitter_link">
                        </div>
                    </div>
                    <div class="user-profile-info ">
                        <label>
                            <img src="{{asset('images/social/in.png')}}" alt="Linkedin">
                            <span>Linkedin Profile Link <span class="more-info" data-toggle="tooltip" data-placement="top" title="" data-bs-original-title="Once logged in, click on your profile picture or the &quot;Me&quot; icon located at the top right corner of the LinkedIn homepage. You should see the URL of your LinkedIn profile displayed there." aria-label="Once logged in, click on your profile picture or the &quot;Me&quot; icon located at the top right corner of the LinkedIn homepage. You should see the URL of your LinkedIn profile displayed there."><i class="fas fa-exclamation"></i></span></span>
                        </label>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text" id="basic-addon3">https://www.linkedin.com/in/</span>
                            </div>
                            <input type="text" class="form-control border-left-0 card-social_links" id="linkedin-link" data-id="linkedin" name="linkedin_link" value="" data-field_name="linkedin_link">
                        </div>
                    </div>
                    <div class="user-profile-info">
                        <label>
                            <img src="{{asset('images/social/insta.png')}}" alt="Instagram">
                            <span>Instagram Profile Link <span class="more-info" data-toggle="tooltip" data-placement="top" title="" data-bs-original-title="Once logged in, click on your profile picture or the &quot;Profile&quot; icon located at the top right corner of the Instagram homepage. This will take you to your profile page." aria-label="Once logged in, click on your profile picture or the &quot;Profile&quot; icon located at the top right corner of the Instagram homepage. This will take you to your profile page."><i class="fas fa-exclamation"></i></span></span>
                        </label>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text" id="basic-addon3">https://www.instagram.com/</span>
                            </div>
                            <input type="text" class="form-control border-left-0 card-social_links" id="instagram-link" data-id="instagram" name="instagram_link" value="" data-field_name="instagram_link">
                        </div>
                    </div>
                    <div class="user-profile-info ">
                        <label>
                            <img src="{{asset('images/social/facebook.png')}}" alt="Facebook">
                            <span>Facebook Profile Link <span class="more-info" data-toggle="tooltip" data-placement="top" title="" data-bs-original-title="Once logged in, click on your profile picture or your name located at the top right corner of the Facebook homepage. You should see the URL of your Facebook profile displayed there." aria-label="Once logged in, click on your profile picture or your name located at the top right corner of the Facebook homepage. You should see the URL of your Facebook profile displayed there."><i class="fas fa-exclamation"></i></span></span>
                        </label>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text" id="basic-addon3">https://www.facebook.com/</span>
                            </div>
                            <input type="text" class="form-control border-left-0 card-social_links" id="facebook-link" data-id="facebook" name="facebook_link" value="" data-field_name="facebook_link">
                        </div>
                    </div>
                    <div class="user-profile-info">
                        <button type="button" class="social-form-btn" data-dismiss="modal">Submit</button>
                    </div>
                </div>
            </div>
        </form>
    </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>

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");
var signupFormValidate = $("#signupForm").validate({
    rules: {
        password: {
            required: true,
            minlength: 6
        },
        email: {
            required: true,
            noSpace: true,
            email: true
        },
        company_email: {
            noSpace: true,
            email: true
        },
        phone: {
            custom_mobile_number: 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"
        },
        phone: {
            custom_mobile_number: 'Please enter valid phone number'
        }
    },
    submitHandler: function(form) {
        $('.step4-btn').addClass('spinner')
        var formData = new FormData(form);

        formData.append('signup_type', 'web');

        var twitter_link = $('#twitter-link').val()
        var linkedin_link = $('#linkedin-link').val()
        var instagram_link = $('#instagram-link').val()
        var facebook_link = $('#facebook-link').val()

        formData.append('twitter_link', twitter_link)
        formData.append('linkedin_link', linkedin_link)
        formData.append('instagram_link', instagram_link)
        formData.append('facebook_link', facebook_link)

        currentRequest = jQuery.ajax({
            type: 'POST',
            data: formData,
            url: "{{ route('card_with_signup.post') }}",
            dataType: 'JSON',
            processData: false,
            contentType: false,
            beforeSend : function()    {
                if(currentRequest != null) {
                    currentRequest.abort();
                }
            },
            success: function(data) {
                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)

                    // Removed local data
                    localStorage.setItem('signUpStep', '')
                    $('input.form-control').each(function(i, input_field) {
                        var field_name = $(this).attr('data-field_name');
                        if(field_name != '' && field_name != 'undefined' && field_name != undefined) {
                            localStorage.setItem('last-updated'+field_name, '')
                            if(field_name == 'phone' || field_name == 'company_email' || field_name == 'twitter_link' || field_name == 'linkedin_link' || field_name == 'instagram_link' || field_name == 'facebook_link') {
                                $('.'+field_name+'-preview').addClass('d-none')
                            }
                        }
                    })
                    $('#signupForm')[0].reset()
                    $('#nav-home-tab')[0].click()

                    $('#registerModal').modal('show')

                }
                $('.step4-btn').removeClass('spinner')
                setTimeout(() => {
                    $('.registration_errors').html('');
                    $('.registration_success').html('');
                }, 3000);
            },
            error:function(e){
                // Error
                $('.step4-btn').removeClass('spinner')
                $('#loading').hide();
                return false;
            }
        });
        return false;
    }
});
var currentRequest = null;
$(document).on('click', '.google-login-btn', function() {
    $(this).addClass('spinner');

    var form = $('#signupForm')[0];
    var formData = new FormData(form);
    formData.append('signup_type', 'google');

    var twitter_link = $('#twitter-link').val()
    var linkedin_link = $('#linkedin-link').val()
    var instagram_link = $('#instagram-link').val()
    var facebook_link = $('#facebook-link').val()

    formData.append('twitter_link', twitter_link)
    formData.append('linkedin_link', linkedin_link)
    formData.append('instagram_link', instagram_link)
    formData.append('facebook_link', facebook_link)

    currentRequest = jQuery.ajax({
        type: 'POST',
        data: formData,
        url: "{{ route('save_signup_session') }}",
        dataType: 'JSON',
        processData: false,
        contentType: false,
        beforeSend : function()    {
            if(currentRequest != null) {
                currentRequest.abort();
            }
        },
        success: function(data) {
            $(this).removeClass('spinner');
            window.location.href = data.datas.url;
            setTimeout(() => {
                $('.registration_errors').html('');
                $('.registration_success').html('');
            }, 3000);
        },
        error:function(e){
        // Error
            $(this).removeClass('spinner');
            return false;
        }
    });
})
$(document).ready(function() {
    var current_step = localStorage.getItem('signUpStep')

    $('input.form-control').each(function(i, input_field) {
        var field_name = $(this).attr('data-field_name');
        if(field_name != '' && field_name != 'undefined' && field_name != undefined) {
            var lastUpdDate = localStorage.getItem('last-updated'+field_name)
            if(lastUpdDate != '' && lastUpdDate != 'null' && lastUpdDate != null) {
                $(input_field).val(lastUpdDate)
                if(field_name == 'designation' || field_name == 'company') {
                    var designation = $.trim($('.designation-field').val())
                    var company = $.trim($('.company-field').val())
                    var designation_preview_text = designation;
                    if(designation != '' && company != '') {
                        designation_preview_text += ' at ';
                    }
                    designation_preview_text += company;
                    $('.designation-preview').text(designation_preview_text)
                }
                else if(field_name == 'phone' || field_name == 'company_email') {
                    if(lastUpdDate != '') {
                        var thisURL = lastUpdDate;
                        // $('.'+field_name+'-preview span').text(lastUpdDate);
                        $('.'+field_name+'-preview').removeClass('d-none')
                        if(field_name == 'phone') {
                            thisURL = thisURL.replace('+', '');
                            thisURL = thisURL.replace(' ', '');
                            thisURL = 'tel:'+thisURL;
                        }
                        if(field_name == 'company_email') {
                            thisURL = 'mailto:'+lastUpdDate;
                        }
                        $('.'+field_name+'-preview a').attr('href', thisURL)
                    }
                    else {
                        $('.'+field_name+'-preview span').text(lastUpdDate);
                        $('.'+field_name+'-preview').addClass('d-none')
                    }
                }
                else if(field_name == 'twitter_link' || field_name == 'linkedin_link' || field_name == 'instagram_link' || field_name == 'facebook_link') {
                    var thisURL = '';
                    if(lastUpdDate != '') {
                        var prependURL = $(this).parents('.user-profile-info').find('.input-group-text').text();
                        thisURL = prependURL+lastUpdDate;
                        $('.'+field_name+'-preview').removeClass('d-none')
                        $('.'+field_name+'-preview a').attr('href', thisURL)
                    }
                    else {
                        $('.'+field_name+'-preview').addClass('d-none')
                        $('.'+field_name+'-preview a').attr('href', '')
                    }
                }
                else if(field_name != '') {
                    if(field_name == 'first_name' && lastUpdDate != '') {
                        first_letter = get_first_two_char(lastUpdDate)
                        $('.user-first-letter span').text(first_letter)

                        $('.step1-btn').removeClass('disabled')
                    }
                    $('.'+field_name+'-preview').text(lastUpdDate)
                }
            }
        }
    })

    if(current_step != '' && current_step != null && current_step != 'null') {
        $('#'+current_step+'-tab')[0].click()
    }
})
$(document).on('click', '#nav-home-tab, #nav-profile-tab, #nav-contact-tab, #nav-digital-card-tab', function(e) {
    var step = $(this).attr('aria-controls')
    localStorage.setItem('signUpStep', step);
    var first_name = $.trim($('.first_name-field').val())

    if(first_name == '') {
        if(step != 'nav-home') {
            return false;
        }
    }
    if($('.company_email-field').val() != '' && step == 'nav-digital-card') {
        //var letters = /[A-Za-z0-9]+@[A-Za-z0-9]+\.[A-Za-z]+/;
        var letters = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
        if(!$('.company_email-field').val().match(letters)) {
            $('#company_email-error').remove()
            $('.company_email-field').after('<label id="company_email-error" class="error" for="company_email">Please enter a valid email address.</label>');
            return false;
        }
    }
    if($.trim($('.company_phone').val()) != '' && step == 'nav-digital-card') {
        var letters = /^[?+]*(([0-9-]?)*([0-9 ]?))+[0-9]([\s]?)+$/gi;
        if($.trim($('.company_phone').val()).length < 7 || $.trim($('.company_phone').val()).length > 25 || !$('.company_phone').val().match(letters)) {
            $('#phone-error').remove()
            $('.phone-field').after('<label id="phone-error" class="error" for="phone">Please enter valid phone number</label>');
            return false;
        }
    }

    $(this).nextAll().removeClass('active');
    $(this).prevAll().addClass('active')
    $(this).addClass('active')
    if(step == 'nav-home') {
        $('.right-side-wrapper .mobile-mockup').addClass('d-none')
        $('.right-side-wrapper .banner').removeClass('d-none')
    }
    else {
        $('.right-side-wrapper .banner').addClass('d-none')
        $('.right-side-wrapper .mobile-mockup').removeClass('d-none')
    }

    $('.tab-pane').removeClass('show active')
    $('#'+step).addClass('show active')


    return false;
})
$(document).on('blur', '.company_email-field', function() {
    var thisVal = $(this).val()
    // if($.trim($('.user_email').val()) == '') {
        $('.user_email').val(thisVal)
        localStorage.setItem('last-updatedemail', thisVal);
    // }
})
$(document).on('keyup', '.first_name-field', function() {
    var thisVal = $.trim($(this).val());
    var first_letter = '';
    if(thisVal == '') {
        $('.step1-btn').addClass('disabled')
    }
    else {
        first_letter = get_first_two_char(thisVal)

        $('.user-first-letter span').text(first_letter)
        $('.step1-btn').removeClass('disabled')
    }
})
$(document).on('keyup', 'input.form-control', function() {
    var field_name = $(this).attr('data-field_name');
    var thisVal = $.trim($(this).val());
    localStorage.setItem('last-updated'+field_name, thisVal);
    if(field_name == 'designation' || field_name == 'company') {
        var designation = $.trim($('.designation-field').val())
        var company = $.trim($('.company-field').val())
        var designation_preview_text = designation;
        if(designation != '' && company != '') {
            designation_preview_text += ' at ';
        }
        designation_preview_text += company;
        $('.designation-preview').text(designation_preview_text)
    }
    else if(field_name == 'phone' || field_name == 'company_email') {
        if(thisVal != '') {
            var thisURL = thisVal;
            $('.'+field_name+'-preview').removeClass('d-none')
            if(field_name == 'phone') {
                thisURL = thisURL.replace('+', '');
                thisURL = thisURL.replace(' ', '');
                thisURL = 'tel:'+thisURL;
            }
            if(field_name == 'company_email') {
                thisURL = 'mailto:'+thisVal;
            }
            $('.'+field_name+'-preview a').attr('href', thisURL)
        }
        else {
            $('.'+field_name+'-preview span').text(thisVal);
            $('.'+field_name+'-preview').addClass('d-none')
        }
    }
    else if(field_name == 'twitter_link' || field_name == 'linkedin_link' || field_name == 'instagram_link' || field_name == 'facebook_link') {
        var thisURL = '';
        if(thisVal != '') {
            var prependURL = $(this).parents('.user-profile-info').find('.input-group-text').text();
            thisURL = prependURL+thisVal;
            $('.'+field_name+'-preview').removeClass('d-none')
            $('.'+field_name+'-preview a').attr('href', thisURL)
        }
        else {
            $('.'+field_name+'-preview').addClass('d-none')
            $('.'+field_name+'-preview a').attr('href', '')
        }
    }
    else if(field_name != '') {
        $('.'+field_name+'-preview').text(thisVal)
    }
})

$(document).on('click', '.step1-btn', function() {
    $('#nav-profile-tab')[0].click()
})
$(document).on('click', '.step2-btn', function() {
    $('#nav-contact-tab')[0].click()
})
$(document).on('click', '.step3-btn', function() {
    $('#nav-digital-card-tab')[0].click()
})

$(document).on('blur', '#twitter-link', function() {
    var twitterLink = $(this).val();
    twitterLink = twitterLink.replace('https://twitter.com/', '');
    $('#twitter-link').val(twitterLink)
})
$(document).on('blur', '#linkedin-link', function() {
    var linkedinLink = $(this).val();
    linkedinLink = linkedinLink.replace('https://www.linkedin.com/in/', '');
    $('#linkedin-link').val(linkedinLink)
})
$(document).on('blur', '#instagram-link', function() {
    var instagramLink = $(this).val();
    instagramLink = instagramLink.replace('https://www.instagram.com/', '');
    $('#instagram-link').val(instagramLink)
})
$(document).on('blur', '#facebook-link', function() {
    var facebookLink = $(this).val();
    facebookLink = facebookLink.replace('https://www.facebook.com/', '');
    $('#facebook-link').val(facebookLink)
})
$(document).on('blur', '#youtube-link', function() {
    var youtubeLink = $(this).val();
    youtubeLink = youtubeLink.replace('https://www.youtube.com/', '');
    $('#youtube-link').val(youtubeLink)
})
$(document).ready(function() {
  var previousValueArr = [];
  previousValueArr['twitter'] = "";
  previousValueArr['facebook'] = "";
  previousValueArr['linkedin'] = "";
  previousValueArr['instagram'] = "";
  previousValueArr['youtube'] = "";

  $(document).on('paste', '.card-social_links', function(e) {
    previousValue = $(this).val();
    var social_type = $(this).attr('data-id');
    var pastedData = e.originalEvent.clipboardData.getData('text');
    previousValueArr[social_type] = previousValue
    if(social_type == 'twitter') {
      pastedData = pastedData.replaceAll('https://twitter.com/', '');
    }
    if(social_type == 'linkedin') {
        var newUrl = new URL(pastedData);
        newUrl.hostname = 'www.linkedin.com';
        pastedData = newUrl.href;
      pastedData = pastedData.replaceAll('https://www.linkedin.com/in/', '');
    }
    if(social_type == 'instagram') {
      pastedData = pastedData.replaceAll('https://www.instagram.com/', '');
    }
    if(social_type == 'facebook') {
        var newUrl = new URL(pastedData);
        newUrl.hostname = 'www.facebook.com';
        pastedData = newUrl.href;
      pastedData = pastedData.replaceAll('https://www.facebook.com/', '');
    }
    if(social_type == 'youtube') {
        var newUrl = new URL(pastedData);
        newUrl.hostname = 'www.youtube.com';
        pastedData = newUrl.href;
      pastedData = pastedData.replaceAll('https://www.youtube.com/', '');
    }
    $(this).val(pastedData);
    return false;
  });

  $(document).on('keyup', '.card-social_links', function() {
    previousValue = $(this).val();
    var social_type = $(this).attr('data-id');
    previousValueArr[social_type] = previousValue
  });

  $(document).on('keydown', '.card-social_links', function(e) {
    if (e.ctrlKey && e.keyCode === 90 && !e.shiftKey) {
        var social_type = $(this).attr('data-id');
      e.preventDefault();
      $(this).val(previousValueArr[social_type]);
    }
  });
});
$(document).on('click', '.step4-btn', function() {
    $('.formSubmitBtn')[0].click();
})

$(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.href = "{{route('my_account')}}";
            }
            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;
        }
    });
})

// For Tooltip
$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})
// For Tooltip
</script>
@endsection