@extends('front.layouts.app', ['title' => 'Register'])

@section('content')



    <main>

        <section class="authentication_section sign_up_sec">
            <div class="container-fluid">
                <div class="row">
                    <div class="col col-6 px-0">
                        <div class="auth_banner" style="background: url({{asset('images/auth_banner.png')}}) center / cover no-repeat;">
                            <div class="auth_brand_img">
                                <a href="{{route('home')}}"> <img src="{{asset('images/brand_full_white.png')}}" alt=""></a>
                            </div>
                        </div>
                    </div>
                    <div class="col col-6 auth_form_content">
                        <div class="auth_form_wrapper">
                            <div class="auth_form_inner">
                                <div class="auth_desc">
                                    <h1>Welcome {{env('APP_NAME')}}</h1>
                                </div>
                                <div class="auth_singup_wrapper">
                                    <div class="form_step_indicator_wrap">
                                        <ul>
                                            <li class="step_indicator_item"><span>1</span></li>
                                            <li class="step_indicator_item"><span>2</span></li>
                                            <li class="step_indicator_item"><span>3</span></li>
                                        </ul>
                                    </div>
                                    <form action="{{route('user-register')}}" method="POST" id="regForm" data-parsley-validate="">
                                        @csrf
                                        <!-- STEP : 1 -->

                                        <div class="form_step">
                                            <div class="form_step_title">
                                                <h4>Account information</h4>
                                            </div>
                                            <div class="row">
                                                <div class="col col-6">
                                                    <div class="c_filed">
                                                        <label for="name">First name*</label>
                                                        <input type="text" name="name" id="name" placeholder="Enter first name" required data-parsley-required-message="First Name is required">
                                                    </div>
                                                </div>
                                                <div class="col col-6">
                                                    <div class="c_filed">
                                                        <label for="last_name">Last name*</label>
                                                        <input type="text" name="last_name" id="last_name" placeholder="Enter last name" required data-parsley-required-message="Last Name is required">
                                                    </div>
                                                </div>
                                                <div class="col col-6">
                                                    <div class="c_filed">
                                                        <label for="email">Email Id*</label>
                                                        <input type="email" name="email" id="email" placeholder="Enter email" required data-parsley-trigger="keyup" data-parsley-required-message="Email is required">
                                                    </div>
                                                </div>
                                                <div class="col col-6">
                                                    <div class="c_filed">
                                                        <label for="mobile_number">Contact No*</label>
                                                        <input type="text" name="mobile_number" id="mobile_number" placeholder="Enter contact number" required data-parsley-required-message="Contact Number is required">
                                                    </div>
                                                </div>
                                                <!-- <div class="col col-6">
                                                        <div class="c_filed">
                                                            <label for="">Country*</label>
                                                            <select name="" id="">
                                                                <option value="" selected disabled>Select Country</option>
                                                                @foreach($countries as $country)
                                                                <option value="{{$country->id}}">{{$country->name}}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div> -->
                                                <div class="col col-6">
                                                    <div class="c_filed">
                                                        <label for="birth_date">Date of birth*</label>
                                                        <input type="date" name="birth_date" id="birth_date" required data-parsley-required-message="Date of birth is required">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- STEP : 2 -->

                                        <div class="form_step">
                                            <div class="form_step_title">
                                                <h4>billing Information</h4>
                                            </div>
                                            <div class="row">
                                                <div class="col col-6">
                                                    <div class="c_filed">
                                                        <label for="">Street name*</label>
                                                        <input type="text" name="street_name" id="street_name" placeholder="Enter street name" required data-parsley-required-message="Street is required">
                                                    </div>
                                                </div>
                                                <div class="col col-6">
                                                    <div class="c_filed">
                                                        <label for="">Contact No*</label>
                                                        <input type="text" name="phone_number" id="phone_number" placeholder="Enter contact number" required data-parsley-required-message="Contact number is required">
                                                    </div>
                                                </div>
                                                <div class="col col-6">
                                                    <div class="c_filed">
                                                        <label for="zipcode_id">ZIP/Postal Code*</label>
                                                        <select name="zipcode_id" id="gui-form-address-zipcode" required data-parsley-required-message="Zipcode is required">
                                                            <option value="" disabled selected>Please select zipcode</option>
                                                            @foreach($zipcodes as $zipcode)
                                                            <option value="{{$zipcode->id}}"> {{$zipcode->code}}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col col-6">
                                                    <div class="c_filed">
                                                        <label for="city">City*</label>
                                                        {{-- <input type="text" name="city" id="city" placeholder="Enter city" required data-parsley-required-message="City is required"> --}}
                                                        <select disabled id="gui-form-address-city" name="city" required data-parsley-required-message="City is required">
                                                            <option selected value="" disabled> Select city</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col col-6">
                                                    <div class="c_filed">
                                                        <label for="state">State / Province*</label>
                                                        {{-- <input type="text" name="state" id="state" placeholder="Enter state" required data-parsley-required-message="State is required"> --}}
                                                        <select disabled id="gui-form-address-state" name="state"  required data-parsley-required-message="State is required">
                                                            <option selected value="" disabled> Select state</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col col-6">
                                                    <div class="c_filed">
                                                        <label for="country">Country*</label>
                                                        {{-- <input type="text" name="country" id="country" placeholder="Enter country" required data-parsley-required-message="Country is required"> --}}
                                                         <select id="gui-form-address-country" name="country" disabled required data-parsley-required-message="Country is required">
                                                                <option value="" selected disabled>Select Country</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col col-6">
                                                    <div class="c_checkbox">
                                                        <input type="checkbox" name="is_for_shipping" id="is_for_shipping">
                                                        <label for="is_for_shipping">Ship to this address</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- STEP : 3 -->

                                        <div class="form_step">
                                            <div class="form_step_title">
                                                <h4>Security</h4>
                                            </div>
                                            <div class="row">
                                                <div class="col col-12">
                                                    <div class="c_filed">
                                                        <label for="">Password*</label>
                                                        <input type="password" name="password" id="password" placeholder="Password" required data-parsley-minlength="6" data-parsley-minlength-message="Minimum 6 charecter required!">
                                                    </div>
                                                </div>
                                                <div class="col col-12">
                                                    <div class="c_filed">
                                                        <label for="">confirom Password*</label>
                                                        <input type="password" name="confirm_password" id="confirm_password" placeholder="Confirm Password" required data-parsley-equalto="#password">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form_step_btns d-flex">
                                            <div class="c_btn c_btn_border">
                                                <input type="button" value="Previous" id="prevBtn" onclick="nextPrev(-1)">
                                            </div>
                                            <div class="c_btn c_btn_red">
                                                <input type="button" value="Continue" id="nextBtn" onclick="nextPrev(1)">
                                            </div>
                                            <div class="c_btn c_btn_red">
                                                <input type="submit" value="Submit" id="regSubmitBtn" style="display: none;">
                                            </div>
                                        </div>
                                    </form>
                                </div>

                                <div class="register_text">
                                    <p>Already Have an account? <a href="{{route('login')}}">Sign In</a></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

    </main>

@endsection
@section('custom-js')
<script>
$("#birth_date").prop("max", moment(new Date()).format('YYYY-MM-DD'));
</script>
<script src="{{asset('js/front/userAddress.js')}}"></script>

@endsection