@extends('layouts.auth')

@section('content')
<style type="text/css">
    .form-group.has-float-label.mb-4 {
      float: left;
      width: 48%;
    }
    .margin_righ_2_p{margin-right: 2% !important;}

</style>
@if(isset($_GET['plan']) && !empty($_GET['plan']))
   @php
      $plan = \Illuminate\Support\Facades\Crypt::decrypt( $_GET['plan'] );
      $data = \App\Models\Plan::find($plan);
      if( !$data ) {
        $data = null;
      }
   @endphp
@else
  @php
  $data = null;

  @endphp
@endif
<div class="container">
    <div class="row h-100">
        <div class="col-12 col-md-10 mx-auto my-auto">
            <div class="card auth-card">
                <div class="position-relative image-side ">
                   <!--  <p class=" text-white h2">Eaterli.com | online food ordering solution</p>
                    <p class="white mb-0">
                        Please use this form to register.
                    </p> -->
                </div>
                <div class="form-side" id="form_fl">
                    <a href="{{ secure_url('/register') }}">
                        <span class="logo-single"></span>
                    </a>
                    <h6 class="mb-4">{{ __('Register') }}  
                    @if(!empty($data)) with {{$data->title}}
                             {{ $data->amount}} $ / {{ $data->duration}} 
                      
                   @endif
                 </h6>

                    @if(session()->has('message'))
                    <div class="row">
					    <div class="text-success text-center" style="margin-bottom: 20px;width: 100%;font-size: 15px;">
					        {{ session()->get('message') }}
					    </div>
                    </div>
					@endif
                    
                    <style>
                        .red-error-color { margin: 0; padding: 0; list-style: none; color: #dc3545; } .form-control.error { border-color: #dc3545; } .password-messages .red-error-color li.active { color: green; }
                        ul.red-error-color li.active::before {
                            content: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMjhhNzQ1IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMC42IDAuNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMC40NjggMC4xOGEwLjAyNSAwLjAyNSAwIDAgMCAtMC4wMzUgMGwtMC4xODYgMC4xODYgLTAuMDc4IC0wLjA3OUEwLjAyNSAwLjAyNSAwIDEgMCAwLjEzMiAwLjMyNWwwLjA5NiAwLjA5NmEwLjAyNSAwLjAyNSAwIDAgMCAwLjAzNSAwbDAuMjA0IC0wLjIwNGEwLjAyNSAwLjAyNSAwIDAgMCAwIC0wLjAzNyIvPjwvc3ZnPg==") !important;
                        }

                        ul.red-error-color li::before {
                            content: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZGMzNTQ1IiB3aWR0aD0iMTVweCIgaGVpZ2h0PSIxNXB4IiB2aWV3Qm94PSIwIDAgMC40NSAwLjQ1IiBpZD0iY3Jvc3MiIGRhdGEtbmFtZT0iRmxhdCBDb2xvciIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBjbGFzcz0iaWNvbiBmbGF0LWNvbG9yIj48cGF0aCBpZD0icHJpbWFyeSIgZD0iTTAuMjUyIDAuMjI1IDAuMzcgMC4xMDZBMC4wMTkgMC4wMTkgMCAxIDAgMC4zNDQgMC4wOEwwLjIyNSAwLjE5OCAwLjEwNiAwLjA4YTAuMDE5IDAuMDE5IDAgMCAwIC0wLjAyNyAwLjAyN0wwLjE5OCAwLjIyNSAwLjA4IDAuMzQ0YTAuMDE5IDAuMDE5IDAgMCAwIDAgMC4wMjcgMC4wMTkgMC4wMTkgMCAwIDAgMC4wMjcgMEwwLjIyNSAwLjI1MmwwLjExOCAwLjExOGEwLjAxOSAwLjAxOSAwIDAgMCAwLjAyNyAwIDAuMDE5IDAuMDE5IDAgMCAwIDAgLTAuMDI3WiIgc3R5bGU9ImZpbGw6IHJnYigyMjAsIDUzLCA2OSk7Ii8+PC9zdmc+");
                        }
                    </style>


                    <form id="registration" method="POST" action="{{ secure_url('register') }}">
                        @csrf
                        <div class="row">
                            <label for="first_name" class="margin_righ_2_p form-group has-float-label mb-4">
                                <input id="first_name" class="form-control @error('first_name') is-invalid @enderror" name="first_name" value="{{ old('first_name') }}" required autocomplete="first_name" autofocus />
                                <span>{{ __('First Name')  }}</span>

                                @error('first_name')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </label>
                            <label for="last_name" class="form-group has-float-label mb-4">
                                <input id="last_name" class="form-control @error('last_name') is-invalid @enderror" name="last_name" value="{{ old('last_name') }}" required autocomplete="last_name" autofocus />
                                <span>{{ __('Last Name') }}</span>

                                @error('last_name')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </label>
                        </div>
                        <div class="row">
                            <label for="business_name" class="margin_righ_2_p form-group has-float-label mb-4">
                                <input id="business_name" class="form-control @error('business_name') is-invalid @enderror" name="business_name" value="{{ old('business_name') }}" required autocomplete="business_name" autofocus />
                                <span>{{ __('Business Name') }}</span>

                                @error('business_name')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </label>
                            <label for="email" class="form-group has-float-label mb-4">
                                <input id="email" class="form-control @error('email') is-invalid @enderror" type="email"  name="email" value="{{ old('email') }}" required autocomplete="email" />
                                <span>{{ __('Email Address') }}</span>

                                @error('email')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </label>
                        </div>

                        <div class="row">
                            <label for="business_domain" style="width: 98%" class="margin_righ_2_p form-group has-float-label mb-4">
                                <input id="business_domain" class="form-control @error('business_domain') is-invalid @enderror" name="business_domain" value="{{ old('business_domain') }}" pattern="[a-z]{1,15}" title="Business domain should only contain lowercase letters with no space. e.g. kfc" required autocomplete="business_domain" onkeypress="return /[0-9a-zA-Z]/i.test(event.key)" autofocus />
                                <span>
                                    {{ __('Business username') }} 
                                    <span id="business-username-tooltip" data-toggle="tooltip" data-placement="right" title="" data-original-title="This will be used for your account address.  (ex.businessusername.eaterli.com) The username is typically your business name.">
                                        <i class="simple-icon-question"></i>
                                    </span>
                                </span>
                        
                                                <!-- <img id="_divLoading" style="display: none; height: 29px; width: 29px;margin-top: -14%;margin-left: 91%;" src="https://peergroup.network/uploads/images/Loading.gif"> -->
                                            

                                <div class="clearfix spinner-main" style="position: absolute;left: auto;right: 20px;height: 100%;width: 100%;top: 0px;bottom: 0px;display:none;justify-content: flex-end;align-items: center;    ">
                                <div class="spinner-border spinner-border-sm float-right" role="status">
                                    <span class="sr-only">Loading...</span>
                                </div>
                                </div>

                                @error('business_domain')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                                <div class="username-messages"></div>
                            </label>
                        </div>
                    
                        <div class="row">
                            <label for="password" class="margin_righ_2_p form-group has-float-label mb-4">
                                <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="new-password" />
                                <span>{{ __('Password') }}</span>                            
                            </label>
                            
                            <label for="password-confirm" class=" form-group has-float-label mb-4">
                                <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required autocomplete="new-password">
                                <span>{{ __('Confirm Password') }}</span>
                            </label>
                        

                            <div class="password-wrapper">
                                <div class="clearfix spinner-main-2" style="position: absolute;left: auto;right: 20px;height: 100%;width: 100%;top: 0px;bottom: 0px;display:none;justify-content: flex-end;align-items: center;    ">
                                    <div class="spinner-border spinner-border-sm float-right" role="status">
                                        <span class="sr-only">Loading...</span>
                                    </div>
                                </div>
                                
                                <div class="password-messages" style="display:none;">
                                    <p>Password must meet the following requirements:</p> 
                                    <ul class="red-error-color">
                                        <li class="confirmed">The password confirmation does not match.</li>
                                        <li class="min-length">The password must be at least 8 characters.</li>
                                        <li class="number">The password must contain at least one number.</li>
                                        <li class="letter">The password must contain at least one letter.</li>
                                        <li class="symbol">The password must contain at least one symbol.</li>
                                        <li class="upper-and-lower">The password must contain at least one uppercase and one lowercase letter.</li>
                                    </ul>
                                </div>
                            </div>
                            @if(!empty($data))  
                                <input type="hidden" name="plan" value="{{ \Illuminate\Support\Facades\Crypt::encrypt( $data->id ) }}">
                            @endif
                        </div>
                        <div class="row">
                            <div class="form-check mb-4">
                                <input class="form-check-input" type="checkbox" id="policy" required>

                                <label class="form-check-label" for="policy">
                                    I agree to the <a target="_blank" href="https://eaterli.com/en/privacy-policy" class="text-primary">Privacy Policy</a> and understand that I will receive SMS notifications. I can disable SMS from my profile at any time.
                                </label>
                            </div>
                        </div>
                        <div class="d-flex justify-content-between align-items-center" style="width:100%;">
                            <p class="text-secondary m-0">
                                If you are a member, please <a href="{{ route('login') }}" class="text-primary">login</a>.
                            </p>
                            <input id="redirect-uri" type="hidden" class="redirect-uri" name="redirect_uri" value="{{ route('check.username') }}" />
                            <input id="password-uri" type="hidden" class="password-uri" name="password_uri" value="{{ route('check.password') }}" />
                         @if(!empty($data) && $data->amount > 0)
                            <button id="saveButton" class="btn btn-primary btn-lg btn-shadow disabled" disabled="true" type="submit">{{ __('Next') }}</button>
                         @else   
                            <button id="saveButton" class="btn btn-primary btn-lg btn-shadow disabled" disabled="true" type="submit">{{ __('Sign Up') }}</button>
                         @endif   
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection