@extends('front.layout.master')

@section('body')
<style>
    @media all and (min-width:767px){
	.guest-login{
	    border-right: 1px solid #2b313f70;
	}	
}

</style>
<div class="no-bottom no-top">
  
<section aria-label="section" class="section_mt myAccount"> 
    <div class="container">
      <div class="breadcrumb">
        <div class="container-fluid">
          <div class="breadcrumb-inner">
            <ul class="bread-crumbs-pdp list-inline list-unstyled d-flex">
              <li><a href="{{ url('/') }}">{{ __('staticwords.Home') }}</a></li>
              <li class='active'>{{ __('staticwords.Guest Checkout') }}</li>
            </ul>
          </div>
        </div>
      </div>

<div class="body-content">
  <div class="container">
	<div class="checkout-box">
		<div class="panel-group checkout-steps" id="accordion">
		    <div class="panel panel-default checkout-step-01">


	    <div id="collapseOne" class="panel-collapse collapse in show">

		<!-- panel-body  -->
	    <div class="panel-body py-3 pe-3 rounded shadow padding-20">
			<div class="row">		

				<!-- guest-login -->			
				<div class="col-md-6 col-sm-5 guest-login ps-sm-4 pe-sm-5 p-2">
					<!-- form Add -->
					<form id='guest_form' class="" role="form" method="POST"  action="{{ route('ref.guest.register') }}" autocomplete="off">
						
                        {{csrf_field()}}
                        <div class="row">
                            <!-- create a new account -->
                            <div class="col-12 create-new-account">
                                <h4 class="checkout-subtitle">{{ __('staticwords.CheckoutasGuest') }}</h4>
                                <div class="form-group mt-2">
                                    <label class="info-title" for="name">{{ __('staticwords.Name') }} <span class="text-danger">*</span></label>
                                    <input required name="name" type="text" value="{{ old('name') }}"
                                        class="form-control unicase-form-control text-input{{ $errors->has('name') ? ' is-invalid' : '' }}"  placeholder="{{ __('staticwords.PleaseEnterName') }}" id="name"/>
                                </div>

                                <div class="form-group mt-2">
                                    <label class="info-title" for="email">{{ __('staticwords.eaddress') }} <span class="text-danger">*</span></label>
                                    <input required type="email" class="form-control unicase-form-control text-input"  placeholder="{{ __('staticwords.PleaseEnterEmail') }}" id="email_guest" name="email_guest" required>

                                    <!-- <a href="" class="forgot-password d-flex justify-content-end"></a> -->
                                </div>
                           
                                <div class="spacer-half"></div>

                             </div>                       

                          
                            <div class="col-md-12">
                               <button type='submit' value='Submit' class="btn-golden btn-mobile login-submit-btn btn btn-main color-2">{{ __('staticwords.ContinueAsGuest') }}</button>
                               
                            </div>

                        </div>
                    </form>
                    <hr class="d-md-none d-block">
				</div>
				
				<!-- guest-login -->

				<!-- already-registered-login -->
				<div class=" col-sm-6 already-registered-login ps-sm-5 pe-sm-4 p-2">
					<h4 class="checkout-subtitle">{{ __('staticwords.Alreadyregistered') }}</h4>
					<!-- <p class="text title-tag-line mb-0">{{ __('staticwords.Pleaseloginbelow') }}:</p> -->
					    <form id="loginform" role="form" class="" method="post" action="{{ route('ref.cart.login') }}">
                        @csrf
						<div class="form-group mt-2">
					    <label class="info-title">{{ __('staticwords.eaddress') }} <span class="text-danger">*</span></label>
					    <input type='email' value="{{ old('email') }}" required autofocus name='email' id='email' class="nomarginbottom form-control unicase-form-control text-input {{ $errors->has('email') ? ' is-invalid' : '' }}" placeholder="{{ __('staticwords.eaddress') }}">
					  
					  </div>
					  <div class="form-group mt-2">
					    <label class="info-title">{{ __('staticwords.Password') }} <span class="text-danger">*</span></label>
					    
					    <input type='password' name='password' id='password' required class="nomarginbottom {{ $errors->has('password') ? ' is-invalid' : '' }} form-control unicase-form-control text-input nomarginbottom" placeholder="{{ __('staticwords.EnterPassword') }}">
					    
                                @if ($errors->has('password'))
								<span class="invalid-feedback position-absolute d-inline-block" role="alert">
									<strong>{{ $errors->first('password') }}</strong>
								</span>
								@endif

								@if ($errors->has('email'))
						<span class="invalid-feedback login-error-position d-inline-block" role="alert">
							<strong>{{ $errors->first('email') }}</strong>
						</span>
						@endif
					    <a href="{{ route('password.request') }}" class="forgot-password d-flex justify-content-end">{{ __('staticwords.ForgotYourPassword') }}</a>
					  </div>
					  <div class="spacer-half"></div>
					  <button type='submit' value='Submit' class="btn-golden btn-mobile login-submit-btn btn btn-main color-2">{{__('staticwords.Login')}}</button>
					</form>
				</div>	
				<!-- already-registered-login -->		
             </div>	
			<!-- extra add -->
			<hr>
			    <div class="container">
				    <div class="row">
                    
						<div class="col-12 text-center">
                           <h4 class="checkout-subtitle outer-top-vs">{{ __('staticwords.Registerandsavetime') }}</h4>
					      <p class="text title-tag-line mb-0">{{ __('staticwords.Registerwithusforfutureconvenience') }} : <span><a href="{{ route('register') }}">{{__('staticwords.Register')}}</a></span></p>
					
							<!-- <ul class="text instruction inner-bottom-30 text-left">
								<li class="save-time-reg"><i class="fa fa-hand-o-right" aria-hidden="true"></i> {{ __('staticwords.Fastandeasycheckout') }}</li>
								<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> {{ __('staticwords.Easyaccesstoyourorderhistoryandstatus') }}</li>
							</ul> -->
						<!-- <button type='submit' value='Submit' class="btn-golden btn-mobile login-submit-btn btn btn-main color-2">{{ __('staticwords.Continue') }}</button> -->
						</div>
                      
					</div>
				</div>
			<!-- extra end -->		
		</div>

        <!-- panel-body  -->

	    </div><!-- row -->
       </div>
	  </div>
	 </div>
    </div>
   </div>
  </div>
 </section>
 </div>
