@extends('layouts.master')
@push('page-style')
<style>
	.md-form-group {
		margin-bottom: 0px;
	}
</style>>
@endpush
@section('page-content')
<div class="title-bar">
	<h1 class="title-bar-title">
		<span class="d-ib">Add New Member</span>
	</h1>
	<p class="title-bar-description">
		<small>Note :- <span class="text-danger">*</span> marked fields are mandatory.</small>
	</p>
</div>
@if( Session::has('error'))
<div class="alert alert-danger alert-dismissible">
	<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
	<strong>Error!</strong> {{ Session::get('error') }}
</div>
@endif
<div class="row">
	<form class="form form-horizontal" method="post" action="{{ route('member.store') }}" enctype="multipart/form-data" onsubmit="return check_no();">
		{{ csrf_field() }}
		<div class="col-sm-9">
			<div class="form-group">
				<label class="col-sm-3 control-label" for="Proposer">Proposer</label>
				<div class="col-sm-4">
					<select name="member_id" class="form-control input-sm select" id="proposer">
						<option value="" selected="" disabled=""></option>
						@foreach($members as $members1)
						<option value="{{$members1->id}}">{{$members1->f_name}} {{$members1->m_name}} {{$members1->l_name}} {{ "(".$members1->member_type }}{{ $members1->member_code.")" }}</option>
						@endforeach
					</select>
				</div>
			</div>
			
		</div>
		<div class="col-sm-3">
			<!-- <img class="img-responsive" id="image_preview" src="{{ asset('img/profile.jpg') }}" alt="" style="width: 90px;height: 90px;"> -->
		</div>

		<div class="col-sm-12">
			<div class="card card-collapsed" aria-expanded="true">
				<div class="card-header bg-primary">
					<!-- <div class="card-actions">
						<button type="button" class="card-action card-toggler" title="Collapse" aria-expanded="true"></button>
					</div> -->
					<h5 class="text-center">To Be Eligible For Membership Please Filling The Following</h5>
				</div>
			<div class="card-body">
				<div class="container-fluid">
					<div class="row">
						<div class="form-group">
							<div class="card-body" style="border: 0.5px solid #6e6e6e;margin-top:16px;  border-radius:5px;margin:30px;">
										<div class="col-sm-12">
											<div class="col-sm-4">
												<label>Mr.<span class="text-danger">*</span></label>
												<select name="salutation" class="form-control input-sm">
													<option selected="selected" value="Mr.">Mr.</option>
													<option value="Ms.">Ms.</option>
													<option value="Mrs.">Mrs.</option>
													<option value="Master">Master</option>
													<option value="Shri.">Shri</option>
													<option value="Smt.">Smt.</option>
													<option value="Dr.">Dr.</option>
												</select>
											</div>
											<div class="col-sm-4">
												<label>First Name<span class="text-danger">*</span></label>
												<input name="f_name" class="form-control input-sm" type="text" placeholder="First Name" required pattern="[A-Za-z ]+" title="Only alphabets are allowed">
											</div>
											<div class="col-sm-4">
												<label>Surname<span class="text-danger">*</span></label>
												<select name="l_name" id="l_name" class="form-control input-sm">
													<option selected="selected">Last Name</option>
													@foreach($surname as $data)
													<option value="{{$data->name}}" data-id="{{$data->id}}">{{$data->name}}</option>
													@endforeach
												</select>
											</div>
											<div class="col-sm-4" style="margin-top:10px;">
												<label>Father's / Husband Name </label>
												<input name="m_name" class="form-control input-sm" type="text" placeholder="Father / Husband Name" required pattern="[A-Za-z ]+" title="Only alphabets are allowed" >
											</div>
											<div class="col-sm-4" style="margin-top:10px;">
												<label>Mother's Name</label>
												<input name="mother_name" class="form-control input-sm" type="text" placeholder="Mother's Name" required pattern="[A-Za-z ]+" title="Only alphabets are allowed">
											</div>
											<div class="col-sm-2" style="margin-top:10px;">
												<label>KHANP</label>
												<input name="khanp" id="khanp" class="form-control input-sm" type="text" placeholder="First Name" required="" disabled>
											</div>
											<div class="col-sm-2" style="margin-top:10px;">
												<label>UPKHANP<span class="text-danger">*</span></label>
												<select class="form-control input-sm" name="up_khanp" id="up_khanp">
			
												</select>
											</div>
											<div class="col-sm-4">
												<label>Gender</label>
												<select name="gender" class="form-control input-sm">
													<option selected="selected" value="Male">Male</option>
													<option value="Female">Female</option>
													<option value="Other">Other</option>
												</select>
											</div>
											<div class="col-sm-4">
												<label>Date Of Birth<span class="text-danger">*</span></label>
												{{--<input name="dob" id="dob" class="form-control input-sm" id="dob" type="text" value="" data-provide="datepicker" required="" style="width:95px;">--}}
												<input name="dob" class="form-control input-sm" type="date" value="" placeholder="DD-MM-YYYY" required="">
											</div>
										</div>
							
											<div class="col-sm-12">
												<div class="col-sm-4">
													<label>Marital Status<span class="text-danger">*</span></label>
													<select class="form-control input-sm" name="marital_status" id="marital_status">
														<option value="Single">Single</option>
														<option selected="selected" value="Married">Married</option>
														<option value="Divorced">Divorced</option>
														<option value="Widow">Widow</option>
														<option value="Widowver">Widower</option>
				
													</select>
												</div>
												<div class="col-sm-4" id="marriage-date-div">
													<label>Marriage Date</label>
													<input name="dom" id="marriage-date" class="form-control input-sm" type="date" placeholder="DD-MM-YYYY" value="">
												</div>
												{{-- <div class="col-sm-4">
												<label>  Blood Group :</label>
												<select name="blood_group" id="blood_group" class="form-control input-sm">
														<option value="A +">A +</option>
														<option value="A -">A -</option>
														<option value="AB +">AB +</option>
														<option value="AB -">AB -</option>
														<option value="B +">B +</option>
														<option value="B -">B -</option>
														<option value="O +">O +</option>
														<option value="O -">O -</option>
														<option value="B">B</option>
														<option value="N.A.">N.A.</option>
												</select>
												</div> --}}

												<div class="col-sm-4">
													<label for="blood_group"> Blood Group :</label>
													<select name="blood_group" id="blood_group" class="form-control input-sm" required="">
													   													   <option value="">Select Blood Group</option>
													   @foreach($blood_group as $data2)
													   <option value="{{$data2}}">{{$data2}}</option>
													   @endforeach
													</select>
												 </div>

											</div>
								</div>
								<div class="card-body" style="border: 0.5px solid #6e6e6e;margin-top:16px; border-radius:5px;margin:30px;">
										<div class="col-sm-12">
											<div class="col-sm-4">
												<label>Mobile No<span class="text-danger">*</span></label>
												<input name="contact" id="contact" class="form-control input-sm" type="text" value="" required="">
												@if($errors->has('contact'))
												<span class="text-danger"><strong>{{ $errors->first('contact')}}</strong></span>
												@endif
											</div>
											{{-- <div class="col-sm-4">
												<label>Mobile No<span class="text-danger">*</span></label>
												<input name="contact" id="contact" class="form-control input-sm" type="text" value="" required pattern="[0-9]{10}" title="Please enter a 10-digit mobile number">
												
											</div> --}}
											<div class="col-sm-4">
												<label>
													<center>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Email:<span class="text-danger">*</span></center>
												</label>
												<input name="email" id="email" class="form-control input-sm" type="email" value="" >
											</div>
											<div class="col-sm-2">
												<label>Email_Privacy:</label>
			
												<input name="privacy_email" id="privacy_email" class="form-control input-sm " type="checkbox" style="width: 110px">
											</div>
											<div class="col-sm-2">
												<label>Mobile.No_Privacy:</label>
												<input name="privacy_contact" id="privacy_contact" class="form-control input-sm" type="checkbox" style="width: 110px">
											</div>
										</div>
										<div class="col-sm-12">
											<div class="col-sm-4">
												<label>Residence Pincode<span class="text-danger">*</span></label>
												<select name="pincode" id="pincode" class="form-control" required="">
														@foreach($region as $region)
														@php
														$array = explode(",",$region['pincode']);
														@endphp
						
														@foreach($array as $val)
														<option value="{{$val}}" data-ids="{{$val}}">{{$val}}</option>
														@endforeach
						
														@endforeach
												</select>
											</div>
											<div class="col-sm-4">
												<label>Residence Proof:<span class="text-danger">*</span></label>
												<div class="clearfix"></div>
												<input type="file" id="resident_proof" name="resident_proof" class="form-control">
											</div>
										</div>

											<div class="col-sm-12">
												<div class="col-sm-4">
													<label> Member_Type:<span class="text-danger">*</span></label>
													<select name="member_type" class="form-control input-sm" id="member_type" required="">
														<option selected="" disabled="">Choose</option>
														<option value="LM">LM</option>
														<option value="PM">PM</option>
														<option value="SW">SW</option>
														<option value="NM">NM</option>
														<option value="OR">OR</option>
													</select>
												</div>
												<div class="col-sm-4">
													<label class="control-label"> Member_Code : </label>
													<div class="clearfix" id="member_code"></div>
													<span></span>
												</div>
											</div>
											
											
										<div class="col-sm-12">
											<div class="col-sm-4">
												<label>Occupations<span class="text-danger">*</span></label>
												<!-- <input name="occupation" id="occupation" class="form-control input-sm" type="text" value=""> -->
												<select name="profession_category[]" class="form-control input-sm profession_category">
													<option value="0">Select an option</option>
													@foreach($profession_category as $val)
													<option value="{{$val['id']}}">{{$val['name']}}</option>
													@endforeach
												</select>
												<select name="profession[]" class="form-control input-sm profession" style="margin-bottom: 20px;margin-top: 8px;">
			
												</select>
											</div>
											<div class="col-sm-8">
												<label class="col-sm-12">Qualification<span class="text-danger">*</span></label>
												{{-- <div class="col-sm-1" style="margin-top: 20px;">
													<button type="button" class="btn btn-outline-primary add_more" title="Add More Member" tooltip>
														<i class="icon icon-plus-circle"></i>
													</button>
												</div> --}}
												<span class="add_qualification">
													<div class="col-sm-6">
														<select name="qualification_category[]" class="form-control input-sm qualification_category">
															<option value="0">Select an option</option>
															@foreach($qualification_category as $val)
															<option value="{{$val['id']}}">{{$val['name']}}</option>
															@endforeach
														</select>
														<select name="qualification[]" class="form-control input-sm qualification" style="margin-bottom: 20px;margin-top: 8px;">
			
														</select>
			
													</div>
												</span>
												<div class="col-sm-1" style="margin-top: 20px;">
													<button type="button" class="btn btn-outline-primary add_more" title="Add More Member" tooltip>
														<i class="icon icon-plus-circle"></i>
													</button>
												</div>
											</div>
										</div>
								</div>
									
									<div class="card-body" style="border: 0.5px solid #6e6e6e;margin-top:16px; border-radius:5px;margin:30px;">
										<div class="col-sm-12" style="overflow-x: scroll;">
											<table border="" class="table">
												<thead>
													<tr>
														<th>#</th>
														<th>Address 1</th>
														<th>Address 2</th>
														<th>City</th>
														<th>Pincode</th>
		
													</tr>
												</thead>
												<tbody>
															<tr>
																<td>RESIDENCE</td>
																<!-- <td><textarea class="form-control" rows="2" style="resize: none;" name="address" id="address" spellcheck="false"></textarea></td>
																<td><textarea class="form-control" rows="2" style="resize: none;" name="alt_address" id="alt_address" spellcheck="false"></textarea></td>
																<td><input name="city" id="city" class="form-control" type="text" value=""></td> -->
																<td>
															<input type="text" class="form-control input-sm"  style="resize: none;" name="address_line_1" id="address_line_1" spellcheck="false" > </td>
														<td>
															<input type="text" class="form-control input-sm"  style="resize: none;" name="address_line_2" id="address_line_2" spellcheck="false" ></td>
														<td>
															<input name="address_line_3" id="address_line_3" class="form-control input-sm" type="text"></td>
															<td>
															<input name="pincode" id="pincode_input" class="form-control input-sm" type="text" readonly></td>
															</tr>
															<tr>
																<td>NATIVE</td>
																<!-- <td colspan="4">
																	<input type="text" class="form-control" name="native_address" id="native_address">
																</td> -->
																<!-- <td><textarea class="form-control" rows="2" style="resize: none;" name="native_address_1" id="native_address_1" spellcheck="false"></textarea></td>
																<td><textarea class="form-control" rows="2" style="resize: none;" name="native_address_2" id="native_address_2" spellcheck="false"></textarea></td>
																<td><input name="native_address_3" id="native_address_3" class="form-control" type="text" value=""></td> -->
																<td>
															<input type="text" class="form-control input-sm"  style="resize: none;" name="native_address_1" id="native_address_1" spellcheck="false" > </td>
														<td>
															<input type="text" class="form-control input-sm"  style="resize: none;" name="native_address_2" id="native_address_2" spellcheck="false" ></td>
														<td>
															<input name="native_address_3" id="native_address_3" class="form-control input-sm" type="text"></td>
															<td>
															<input name="native_pincode" id="native_pincode" class="form-control input-sm" type="text"></td>
															</tr>
															<tr>
																<td>OFFICE</td>
																<!-- <td colspan="4"><input type="text" class="form-control" name="office_address" id="office_address"></td> -->
																<!-- <td><textarea class="form-control" rows="2" style="resize: none;" name="office_address_1" id="office_address_1" spellcheck="false"></textarea></td>
																<td><textarea class="form-control" rows="2" style="resize: none;" name="office_address_2" id="office_address_2" spellcheck="false"></textarea></td>
																<td><input name="office_address_3" id="office_address_3" class="form-control" type="text" value=""></td> -->
																<td>
															<input type="text" class="form-control input-sm"  style="resize: none;" name="oaddress_line_1" id="oaddress_line_1" spellcheck="false"> </td>
														<td>
															<input type="text" class="form-control input-sm"  style="resize: none;" name="oaddress_line_2" id="oaddress_line_2" spellcheck="false"></td>
														<td>
															<input name="oaddress_line_3" id="oaddress_line_3" class="form-control input-sm" type="text"></td>
															<td>
															<input name="office_pincode" id="office_pincode" class="form-control input-sm" type="text"></td>
				
															</tr>
															<tr>
																<td>OTHERS</td>
																<!-- <td colspan="4"><input type="text" class="form-control" name="other_address" id="other_address"></td> -->
																<!-- <td><textarea class="form-control" rows="2" style="resize: none;" name="other_address_1" id="other_address_1" spellcheck="false"></textarea></td>
																<td><textarea class="form-control" rows="2" style="resize: none;" name="other_address_2" id="other_address_2" spellcheck="false"></textarea></td>
																<td><input name="other_address_3" id="other_address_3" class="form-control" type="text" value=""></td> -->
																<td>
															<input type="text" class="form-control input-sm"  style="resize: none;" name="other_address_1" id="other_address_1" spellcheck="false" > </td>
														<td>
															<input type="text" class="form-control input-sm"  style="resize: none;" name="other_address_2" id="other_address_2" spellcheck="false"></td>
														<td>
															<input name="other_address_3" id="other_address_3" class="form-control input-sm" type="text"></td>
															<td>
															<input name="other_pincode" id="other_pincode" class="form-control input-sm" type="text"></td>
															</tr>
												</tbody>
											</table>
										</div>
									</div>

						</div>
					</div>
					
					
				</div>
			</div>
			</div>
		    </div>


				<div class="col-sm-12" style="margin-bottom:40px;9323450502">
					<button class="btn btn-primary">
						<i class="icon icon-paper-plane"></i> Submit Details
					</button>
				</div>
		

	</form>
