@extends('layouts.website')
@section('title','Membership Quote Generator')
@section('page_title','')

@section('page_level_css')
@endsection

@section('content')

<div class="kt-content kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor pb-0" id="kt_content">
    <!-- begin:: Content -->
    <div class="kt-container kt-container--fluid kt-grid__item kt-grid__item--fluid">
        <!-- begin:: Page -->
        <div class="kt-grid kt-grid--ver kt-grid--root ">
            <div class="kt-grid kt-grid--hor kt-grid--root">
                <div class="main-box-white mt-4 mb-4">
                    <div class="quote-website">
                        <div class="row">
                            <div class="col-12 mb-5">
                                <div class="title text-color text-center">
                                    <h3>LabPair Membership Purchase</h3>
                                </div>
                            </div>
                            <div class="col-10 offset-1">
                                <div class="col-lg-12">
                                    <div class="quote-title mb-4 color-blue">
                                        To continue, please log in to LabPair or if you don't have an account, please create one- it's free!
                                    </div>
                                    <div class="quote-description mb-4">
                                        If you are an administrative assistant or lab manager, please make an account. This will allow you to manage your invoices and give you the option to have administrative control over your memberships.
                                    </div>
                                </div>
                                <div class="col-lg-8 row mt-5 mb-5 text-center offset-2 border border-radius-8">
                                    <div class="quote-title w-100 mb-5 mt-5 text-center">
                                        Member Login
                                    </div>
                                    
                                    <form class="kt-form w-100 text-center col-lg-10 offset-1" method="POST" id="loginForm" action="{{ getURL('quote/login') }}">
                                        @if(isset($_GET['user']) && !empty($_GET['user']) && isset($_GET['year']) && !empty($_GET['year']))
                                            <input type="hidden" value="{{$_GET['user']}}" name="user">
                                            <input type="hidden" value="{{$_GET['year']}}" name="year">
                                        @endif
                                        @csrf
                                        <div class="input-group mb-4">
                                            <input class="form-control" type="email" placeholder="{{ __('Email') }}" name="email" id="email" value="{{ old('email') }}">
                                        </div>
                                        <div class="input-group mb-4">
                                            <input class="form-control" type="password" placeholder="{{ __('Password') }}" name="password" id="password" value="{{ old('password') }}">
                                            <div class="input-group-append">
                                                <span class="input-group-text" id="showPassword">
                                                    <i class="la la-eye"></i>
                                                    <i class="la la-eye-slash"></i>
                                                </span>
                                            </div>
                                        </div>

                                        @if ($errors->first('message'))
                                        @if($errors->first('page') != 'FirstPassword')
                                        @if($errors->first('action') != 'Logout')
                                        <p class="error resetPasswordMessage mt-4">
                                            {{$errors->first('message')}}
                                        </p>
                                        @endif
                                        @endif
                                        @endif

                                        <div class="kt-login__actions mb-4 mt-4">
                                            <button id="loginMemberForm" class="w-100 btn btn-primary quote-button">Sign In</button>
                                        </div>

                                        <div class="kt-login__actions mb-4 mt-4 quote-title mb-4 color-blue">
                                            <a id="sendForgotPassword" class="btn kt-login__btn-primary btn-pill" data-toggle="modal" data-target="#forgotPasswordEmail">Forgot password?</a>
                                        </div>
                                    </form>

                                </div>
                                <div class="col-lg-12 row mt-5 mb-5">
                                    <div class="col-lg-4 text-center offset-4">
                                        <button type="button" class="btn btn-primary quote-button" id="MembershipCreateAccount" value="Create Account">Create Account</button>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end:: Content -->
</div>

<!-- Start:: Modal -->
<div class="modal fade" id="forgotPasswordEmail" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdrop" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered " role="document">
        <div class="modal-content">
            <div class="modal-header custom-blue-header">
                <h5 class="modal-title resetSuccessModelTitle">Request Password Reset</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <i aria-hidden="true" class="ki ki-close"></i>
                </button>
            </div>
            <div class="modal-body pb-0">
                <div class="text-center">
                    <p>Enter the email associated with your account and we'll send an email with instructions to reset your password.</p>
                </div>
                <div class="row">
                    <div class="col-md-12 mb-2">
                        <input type="text" class="form-control" placeholder="Email" name="forgot_email" id="forgot_email">
                    </div>
                </div>
            </div>
            <div class="modal-footer border-top-0 d-flex">
                <button type="button" class="btn btn-primary quote-button disabled w-25" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary quote-button w-25" data-dismiss="modal" id="sendForgotPasswordButton">Send</button>
            </div>
        </div>
    </div>
</div>

@endsection

@push('page_level_script')
@endpush


@push('footerscript')
<script>
    $(document).on('click', '#showPassword', function() {
        var x = document.getElementById("password");
        if (x.type === "password") {
            x.type = "text";
        } else {
            x.type = "password";
        }
    });
    $('body').on('click', '#sendForgotPasswordButton', function () {
        var email = $('#forgot_email').val();
        var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        if (regex.test(email)) {
            $.ajax({
                url: '{{getURL("forgot-password")}}',
                method: "POST",
                headers: {
                    'X-CSRF-TOKEN': '{{csrf_token()}}',
                },
                data: {'email': email},
                success: function (data) {
                    $('.resetPasswordText').html(data.message);
                    $("#resetSuccessModelButton").click();
                },
                error: function (errorThrown) {
                    
                }
            });
        }
    });

    /** Click to Redirect */
    $(document).on('click', '#MembershipCreateAccount', function() {
        window.location.href = "{{getURL('register-member')}}";
    });

    /** Click to Redirect */
</script>
@endpush