<button type="button" class="btn btn-primary" onclick="opnPaymentEntry()">Add a payment plan</button>
<div id="myModal3" class="modal fade" role="dialog" data-backdrop="static">
  <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" placeholder="Plan Title"><br />
			<input type="text" class="form-control" id="plan_title_ar" placeholder="Title in arabic" dir="rtl">
			</div>
			<div class="form-group">
			<label for="plan_title">Plan Details:</label>
			<table class="table table-border" id="mytab1">
				<tr id="appendR"><th style="width:50px;">Percentage</th><th  style="width:calc(100% - 150px);">Description</th><th  style="width:calc(100% - 150px);">Description ar</th></tr>
				<tr class="rms_row"><td><input type="text" class="plan_percentage" style="width:50px;"  name="plan_percentage[]"></td><td><input type="text" class="plan_description"  name="plan_description[]" style="width:100%;"></td><td><input type="text" class="plan_description_a"  name="plan_description_a[]" style="width:100%;"  dir="rtl"></td></tr>
				<tr class="rms_row"><td><input type="text" class="plan_percentage" style="width:50px;"  name="plan_percentage[]"></td><td><input type="text" class="plan_description"  name="plan_description[]" style="width:100%;"></td><td><input type="text" class="plan_description_a"  name="plan_description_a[]" style="width:100%;"  dir="rtl"></td></tr>
				<tr class="rms_row"><td><input type="text" class="plan_percentage" style="width:50px;"  name="plan_percentage[]"></td><td><input type="text" class="plan_description"  name="plan_description[]" style="width:100%;"></td><td><input type="text" class="plan_description_a"  name="plan_description_a[]" style="width:100%;"  dir="rtl"></td></tr>
				<tr class="rms_row"><td><input type="text" class="plan_percentage" style="width:50px;"  name="plan_percentage[]"></td><td><input type="text" class="plan_description"  name="plan_description[]" style="width:100%;"></td><td><input type="text" class="plan_description_a"  name="plan_description_a[]" style="width:100%;"  dir="rtl"></td></tr>
				<tr class="rms_row"><td><input type="text" class="plan_percentage" style="width:50px;"  name="plan_percentage[]"></td><td><input type="text" class="plan_description"  name="plan_description[]" style="width:100%;"></td><td><input type="text" class="plan_description_a"  name="plan_description_a[]" style="width:100%;"  dir="rtl"></td></tr>
				<tr class="rms_row"><td><input type="text" class="plan_percentage" style="width:50px;"  name="plan_percentage[]"></td><td><input type="text" class="plan_description"  name="plan_description[]" style="width:100%;"></td><td><input type="text" class="plan_description_a"  name="plan_description_a[]" style="width:100%;"  dir="rtl"></td></tr>
				<tr class="rms_row _row more_hide hide"><td><input type="text" class="plan_percentage" style="width:50px;"  name="plan_percentage[]"></td><td><input type="text" class="plan_description"  name="plan_description[]" style="width:100%;"></td><td><input type="text" class="plan_description_a"  name="plan_description_a[]" style="width:100%;"  dir="rtl"></td></tr>
				<tr class="rms_row _row more_hide hide"><td><input type="text" class="plan_percentage" style="width:50px;"  name="plan_percentage[]"></td><td><input type="text" class="plan_description"  name="plan_description[]" style="width:100%;"></td><td><input type="text" class="plan_description_a"  name="plan_description_a[]" style="width:100%;"  dir="rtl"></td></tr>
				<tr class="rms_row _row more_hide hide"><td><input type="text" class="plan_percentage" style="width:50px;"  name="plan_percentage[]"></td><td><input type="text" class="plan_description"  name="plan_description[]" style="width:100%;"></td><td><input type="text" class="plan_description_a"  name="plan_description_a[]" style="width:100%;"  dir="rtl"></td></tr>
				<tr class="rms_row _row more_hide hide"><td><input type="text" class="plan_percentage" style="width:50px;"  name="plan_percentage[]"></td><td><input type="text" class="plan_description"  name="plan_description[]" style="width:100%;"></td><td><input type="text" class="plan_description_a"  name="plan_description_a[]" style="width:100%;"  dir="rtl"></td></tr>
				<tr class="rms_row _row more_hide hide"><td><input type="text" class="plan_percentage" style="width:50px;"  name="plan_percentage[]"></td><td><input type="text" class="plan_description"  name="plan_description[]" style="width:100%;"></td><td><input type="text" class="plan_description_a"  name="plan_description_a[]" style="width:100%;"  dir="rtl"></td></tr>
				<tr class="rms_row _row more_hide hide"><td><input type="text" class="plan_percentage" style="width:50px;"  name="plan_percentage[]"></td><td><input type="text" class="plan_description"  name="plan_description[]" style="width:100%;"></td><td><input type="text" class="plan_description_a"  name="plan_description_a[]" style="width:100%;"  dir="rtl"></td></tr>
				<tr class="rms_row _row more_hide hide"><td><input type="text" class="plan_percentage" style="width:50px;"  name="plan_percentage[]"></td><td><input type="text" class="plan_description"  name="plan_description[]" style="width:100%;"></td><td><input type="text" class="plan_description_a"  name="plan_description_a[]" style="width:100%;"  dir="rtl"></td></tr>
				<tr class="rms_row _row more_hide hide"><td><input type="text" class="plan_percentage" style="width:50px;"  name="plan_percentage[]"></td><td><input type="text" class="plan_description"  name="plan_description[]" style="width:100%;"></td><td><input type="text" class="plan_description_a"  name="plan_description_a[]" style="width:100%;"  dir="rtl"></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" id="edt_button"   onclick="addPlan(this)">Add / Edit Plan</button>
      </div>
    </div>

  </div>
