
@extends('adminlte::page')
 
@section('content')
<?php Fun::lang()?>
    <div class="title-page">
        <div class="page-bar">
            <ul class="page-breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> Dashboard</a></li>
                <li><a href="#">Manage Project Owner</a></li>
                <li><a href="#">Add Payment List</a></li>
            </ul>
        </div>
    </div>
<div class="page">
	<div class="row">
		<div class="col-sm-12 col-xs-12">
			<div class="title-page">
                <div class="pull-left">
                    <h3>Add Payment List</h3>
                </div>
            </div>
		</div>
	</div>
	
	<form action="{{ route('external-payment-list.store') }}" method="POST">
		@csrf
		<table class="table table-bordered" id="add_payment_external">  
			<tr>
				<th width="100px;">No</th>
				<th>Item Code</th>
				<th>Client Name</th>
				<th>Payment Date</th>
				<th>Amount</th>
				<th>Action</th>
			</tr>
			<tr>  
				<td width="100px;"><input type="text" name="no[]" value="1" class="form-control form-control readonly_0" /></td>  
				<td><input type="text" name="item[]" placeholder="Enter Item Code" class="form-control form-control item_0" required /></td>  
				<td><input type="text" name="client[]" placeholder="Client Name" class="form-control form-control client_0 readonly_0"  required /></td>  
				<td><input type="text" name="date[]" class="form-control date_picker" /></td>  
				<td><input type="text" name="amount[]" placeholder="Payment amount" class="form-control form-control number-only" required /></td>  
				<td><button type="button" name="add" id="add" class="button_primary btn-circle"><i class="glyphicon glyphicon-plus-sign"></i></button></td>
			</tr> 
			
			
		</table> 
		<div class="row">
			<div class="col-sm-12">
				<button type="submit" class="button_sm button_primary pull-right"><span class="fa fa-save"></span> Save</button>
			</div>
		</div>
		
	</form>
			
</div>
@endsection
@section('js')
    <script type="text/javascript">

		var i = 0;
		var no = 1;
		var abc = 0;
	       
	    $("#add").click(function(){
	        ++i;
	        ++no;
	   
	        $("#add_payment_external").append('<tr><td width="100px;"><input type="text" name="no[]" value="'+no+'" class="form-control form-control readonly_'+no+'" /></td><td><input type="text" name="item[]" placeholder="Enter Item Code" class="form-control form-control item_'+i+'" required /></td><td><input type="text" name="client[]" placeholder="Client Name" class="form-control form-control client_'+i+' readonly_'+no+'"  required /></td><td><input type="text" name="date[]" class="form-control form-control date_picker'+i+'" /></td><td><input type="text" name="amount[]" placeholder="Payment Amount" class="form-control form-control number-only'+i+'" required /></td><td><button type="button" class="button_danger btn-circle remove-tr"><i class="glyphicon glyphicon-minus-sign"></i></button></td></tr>');
	        
	        $(".date_picker"+i).datepicker({dateFormat: "dd-mm-yy"}).datepicker('setDate', new Date());
			$('.number-only'+i).keypress(function(e) {
				if(isNaN(this.value+""+String.fromCharCode(e.charCode))) return false;
			});
			var abc = i;
			$(".item_"+i).autocomplete({
				source: function(request, response) {
					$.ajax({
						url: "/realty/get-search-client-name",
						dataType: "json",
						data: {
							term : request.term
						},
						success: function(data) {
							$.each(data, function (index, element) {
								$(".client_"+abc).val(element.client_name);
							});
							if(data.value == 'no-result'){
								$(".remove").remove();
							}
						}
					});
				},
				minLength: 6,
			});
		    $(".readonly_"+no).keydown(function(e){
		        e.preventDefault();
		    });
	    });

	    $(".readonly_0").keydown(function(e){
	        e.preventDefault();
	    });


	    $(document).on('click', '.remove-tr', function(){  
			$(this).parents('tr').remove();
			--no;
	    });
	    $(".date_picker").datepicker({dateFormat: "dd-mm-yy"}).datepicker('setDate', new Date());
	    $(document).ready(function() {
			$(".date_picker").datepicker({
				format: 'yy-mm-dd'
			});
			$('.number-only').keypress(function(e) {
				if(isNaN(this.value+""+String.fromCharCode(e.charCode))) return false;
			});
	    });
	      
		$(document).ready(function() {
			$(".item_0").autocomplete({
				source: function(request, response) {
					$.ajax({
						url: "/realty/get-search-client-name",
						dataType: "json",
						data: {
							term : request.term
						},
						success: function(data) {
							$.each(data, function (index, element) {
								$(".client_0").val(element.client_name);
							});
							if(data.value == 'no-result'){
								$(".remove").remove();
							}
						}
					});
				},
				minLength: 0,
			});
		});
    </script>
@endsection



