@extends('backend.layouts.app')
@section('content')
<div class="col-xl-12">
	<div class="breadcrumb-holder">
		<h1 class="main-title float-left">{{ session('title') }}</h1>
		<ol class="breadcrumb float-right">
			<li class="breadcrumb-item">Home </li>
			<li class="breadcrumb-item active">{{ session('title') }}</li>
		</ol>
		<div class="clearfix"></div>
	</div>
</div>
<div class="container-fluid">
	@include('backend.members.edit.edit-header')
	<div class="col-md-12">
		<form method="POST" action="{{route('golf-operation.members.update.familydetails', $editData->id)}}">
			@csrf
			<div class="card">
				<div class="card-header">
					<h3 class="card-title">Family Details</h3>
				</div>
				<div class="card-body">
					@php
					if(old('spouse_name')){
						$spouse_name = old('spouse_name');
					}elseif($editData){
						$spouse_name = $editData->spouse_name;
					}else{
						$spouse_name = null;
					}

					if(old('spouse_dob')){
						$spouse_dob = old('spouse_dob');
					}elseif($editData){
						$spouse_dob = $editData->spouse_dob;
					}else{
						$spouse_dob = null;
					}

					if(old('spouse_nid')){
						$spouse_nid = old('spouse_nid');
					}elseif($editData){
						$spouse_nid = $editData->spouse_nid;
					}else{
						$spouse_nid = null;
					}

					if(old('spouse_occupation')){
						$spouse_occupation = old('spouse_occupation');
					}elseif($editData){
						$spouse_occupation = $editData->spouse_occupation;
					}else{
						$spouse_occupation = null;
					}

					if(old('spouse_handicap')){
						$spouse_handicap = old('spouse_handicap');
					}else{
						$spouse_handicap = $editData->spouse_handicap;
					}
					@endphp
					<div class="row">
						<div class="col-sm-12">
							<h3 style="border-bottom: 1px solid #ddd; font-size: 18px; padding-bottom: 5px;">Spouse Information</h3>
						</div>
						<div class="col-sm-3">
							<div class="form-group">
								<label class="control-label">Name</label>
								<input type="text" name="spouse_name" value="{{$spouse_name}}" class="form-control" placeholder="Spouse Name" />								
							</div>
						</div>
						<div class="col-sm-1">
							<div class="form-group">
								<label class="control-label">Hand.</label>
								<input type="number" name="spouse_handicap" class="form-control" value="{{$spouse_handicap}}" />
							</div>
						</div>				
						<div class="col-sm-2">
							<div class="form-group">
								<label class="control-label">DOB (DD-MM-YYYY)</label>
								<input type="text" name="spouse_dob" value="@if($spouse_dob){{date('d-m-Y', strtotime($spouse_dob))}}@endif" class="form-control" />
							</div>
						</div>
						<div class="col-sm-3">
							<div class="form-group">
								<label class="control-label">NID Number</label>
								<input type="text" name="spouse_nid" value="{{$spouse_nid}}" class="form-control" placeholder="NID" />
							</div>
						</div>
						<div class="col-sm-3">
							<div class="form-group">
								<label class="control-label">Occupation</label>
								<input type="text" name="spouse_occupation" value="{{$spouse_occupation}}" class="form-control">
							</div>
						</div>
					</div>
					<div class="row" style="margin-top: 50px;">
						<div class="col-sm-12 children-container">
							<h3 style="border-bottom: 1px solid #ddd; font-size: 18px; padding-bottom: 5px;">Children Information (Under 25)</h3>
							@if(old('child_name'))
								@foreach(old('child_name') as $key => $child_row)
								<div class="row">
									<div class="col-sm-4">
										<div class="form-group">
											<label class="control-label">Name</label>
											<input type="text" name="child_name[]" value="{{ old('child_name')[$key] }}" class="form-control" />
										</div>
									</div>
									<div class="col-sm-2">
										<div class="form-group">
											<label class="control-label">Hand.</label>
											<input type="text" name="child_handicap[]" value="{{ old('child_handicap')[$key] }}" class="form-control" value="">
										</div>
									</div>
									<div class="col-sm-3">
										<div class="form-group">
											<label class="control-label">Date of Birth (DD-MM-YYYY)</label>
											<input type="text" name="child_dob[]" value="@if(old('child_dob')[$key]){{ date('d-m-Y', strtotime( old('child_dob')[$key] )) }}@endif" class="form-control" />
										</div>
									</div>
									<div class="col-sm-3">
										<div class="form-group">
											<label class="control-label">Date of Expire (DD-MM-YYYY)</label>
											<input type="text" name="child_doe[]" value="@if(old('child_doe')[$key]){{ date('d-m-Y', strtotime( old('child_doe')[$key] )) }}@endif" class="form-control" />
										</div>
									</div>
																	
									<div class="col-sm-2">
										<div class="form-group">
											<label class="control-label">NID Number</label>
											<input type="text" name="child_nid[]" value="{{ old('child_nid')[$key] }}" class="form-control" />
										</div>
									</div>
									<div class="col-sm-3">
										<div class="form-group">
											<label class="control-label">Gender</label>
											<select class="form-control" name="child_gender[]">
												<option value="">Select Gender</option>
												<option value="Male">Male</option>
												<option value="Female">Female</option>
											</select>
										</div>
									</div>
									<div class="col-sm-3">
										<div class="form-group">
											<label class="control-label">Occupation</label>
											<input type="text" name="child_occupation[]" class="form-control" />
										</div>
									</div>
									<div class="col-sm-1 action-column" style="padding-top: 28px; padding-left: 0px; padding-right: 0px;">
										<button type="button" class="btn btn-success more-children btn-xs"><i class="fa fa-plus"></i></button>
										<button type="button" class="btn btn-danger remove-children btn-xs d-none"><i class="fa fa-remove"></i></button>
									</div>
									<hr style="clear: both; border: 1px dotted #000; width: 100%; display: block;" />
								</div>
								@endforeach
							@elseif($editData->childrens && count($editData->childrens)>0)
								@foreach($editData->childrens as $child_row)
								<div class="row">
									<input type="hidden" name="child_id[]" value="{{ $child_row->id }}">
									<div class="col-sm-4">
										<div class="form-group">
											<label class="control-label">Name</label>
											<input type="text" name="child_name[]" value="{{ $child_row->name }}" class="form-control" />
										</div>
									</div>
									<div class="col-sm-2">
										<div class="form-group">
											<label class="control-label">Hand.</label>
											<input type="text" name="child_handicap[]" value="{{ $child_row->handicap }}" class="form-control" value="">
										</div>
									</div>
									<div class="col-sm-3">
										<div class="form-group">
											<label class="control-label">Date of Birth (DD-MM-YYYY)</label>
											<input type="text" name="child_dob[]" value="@if($child_row->dob){{ date('d-m-Y', strtotime( $child_row->dob )) }}@endif" class="form-control" />
										</div>
									</div>
									<div class="col-sm-3">
										<div class="form-group">
											<label class="control-label">Date of Expire (DD-MM-YYYY)</label>
											<input type="text" name="child_doe[]" value="@if($child_row->doe){{ date('d-m-Y', strtotime( $child_row->doe )) }}@endif" class="form-control" />
										</div>
									</div>																	
									<div class="col-sm-3">
										<div class="form-group">
											<label class="control-label">NID Number</label>
											<input type="text" name="child_nid[]" value="{{ $child_row->nid }}" class="form-control" />
										</div>
									</div>
									<div class="col-sm-3">
										<div class="form-group">
											<label class="control-label">Gender</label>
											<select class="form-control" name="child_gender[]">
												<option value="">Select Gender</option>
												<option value="Male" @if($child_row->gender == 'Male') selected @endif>Male</option>
												<option value="Female" @if($child_row->gender == 'Female') selected @endif>Female</option>
											</select>
										</div>
									</div>
									<div class="col-sm-3">
										<div class="form-group">
											<label class="control-label">Occupation</label>
											<input type="text" name="child_occupation[]" value="{{ $child_row->occupation }}" class="form-control" />
										</div>
									</div>
									<div class="col-sm-1 action-column" style="padding-top: 28px; padding-left: 0px; padding-right: 0px;">
										<button type="button" class="btn btn-success more-children btn-xs"><i class="fa fa-plus"></i></button>
										<button type="button" class="btn btn-danger  delete btn-xs" data-id="{{ $child_row->id }}" data-tablename="member_childrens"><i class="fa fa-remove"></i></button>
									</div>
									<hr style="clear: both; border: 1px dotted #000; width: 100%; display: block;" />
								</div>
								@endforeach
							@else
							<div class="row">
								<div class="col-sm-4">
									<div class="form-group">
										<label class="control-label">Name</label>
										<input type="text" name="child_name[]" class="form-control" />
									</div>
								</div>
								<div class="col-sm-2">
									<div class="form-group">
										<label class="control-label">Hand.</label>
										<input type="text" name="child_handicap[]" class="form-control" value="">
									</div>
								</div>
								<div class="col-sm-3">
									<div class="form-group">
										<label class="control-label">Date of Birth (DD-MM-YYYY)</label>
										<input type="text" name="child_dob[]" class="form-control text-center" />
									</div>
								</div>
								<div class="col-sm-3">
									<div class="form-group">
										<label class="control-label">Date of Expire (DD-MM-YYYY)</label>
										<input type="text" name="child_doe[]" class="form-control text-center" />
									</div>
								</div>
								<div class="col-sm-3">
									<div class="form-group">
										<label class="control-label">NID Number</label>
										<input type="text" name="child_nid[]" class="form-control" />
									</div>
								</div>
								<div class="col-sm-3">
									<div class="form-group">
										<label class="control-label">Gender</label>
										<select class="form-control" name="child_gender[]">
											<option value="">Select Gender</option>
											<option value="Male">Male</option>
											<option value="Female">Female</option>
										</select>
									</div>
								</div>
								<div class="col-sm-3">
									<div class="form-group">
										<label class="control-label">Occupation</label>
										<input type="text" name="child_occupation[]" class="form-control" />
									</div>
								</div>
								<div class="col-sm-1 action-column" style="padding-top: 28px; padding-left: 0px; padding-right: 0px;">
									<button type="button" class="btn btn-success more-children btn-xs"><i class="fa fa-plus"></i></button>
									<button type="button" class="btn btn-danger remove-children btn-xs d-none"><i class="fa fa-remove"></i></button>
								</div>
								<hr style="clear: both; border: 1px dotted #000; width: 100%; display: block;" />
							</div>
							@endif
						</div>
					</div>
				</div>
				<div class="card-footer text-right">
					<a href="{{route('golf-operation.members.edit', $editData->id)}}" class="btn btn-primary">Previous</a>
					<input type="submit" name="action" value="Save" class="btn btn-success">					
					<input type="submit" name="action" value="Next" class="btn btn-warning">					
				</div>
			</div>			
		</form>	
	</div>