</div>

@endsection
@push('page-script')
{{-- <script>
	$validator = Validator::make($request->all(), [
    'm_name' => 'required|regex:/^[a-zA-Z\s]*$/'
]);

if ($validator->fails()) {
    return response()->json(['errors'=>$validator->errors()->all()]);
}

$.ajax({
    url: 'your-url',
    type: 'POST',
    data: $('#your-form').serialize(),
    success: function(response) {
        if (response.errors) {
            $('.error-message').text(response.errors.m_name);
        }
    }
});

</script> --}}
<script>
	$(document).ready(function () {
    $('#pincode').change(function () {
        var pincode = $("#pincode option:selected").text();
        $("#pincode_input").val(pincode);
    });
});

	$('#dob').datepicker({
		startDate: '-125y',
		endDate: '0'
	}).on('changeDate', function(ev) {

	});

	$(document).on('click', '.add_more', function() {

		let append_data = `
		<div class="new_qualification  col-sm-4">
		<label>&nbsp;</label>
		<div class="col-sm-10" style="padding:0px">
		<select name="qualification_category[]" class="form-control input-sm qualification_category">
			<option value="0">Select an option</option>
			@foreach($qualification_category as $val)
				<option value="{{$val['id']}}">{{$val['name']}}</option>
			@endforeach
		</select>		
		<select name="qualification[]" class="form-control input-sm qualification" style="margin-bottom:20px">
			
		</select>
		</div>
		<div class="col-sm-1">
			<button type="button" class="btn btn-outline-danger remove_data" title="Remove Member" tooltip>
				<i class="icon icon-minus-circle"></i>
			</button>
		</div>
		</div>`;

		$('.add_qualification').append(append_data);
	});

	$("#marital_status").change(function() {
		if ($(this).val() == "Married") {
			$("#marriage-date-div").show('slow');
		} else {
			$("#marriage-date-div").hide('slow');
		}
	});

	var date = new Date();
	date.setFullYear(date.getFullYear() - 18);

	$('#dob').datepicker("setDate", date);

	$(document).delegate(".remove_data", "click", function() {

		$(this).parent().parent().remove();

	});

	// $(".qualification_category").change(function() {
	$(document).delegate(".qualification_category", "change", function(){
		console.log('hi, qualification_category');
	    var qualification_select = $(this).parent().find(".qualification");
		console.log('qualification select',qualification_select);

		qualification_select.html("");

		var ele = $(this);
		console.log(ele.val());

		if ( $(this).val() == "0" ) {

		}
		else {
			@foreach($qualification as $val)
				var id = {{$val['category']}};
				if(id == ele.val())
				{
						qualification_select.append('<option value="{{$val['name']}}">{{$val['name']}}</option>');
				}
			@endforeach
		}
	});

	$("#qualification").change(function() {
		if ($(this).val() == "Other") {
			$("#other_qualification-div").show('slow');
		} else {
			$("#other_qualification-div").hide('slow');
		}
	});


	$(document).delegate(".profession_category", "change", function(){
		console.log('hi, profession category');
	    var profession_select = $(this).parent().find(".profession");
		console.log('profession_select select',profession_select);

		profession_select.html("");

		var ele = $(this);
		console.log(ele.val());

		if ( $(this).val() == "0" ) {

		}
		else {
			@foreach($profession as $val)
				var id = {{$val['category']}};
				if(id == ele.val())
				{
					profession_select.append('<option value="{{$val['name']}}">{{$val['name']}}</option>');
				}
			@endforeach
		}
	});


	


	


	
