@extends('layouts.plains')

@section('stylesheets')
    @parent
    <link rel="stylesheet" href="/css/login.css">
@endsection

@section('content')
    <div class="auth-login-wrapper">
        <h3 style="padding-bottom: 20px;">Login to continue</h3>
          <div class="">

          <main class="main">
            <p class="mb-4">Don't have an account? <a href="{{ route('register') }}" class="text-primary">Sign Up</a></p>
            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
            <form class="login-form" action="{{ route('login') }}" method="POST">
                @csrf
              <div class="row">

                <div class="col-sm-12 mb-2">
                  <div class="form-group">
                    <label for="email">Email Address</label>
                    <input type="email" name="email" class="login-input login-form-control {{ $errors->has('email') ? 'input--invalid' : '' }}" id="email" placeholder="Enter email address" value="{{ old('email') }}" autofocus>
                    @if ($errors->has('email'))
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $errors->first('email') }}</strong>
                        </span>
                    @endif
                  </div>
                </div>

                <div class="col-sm-12 mb-2">
                  <div class="form-group">
                    <label for="password">Password</label>
                    <input type="password" name="password" class="login-input login-form-control {{ $errors->has('password') ? 'input--invalid' : '' }}" id="password" placeholder="Enter password">
                    @if ($errors->has('password'))
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $errors->first('password') }}</strong>
                        </span>
                    @endif
                  </div>
                </div>

                <div class="col-sm-12 mb-2">
                  <button type="submit" name="submit" class="login-btn button-primary w-100">Log in</button>
                </div>

                <div class="col-sm-12 mb-2 text-center position-relative pt-2 pb-3 px-0">
                  <a href="/password/reset" style="font-size: 1rem;">Reset Password</a>
                </div>

                <div class="col-sm-12 mb-2 text-center position-relative pt-2 pb-3 px-0">
                  <hr class="mw-100 position-absolute z-index-100" style="width:calc(100% - 30px);margin-left:15px;">
                  <small class="px-3 background--light position-relative z-index-105">Or sign in with:</small>
                </div>

                <div class="col-sm-4 mb-2 login-btn-brand-container" style="padding-left: 15px;">
                  <a href="{{ route('socialLogin', ['provider' => 'facebook']) }}" class="login-btn login-btn-brand login-btn-facebook w-100" style="background-color: #3f5d94"><i class="fa fa-facebook mr-1"></i> Facebook</a>
                </div>

                <div class="col-sm-4 mb-2 login-btn-brand-container">
                  <a href="{{ route('socialLogin', ['provider' => 'twitter']) }}" class="login-btn login-btn-brand login-btn-twitter w-100"><i class="fa fa-facebook mr-1"></i> Twitter</a>
                </div>

                <div class="col-sm-4 mb-2 login-btn-brand-container" style="padding-right: 15px;">
                  <a href="{{ route('socialLogin', ['provider' => 'google']) }}" class="login-btn login-btn-brand login-btn-google-white border w-100">
                    <figure class="d-inline-block mr-1 mb-0">
                      <svg viewBox="0 0 48 48" width="16" height="16" class="google-icon display-block" data-reactid="93">
                        <defs data-reactid="94">
                          <clipPath id="clip-path" data-reactid="95">
                            <path fill="none" d="M44.5,20H24v8.5H35.8C34.7,33.9,30.1,37,24,37a13,13,0,0,1,0-26,12.72,12.72,0,0,1,8.1,2.9l6.4-6.4A22,22,0,1,0,24,46c11,0,21-8,21-22A18.25,18.25,0,0,0,44.5,20Z" data-reactid="96"></path>
                          </clipPath>
                        </defs>
                        <g clip-path="url(#clip-path)" data-reactid="97">
                          <path style="fill:#fbbc05;" d="M0,37V11L17,24Z" data-reactid="98"></path>
                        </g>
                        <g clip-path="url(#clip-path)" data-reactid="99">
                          <path style="fill:#ea4335;" d="M0,11,17,24l7-6.1L48,14V0H0Z" data-reactid="100"></path>
                        </g>
                        <g clip-path="url(#clip-path)" data-reactid="101">
                          <path style="fill:#34a853;" d="M0,37,30,14l7.9,1L48,0V48H0Z" data-reactid="102"></path>
                        </g>
                        <g clip-path="url(#clip-path)" data-reactid="103">
                          <path style="fill:#4285f4;" d="M48,48,17,24l-4-3L48,11Z" data-reactid="104"></path>
                        </g>
                      </svg>
                    </figure>
                    Google
                  </a>
                </div>
              </div>
            </form>
          </main>

          <footer class="mt-6">
            <small>&copy; 2022 - Cravvings. All rights reserved.</small>
          </footer>
        </div>
    </div>
@endsection

@section('javascript')
    <script src="/js/side.js"></script>
@endsection