@extends('frontendv2.layouts.frontend_design') 

@section('content')

<section class="w-full h-full">

    <div class=" bg-cultured1 px-8 sm:px-20  pt-12">
        <div class="bg-white w-full h-full">
            <div class=" ">
                <div class="flex">
                    <p class="text-lg capitalize cursor-pointer text-black text-gray1 cursor-pointer">
                        <a href="{{route('webhome')}}">Home</a>
                    </p>
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"
                        xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-gray1 mx-1 mt-[7px]">
                        <path
                            d="M15.8376 12.5648L10.8516 18.5558C10.5466 19.0138 9.90865 19.1418 9.45065 18.8358C8.99365 18.5308 8.86562 17.8908 9.17062 17.4318L13.7826 12.0028L9.17062 6.57385C8.86562 6.11485 8.99365 5.47583 9.45065 5.16983C9.90865 4.86383 10.5466 4.99183 10.8516 5.44983L15.8376 11.4408C16.0606 11.7768 16.0606 12.2288 15.8376 12.5648Z"
                            fill="currentColor"></path>
                    </svg>
                    <p class="text-lg capitalize text-black">{{$title}}</p>
                </div>
            </div>
        </div>
    </div>

<div class="login-page-outer">
	<div class="login-block-outer register-page">
        <div class="login-page">
            {{ Form::open(['url'=> route('customerRegistrationAction'), 'class'=>"push--top-small forward","method"=>"POST", "id"=>"signup-form"]) }}
                <input type="hidden" name="member_id" value="{{ rand() }}" />
                <h4 id="input-title" data-reactid="17">Let's get started</h4>
                <label class="label" id="input-label" for="useridInput" data-reactid="18">
                    {{__('lbl.FirstName')}} (required)
                </label>
                <div style="margin-bottom:24px;" data-reactid="19">
                    <div data-reactid="20">
                        <div data-reactid="22">
                            <input type="text" id="useridInput" name="first_name" value="{{old('first_name')}}"
                                title="{{__('lbl.FirstName')}}" class="text-input req"
                                placeholder="" required />
                        </div>
                    </div>
                    <div id="error-caption"
                        style="font-weight:500;font-size:12px;line-height:24px;color:rgb(203, 56, 11);box-sizing:border-box;"
                        data-reactid="24">
                        <div data-reactid="25"></div>
                    </div>
                </div>

                <label class="label" id="input-label" for="useridInput" data-reactid="18">
                    {{__('lbl.LastName')}} (required)
                </label>
                <div style="margin-bottom:24px;" data-reactid="19">
                    <div data-reactid="20">
                        <div data-reactid="22">
                            <input type="text" id="useridInput" name="last_name" value="{{old('last_name')}}"
                                title="{{__('lbl.LastName')}}" class="text-input req"
                                placeholder="" required />
                        </div>
                    </div>
                    <div id="error-caption"
                        style="font-weight:500;font-size:12px;line-height:24px;color:rgb(203, 56, 11);box-sizing:border-box;"
                        data-reactid="24">
                        <div data-reactid="25"></div>
                    </div>
                </div>

                <label class="label" id="input-label" for="useridInput" data-reactid="18">
                    {{__('lbl.Email')}} (required)
                </label>
                <div style="margin-bottom:24px;" data-reactid="19">
                    <div data-reactid="20">
                        <div data-reactid="22">
                            <input type="email" id="useridInput" name="email" value="{{old('email')}}"
                                title="{{__('lbl.Email')}}" class="text-input req"
                                placeholder="" required />
                        </div>
                    </div>
                    <div id="error-caption"
                        style="font-weight:500;font-size:12px;line-height:24px;color:rgb(203, 56, 11);box-sizing:border-box;"
                        data-reactid="24">
                        <div data-reactid="25"></div>
                    </div>
                </div>

                <label class="label" id="input-label" for="useridInput" data-reactid="18">
                    {{__('lbl.PhoneNumber')}}  (required)
                </label>
                <div style="margin-bottom:24px;" data-reactid="19">
                    <div data-reactid="20">
                        <div data-reactid="22">
                            <input type="number" id="useridInput" name="phone_number" value="{{old('phone_number')}}"
                                title="{{__('lbl.PhoneNumber')}}" class="text-input"
                                placeholder="" required /> <!-- pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" -->
                        </div>
                    </div>
                    <div id="error-caption"
                        style="font-weight:500;font-size:12px;line-height:24px;color:rgb(203, 56, 11);box-sizing:border-box;"
                        data-reactid="24">
                        <div data-reactid="25"></div>
                    </div>
                </div>
                
                <div class="next-button-wrapper">
                    <!-- <input type="submit" class="btn submit-btn" value="Submit" /> -->
                    <input
                        class=" py-3 bg-[#037ABC] text-white btn submit-btn hover:border-light-gray disabled:bg-cultured md:w-auto mr-4 px-8 md:px-[36px] lg:px-[54px]"
                        type="submit" value="Submit" />
                </div>
				<div class="push-small--top" data-reactid="30">
                    <div id="login-recaptcha" data-reactid="31"></div>
                </div>
                <div class="small push-small--bottom push-small--top" id="sign-up-link-only" data-reactid="32">
                    <p class=" display--inline" data-reactid="33">{{__('lbl.AlreadyUser')}} <a href="{{ route('customerLogin') }}" class="text-[#037ABC]">{{__('lbl.Signin')}}</a>
                    </p>
                </div>
            {{ Form::close()}}
        </div>
	</div>
</div>

</section>
@endsection