<script type="text/javascript">
	
	$(document).ready(function(){
		// orig: farouq
		//var tab = document.getElementById('tabList<?php echo $method[0]->methodID;?>');	
		//tab.className = 'active';
		
		// mod: zul
		$('#tabList<?php echo $method[0]->methodID;?>').addClass('active');
		var child = $('a#tab<?php echo $method[0]->methodID;?>').attr('href');
			$(child).addClass('active');
	});

	function deleteProcess(me){

		var text = me.getAttribute('data-parameter');
       	var id = me.getAttribute('data-id');
       	var projectID = me.getAttribute('data-project');
       	

       	if(	confirm('you are about to delete "'+text+'"') == true){
       		$.ajax({
       			method: 'POST',
       			//dataType: "json",
       			url : '<?php echo base_url('/setup/deleteReview');?>',
       			data: {
       				a : text,
       				b : id,
       				c: projectID
       			},
       			success:function(result){
       			
       				//this two line only refresh /load table and modal dialog box
       				$('#table-body').load('<?php echo current_url().' #table-row'?>');
       				$('#parentID').load('<?php echo current_url().' #optionID'?>');
       		

       			}
       		});

    	}//end if statement
	}//end function deleteRules
   
    function editProcess(arg){
    	var id = $('#hideid').val();
    	var code = $('#editKode').val();
    	var text = $('#editInput').val();
    	
    	console.log(code, text);

    	$.ajax({
    		method:'POST',
    		url: '<?php echo base_url('/setup/editReview');?>',
    		data:{
    			a : id,
    			b : code,
    			c : text
    		},
    		success:function(result){
    			$('#table-body').load('<?php echo current_url().' #table-row'?>');
    			$('#parentID').load('<?php echo current_url().' #optionID'?>');
    			$('#edit-dialog').modal('toggle');
    		}
    	});

    }

    function edit(arg) {
  
 		

    	var text = arg.getAttribute('data-parameter');
    	var kod = arg.getAttribute('data-kode');
    	var id = arg.getAttribute('data-id');

    	
    	document.getElementById('editKode').value = kod;
    	document.getElementById('editInput').value = text;

    	document.getElementById('hideid').value = id;
    	
    }

    function addReviewItem(arg){
			/**
			* From: Zul Zolkaffly
			* Att: Farouq Zakwan
			* Note: remove document.getElementById and replace with # sign,
							$(document.getElementById is repetitive, the same thing will be called twice,
							once by regular js, once by jquery: both return the same value reference.
							Refer var projectId below.
							same goes for the other functions
			*/
			
    	var projectId = $('#Pchoose').val(); //$(document.getElementById('Pchoose')).val();
			var itemNo = $('#itemNo').val();
			var rule= $('#rule').val();
			var parent = $('#parentID').val();
			var methodID = $('#methodAddDialog').val();

			//var parent = $(document.getElementById('optionID')).val();
			//var methodID = $(document.getElementById('methodAddDialog')).val(); 

			$.ajax({
				method:'POST',
				url:'<?php echo base_url('/setup/addReviewItem');?>',
				data:{
					a:projectId,
					b:itemNo,
					c:rule,
					d:parent,
					e:methodID
				},
				success:function(result){
				//	$(document.getElementById('table-body')).load('<?php echo current_url().' #table-row'?>');
    			//	$(document.getElementById('parentID')).load('<?php echo current_url().' #optionID'?>');
    				
    			//	$('#add-dialog').modal('toggle');
    			location.reload();
				}
			});
    }

    function addNewProject(arg){
    	var title = $('#projID').val(); 
    	$.ajax({
    		method:'POST',
    		url:'<?php echo base_url('/setup/addProject');?>',
    		data:{
    			a: title
    		},success:function(result){
    			$('#dropDownProject').load('<?php echo current_url().' #wrapDropDown'?>');
    			$('#add-project').modal('toggle');
    		}
    	});
    }

	 function getParentReview(){
	    	$('#parentID').empty();

	    	var id = $('#methodAddDialog').val();
	    	var project = $('#Pchoose').val();

	    	//create query to repopulate option...
	    	$.ajax({
	    		method:'POST',
	    		url:'<?php echo base_url('/setup/getReviewList');?>',
	    		data:{
	    			a:id,
	    			b:project
	    		},
	    		dataType:'json',
	    		success:function(result){
	    			console.log(result);

	    			if(result.status = 'success'){
	    				var n = Object.keys(result.message).length;
	    				console.log(n);


	    				var i = 0;
	    				var opt = '<option></option>';

	    				for(i = 0; i<n;i++){
	    					opt = opt + '<option value="'+result.message[i].ID+'" id="optionID" class="optionID">'+result.message[i].text+'</option>'
	    				}

	    				$('#parentID').append(opt);
	    			}
	    		
	    		}
	    	});
	    }
</script>
<div class="content-wrapper">
	<!-- Content Header (Page header) -->
	<section class="content-header">
		<h1>Tetapan Semakan</h1>

		<ol class="breadcrumb">
			<li><a href="#"><i class="fa fa-dashboard"></i> Tetapan Semakan</a></li>
			<li class="active"></li>
		</ol>
	</section>


	<!-- Main content -->

	<?php 
		if(current_url() != base_url('/setup/review')){
	?>
	<div class="row " style="margin-right:3%;">
		<a class="btn btn-primary pull-right"><span class="fa fa-print"> print</span></a>
		<a class="btn btn-danger pull-right" data-toggle="modal" data-target="#add-dialog"><span class="fa fa-plus" style="margin-right:3%;"> tambah</span></a>

	</div>
	<?php
		}
	?>
	<section class="content">
	
		<!-- COMPANY INFO -->
		<!-- TODO : PUT THE ACTUAL COMPANY DETAILS HERE -->
		<div class="box box-danger">
			<div class="box-header with-border">

				<!-- <h3 class="box-title"><?php echo $this->lang->line('details'); ?></h3>	 -->

					<h3 class="box-title">Projek</h3>

					<div class="form-group">
						<div class="row">

						
						 <!-- button dropdown  -->
						<div class="btn-group col-md-10" id="dropDownProject">
							<span id="wrapDropDown">
						  <button type="button" class="btn btn-default form-control dropdown-toggle col-md-12" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
						    <?php echo $Pchoose;?> <span class="caret"></span>
						  </button>
						  <ul class="dropdown-menu col-md-12">
						  <?php
						    if ($ps) foreach($ps as $row){
								echo '<li value="'.base_url('/setup/review').'/'.$row->ID.'">';
								echo '<a href="'.base_url('/setup/review').'/'.$row->ID.'">';
								echo $row->title;
								echo '</a>';
								echo '</li>';
							}
							?>
						  </ul>
						  </span>
						</div>
						
						<!-- 
							this select has been replaced with dropdown
						-->
						<!-- <select style="padding:1%;margin-left:3%;" onchange="location = this.value">
							<option></option>
							<?php
							if ($ps) foreach($ps as $row){
								echo '<option value="'.base_url('/setup/review/').'/'.$row->ID.'">';
								echo '<a href="'.base_url('/setup/review/');
								echo '/'.$row->ID;
								echo '">';
								echo $row->title;
								echo '</a>';
								echo '</option>';
							}
							?>

						</select> -->
						<a class="btn btn-danger" class="form-control" data-toggle="modal" data-target="#add-project"><span class="fa fa-plus"></span></a>
						</div>
					</div>
				
				<div class="box-tools pull-right">
					<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
				</div>
			</div>
			
			

		
				<input type="hidden" name="ID" id="companyID" value="1" /> <!-- TODO : PUT ACTUAL COMPANY ID HERE -->
				<div class="box-body">


				<!-- 
				method nav tabs
				-->
			<div class="nav-tabs-custom">
                <!-- Tabs within a box -->
                <ul class="nav nav-tabs">

                <?php if($method)foreach($method as $row):?>
                 	<li class="" id="tabList<?php echo $row->methodID;?>">
                 		<a href="#tab-content<?php echo $row->methodID;?>" data-toggle="tab" aria-expanded="false" id="tab<?php echo $row->methodID;?>">	<?php echo $row->methodDesc;?>	
                 		</a>
                 	</li>
                <?php endforeach;?>
                  	
                </ul>

                <div class="tab-content">
					
					<!--  create container for each tab-->
					<?php if($method)foreach($method as $rM):?>
							<div id="tab-content<?php echo $rM->methodID;?>" class="tab-pane">


								<!-- table for the respective tab-->
								<table id="datatable_list" class="table table-bordered table-striped datatables" id="table-id">
									<thead>
										<tr>
											<th class="text-center col-sm-1">Item</th>
											<th class="text-center col-sm-6">SYARAT-SYARAT KELAYAKAN MEMOHON</th>
											<th class="text-center col-sm-1">Tetapan</th>
										</tr>
									</thead>
								
									<tbody id="table-body" >

									<?php if ($rs) foreach($rs as $row):
										if($rM->methodID == $row->methodID){
										
									?>
										<tr id="table-row">
											<td class="text-center"><?php echo $row->code;?></td>
											
											<td class="text-left">
												<a href="<?php echo base_url('setup/subreview/').$row->ID;?>">
													<?php echo $row->text;?>		
												</a>
											</td>
										
											<td class="text-center">

												<a  class="btn btn-primary" data-toggle="modal" data-target="#edit-dialog" data-kode="<?php echo $row->code; ?>" data-parameter="<?php echo $row->text;?>" data-id='<?php echo $row->ID;?>' data-project="<?php echo $row->projectID;?>" onclick="edit(this)">
													<span class="fa fa-edit"> </span>
												</a>

												<a class="btn btn-danger" data-toggle="modal" data-kode="<?php echo $row->code;?>" data-project="<?php echo $row->projectID;?>" onclick="deleteProcess(this)" data-id='<?php echo $row->ID;?>' data-parameter="<?php echo $row->text;?>">
													<span class="fa fa-trash"> </span>
												</a>
											</td>
										</tr>
									

									<?php
										}
									endforeach;
									?>
									</tbody>
								</table>


							</div>


					<?php endforeach;?>

                  
                </div>
            </div>
			<!--
				end method nav tabs
			-->
				</div>
				
				<div class="box-footer">
					
				</div>
				
			
		</div>
	
	</section>

</div>





<!-- MODAL SECTION -->
<!-- GENERAL MODAL -->

<!-- edit dialog -->

	<section style="overflow:hidden; padding:1%;padding-right:3%;">
		

		<div class="row">
			<div class="modal fade in col col-md-12" role="dialog" id="edit-dialog">
				<!-- <form action="<?php echo base_url('/setup/review/edit');?>" method="post"> -->
				<div class="modal-content modal-lg-6" style="margin:auto 0px;">

					<div class="modal-header">
						<a href="javascript:void(0);" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></a>
						<h3 class="modal-title" id="modal-details-label"></h3>
					</div>

					<div class="modal-body">
						
							<h3>Ubah syarat-syarat kelayakan </h3>
						
							<input type="hidden" name="hideid" id="hideid">
							<div class="form-group">
								<label>Item No : </label>
								<input type="text" placeholder="1 - a" class="form-control" id="editKode" name="itemNo">
							</div>

							<div class="form-group">
								<label>Syarat-syarat Kelayakan Memohon : </label>
								<textarea type="text" placeholder="syarat" class="form-control" id="editInput" rows="10" style="resize:none;" name="text"></textarea>
							</div>
								
							
						
					</div>
					<div class="modal-footer">
						
						<a href="javascript(void);" data-dismiss="modal" class="btn btn-danger"><span class="glyphicon glyphicon-remove" data-dismiss="modal"> batal</span></a>
						<button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-saved" onclick="editProcess(this)"> simpan</span></button>

					</div>
				</div>
			<!-- </form> -->
			</div>
		</div>


		<div class="row">
			<div class="modal fade in col col-md-12" role="dialog" id="add-dialog">
				
				<div class="modal-content modal-lg-6">
					
						<div class="modal-header">
							<a href="javascript:void(0);" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></a>
							<h3 class="modal-title" id="modal-details-label"></h3>
						</div>

						<div class="modal-body">
							<h3>Tambah syarat-syarat kelayakan</h3>
							<div class="form-group">
								<label>Projek : </label>
								<div class="form-group">
										<input type="hidden" value="<?php echo $Pid?>" name="title" id="Pchoose">
										<input type="text" class="form-control" value="<?php echo $Pchoose?>" readonly>
								</div>
							</div>

							<div class="form-group">
								<label>Method : </label>
								
									<select class="form-control" id="methodAddDialog" onchange="getParentReview()">
										<option>please select</option>
										<?php if($method) foreach($method as $row): ?>
											<option value="<?php echo $row->methodID; ?>" class="methodAddDialog">
												<?php echo $row->methodDesc;?>
											</option>
										<?php endforeach;?>
									</select>
							</div>


							<div class="form-group">
								<label>Parent : </label>
								<div class="form-group">
							
									<select class="form-control" name="parentNo" id="parentID">
									<option value="0" id="optionID"></option>
										<?php if ($rs) foreach($rs as $row):?>

											<option value="<?php echo $row->ID;?>" id="optionID" class="optionID" >
										
											<?php echo $row->text;?>
										
											</option>
										
										<?php endforeach; ?>

									</select>
							
							
								</div>
							</div>

								<div class="form-group">
									<label>Item No : </label>
									<input type="text" placeholder="1 - a" class="form-control" name="itemNo" id="itemNo">
								</div>
							<div class="form-group">
								<label>Syarat-syarat kelayakan memohon :</label>
								<textarea type="text" placeholder="syarat kelayakan memohon" class="form-control" rows="10" style="resize:none;" name="rule" id="rule"></textarea>
							</div>
							
						</div>
						<div class="modal-footer">
							<button type="submit" class="btn btn-success"><span class="fa fa-plus" onclick="addReviewItem(this)"> tambah</span></button>
							<a href="javascript(void);" data-dismiss="modal"  class="btn btn-danger"><span class="fa fa-close" data-dismiss="modal"> batal</span></a>
						</div>
					
				</div>
		
			</div>
		</div>

		<div class="row">
			<div class="modal fade in col col-md-12" role="dialog" id="add-project">
			<div class="modal-content modal-lg-6">
			
				<div class="modal-header">
					<a href="javascript:void(0);" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></a>
					<h3 class="modal-title" id="modal-details-label"></h3>
				</div>
				<div class="modal-body">
					<div class="form-group">
					<label>Nama Projek</label>
					<textarea type="text" rows="10" style="resize:none;" class="form-control" name="projectTitle" id="projID">
						
					</textarea>
					</div>
				</div>
				<div class="modal-footer">
					
					<a href="javascript(void);" data-dismiss="modal"  class="btn btn-danger"><span class="fa fa-close" data-dismiss="modal"> batal</span></a>
					<button class="btn btn-success"><span class="fa fa-plus" onclick="addNewProject(this)"> tambah</span></button>
				</div>
			
			</div>
			</div>
		</div>
	</section>