</div>
<!-- content close -->
@endsection
@section('script')

<script>
    $("#loginform").validate({
        errorClass: "invalid-error-login form-error",
        errorElement: 'span',
        rules: {
            email: {
                required: true,
            },
            password: {
                required: true,
            },
        },
        messages: {
            email: {
                required: "{{ __('staticwords.Enteryouremailaddress') }}",
                email: "{{ __('staticwords.PleaseEnterAvalidEmailAddress') }}",
            },
            password: {
                required: "{{ __('staticwords.Enteryourpassword') }}",
            },
        }
    });
</script>
<script>
    $("#guest_form").validate({
        ignore: ".ignore",
        errorClass: "invalid-error-login form-error",
        errorElement: 'span',
        rules: {
            name: {
                required: true,
                maxlength: 255,
            },
            email_guest: {
                required: true,
                email: true,
                maxlength: 255,
                remote: {
                    url: "checkguestusers",
                    type: "post",
                    data: {
                        _token: function() {
                            return "{{csrf_token()}}"
                        },
                    }
                }
            },
            /*eula: {
                required: true,
            }, */
        },
            
        messages: {
            name: {
                required: "{{ __('staticwords.yournameisrequired') }}",
                maxlength: "{{ __('staticwords.255char') }}",
            },
            email_guest: {
                required: "{{ __('staticwords.Emailisrequired') }}",
                email: "{{ __('staticwords.validemailaddress') }}",
                maxlength: "{{ __('staticwords.255charemail') }}",
                remote: "{{ __('staticwords.This email already have account with artiner') }}"
            },
           
            /*eula: {
                required: "{{ __('staticwords.Please accept the terms and condition') }}",
            },*/
           
        },
    });
</script>
@endsection