<!-- load css dan js -->
<link type="text/css" rel="stylesheet" href="<?php echo ASSETS_URL;?>plugins/datatables/dataTables.bootstrap.css" />
<script src="<?php echo ASSETS_URL;?>plugins/datatables/jquery.dataTables.min.js"></script>
<script src="<?php echo ASSETS_URL;?>plugins/datatables/dataTables.bootstrap.min.js"></script>
<script src="<?php echo ASSETS_URL;?>plugins/datatables/fnPagingInfo.js"></script>
<script src="<?php echo ASSETS_URL;?>plugins/datatables/fnReloadAjax.js"></script>
<script src="<?php echo ASSETS_URL;?>plugins/form/jquery.validate.js"></script>

<link rel="stylesheet" href="<?php echo ASSETS_URL;?>plugins/bootcomplete/bootcomplete.css" type="text/css"/>
<script src="<?php echo ASSETS_URL;?>plugins/bootcomplete/jquery.bootcomplete.js"></script>    

<!-- end load css dan js -->


<section class="content-header">
	<h1>
		<?php echo $app_title;?>
		<small><?php echo $app_desc;?></small>
	</h1>
</section>

<section class="content">
	<div class="box box-info"> <!-- start .box -->
		<div class="box-header"> <!-- start .box-header -->
			<form name="frmResponden" id="frmResponden" method="post" class="form-horizontal">
			<div class="row">
				<div class="col-md-2">
					<label>Customers</label>
				</div>
				<div class="col-md-3">
					<input type="text" name="f_name" id="f_name" class="form-control">
					<input type="hidden" name="f_name_id" id="f_name_id">
				</div>
				<div class="col-md-2">
					<label>Event</label>
				</div>
				<div class="col-md-3">
					<input type="text" name="f_event" id="f_event" class="form-control" data-rule-digits="true">
				</div>
				<div class="col-md-2">
					<button class="btn btn-primary" id="button-cari"><i class="fa fa-search"></i> Cari</button> &nbsp;&nbsp;
					<?php 			
						echo form_reset('reset','Reset', "id = 'button-reset' class='btn btn-default'" );
					?>
				</div>
			</div>
			<?php echo form_close();?>

<!--
		<?php if($this->rolemodule->check_button('add')) { ?>			
			<a class="btn btn-sm btn-primary" id="addResponden"><i class="fa fa-plus"></i> Tambah</a>&nbsp;&nbsp;
		<?php } ?>
-->

		</div> <!-- end .box-header -->
		
		<div class="box-body"> <!-- start .box-body -->
			<table id="tableResponden" class="table datares">
				<thead>
					<tr>				
						<th>No</th>				
						<th>Customers</th>				
						<th>Event ke</th>				
						<th>Name</th>				
						<th>Tanggal Lahir</th>				
						<th>Gender</th>				
						<th>Email</th>				
						<th>HP</th>				
						<th>Date</th>				
						<th>f_ipaddres</th>
						<th>Action</th>
					</tr>
				</thead>
			</table>
		</div> <!-- end .box-body -->
		<div class="box-footer" align="right"> <!-- start box-footer -->
		  <p>Page rendered in <strong>{elapsed_time}</strong> seconds</p>
		</div> <!-- end .box-footer-->
	</div> <!-- end .box -->
</section><!-- /.content -->

<script>
var oTable;
$(document).ready(function(){
	$('#frmResponden').validate({
		highlight: function(element, errorClass, validClass) {
			$(element).parents('.form-group').removeClass('has-success').addClass('has-error');
		},
		unhighlight: function(element, errorClass, validClass) {
			$(element).parents('.form-group').removeClass('has-error').addClass('has-success');
		}		
	});
	
	oTable = $('#tableResponden').dataTable({
		"processing": true,
		"serverSide": true,
		"sAjaxSource": "<?php echo site_url('responden/fnRespondenDataJson');?>?id="+$("#f_name_id").val()+"&no="+$("#f_event").val(),
		"sServerMethod": "POST",
		"aoColumns": [ 
			null,null,{'sClass': 'center'},null,null,null,null,null,{'mRender':dateFormate},null ,{ 'bSortable': false,'sClass':'center' }
		],
		"fnRowCallback": function (nRow, aData, iDisplayIndex, DisplayIndexFull) {
		  var page		= this.fnPagingInfo().iPage;
		  var lengt		= this.fnPagingInfo().iLength;
		  var index 	= (page * lengt + (iDisplayIndex +1));
		  $('td:eq(0)', nRow).html(index);
		}
	});
	$(".dataTables_filter input").attr("placeholder","Cari Kata disini ...");

	$('#f_name').bootcomplete({
		url: '<?php echo site_url('responden/fnListCustomers');?>',
	});
	
	$('#button-cari').click(function(e)	{
		e.preventDefault();
		oTable.fnReloadAjax("<?php echo site_url('responden/fnRespondenDataJson');?>?id="+$("#f_name_id").val()+"&no="+$("#f_event").val());
	});

	//$('#addResponden').click(function()	{
		//window.location.href = "<?php echo site_url('responden/fnRespondenAdd');?>";

	//});

<?php if($this->session->userdata('SUCMSG'))
{	
	echo "infoDialog.realize();";
	echo "infoDialog.setTitle('Info').setMessage('<center>".$this->session->userdata('SUCMSG')."</center>').open();";
	$this->session->unset_userdata('SUCMSG');
}
?>
});

function fnEdit(idRow)
{
	window.location.href = "<?php echo site_url('responden/fnRespondenEdit');?>/"+idRow;
}

function fnDelete(idRow)
{
	BootstrapDialog.confirm('Yakin ingin dihapus ?', function(result){
		var urlUpdate='<?php echo site_url('responden/fnRespondenDelete');?>'
		if(result)
		{
			$.post(urlUpdate,{id : idRow,<?php echo $this->security->get_csrf_token_name();?>:'<?php echo $this->security->get_csrf_hash(); ?>'},function(html){
				if(html== 'TRUE') { oTable.fnReloadAjax();} 
				else
				{
					infoDialog.realize();
					infoDialog.setTitle('Info').setMessage(html).setType(BootstrapDialog.TYPE_DANGER).open();
				} 
			});
		}	
	}).setType(BootstrapDialog.TYPE_DANGER);
}

</script>



