@extends('layouts.public-base', ['title' => 'Signup', 'contentwrapper' => ''])
@section('content')
    <section class="signup-page py-80 mt-5 position-relative">
        <div class="container">
            <div class="sign-up-left">
                <div class="row">
                    <div class="col-xl-6 col-sm-6 offset-md-3">

                        <div class="signup-price gz-card-sign py-3">
                           <h4 class="text-center signup-title">Create your affiliate account</h4>
                           <p class="text-center">All the Commissions earned will be 10% of the monthly bill for the customer that you have reffered to Graphics Zoo for lifetime.</p>
                           @include('gz-pages.inc.flashMessages')
                           <form action="{{ getRoute('affiliate-signup') }}" method="post" role="form" id="affiliate_form">
                              @csrf
                              <input type="hidden" name="recaptcha" id="recaptcha">
                              <div class="input-box mt-4">
                                 <div class="custm-form-control2 d-flex align-items-center">
                                    <label for="input-one" class="signup-formlbl">First Name *</label>
                                    <input type="text" name="first_name" id="fname" value="{{ old('first_name') }}" class="form-control @error('first_name') is-invalid @enderror">
                                 </div>
                                 @error('first_name')
                                  <span class="invalid-feedback" role="alert">
                                      <strong>{{ $message }}</strong>
                                  </span>
                                 @enderror
                              </div>
                              <div class="input-box">
                                 <div class="custm-form-control2 d-flex align-items-center">
                                    <label for="input-one" class="signup-formlbl">Last Name *</label>
                                    <input type="text" name="last_name" id="lname" value="{{ old('last_name') }}" class="form-control @error('last_name') is-invalid @enderror">
                                 </div>
                                 @error('last_name')
                                  <span class="invalid-feedback" role="alert">
                                      <strong>{{ $message }}</strong>
                                  </span>
                                 @enderror
                              </div>
                              <div class="input-box">
                                 <div class="custm-form-control2 d-flex align-items-center">
                                    <label for="input-one" class="signup-formlbl label-width">Email Address *</label>
                                    <input type="email" name="email" id="email" value="{{ old('email') }}" class="form-control @error('email') is-invalid @enderror">
                                 </div>
                                 @error('email')
                                    <span class="invalid-feedback" role="alert">
                                       <strong>{{ $message }}</strong>
                                    </span>
                                 @enderror
                              </div>  
                              <div class="input-box">
                                 <div class="custm-form-control2 d-flex align-items-center mb-3">
                                    <label for="password" class="signup-formlbl">Password *</label>
                                    <input type="password" name="password" id="password" class="form-control @error('password') is-invalid @enderror">
                                    <i class="bi bi-eye-slash" id="togglePassword"></i>
                                 </div>
                                 @error('password')
                                 <span class="invalid-feedback" role="alert">
                                     <strong>{{ $message }}</strong>
                                 </span>
                                 @enderror
                              </div>
                              <div class="complete-checkout mt-3">
                                 <button type="submit" class="complet_checkout_btn">Sign Up</button>
                              </div>
                           </form>
                           <p class="text-center mt-3 pr-check">By clicking "Create account". you agree to graphiczoo's Terms Of Service and Privacy Policy</p>
                           <p class="text-center pr-check">
                              If you are a current customer, you can sign up within your account. 
                           </p>
                        </div>
                     </div>
                </div>
            </div>
        </div>
    </section>
    @include('inc.logo-loader');
@endsection
@push('liveScript')
    <script type="text/javascript">
        const togglePassword = document.querySelector('#togglePassword');
        const password = document.querySelector('#password');
        togglePassword.addEventListener('click', function (e) {
        const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
        password.setAttribute('type', type);
        this.classList.toggle('bi-eye');
         });
       
    </script>
    <script src="{{ asset('assets/front/js/gz_signup.js?v='.time()) }}"></script>
    <script src="https://www.google.com/recaptcha/api.js?render={{ config('services.recaptcha.sitekey') }}"></script>
    <script>
        grecaptcha.ready(function() {
            grecaptcha.execute('{{ config('services.recaptcha.sitekey') }}', {action: 'contact'}).then(function(token) {
               if (token) {
                 document.getElementById('recaptcha').value = token;
               }
            });
        });
    </script>

@endpush