@extends('frontend.layout.master')
@section('content')
<div class="container pt-5 pb-5">
    <div class="row pt-5 pb-5">
        <div class="col-md-6">
            <img src="https://wpstaging.a2zcreatorz.com/eizo/public/globalasset/images/LoginPopUpnew.png" alt="IMG">
        </div>
        <div class="col-md-6">
            
        
          @if ($message = Session::get('success'))
                <div class="alert alert-success">
                    <p>{{ $message }}</p>
                </div>
            @elseif ($message = Session::get('error'))
                <div class="alert alert-danger">
                    <p>{{ $message }}</p>
                </div>
            @endif
        
        <form class="login100-form validate-form" method="POST" action="{{ route('web.customer.signup') }}" enctype="multipart/form-data">
          {{csrf_field()}}
          <span class="login100-form-title mb-5">{{ __('translation.company.eizo') }} | {{__('translation.signup')}}</span>
          <!-- Name input -->
            <div data-mdb-input-init class="form-outline mb-4">
              @if (app()->getLocale() == 'ar')
                <input type="text" id="formName" name="name" class="input100" placeholder="براسم" />
                <span class="focus-input100"></span>
                <span class="symbol-input100">
                    <i class="fa fa-user" aria-hidden="true"></i>
                </span>
              @else
                <input type="text" id="formName" name="name" class="input100" placeholder="Name" />
                <span class="focus-input100"></span>
                <span class="symbol-input100">
                    <i class="fa fa-user" aria-hidden="true"></i>
                </span>
              @endif
              <span class="text-danger">{{ $errors->first('name') }}</span>
            </div>
          <!-- End Name input -->

          <!-- Phone input -->
            <div data-mdb-input-init class="form-outline mb-4">
              @if (app()->getLocale() == 'ar')
                <input type="text" id="formPhone" name="phone"  class="input100" placeholder="بررقم التليفون" />
                <span class="focus-input100"></span>
                <span class="symbol-input100">
                    <i class="fa fa-phone" aria-hidden="true"></i>
                </span>
              @else
                <input type="text" id="formPhone" name="phone" class="input100" placeholder="Phone Number" />
                <span class="focus-input100"></span>
                <span class="symbol-input100">
                    <i class="fa fa-phone" aria-hidden="true"></i>
                </span>
              @endif
              <span class="text-danger">{{ $errors->first('phone') }}</span>
            </div>
          <!-- End Phone input -->

          <!-- Email input -->
            <div data-mdb-input-init class="form-outline mb-4">
              @if (app()->getLocale() == 'ar')
                <input type="email" id="formEmail" name="email" class="input100" placeholder="يد إلكتروني" />
                <span class="focus-input100"></span>
                <span class="symbol-input100">
                    <i class="fa fa-envelope" aria-hidden="true"></i>
                </span>
              @else
                <input type="email" id="formEmail" name="email" class="input100" placeholder="Email" />
                <span class="focus-input100"></span>
                <span class="symbol-input100">
                    <i class="fa fa-envelope" aria-hidden="true"></i>
                </span>
              @endif
              <span class="text-danger">{{ $errors->first('email') }}</span>
            </div>
          <!-- End Email input -->

          <!-- Password input -->
          <div data-mdb-input-init class="form-outline mb-4">
              @if (app()->getLocale() == 'ar')
                <input type="password" id="formPassword" name="password"  class="input100" placeholder="كلمة المرور" />
                <span class="focus-input100"></span>
        <span class="symbol-input100">
            <i class="fa fa-eye-slash" aria-hidden="true"></i>
        </span>
              @else
                <input type="password" id="formPassword" name="password" class="input100" placeholder="Password" />
                <span class="focus-input100"></span>
        <span class="symbol-input100">
            <i class="fa fa-eye-slash" aria-hidden="true"></i>
        </span>
              @endif
              <span class="text-danger">{{ $errors->first('password') }}</span>
            </div>
          <!-- End Password input -->

          <div class="text-center mt-4 pt-2">
            <button  type="submit" data-mdb-button-init data-mdb-ripple-init class="login100-form-btn">{{__('translation.signup')}}</button>
             <a href="{{route('google.auth')}}"><button class="login100-form-btn mt-4" type="button">
                            <i class="fa-brands fa-google"></i>&nbsp;Continue with Google
                        </button></a>
            <p class="small fw-bold mt-2 pt-1 mb-0">{{__('translation.alreadyhaveanaccount')}} <a href="{{ route('web.customer.login') }}" class="link-danger">{{__('translation.login')}}</a></p>
          </div>

        </form>
      
            
            
        </div>
    </div>
</div>
@endsection
@push('custom-css')
<style>
    /* Login Page
*************************************/
.login100-form-title {
    font-size: 40px;
    color: #333;
    line-height: 1.2;
    text-align: center;
    width: 100%;
    display: block;
}
.input100 {
    font-family: Poppins-Medium;
    font-size: 15px;
    line-height: 1.5;
    color: #666;
    display: block;
    width: 100%;
    background: #e6e6e6;
    height: 50px;
    /*border-radius: 25px;*/
    padding: 0 30px 0 68px;
        outline: none;
    border: none;
}
.focus-input100 {
    display: block;
    position: absolute;
    /*border-radius: 25px;*/
    bottom: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    box-shadow: 0 0;
    color: #00308F;
}
.symbol-input100 {
    font-size: 15px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    position: relative;
    /*border-radius: 25px;*/
    bottom: 32px;
    left: 0;
    width: 100%;
    height: 100%;
    padding-left: 35px;
    pointer-events: none;
    color: #666;
    -webkit-transition: all .4s;
    -o-transition: all .4s;
    -moz-transition: all .4s;
    transition: all .4s;
}
.login100-form-btn {
    font-family: Montserrat-Bold;
    font-size: 15px;
    line-height: 1.5;
    color: #fff;
    text-transform: uppercase;
    width: 100%;
    height: 50px;
    /*border-radius: 25px;*/
    background: black;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 25px;
    -webkit-transition: all .4s;
    -o-transition: all .4s;
    -moz-transition: all .4s;
    transition: all .4s;
        outline: none !important;
    border: none;
}
form.login100-form.validate-form {
    /*border-radius: 10px;*/
    padding: 50px;
    box-shadow: 0px 0px 20px 0px rgb(0 0 0 / 12%), 0 6px 20px 0 rgb(0 0 0 / 11%);
}
.input100:focus+.focus-input100 {
    -webkit-animation: anim-shadow .5s ease-in-out forwards;
    animation: anim-shadow .5s ease-in-out forwards;
}
textarea:focus, input:focus {
    border-color: transparent !important;
}
.input100:focus+.focus-input100+.symbol-input100 {
    color: #00308F;
    padding-left: 28px;
}
.login100-form-btn:hover {
    background: #333;
    box-shadow: 0px 0px 20px 0px rgb(0 191 0 / 23%), 0 6px 20px 0 rgb(0 191 0 / 17%);
}
@keyframes  anim-shadow {
  100% {
    box-shadow: 0 0 70px 25px;
    opacity: 0;
}
}
</style>
@endpush
@push('custom-script')
@endpush