@extends('frontend.layouts.app')
@section('content')
<div class="panel panel-default" style="margin-top: 20px;">
	<div class="panel-heading bg-success">
		@include('frontend.become-member.membership-header')
		<h3 class="panel-title">Family Details</h3>
	</div>
	<div class="panel-body">

		@if (Session::has('message'))
			<div class="row">
			    <div class="col-md-6 col-md-offset-2 alert alert-info">
			    	<button type="button" class="close" data-dismiss="alert">
						<i class="ace-icon fa fa-times"></i>
					</button>
					{{Session::get('message')}}
			    </div>
			</div>
		@endif
		@if ($errors->any())
			<div class="row">
			    <div class="alert alert-danger col-md-6 col-md-offset-2">
			        <ul>
			            @foreach ($errors->all() as $error)
			                <li>{{ $error }}</li>
			            @endforeach
			        </ul>
			    </div>
			</div>
		@endif
		
		<form method="POST" action="{{route('become-member.family-details.update', $editData->id)}}">
			@csrf
			<div class="card">
				<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-7">
							<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-2">
							<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-3">
							<div class="form-group">
								<label class="control-label">Date of Birth</label>
								<input type="text" name="spouse_dob" value="{{$spouse_dob}}" class="form-control single-date-picker" />
							</div>
						</div>
						<div class="col-sm-6">
							<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-6">
							<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 $child_row)
							<div class="row">
								<div class="col-sm-7">
									<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</label>
										<input type="text" name="child_dob[]" class="form-control single-date-picker" />
									</div>
								</div>
								<div class="col-sm-5">
									<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-5">
									<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-2 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>
							</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-7">
									<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[]" class="form-control" value="">
									</div>
								</div>
								<div class="col-sm-3">
									<div class="form-group">
										<label class="control-label">Date of Birth</label>
										<input type="text" name="child_dob[]" value="{{ $child_row->dob }}" class="form-control single-date-picker" />
									</div>
								</div>
								<div class="col-sm-5">
									<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-5">
									<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-2 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>
							</div>
							@endforeach
							@else
							<div class="row">
								<div class="col-sm-7">
									<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</label>
										<input type="text" name="child_dob[]" class="form-control single-date-picker" />
									</div>
								</div>
								<div class="col-sm-5">
									<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-5">
									<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-2 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>
							</div>
							@endif
						</div>
					</div>
				</div>
				<div class="card-footer text-right">
					<a href="{{route('become-member.personal-info.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 class="panel-footer">

	</div>
</div>

@endsection
@section('before_body_end')
<script type="text/javascript">
	$(function(){								
		$('.single-date-picker').daterangepicker({
			singleDatePicker: true,
			showDropdowns: true,
			autoUpdateInput: false,
			locale: {
				format: 'YYYY-MM-DD'
			}
		});

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

		$(document).on('click', '.more-children', function(){
			var parentRow = $(this).closest('.children-container');
			var clonedElement = $(this).closest('.row').clone(true);
			clonedElement.find('input, select').val('');
			clonedElement.find('.remove-children').removeClass('d-none');
			parentRow.append(clonedElement);
			$('.single-date-picker').daterangepicker({
				singleDatePicker: true,
				showDropdowns: true,
				locale: {
					format: 'YYYY-MM-DD'
				}
			});
		});

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