</div>
@endsection
@section('page_script')

<div id="additional" style="display: none;">
	<div class="row">
		<input type="hidden" name="child_id[]" value="">
		<div class="col-sm-4">
			<div class="form-group">
				<label class="control-label">Name</label>
				<input type="text" name="child_name[]" value="" class="form-control">
			</div>
		</div>
		<div class="col-sm-2">
			<div class="form-group">
				<label class="control-label">Hand.</label>
				<input type="text" name="child_handicap[]" value="" class="form-control">
			</div>
		</div>
		<div class="col-sm-3">
			<div class="form-group">
				<label class="control-label">Date of Birth (DD-MM-YYYY)</label>
				<input type="text" name="child_dob[]" value="" class="form-control">
			</div>
		</div>
		<div class="col-sm-3">
			<div class="form-group">
				<label class="control-label">Date of Expire (DD-MM-YYYY)</label>
				<input type="text" name="child_doe[]" value="" class="form-control">
			</div>
		</div>
		<div class="col-sm-3">
			<div class="form-group">
				<label class="control-label">NID Number</label>
				<input type="text" name="child_nid[]" value="" class="form-control">
			</div>
		</div>
		<div class="col-sm-3">
			<div class="form-group">
				<label class="control-label">Gender</label>
				<select class="form-control" name="child_gender[]">
					<option value="">Select Gender</option>
					<option value="Male">Male</option>
					<option value="Female">Female</option>
				</select>
			</div>
		</div>
		<div class="col-sm-3">
			<div class="form-group">
				<label class="control-label">Occupation</label>
				<input type="text" name="child_occupation[]" value="" class="form-control">
			</div>
		</div>
		<div class="col-sm-1 action-column" style="padding-top: 28px; padding-left: 0px; padding-right: 0px;">
			<button type="button" class="btn btn-success more-children btn-xs"><i class="fa fa-plus"></i></button>
			<button type="button" class="btn btn-danger remove-children btn-xs"><i class="fa fa-remove"></i></button>
		</div>
		<hr style="clear: both; border: 1px dotted #000; width: 100%; display: block;">
	</div>
