<button type="button" class="btn btn-primary" onclick="opnPaymentEntry()">Add a payment plan</button>
<div id="myModal3" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Payment Plan</h4>
      </div>
      <div class="modal-body">
			<div class="form-group">
			<label for="plan_title">Plan Title:</label>
			<input type="text" class="form-control" id="plan_title">
			</div>
			<div class="form-group">
			<label for="plan_title">Plan Details:</label>
			<table class="table table-border" id="mytab1">
				<tr><th style="width:150px;">Percentage</th><th  style="width:calc(100% - 150px);">Description</th></tr>
				<tr class="rms_row"><td><input type="text" class="plan_percentage"  name="plan_percentage[]"></td><td><input type="text" class="plan_description"  name="plan_description[]" style="width:100%;"></td></tr>
				<tr class="rms_row"><td><input type="text" class="plan_percentage" name="plan_percentage[]"></td><td><input type="text"  class="plan_description" name="plan_description[]" style="width:100%;"></td></tr>
				<tr class="rms_row"><td><input type="text" class="plan_percentage" name="plan_percentage[]"></td><td><input type="text" class="plan_description"  name="plan_description[]" style="width:100%;"></td></tr>
				<tr class="rms_row"><td><input type="text" class="plan_percentage" name="plan_percentage[]"></td><td><input type="text"  class="plan_description" name="plan_description[]" style="width:100%;"></td></tr>
				<tr class="rms_row"><td><input type="text" class="plan_percentage" name="plan_percentage[]"></td><td><input type="text"  class="plan_description" name="plan_description[]" style="width:100%;"></td></tr>
				<tr class="rms_row"><td><input type="text" class="plan_percentage" name="plan_percentage[]"></td><td><input type="text"  class="plan_description" name="plan_description[]" style="width:100%;"></td></tr>
				<tr class="rms_row more_hide hide"><td><input type="text"  class="plan_percentage" name="plan_percentage[]" ></td><td><input type="text" class="plan_description"  name="plan_description[]" style="width:100%;"></td></tr>
				<tr class="rms_row more_hide hide"><td><input type="text"  class="plan_percentage" name="plan_percentage[]"></td><td><input type="text"  class="plan_description" name="plan_description[]" style="width:100%;"></td></tr>
				<tr class="rms_row more_hide hide"><td><input type="text"  class="plan_percentage" name="plan_percentage[]"></td><td><input type="text"  class="plan_description" name="plan_description[]" style="width:100%;"></td></tr>
				<tr class="rms_row more_hide hide"><td><input type="text"  class="plan_percentage" name="plan_percentage[]"></td><td><input type="text"  class="plan_description" name="plan_description[]" style="width:100%;"></td></tr>
				<tr class="rms_row more_hide hide"><td><input type="text"  class="plan_percentage" name="plan_percentage[]"></td><td><input type="text"  class="plan_description" name="plan_description[]" style="width:100%;"></td></tr>
				<tr class="rms_row more_hide hide"><td><input type="text"  class="plan_percentage" name="plan_percentage[]"></td><td><input type="text"  class="plan_description" name="plan_description[]" style="width:100%;"></td></tr>
				<tr class="rms_row more_hide hide"><td><input type="text"  class="plan_percentage" name="plan_percentage[]"></td><td><input type="text"  class="plan_description" name="plan_description[]" style="width:100%;"></td></tr>
				<tr id="open_all"><td colspan="100%"><a href="javascript:void(0)" onclick="OpenAll(this)">Show More</a></td></tr>
				</table>
			</div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary"  onclick="addPlan()">Add Plan</button>
      </div>
    </div>

  </div>
</div>
 
<script>
function opnPaymentEntry(){
	$('#myModal3').modal('show')
}
var error_found;
function addPlan(){
	var html ='';
	var r_number = Math.floor(Math.random() * 100);
	if($('#plan_title').val()==''){ alert('Please Enter Payment Plan Titme');$('#plan_title').focus();return false; }
		error_found = false;
		html+= '<tr><td colspan="100%" class="eac_row"><table class="" style="width:100%;"><tr><td colspan="100%"><table class="tabler" ><tr><th colspan="100%"  style="background-color:#4CAF50;color:white;">'+$('#plan_title').val()+' <a href="javascript:void(0)" onclick="removeThisRowTable(this)" class="pull-right"  style="color:white;">Remove</a></td></tr>';
		html+='<tr>'; 
		html+=' <input type="hidden" name="PlaceAnAd[payment_plan]['+r_number+'][title]" value="'+$('#plan_title').val()+'"> ';
			var row_added = 0 ; 
		$('#mytab1 tr.rms_row').each(function(){
			if(!error_found){
				if($(this).find('.plan_percentage').val() != '' || $(this).find('.plan_description').val()!='' ){
				if($(this).find('.plan_percentage').val() != '' ){ if($(this).find('.plan_description').val()==''){ alert("Please enter details here");$(this).find('.plan_description').focus();error_found = true; return false;   } } 
			
				if($(this).find('.plan_description').val() != '' ){ if($(this).find('.plan_percentage').val()==''){ alert("Please enter percentage here");$(this).find('.plan_percentage').focus();error_found = true; return false;   } }
				 	 if(isNaN($(this).find('.plan_percentage').val())){ alert("Please enter number only  here");$(this).find('.plan_percentage').focus();error_found = true; return false; }
			
				html+='<td><b>'+$(this).find('.plan_percentage').val()+'</b><br />'+$(this).find('.plan_description').val();
				html+=' <input type="hidden" name="PlaceAnAd[payment_plan]['+r_number+'][percentage][]" value="'+$(this).find('.plan_percentage').val()+'"> ';
				html+=' <input type="hidden" name="PlaceAnAd[payment_plan]['+r_number+'][description][]" value="'+$(this).find('.plan_description').val()+'"> ';
				html +=  '</td>';row_added++;
				}
			}
		})
		html+='</tr></table></td></tr></table>';
		if(!error_found && html!=''){
		    if(row_added==0){ alert('please add atleast one item');return false;  }
			$('#paln_details').before(html);$('#myModal3').modal('hide')
		}
	
}
function OpenAll(k){
	$('.more_hide').removeClass('hide');$('#open_all').remove();
}
function removeThisRowTable(k){
	$(k).parent().parent().parent().parent().remove();
}
</script>
