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

		<!--Contact Page Start-->
		<section class="contact-page pt-3" style="background-image: url({{asset('system/public/assets/images/shapes/we-believe-map.png')}});background-position: center;background-repeat: no-repeat;background-size: cover;">
			<div class="container" >
				<div class="row justify-content-center">
					<div class="section-title text-center">
						<h2 class="section-title__title">Registration</h2>
					</div>
					<div class="col-xl-9">
						<form method="post" action="{{ route('members.register') }}" class=" comment-one__form" 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="row" @if (session('message')) style="display:none" @endif>
								<div class="col-xl-4">
									<div class="comment-form__input-box">
										<input type="text" placeholder="First Name *" name="name" value="{{ old('name') }}"  />
									</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">
									<div class="comment-form__input-box">
										<input type="text" placeholder="Middle Name" name="middle_name" value="{{ old('middle_name') }}" />
									</div>
									<label id="middle_name-error" class="error" for="middle_name"></label>
								</div>
								<div class="col-xl-4">
									<div class="comment-form__input-box">
										<input type="text" placeholder="Last Name *" name="last_name" value="{{ old('last_name') }}"  />
									</div>
									<label id="last_name-error" class="error" for="last_name"></label>
								</div>
								<div class="col-xl-6">
									<div class="comment-form__input-box">
										<input type="text" placeholder="Mobile *" name="mobile" value="{{ old('mobile') }}"  />
									</div>
									<label id="mobile-error" class="error" for="mobile">@error('mobile') {{ $message }} @enderror</label>
								</div>
								<div class="col-xl-6">
									<div class="comment-form__input-box">
										<input type="email" placeholder="Email *" name="email" value="{{ old('email') }}"  />
									</div>
									<label id="email-error" class="error" for="email">@error('email') {{ $message }} @enderror</label>
								</div>
								<div class="col-xl-6">
									<div class="comment-form__input-box">
										<input type="text" placeholder="PAN *" name="pan" value="{{ old('pan') }}"  />
									</div>
									<label id="pan-error" class="error" for="pan">@error('pan') {{ $message }} @enderror</label>
								</div>
								<div class="col-xl-6">
									<div class="comment-form__input-box">
										<input type="text" placeholder="Aadhar No *" name="aadhar" value="{{ old('aadhar') }}"  />
									</div>
									<label id="aadhar-error" class="error" for="aadhar">@error('aadhar') {{ $message }} @enderror</label>
								</div>
								<div class="col-xl-10">
									<div class="comment-form__input-box">
										<input type="text" placeholder="Full Address *" name="address" value="{{ old('address') }}"  />
									</div>
									<label id="address-error" class="error" for="address">@error('address') {{ $message }} @enderror</label>
								</div>
								<div class="col-xl-2">
									<div class="comment-form__input-box">
										<input type="text" placeholder="Zip Code *" name="pin_code" onblur="verifiyPincode(this.value)" value="{{ old('pin_code') }}"  />
									</div>
									<label id="pin_code-error" class="error" for="pin_code">@error('pin_code') {{ $message }} @enderror</label>
								</div>
								<div class="col-xl-6">
									<div class="comment-form__input-box">
										<input type="text" placeholder="State *" name="state" value="{{ old('state') }}" readonly />
									</div>
									<label id="state-error" class="error" for="state">@error('state') {{ $message }} @enderror</label>
								</div>
								<div class="col-xl-6">
									<div class="comment-form__input-box">
										<input type="text" placeholder="City *" name="city" value="{{ old('city') }}" readonly />
									</div>
									<label id="city-error" class="error" for="city">@error('city') {{ $message }} @enderror</label>
								</div>
								<div class="col-md-12" >
									<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>
							</div>
							<div class="row" @if (session('message')) style="display:none" @endif>
								<div class="col-xl-12">
									<div class="comment-form__btn-box text-center">
										<button type="submit" class="thm-btn comment-form__btn">Submit Now</button>
									</div>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</section>
		<!--Contact Page 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: -38px;
font-size: 13px;
margin-left: 12px;
}
</style>
@endsection