@extends('layouts.app')
@section('content')
    <div class="container">
        <section class="container">
            <h1>New Customers Register or Existing Customers Sign In</h1>
            <div class="row" style="margin: 0 0 30px 0;">
                <div class="bordered col-md-6">
                    <h3><i class="glyphicon glyphicon-play text-info"></i> <strong>NEW</strong> customers can sign in by
                        completing the information below</h3>
                    <form method="POST" action="{{ route('register') }}">
                        @csrf
                        <input id="coupon" name="coupon" type="hidden" value="">
                        <input id="fbid" name="fbid" type="hidden">
                        <div class="form-group">
                            <label for="name">First name</label>
                            <input id="name" type="text" class="form-control @error('name') is-invalid @enderror"
                                name="name" value="{{ old('name') }}" required autocomplete="name" autofocus
                                placeholder="First name">
                            @error('name')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label for="last_name">Last name</label>
                            <input id="last_name" name="last_name" type="text" placeholder="Last name" value="{{old('last_name')}}"
                                class="form-control required propercase">
                        </div>
                        <div class="form-group">
                            <label for="email">Email address</label>
                            <input id="email" type="text" class="form-control @error('email') is-invalid @enderror"
                                name="email" value="{{ old('email') }}" required autocomplete="new-email"
                                placeholder="example@domain.com">
                            @error('email')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label for="email-confirm">Confirm Email address</label>
                            <input id="email-confirm" type="text" name="email_confirmation" required
                                autocomplete="new-email" class="form-control required email">
                        </div>
                        <div class="form-group">
                            <label for="password">Password to login</label>
                            <input id="password" type="password"
                                class="form-control @error('password') is-invalid @enderror" name="password" required
                                autocomplete="new-password">
                            @error('password')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label for="password-confirm">Confirm password</label>
                            <input id="password-confirm" type="password" class="form-control" name="password_confirmation"
                                required autocomplete="new-password">
                        </div>
                        <button type="submit" id="registerButton" class="btn btn-social btn-info">
                            <i class="fa fa-sign-in"></i>New Customer Sign In
                        </button>
                    </form>
                </div>

                <div class="bordered col-md-5 col-md-offset-1">
                    <h3><i class="glyphicon glyphicon-play text-success"></i> Or, <strong>EXISTING</strong> customers can
                        sign in using their email address and password</h3>
                    <form method="POST" action="{{ route('login') }}">
                        @csrf
                        <input id="pgref" name="pgref" type="hidden" value="">
                        <div class="form-group">
                            <label for="email">Email address</label>
                            <input id="email" name="email" type="email" class="form-control"
                                placeholder="example@domain.com" value="">
                            @error('email')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label for="password">Password</label>
                            <input id="password" name="password" class="form-control" type="password">
                            @error('password')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="remember" id="remember"
                                {{ old('remember') ? 'checked' : '' }}>

                            <label class="form-check-label" for="remember">
                                {{ __('Remember Me') }}
                            </label>
                        </div>
                        <button type="submit" id="loginButton" class="btn btn-social btn-success">
                            <i class="fa fa-sign-in"></i>Sign In with email and password
                        </button>
                        <br>
                        <br>
                        @if (Route::has('password.request'))
                            <a class="btn btn-link" href="{{ route('password.request') }}">
                                {{ __('Lost Password?') }}
                            </a>
                        @endif
                    </form>
                </div>
                <div style="height: 30px;"></div>
            </div>
        </section>
    </div>
@endsection