@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">
	@if(request()->member_type == 'corporate-patron')
		@include('backend.members.corporate.edit-header')
	@else
		@include('backend.members.edit.edit-header')
	@endif
	<div class="col-md-12">
		<form method="POST" action="{{route('golf-operation.members.update.references',$editData->id)}}@if(request()->member_type == 'corporate-patron')?member_type=corporate-patron @endif" enctype="multipart/form-data">
			@csrf
			<div class="card">
				<div class="card-header">
					<h3 class="card-title">References</h3>
				</div>
				<div class="card-body">
					@if (old('name'))
						@foreach (old('name') as $reference_row)
						<div class="row">
							<div class="col-sm-2">
								<div class="form-group">
									<label class="control-label">Member. No</label>
									<input type="text" name="member_no[]" class="form-control reference-search form-control-sm" >
								</div>
							</div>
							<div class="col-sm-3">
								<div class="form-group">
									<label class="control-label">Name</label>
									<input type="text" name="name[]" class="form-control reference-mem-name form-control-sm" >
								</div>
							</div>
							
							<div class="col-sm-3">
								<div class="form-group">
									<label class="control-label">Email</label>
									<input type="email" name="email[]" class="form-control reference-mem-email form-control-sm" >
								</div>
							</div>
							<div class="col-sm-2">
								<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-xs"><i class="fa fa-plus"></i></button>
								<button type="button" class="btn btn-danger remove-reference btn-xs 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-2">
								<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 reference-search form-control-sm" >
								</div>
							</div>
							<div class="col-sm-3">
								<div class="form-group">
									<label class="control-label">Name</label>
									<input type="text" name="name[]" value="{{ $reference_row->name }}" class="form-control reference-mem-name form-control-sm" >
								</div>
							</div>							
							<div class="col-sm-3">
								<div class="form-group">
									<label class="control-label">Email</label>
									<input type="email" name="email[]" value="{{ $reference_row->email }}" class="form-control reference-mem-email form-control-sm" >
								</div>
							</div>
							<div class="col-sm-2">
								<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-xs"><i class="fa fa-plus"></i></button>
								<button type="button" class="btn btn-danger delete btn-xs" data-id="{{ $reference_row->id }}" data-tablename="member_references"><i class="fa fa-remove"></i></button>
							</div>
						</div>
						@endforeach
					@else
						<div class="row">
							<div class="col-sm-2">
								<div class="form-group">
									<label class="control-label">Member. No</label>
									<input type="text" name="member_no[]" class="form-control reference-search form-control-sm" >
								</div>
							</div>
							<div class="col-sm-3">
								<div class="form-group">
									<label class="control-label">Name</label>
									<input type="text" name="name[]" class="form-control reference-mem-name form-control-sm" >
								</div>
							</div>							
							<div class="col-sm-3">
								<div class="form-group">
									<label class="control-label">Email</label>
									<input type="email" name="email[]" class="form-control reference-mem-email form-control-sm" >
								</div>
							</div>
							<div class="col-sm-2">
								<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-xs"><i class="fa fa-plus"></i></button>
								<button type="button" class="btn btn-danger remove-reference btn-xs"><i class="fa fa-remove"></i></button>
							</div>
						</div>
					@endif

				</div>
				<div class="card-footer text-right">
					@if(request()->member_type == 'corporate-patron')
						<a href="{{route('golf-operation.corporate-patron.associate.edit', $editData->id)}}?member_type=corporate-patron" 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">
					@else
						<a href="{{route('golf-operation.members.edit.golfing-background', $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">
					@endif					
				</div>
			</div>			
		</form>	
	</div>
</div>
@endsection
@section('page_script')
<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();
		});

		$(document).on('change, keyup', '.reference-search', function(){
            var btn = $(this);
            var form = $(this).closest('.row');
            if($(this).val()){
                $.ajax({
                    url: '{{ route("get-member-info") }}?membership_no='+$(this).val(),
                    dataType: 'json',
                    success: function(result){
                        if(result.status == 'success'){
                        	form.find('.reference-mem-name').val(result.data.name);                            
                			form.find('.reference-mem-email').val(result.data.email);                            
                        }else{                            
                            form.find('.reference-mem-name').val('');                            
                			form.find('.reference-mem-email').val('');                     
                            
                        }
                    },
                    error: function(){
                        form.find('.reference-mem-name').val('');                            
                		form.find('.reference-mem-email').val('');                                         
                    }
                });             
            }else{
                form.find('.reference-mem-name').val('');                            
                form.find('.reference-mem-email').val('');                                                
            }
        });			
	});
</script>
@endsection