@extends('layouts.auth',["title"=>"Register", "state"=>1, "showSteps"=> 1])
@section('content')
<div class="w-full mt-6 lg:mt-12">
    <div class="w-full px-8">
        <div class="title">
            <div class="create-account3">Create Account</div>
        </div>
        <form class="frame-167" id="registerform" method="post" action="/register">
            @if(count($errors) > 0 )

            <ul class="" style="list-style: none;">
                @foreach($errors->all() as $error)
                <li>
                    <div class="p-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400" role="alert">
                        <span class="font-medium">{{$error}}</span>
                    </div>
                </li>
                @endforeach
            </ul>

            @endif
            @csrf
            <div class="mb-2 w-full">
                <label for="firstName" class="block mb-2 lable dark:text-white">First Name</label>
                <input type="text" id="firstName" name="firstName" value="{{old('firstName')}}" placeholder="Enter your first name" class="block w-full p-4 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 text-base focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
            </div>
            <div class="mb-2 w-full">
                <label for="lastName" class="block mb-2 lable dark:text-white">Last Name</label>
                <input type="text" id="lastName" name="lastName" value="{{old('lastName')}}" placeholder="Enter your last name" class="block w-full p-4 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 text-base focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
            </div>
            <div class="mb-2 w-full">
                <label for="email" class="block mb-2 lable dark:text-white">Email</label>
                <input type="email" id="email" name="email" value="{{old('email')}}" placeholder="info@securepoint.com.ng" class="block w-full p-4 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 text-base focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
            </div>
            <div class="mb-2 w-full">
                <label for="phone" class="block mb-2 lable dark:text-white">Phone Number</label>
                <input type="text" id="phone" name="phone" value="{{old('phone')}}" placeholder="+2348012345678" class="block w-full p-4 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 text-base focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
            </div>
            <div class="mb-2 w-full">
                <label for="password" class="block mb-2 lable dark:text-white">Create Password</label>
                <input type="password" id="password" name="password" value="{{old('password')}}" placeholder="Enter an 8-20 character password " class="block w-full p-4 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 text-base focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
            </div>
            <p class="mb-9 ">includes a mix of uppercase letters, lowercase letters, numbers, and special characters</p>

        </form>
    </div>
    <div class="mx-8">

        By clicking Sign Up, you agree to our, <a href="#" class="text-yellow-500"> Privacy Policy </a> and <a href="#" class="text-yellow-500">Cookies Policy. </a>You may receive SMS notifications from us and can opt out at any time.

    </div>
    <div class="arrows mt-8 px-8">
        <button type="button" onclick="submiteForm()" class="button">
            <div class="next">Next</div>
            <img class="arrow-right" src="/icons/Arrow-right.png" />
        </button>
    </div>
</div>
<script>
    const submiteForm = () => {
        document.getElementById("registerform").submit();
    }
</script>
@stop