@extends('layouts.front')
@section('content')

<!--body content wrap start-->
<div class="main">

    <!--hero background image with content slider start-->
    <section class="hero-section hero-bg-2 ptb-100 full-screen">
        <div class="container">
            <div class="row align-items-center justify-content-center pt-5 pt-sm-5 pt-md-5 pt-lg-0">
                 <div class="col-md-9 col-lg-9">
                    <div class="card login-signup-card shadow-lg mb-0">
                        <div class="card-body px-md-5 py-5">
                            <div class="mb-5 text-center">
                                <h6 class="h3">Create account</h6>
                            </div>
                            <form class="login-signup-form row" action="{{ route('members.register') }}" method="post" id="registration">
							@csrf
							@if (session('error'))
							<div class="alert alert-danger alert-dismissible fade show" role="alert">
								{{ session('error') }}
							</div>
							@endif						
							@if (session('message'))
							<div class="alert alert-info alert-dismissible fade show" role="alert">
								{{ session('message') }}
								<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
							</div>
							@endif
                                <div class="col-xl-4 form-group">
									<label class="pb-1">
                                        First Name *
                                    </label>
									<div class="comment-form__input-box">
										<input type="text" placeholder="First Name *" name="name" value="{{ old('name') }}" class="form-control"  />
									</div>
									<label id="name-error" class="error" for="name">@error('name') {{ $message }} @else Enter Name as per your PAN Card @enderror</label>
								</div>
								<div class="col-xl-4 form-group">
									<label class="pb-1">
                                        Middle Name *
                                    </label>
									<div class="comment-form__input-box">
										<input type="text" placeholder="Middle Name" name="middle_name" value="{{ old('middle_name') }}" class="form-control" />
									</div>
									<label id="middle_name-error" class="error" for="middle_name"></label>
								</div>
								<div class="col-xl-4 form-group">
									<labelLastclass="pb-1">
                                        First Name *
                                    </label>
									<div class="comment-form__input-box">
										<input type="text" placeholder="Last Name *" name="last_name" value="{{ old('last_name') }}" class="form-control" />
									</div>
									<label id="last_name-error" class="error" for="last_name"></label>
								</div>
								<div class="col-xl-6 form-group">
									<label class="pb-1">
                                        Mobile *
                                    </label>
									<div class="comment-form__input-box">
										<input type="text" placeholder="Mobile *" name="mobile" value="{{ old('mobile') }}" class="form-control" />
									</div>
									<label id="mobile-error" class="error" for="mobile">@error('mobile') {{ $message }} @enderror</label>
								</div>
								<div class="col-xl-6 form-group">
									<label class="pb-1">
                                        Email *
                                    </label>
									<div class="comment-form__input-box">
										<input type="email" placeholder="Email *" name="email" value="{{ old('email') }}" class="form-control"  />
									</div>
									<label id="email-error" class="error" for="email">@error('email') {{ $message }} @enderror</label>
								</div>
								<div class="col-xl-6 form-group">
									<label class="pb-1">
                                        PAN *
                                    </label>
									<div class="comment-form__input-box">
										<input type="text" placeholder="PAN *" name="pan" value="{{ old('pan') }}" class="form-control" />
									</div>
									<label id="pan-error" class="error" for="pan">@error('pan') {{ $message }} @enderror</label>
								</div>
								<div class="col-xl-6 form-group">
									<label class="pb-1">
                                        Aadhar No *
                                    </label>
									<div class="comment-form__input-box">
										<input type="text" placeholder="Aadhar No *" name="aadhar" value="{{ old('aadhar') }}" class="form-control" />
									</div>
									<label id="aadhar-error" class="error" for="aadhar">@error('aadhar') {{ $message }} @enderror</label>
								</div>
								<div class="col-xl-10 form-group">
									<label class="pb-1">
                                        Full Address *
                                    </label>
									<div class="comment-form__input-box">
										<input type="text" placeholder="Full Address *" name="address" value="{{ old('address') }}" class="form-control" />
									</div>
									<label id="address-error" class="error" for="address">@error('address') {{ $message }} @enderror</label>
								</div>
								<div class="col-xl-2 form-group">
									<label class="pb-1">
                                        Zip Code *
                                    </label>
									<div class="comment-form__input-box">
										<input type="text" placeholder="Zip Code *" name="pin_code" onblur="verifiyPincode(this.value)" value="{{ old('pin_code') }}" class="form-control" />
									</div>
									<label id="pin_code-error" class="error" for="pin_code">@error('pin_code') {{ $message }} @enderror</label>
								</div>
								<div class="col-xl-6 form-group">
									<label class="pb-1">
                                        State *
                                    </label>
									<div class="comment-form__input-box">
										<input type="text" placeholder="State *" name="state" value="{{ old('state') }}" readonly class="form-control" />
									</div>
									<label id="state-error" class="error" for="state">@error('state') {{ $message }} @enderror</label>
								</div>
								<div class="col-xl-6 form-group">
									<label class="pb-1">
                                        City *
                                    </label>
									<div class="comment-form__input-box">
										<input type="text" placeholder="City *" name="city" value="{{ old('city') }}" readonly class="form-control" />
									</div>
									<label id="city-error" class="error" for="city">@error('city') {{ $message }} @enderror</label>
								</div>
								<div class="col-md-12 form-group" >
									<div class="row justify-content-center">
										<div class="col-xl-3 text-center">
											<div class="comment-form__input-box">
												<label><input type="radio" name="type" value="4" checked  /> Retailer</label>
											</div>
										</div>
										<div class="col-xl-3 text-center">
											<div class="comment-form__input-box">
												<label><input type="radio" name="type" value="3"  /> Distributor</label>
											</div>
											<label id="type-error" class="error" for="type"></label>
										</div>
									</div>
								</div>

                                <!-- Submit -->
                                <button class="btn btn-block secondary-solid-btn border-radius mt-4 mb-3">
                                    Sign up
                                </button>
                            </form>

                        </div>
                        <div class="card-footer px-md-5 bg-transparent border-top"><small>Already have an acocunt?</small>
                            <a href="login.html" class="small">Sign in</a></div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--hero background image with content slider end-->