</script>

<script type="text/javascript">
	$('#l_name').change(function() {
		var l_name = $(this).find("option:selected").attr("data-id");
		console.log(l_name);
		// alert(l_name);
		if (l_name) {
			$.ajax({
				type: "GET",
				url: "{{url('get-khunp-list')}}/" + l_name,
				success: function(res) {


					console.log(res);
					$('#khanp').val(res.khanp[0]['name']);

					$("#up_khanp").empty();


					$.each(res.upkhanp, function(key, value) {
						$("#up_khanp").append('<option value="' + value.id + '">' + value.name + '</option>');
					})

				}
			});
		}
	});

	$('#member_type').change(function() {
		var member_type = $(this).val();
		console.log(l_name);
		// alert(l_name);
		if (l_name) {
			$.ajax({
				type: "GET",
				url: "{{url('get-member-code')}}/" + member_type,
				success: function(res) {

					$("#member_code").text(res);

				}
			});
		}
	});

	var members = [];
	$(document).ready(function() {

		@foreach($members6 as $members2)

		members.push('{{$members2->contact}}');

		@endforeach

	});

	function check_no() {
		if ($.inArray($("#contact").val(), members) !== -1) {
			alert("Dupliacte contact number");
			return false;
		}

		return true;
	}
</script>

@endpush