@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">
                <form name="loginForm" class="login100-form validate-form" method="POST" action="{{route('web.customer.login.post')}}" enctype="multipart/form-data" >
                    {{csrf_field()}}
                    <span class="login100-form-title mb-5">{{ __('translation.company.eizo') }} | {{ __('translation.login') }}</span>
                    <div class="wrap-input100 validate-input">
                        @if (app()->getLocale() == 'ar')
                            <input class="input100" type="email" id="formEmail" name="email" placeholder="يد إلكتروني" required />
                            <span class="focus-input100"></span>
                            <span class="symbol-input100">
                                <i class="fa fa-envelope" aria-hidden="true"></i>
                            </span>
                        @else
                            <input class="input100" type="email" id="formEmail" name="email" placeholder="Email" required />
                            <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>
                    <div class="wrap-input100 validate-input">
                        @if (app()->getLocale() == 'ar')
                            <input class="input100" type="password" id="formPassword" name="password" placeholder=" كلمة المرور " required>
                            <span class="focus-input100"></span>
                            <span class="symbol-input100">
                                <i class="fa fa-eye-slash" aria-hidden="true"></i>
                            </span>
                        @else
                            <input class="input100" type="password" id="formPassword" name="password" placeholder="Password" required>
                            <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>
                    <div class="container-login100-form-btn">
                        <button class="login100-form-btn" type="submit">
                        {{ __('translation.login') }}
                    </button>
                    <div class="container-login100-form-btn mt-4">
                        <a href="{{route('google.auth')}}"><button class="login100-form-btn" type="button">
                            <i class="fa-brands fa-google"></i>&nbsp;Continue with Google
                        </button></a>
                    </div>

    {{-- <div style="text-align:center;padding:20px">
    <a href="#"> <span class="txt1">{{ __('translation.forgetpassword') }}</span> </a>
    </div> --}}
    <div style="text-align:center;padding:20px">

    <p class="txt2">{{ __('translation.donthaveanaccount') }}<a href="{{route('web.customer.signup')}}"
    class="link-danger">{{ __('translation.signup') }}</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