<?php $ci = get_instance();?>
<form onSubmit="return edit_validation(this);" action="<?php echo base_url($this->router->fetch_class()."/update")?>" method="POST" style="padding-left: 5px; padding-right: 5px;">
	<fieldset>
		<?php foreach($ci->report_array as $x=>$v):?>
			<legend style="<?php if($x != 0) echo "margin-top: 20px;";?>"><?php echo $v;?></legend>
			<table class="table table-bordered">
				<thead>
					<tr>
						<th>E-Mail Address</th>
						<th style="width: 1%; white-space: nowrap;">Action</th>
					</tr>
				</thead>
				<tr>
					<td colspan="99" style="text-align: center;">
						<a href="javascript:;" data-report="<?php if(isset($ci->report_id_array[$x])) echo $ci->report_id_array[$x];?>" class="btn btn-primary btn_email_add">
							<i class="fa fa-plus-circle"></i>
						</a>
					</td>
				</tr>
			</table>
		<?php endforeach;?>
	</fieldset>
	<div class="form-group" style="margin-top: 30px;">
		<label></label>
		<button type="submit" id="edit_btn_submit" class="btn btn-primary btn-xs-block btn_submit">
			<i class="fa fa-save"></i>
			Save
		</button>
	</div>
</form>

<script>
	$(document).ready(function(){
//		$("#edit_ajax_container .select2").select2();

		edit_fill_existing_data();

		$(".btn_email_add").click(function(){
			edit_add_row($(this).attr("data-report"));
		});
	});

	function edit_fill_existing_data(){
		var tr;
		<?php if(isset($data_array)):?>
			<?php foreach($data_array as $v):?>
				tr = edit_add_row("<?php echo $v->REPORT;?>");
				$(tr).find("[name='ID[]']").val("<?php echo $v->ID;?>");
				$(tr).find("[name='EMAIL[]']").val("<?php echo $v->EMAIL;?>");
			<?php endforeach;?>
		<?php endif;?>
	}

	function edit_add_row(report_id){
		var string = "";
		string += "<tr>";
		string += 	"<td>";
		string += 		"<input type='hidden' name='ID[]'>";
		string += 		"<input type='hidden' name='REPORT[]' value='" + report_id + "'>";
		string += 		"<input type='text' name='EMAIL[]' maxlength='200' class='form-control' autocomplete='OFF' required='required'>";
		string += 	"</td>";
		string += 	"<td style='text-align: center;'>";
		string += 		"<a href='javascript:;' class='btn btn-danger btn_email_delete'>";
		string += 			"<i class='fa fa-ban'></i>";
		string += 		"</a>";
		string += 	"</td>";
		string += "</tr>";

		$("[data-report='" + report_id + "']").closest("tr").before(string);
		$("[data-report='" + report_id + "']").closest("tr").prev().find(".btn_email_delete").click(function(){
			edit_remove_row($(this).closest("tr"));
		});

		return $("[data-report='" + report_id + "']").closest("tr").prev();
	}

	function edit_remove_row(tr){
		var id = $(tr).find("[name='ID[]']").val();

		if(id != ""){
			$(tr).closest("form").append("<input type='hidden' name='DEL_ID[]' value='" + id + "'>");
		}
		$(tr).remove();
	}

	function edit_validation(form){
		var error = "";
		
		$(form).find("[required]").each(function(){
			if($(this).val() == ""){
				if(error != "") error += "<br>";
				switch($(this).attr("name")){
					case "NAME":
						error += "Please fill in the Name!";
						break;
					default:
						error += "Please complete the Form!";
						break;
				}
				
				return false;
			}
		});

		if(error == ""){
			disable_btn(".btn_submit");
		}
		else{
			prompt_error(error);
			return false;
		}
	}
</script>