@php
    use App\Libraries\GoogleLib;
    use App\Libraries\Facebook;
@endphp
@extends('layouts.frontlayout')
@section('content')

<!-- ==== Signup Section Start ==== -->
<section class="login_section">
    <div class="container">
        <div class="row">
            <div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                <div class="login_area">
                    <div class="bakefresh_body">
                        <div class="right_modal_box">
                            <div class="auth_heading">
                                <h4>Sign Up</h4>
                                <p> Don't have an account? Create a new account here. </p>
                            </div>
                            <div class="form_area_box">
                                @include('frontend.partials.flash_messages')
                                <form action="{{ route('user.signup') }}" method="post" id="signup_form" class="">
                                    <!--!! CSRF FIELD !!-->
                                    {{ csrf_field() }}
                                    <div class="row">
                                        <div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                                            <div class="form-web">
                                                <div class="form-floating">
                                                    <input type="text" class="form-control alpha_space" name="first_name" value="{{ old('first_name') }}" placeholder="Full Name" required>
                                                    <label>Full Name <span>*</span></label>
                                                </div>                                  
                                                <label id="first_name-error" class="error" for="first_name">@error('first_name') {{ $message }} @enderror</label>
                                            </div>
                                        </div>
                                        <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
                                            <div class="form-web">
                                                <div class="form-floating">
                                                    <input class="form-control o-phone" type="hidden" name="phonenumber" value="" required>
                                                    <input type="tel" class="form-control number_only cont_input" minlength="8" maxlength="13" value="{{ old('phonenumber') }}" id="phone-input" required/>
                                                    <label>Phone Number <span>*</span></label>
                                                </div>
                                                <label id="phone-input-error" class="error" for="phone-input">@error('phonenumber') {{ $message }} @enderror</label>
                                            </div>
                                        </div>
                                        <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
                                            <div class="form-web">
                                                <div class="form-floating">
                                                    <input type="text" class="form-control" name="email" value="{{ old('email') }}" placeholder="Enter your email address" required>
                                                    <label>Email <span>*</span></label>
                                                </div>
                                                <label id="email-error" class="error" for="email">@error('email') {{ $message }} @enderror</label>
                                            </div>
                                        </div>
                                        <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
                                            <div class="form-web">
                                                <div class="form-floating">
                                                    <input type="text" class="form-control" name="address" value="{{ old('address') }}" placeholder="Enter your address" required>
                                                    <label>Address <span>*</span></label>
                                                </div>
                                            <label id="address-error" class="error" for="address">@error('address') {{ $message }} @enderror</label>
                                            </div>
                                        </div>
                                        <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
                                            <div class="form-web">
                                                <div class="form-floating">
                                                    <input type="text" class="form-control" minlength="6" maxlength="10" name="zipcode" value="{{ old('zipcode') }}" placeholder="Enter your zipcode" required>
                                                    <label>Zip Code <span>*</span></label>
                                                </div>
                                                <label id="zipcode-error" class="error" for="zipcode">@error('zipcode') {{ $message }} @enderror</label>
                                            </div>
                                        </div>
                                        <div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                                            <div class="form-web">
                                                <div class="form-floating">
                                                    <input type="password" class="form-control toggle-password" name="password" value="{{ old('password') }}" id="password" placeholder="Enter your password" required>
                                                    <label>Password <span>*</span></label>
                                                    <div class="icon_view pass_view">
                                                        <img src="{{ url('frontend/images/icons/eye.png') }}" title="Eye Image" alt="..." fetchpriority="low" />
                                                    </div>
                                                </div>
                                                <label id="password-error" class="error" for="password">@error('password') {{ $message }} @enderror</label>
                                            </div>
                                        </div>
                                        <div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                                            <div class="form-web"> 
                                                <div class="form-floating ">
                                                    <input type="password" class="form-control toggle-password" name="confirm_password" value="{{ old('confirm_password') }}" placeholder="Confirm your password" required>
                                                    <label>Confirm Password <span>*</span></label>
                                                    <div class="icon_view pass_view">
                                                        <img src="{{ url('frontend/images/icons/eye.png') }}" title="Eye Image" alt="..." fetchpriority="low" />
                                                    </div>
                                                </div>
                                                <label id="confirm_password-error" class="error" for="confirm_password">@error('confirm_password') {{ $message }} @enderror</label>
                                            </div>
                                        </div>
                                        <div class="button_row">
                                            <button type="submit" id="rj_sign_up" aria-label="Sign Up" class="btn-primary">Sign Up</button>
                                        </div>
                                        <div class="s_login_box">
                                            <a href="{{GoogleLib::loginURL()}}" class="google_login" aria-label="Google Log In">
                                                <div class="google_btn_area">
                                                    <div class="left_area">
                                                        <div class="img_google">
                                                            <img src="{{ url('frontend/images/icons/google.png') }}" title="Google Image" alt="..." fetchpriority="low" />
                                                        </div>
                                                    </div>
                                                    <div class="right_area"><p>Sign up with Google</p></div>
                                                </div>
                                            </a>
                                            <a href="{{Facebook::loginUrl()}}" class="google_login" aria-label="Facebook Log In">
                                                <div class="google_btn_area">
                                                    <div class="left_area">
                                                        <div class="img_google facebook_icon">
                                                            <i class="fab fa-facebook"></i>
                                                        </div>
                                                    </div>
                                                    <div class="right_area"><p>Sign up with Facebook</p></div>
                                                </div>
                                            </a>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <p class="not_account">Already have an account ? <a href="{{ route('user.login') }}" aria-label="Log In">Log in here</a></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- ==== Signup Section End ==== -->

@endsection