</div>
 
 
<script>
function opnPaymentEntry(){
	$('#edt_button').attr('data-id','');
	$('.appendR').remove();
	$('.rms_row').find('input').val('');
	$('#plan_title').val('');
	$('#plan_title_ar').val('');
	$('#myModal3').modal('show')
}
var error_found;
function addPlan(k){
	
	var html ='';
	var attrId = $(k).attr('data-id') 
	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;
		rowId = attrId;
		if(attrId==undefined || attrId ==''){ 	rowId = 'row_'+r_number;  html+='<tr id="'+rowId+'">';  }
		html+= '<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> <a href="javascript:void(0)" data-id="'+rowId+'"  onclick="editThisRowTable(this)" class="pull-right" style="color:white;margin-right:5px;">Edit</a></td></tr>';
		html+='<tr class="fetures">'; 
		html+=' <input type="hidden" id="f_plan_title"  name="PlaceAnAd[payment_plan]['+r_number+'][title]" value="'+$('#plan_title').val()+'"> ';
		html+=' <input type="hidden" id="f_plan_title_ar" name="PlaceAnAd[payment_plan]['+r_number+'][title_ar]" value="'+$('#plan_title_ar').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" id="per"  name="PlaceAnAd[payment_plan]['+r_number+'][percentage][]" value="'+$(this).find('.plan_percentage').val()+'"> ';
				html+=' <input type="hidden" id="desc"  name="PlaceAnAd[payment_plan]['+r_number+'][description][]" value="'+$(this).find('.plan_description').val()+'"> ';
				html+=' <input type="hidden" id="desca" name="PlaceAnAd[payment_plan]['+r_number+'][description_Ar][]" value="'+$(this).find('.plan_description_a').val()+'"> ';
				html +=  '</td>';row_added++;
				}
			}
		})
		html+='</tr></table></td></tr></table>';
		if(attrId==undefined || attrId ==''){  html+='</tr>';  }
		if(!error_found && html!=''){
		    if(row_added==0){ alert('please add atleast one item');return false;  }
		    if(attrId!=undefined && attrId!=''){ $('#'+attrId).html(html);$('.appendR').remove(); }else{ $('#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();
}
function editThisRowTable(k){
	var idss = $(k).attr('data-id') ;
	$('.rms_row').find('input').val('');
	$('#plan_title').val('');
	$('#plan_title_ar').val('');
	if(idss != undefined && $('#'+idss).length=='1'){
		var objF = $('#'+idss);
		$('#plan_title').val(objF.find('#f_plan_title').val());
		$('#plan_title_ar').val(objF.find('#f_plan_title_ar').val());
		var trw =  objF.find('.fetures');
		var ht = '';
		$('.appendR').remove();
		trw.find('td').each (function() {
		 
			ht+='<tr class="rms_row appendR"><td><input type="text" class="plan_percentage" style="width:50px;" value="'+$(this).find('#per').val()+'"  name="plan_percentage[]"></td><td><input type="text" class="plan_description" value="'+$(this).find('#desc').val()+'"  name="plan_description[]" style="width:100%;"></td><td><input type="text" class="plan_description_a" value="'+$(this).find('#desca').val()+'"  name="plan_description_a[]" style="width:100%;"  dir="rtl"></td></tr>';
				
		});                          
		$('#appendR').after(ht);
		$('#myModal3').modal('show');
		$('#edt_button').attr('data-id',idss)
	}
}
</script>
