@extends('layouts.plains')

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

@section('load')

@endsection

@section('content')
<div class="auth-login-wrapper">
    <main class="main">
        <h3 style="padding-bottom: 20px;">Sign up to continue</h3>
        <p class="mb-4">Already have an account? <a href="{{ route('login') }}" class="text-primary">Log In</a></p>

        <form class="login-form" action="{{ route('register') }}" method="POST">
            @csrf
          <div class="row">
            {{-- @isset($error)
              <ul class="error-list">
                @foreach ($error as $error)
                  <li>{{ $error }}</li>
                @endforeach
              </ul>
            @endisset --}}
            <div class="col-sm-12 mb-2">
              <div class="form-group">
                <label for="username">Username</label>
                <input type="text" name="username" class="login-input login-form-control" id="username" placeholder="Choose a username" value="{{ $fields['username'] ?? '' }}" autofocus required>

                @if (isset($errorbag) && isset($errorbag['username']))
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $errorbag['username'][0] }}</strong>
                    </span>
                @endif
              </div>
            </div>

            <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'] ?? '' }}">
                @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">Create Password</label>
                <input type="password" name="password" class="login-input login-form-control" id="password" placeholder="8 characters or more">
                @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">
              <button type="submit" name="submit" class="login-btn button-primary w-100">Sign Up</button>
            </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 up with:</small>
            </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 class="col-sm-12">
              <small>By signing up, you agree to the <a href="/privacy">Terms of Service</a>.</small>
            </div>
          </div>
        </form>
      </main>

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

@endsection

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