@extends('layouts.plains')

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

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

        <form class="login-form" action="{{ route('test_register') }}" method="POST">
            @csrf
          <div class="row">

            <div class="col-sm-12 mb-2">
              <div class="form-group">
                <label for="name">Full Name</label>
                <input type="text" name="name" class="login-input login-form-control {{ $errors->has('name') ? 'input--invalid' : '' }}" id="name" placeholder="Enter name" value="{{ old('name') }}">

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

                @if ($errors->has('phone'))
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $errors->first('phone') }}</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 {{ $errors->has('email') ? 'input--invalid' : '' }}" id="email" placeholder="Enter email address" disabled="{{ $email ?? 'disabled'}}" value="{{ old('email') ?? $email }}">
                @if($email)
                  <input type="hidden" name="email" value="{{ $email }}">
                @endif
                @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="city">City</label>
                <input type="text" name="city" class="login-input login-form-control {{ $errors->has('city') ? 'input--invalid' : '' }}" id="city" placeholder="Enter city (Ikeja, Surulere)" value="{{ old('city') }}">

              </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 {{ $errors->has('password') ? 'input--invalid' : '' }}" id="password" placeholder="8 characters or more">
                @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">Sign Up</button>
            </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; 2022 - Cravvings. All rights reserved.</small>
      </footer>
    </div>

@endsection

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