@extends('layouts.theme.auth')
@section('content')
    <div class="layout">
        <!-- Start of Sign Up -->
        <div class="main order-md-2">
            <div class="start">
                <div class="container">
                    <div class="col-md-12">
                        <div class="content">
							<h1> LFC App Support</h1>
							<x-app-logo class="w-20 h-20 fill-current text-gray-500" />
                            <h1>Sign Up</h1>
                            {{-- <div class="third-party">
                                <button class="btn item bg-blue">
                                    <i class="material-icons">pages</i>
                                </button>
                                <button class="btn item bg-teal">
                                    <i class="material-icons">party_mode</i>
                                </button>
                                <button class="btn item bg-purple">
                                    <i class="material-icons">whatshot</i>
                                </button>
                            </div> --}}
                            {{-- <p>or use your email for registration:</p> --}}
                            <x-input-error :messages="$errors->all()"/>

                            <form class="signup" action="{{ route("register") }}" method="POST">@csrf
                                <div class="form-parent">
                                    <div class="form-group">
                                        <input type="text" name="name" value="{{ old('name') }}" id="inputName" class="form-control" placeholder="Username"
                                            required
                                        <button class="btn icon"><i class="material-icons">person_outline</i></button>
                                    </div>

                                    <div class="form-group">
                                        <input type="email" name="email" value="{{ old('email') }}" id="inputEmail" class="form-control"
                                            placeholder="Email Address" required>
                                        <button class="btn icon"><i class="material-icons">mail_outline</i></button>
                                    </div>
                                </div>
                                <div class="">
                                    <div class="form-group">
                                        <input type="text" name="unit_id_card_num" value="{{ old('unit_id_card_num') }}" id="unit_id_card_num" class="form-control" placeholder="Unit Id Card No."
                                            required>
                                        <button class="btn icon"><i class="material-icons">person_outline</i></button>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <input type="password" name="password" value="{{ old('password') }}" id="inputPassword" class="form-control" placeholder="Password"
                                        required>
                                    <button class="btn icon"><i class="material-icons">lock_outline</i></button>
                                </div>
                                <div class="form-group">
                                    <input type="password" name="password_confirmation" id="inputPassword" class="form-control" placeholder="Confirm Password"
                                        required>
                                    <button class="btn icon"><i class="material-icons">lock_outline</i></button>
                                </div>
                                <button type="submit" class="btn button">Sign Up</button>
                                <div class="callout">
                                    <span>Already a member? <a href="{{ route('login') }}">Sign In</a></span>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- End of Sign Up -->
        <!-- Start of Sidebar -->
        <div class="aside order-md-1">
            <div class="container">
                <div class="col-md-12">
                    <div class="preference">
                        <h2>Welcome Back!</h2>
                        <p>To keep connected with your friends please login with your personal info.</p>
                        <a href="{{ route("login") }}" class="btn button">Sign In</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- End of Sidebar -->
    </div> <!-- Layout -->
@endsection