Elep

@extends('layouts.plains')

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

@media (max-width: 767px) {
        .d-flex.d-flex-min {
          display: block !important;
        }
      }

@media (min-width: 767px) {
        .b-owner {
          margin-left: 10px;
        }
      }
    </style>
@endsection

@section('load')

@endsection

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

<main class="main">
            <div class="d-flex d-flex-min">
              <p class="mb-1">Don't have an account? <a href="{{ route('register') }}" class="text-primary cta-text">Sign Up</a></p>
              <p class="mb-4 b-owner">Business Owner? <a href="https://place.cravvings.com/login" class="text-primary cta-text">Sign in here</a></p>
            </div>

<form class="login-form" action="{{ route('login') }}" method="POST">
                @csrf
              <div class="row">
                @isset($error)
                    <div class="alert-error">
                      {{ $error }}
                    </div>
                @endisset
                <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 id="email" placeholder="Enter email address" value="{{ $fields['email'] ?? '' }}" autofocus>
                    @if (isset($errorbag) && isset($errorbag['email']))
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $errorbag['email'][0] }}</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 (isset($errorbag) && isset($errorbag['password']))
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $errorbag['password'][0] }}</strong>
                        </span>
                    @endif
                  </div>
                </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="social-auths">
                  <div class="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="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="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>
              </div>
            </form>
          </main>

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