</div>
<!--body content wrap end-->


@endsection
@section('footerscript')
<script>

$(function() {
	  jQuery.validator.addMethod("phoneIN", function(phone_number, element) {
		phone_number = phone_number.replace(/\s+/g, "");
		if(this.optional(element) || phone_number.length > 10 || !phone_number.match(/[0-9]|\./)){
			return false;
		} else {
			return true;
		}
	}, "Please enter a valid phone number");
	  jQuery.validator.addMethod("panNo", function(value, element) {
		if(this.optional(element) || value.length > 10 || !value.match(/[a-zA-z]{5}\d{4}[a-zA-Z]{1}/)){
			return false;
		} else {
			return true;
		}
	}, "Please enter your valid pan number");
	  jQuery.validator.addMethod("aadharNo", function(value, element) {
		  value = value.replace(/\s+/g, "");
		  value = value.replace(/-/g, "");
		if(this.optional(element) || value.length > 12 ){
			return false;
		} else {
			return true;
		}
	}, "Please enter your valid aadhar number");
  $("#registration").validate({
    // Specify validation rules
    rules: {
      name: "required",
      last_name: "required",
      address: "required",
      state: "required",
      city: "required",
      email: {
        required: true,
        email: true
      },
      mobile: {
        required: true,
        minlength:10,
        minlength: 10,
		phoneIN : true
      },
      aadhar: {
        required: true,
        aadharNo: true,
        minlength: 12
      },
      pin_code: {
        required: true,
        minlength: 6
      },
      pan: {
        required: true,
        panNo: true
      }
    },
    // Specify validation error messages
    messages: {
      name: "Please enter your firstname",
      last_name: "Please enter your lastname",
      aadhar: "Please enter your valid aadhar number",
      pan: "Please enter your valid pan number",
      address: "Please enter your full address",
      pin_code: {
        required: "Please enter your Zip Code",
        minlength: "Zip code must be 6 digits"
      },
      email: "Please enter a valid email address"
    },
    // Make sure the form is submitted to the destination defined
    // in the "action" attribute of the form when valid
    submitHandler: function(form) {
      form.submit();
    }
  });
});
	function verifiyPincode(pincode){ //alert(pincode.length);
		$("input[name=state]").val('');
		$("input[name=city]").val('');
		if(pincode.length != 6){
			$("input[name=pin_code]").val('');
		}	  
		  $.ajax({
			  type: "GET",
			  url: "{{ route('pincode_verify') }}",
			  data: {pin_code:pincode},			  
			  success: function (response) {			  	
				if(response.status=='valid'){
					$("input[name=state]").val(response.state);
					$("input[name=city]").val(response.city);
				} else {
					$('#pin_code-error').css('display','inline-block');
					$('#pin_code-error').text('Invalid Zip Code');
				}			 
			  }
			});
	}
</script>
@endsection
@section('inline_style')
<style>
label.error{
color: red;
position: absolute;
margin-top: -2px;
font-size: 12px !important;
margin-left: 4px;
}
</style>
@endsection