@extends('layouts.site')

@section('content')

<!-- START MAIN CONTENT -->
<div class="main_content background-blue">

<!-- START LOGIN SECTION -->
<div class="login_register_wrap section">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-xl-6 col-md-10">
                <div class="login_wrap">
                    <div class="padding_eight_all bg-white">
                        <div class="heading_s1">
                            <h3>Create an Account</h3>
                        </div>
                        <form method="POST" id="signupForm" action="{{ route('register') }}">
                            @csrf
                            <div class="form-group">
                                <input id="first_name" type="text" class="form-control @error('first_name') is-invalid @enderror" name="first_name" value="" placeholder="Enter your first name" autofocus>
                                @error('first_name')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="form-group">
                                <input id="last_name" type="text" class="form-control @error('last_name') is-invalid @enderror" name="last_name" value="" placeholder="Enter your last name" autofocus>
                                @error('last_name')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="form-group">
                                <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" placeholder="Enter your email">
                                @error('email')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="form-group">
                                <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" placeholder="Enter password">

                                @error('password')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="form-group">
                                <input id="password_confirmation" type="password" class="form-control" name="password_confirmation" placeholder="Enter confirm password">
                            </div>
                            <div class="form-group">
                                <textarea class="form-control" name="address_1" placeholder="Enter Complete Address Including Apt No/Suite No."></textarea>
                            </div>
                            <!---- <div class="form-group">
                                <textarea class="form-control" name="address_2" placeholder="Enter Your Address Line 2"></textarea>
                            </div>  --------->
                            <div class="form-group">
                                <input type="text" class="form-control" name="city" placeholder="Enter Your City">
                            </div>
                            <div class="form-group">
                                <select name="state" id="state" class="form-control">
                                    <option value="">Select Province</option>
                                    <option value="Alberta">Alberta</option>
                                    <option value="British Columbia">British Columbia</option>
                                    <option value="Manitoba">Manitoba</option>
                                    <option value="New Brunswick">New Brunswick</option>
                                    <option value="Newfoundland and Labrador">Newfoundland and Labrador</option>
                                    <option value="Northwest Territories">Northwest Territories</option>
                                    <option value="Nova Scotia">Nova Scotia</option>
                                    <option value="Nunavut">Nunavut</option>
                                    <option value="Ontario">Ontario</option>
                                    <option value="Prince Edward Island">Prince Edward Island</option>
                                    <option value="Quebec">Quebec</option>
                                    <option value="Saskatchewan">Saskatchewan</option>
                                    <option value="Yukon Territory">Yukon Territory</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <input type="text" class="form-control" name="pincode" placeholder="Enter Your Postal Code">
                            </div>
                            <div class="form-group">
                                <input type="text" class="form-control" name="mobile_number" placeholder="Enter Your Mobile No.">
                            </div>
                            
                            <div class="form-group">
                                <input class="form-control" type="seed_License_collector_number " name="seed_License_collector_number" placeholder="Seed Collector license number">
                            </div>
                            <div class="login_footer form-group">
                                <div class="chek-form">
                                    <div class="custome-checkbox">
                                        <input class="form-check-input" type="checkbox" name="term_conditions" id="term_conditions" >
                                        <label class="form-check-label" for="term_conditions"><span>I agree to terms &amp; Policy.</span></label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <button class="btn btn-fill-out btn-block" id="register-btn" name="register">Register</button>
                            </div>
                        </form>
                        <div class="different_login">
                            <span> or</span>
                        </div>
                        <div class="form-note text-center">Already have an account? <a href="{{ route('login') }}">Log in</a></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END LOGIN SECTION -->
@endsection

@section('scripts')
<script type="text/javascript">
    $("#signupForm").validate({
        rules: {
            first_name: {
                required: true,
                maxlength: 100
            },
            last_name: {
                required: true,
                maxlength: 100
            },
            email: {
                required: true,
                email: true
            },
            password: {
                required: true,
                minlength: 8
            },
            password_confirmation : {
                minlength : 8,
                equalTo : "#password"
            },
            address_1: {
                required: true
            },
            city: {
                required: true
            },
            state: {
                required: true
            },
            pincode: {
                required: true,
                maxlength: 20
            },
            mobile_number: {
                required: true,
                number: true,
                maxlength: 13,
                minlength: 9
            },
            term_conditions: {
                required: true
            }
        },
        messages: {
            first_name: {
                required: "Please enter first name",
                maxlength: "First name should not exceed 100 charecters"
            },
            last_name: {
                required: "Please enter last name",
                maxlength: "Last name should not exceed 100 charecters"
            },
            email: {
                required: "Please enter email",
                email: "Please enter valid email"
            },
            password: {
                required: "Please enter password",
                minlength: "Password should contain 8 charecters"
            },
            password_confirmation : {
                minlength : "Password Mismatch",
                equalTo : "Password Mismatch"
            },
            address_1: {
                required: "Please enter address"
            },
            city: {
                required: "Please enter city"
            },
            state: {
                required: "Please select province"
            },
            pincode: {
                required: "Please enter postal code",
                number: "Please enter valid postal code",
                maxlength: "Please enter valid postal code",
                minlength: "Please enter valid postal code",
            },
            mobile_number: {
                required: "Please enter mobile number",
                number: "Please enter valid mobile number",
                maxlength: "Please enter valid mobile number",
                minlength: "Please enter valid mobile number"
            },
            term_conditions: {
                required: "Please accept terms and conditions"
            }
        }
    });
    $("#register-btn").on('click', function() {
        if($("#signupForm").valid()) {
            $("#signupForm").submit();
        }
        return false;
    });
</script>
@stop