@extends('frontend.layouts.member-app')
@section('content')
<style type="text/css">
	input[type="file"]{
		height: 32px !important;
		line-height: 1.1rem;
	}
</style>
<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">References</h3>
	</div>
	<div class="panel-body">

		@if (Session::has('message'))
			    <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>
		@endif
		@if ($errors->any())
			    <div class="alert alert-danger col-md-6 col-md-offset-2">
			        <ul>
			            @foreach ($errors->all() as $error)
			                <li>{{ $error }}</li>
			            @endforeach
			        </ul>
			    </div>
		@endif
		
		<form method="POST" action="{{route('become-member.references-info.update',$editData->id)}}" enctype="multipart/form-data">
			@csrf
			<div class="card">
				<div class="card-body">
					@if (old('name'))
					@foreach (old('name') as $reference_row)
					<div class="row">
						<div class="col-sm-5">
							<div class="form-group">
								<label class="control-label">Name</label>
								<input type="text" name="name[]" class="form-control form-control-sm" >
							</div>
						</div>
						<div class="col-sm-5">
							<div class="form-group">
								<label class="control-label">Member. No</label>
								<input type="text" name="member_no[]" class="form-control form-control-sm" >
							</div>
						</div>
						<div class="col-sm-5">
							<div class="form-group">
								<label class="control-label">Email</label>
								<input type="email" name="email[]" class="form-control form-control-sm" >
							</div>
						</div>
						<div class="col-sm-5">
							<div class="form-group">
								<label class="control-label">Signature</label>
								<input type="file" name="signature[]" class="form-control form-control-sm" />
							</div>
						</div>
						<div class="col-sm-2 action-column" style="padding-top: 28px;">
							<button type="button" class="btn btn-success more-reference btn-sm"><i class="fa fa-plus"></i></button>
							<button type="button" class="btn btn-danger remove-reference btn-sm d-none"><i class="fa fa-remove"></i></button>
						</div>
					</div>
					@endforeach
					@elseif($editData->reference && count($editData->reference)>0)
					@foreach ($editData->reference as $reference_row)
					<div class="row">
						<input type="hidden" name="reference_id[]" value="{{ $reference_row->id }}">
						<div class="col-sm-5">
							<div class="form-group">
								<label class="control-label">Name</label>
								<input type="text" name="name[]" value="{{ $reference_row->name }}" class="form-control form-control-sm" >
							</div>
						</div>
						<div class="col-sm-5">
							<div class="form-group">
								<label class="control-label">Member. No</label>
								<input type="text" name="member_no[]" value="{{ $reference_row->member_no }}" class="form-control form-control-sm" >
							</div>
						</div>
						<div class="col-sm-5">
							<div class="form-group">
								<label class="control-label">Email</label>
								<input type="email" name="email[]" value="{{ $reference_row->email }}" class="form-control form-control-sm" >
							</div>
						</div>
						<div class="col-sm-5">
							<div class="form-group">
								<label class="control-label">Signature</label>
								<input type="file" name="signature[]" class="form-control form-control-sm" />
							</div>
						</div>
						<div class="col-sm-2 action-column" style="padding-top: 28px;">
							<button type="button" class="btn btn-success more-reference btn-sm"><i class="fa fa-plus"></i></button>
							<button type="button" class="btn btn-danger remove-reference btn-sm d-none"><i class="fa fa-remove"></i></button>
						</div>
					</div>
					@endforeach
					@else
					<div class="row">
						<div class="col-sm-5">
							<div class="form-group">
								<label class="control-label">Name</label>
								<input type="text" name="name[]" class="form-control form-control-sm" >
							</div>
						</div>
						<div class="col-sm-5">
							<div class="form-group">
								<label class="control-label">Member. No</label>
								<input type="text" name="member_no[]" class="form-control form-control-sm" >
							</div>
						</div>
						<div class="col-sm-5">
							<div class="form-group">
								<label class="control-label">Email</label>
								<input type="email" name="email[]" class="form-control form-control-sm" >
							</div>
						</div>
						<div class="col-sm-5">
							<div class="form-group">
								<label class="control-label">Signature</label>
								<input type="file" name="signature[]" class="form-control form-control-sm" />
							</div>
						</div>
						<div class="col-sm-2 action-column" style="padding-top: 28px;">
							<button type="button" class="btn btn-success more-reference btn-sm"><i class="fa fa-plus"></i></button>
							<button type="button" class="btn btn-danger remove-reference btn-sm d-none"><i class="fa fa-remove"></i></button>
						</div>
					</div>
					@endif

				</div>
				<div class="card-footer text-right">
					<a href="{{route('become-member.golfing-background', $editData->id)}}" class="btn btn-primary btn-sm">Previous</a>				
					<input type="submit" name="action" value="Preview" class="btn btn-warning btn-sm">					
				</div>
			</div>			
		</form>	
	</div>
	<div class="panel-footer">

	</div>
</div>

<style type="text/css">
	.action-column button {
		min-width: auto!important;
	}
</style>
<script type="text/javascript">
	$(function(){								
		$('.single-date-picker').daterangepicker({
			singleDatePicker: true,
			showDropdowns: true
		});

		$(document).on('click', '.more-reference', function(){
			var parentRow = $(this).closest('.card-body');
			var clonedElement = $(this).closest('.row').clone(true);
			clonedElement.find('input').val('');
			clonedElement.find('.remove-reference').removeClass('d-none');
			parentRow.append(clonedElement);			
		});

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

@endsection