@extends('layouts.v2.frontend')

@section('content')
<div class="login-section pt-2">
  <div class="row">
      <div class="col-xl-6 col-lg-6">
          <div class="left-img shine-effect">
              <img src="{{url('v2/images/contact-img.png')}}" alt="">
          </div>
      </div>
      <div class="col-xl-6 col-lg-6">
          <div class="login-form-area mt-2">
              <h5>Welcome</h5>
              <div class="row">
                @if(session('error'))
                      <div class="alert alert-danger" role="alert">
                          {{ session('error') }}
                      </div>
                @endif
                <form id="login-fm"  method="POST" action="{{ route('login') }}">
                  @csrf
                  <div class="mb-3">
                    <label for="email" >Username</label>
                    <input id="email" type="email" oninput="validateEmail();"  class=" @error('email') is-invalid @enderror" name="email" placeholder="Enter your email" value="{{ old('email') }}" required autocomplete="email" autofocus>
                    @error('email')
                        <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                    @enderror
                  </div>
                  <div class="mb-3">
                    <label for="password" >Password</label>
                    <input id="password" type="password" class=" @error('password') is-invalid @enderror" name="password" placeholder="Enter your password" required autocomplete="current-password">
                    @error('password')
                        <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                    @enderror
                  </div>

                  <div class="form-group form-check remember-form">
                    <input type="checkbox"  class="form-check-input" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>
                    <label class="form-check-label" for="remember">Remember me</label>
                  </div>

                    <div class="remember-forgot-button"></div>

                    <button type="submit" class="tbn form-control login-button" id="loginButton" data-form-id="login-fm">{{ __('Sign In') }}</button>
                    @if (Route::has('password.request'))
                      <div class="text-center mt-3">
                        <a  class="float-right"  href="{{ route('password.request') }}">
                            {{ __('Forgot your password?') }}
                        </a>
                      </div>
                    @endif 
                    
                    @if (Route::has('register'))
                      <div class="text-center mt-2">
                            <p>Don't have an account?&nbsp;&nbsp;   <a href="{{ route('register') }}">  Sign Up</a></p>
                      </div>
                    @endif
                </form>
                <!--Socail Login --START--->
                <div style="display: flex; align-items: center; width: 100%;">
                  <div style="flex: 1; height: 1px; background-color: #ccc;"></div>
                  <span style="padding: 0 8px; font-size: 1rem; color: #666;">OR</span>
                  <div style="flex: 1; height: 1px; background-color: #ccc;"></div>
                </div>
                  <div class="row">
                    <div class="text-center google_login_btn">
                      <a href="{{ route('social.redirect', ['provider' => 'google']) }}" class="google-sign-in">
                          <img src="{{ asset('frontend/images/Group-28.svg') }}" alt="Google Icon" class="google-icon">
                          Sign in with Google
                      </a>
                    </div>
                    <div class="text-center google_login_btn">
                      <a href="{{ route('social.redirect', ['provider' => 'linkedin']) }}" class="google-sign-in">
                          <img src="{{ asset('frontend/images/linkedin.ico') }}" alt="Google Icon" class="google-icon" width="22">
                          Sign in with LinkedIn
                      </a>
                    </div>
                  </div>
                <!--Socail Login --END--->
              </div>
          </div>
      </div>
  </div>
</div>
@endsection
@section('page-js')
<script src="{{ url('frontend/assets/js/common.js') }}"></script>
<script src="{{ url('v2/js/load.js') }}?v={{ time() }}"></script>
@endsection