</div>

<style type="text/css">
	.action-column button {
		min-width: auto!important;
	}
</style>
<script type="text/javascript">
	function autoExpireDate(dateText) {

		// var dateGet = dateText.replace(/[-]/gi, '/');
		// console.log("dateGet", dateGet);

		// var date = new Date(dateGet)
		// console.log("date", date);
  //       var days = 365 * 25;

  //       if(!isNaN(date.getTime())){
  //           date.setDate(date.getDate() + days);

  //           var date_day2 = date.getDate();
  //           if (date_day2<10) {
  //           	date_day2 = '0' + date_day2;
  //           }

  //           var month2 = date.getMonth() + 1;
  //           if (month2<10) {
  //           	month2 = '0' + month2;
  //           }

  //           var doe = date_day2 + '-' + month2 + '-' + date.getFullYear();
  //           console.log("d-m-Y", doe );
  //           $('.children-container').find('.datepickerjui-child_doe').val(doe);

  //       } else {
  //           console.log("Invalid Date");  
  //       }
	}

	$(function(){
		
		$(document).on('click', '.more-children', function(){
		    
			var this_e = this;

			var date1 = new Date();
			var date_day = date1.getDate();
            if (date_day<10) {
            	date_day = '0' + date_day;
            }
			var month = date1.getMonth() + 1;
            if (month<10) {
            	month = '0' + month;
            }            
			var todayDMY = date_day + '-' + month + '-' + date1.getFullYear();			
			var todayYMD = date1.getFullYear() + '-' + month + '-' + date_day;
			console.log("today", todayDMY);
			
			var parentRow = $(this).closest('.children-container');
			var clonedElement = $('#additional').html();
			parentRow.append(clonedElement);

			$('.children-container').find('.datepickerjui-child_dob').val(todayDMY);
			// $('.children-container').find('.datepickerjui-child_doe').val(todayDMY);
			
			$('.children-container').find('.datepickerjui-child_dob').datepicker({
	            dateFormat : 'dd-mm-yy',
	            onSelect: function(dateText) {
			        console.log("Selected date: " + dateText + "; input's current value: " + this.value);
			        autoExpireDate(dateText);
			    },
	        });
	        $('.children-container').find('.datepickerjui-child_doe').datepicker({
	            dateFormat : 'dd-mm-yy',
	        });

			// auto expiry date
			autoExpireDate(todayYMD);
	        
		});		

		$('.single-date-picker').daterangepicker({
			singleDatePicker: true,
			showDropdowns: true,
			autoUpdateInput: false,			
			locale: {
				format: 'DD-MM-YYYY'
			}
		});

		$('.single-date-picker').on('apply.daterangepicker', function(ev, picker){
			$(this).val(picker.startDate.format('DD-MM-YYYY'));
		});

		$(document).on('click', '.remove-children', function(){
			$(this).closest('.row').remove();
		});				
	});
</script>
@endsection