<link rel="stylesheet" href="<?php echo base_url() ?>datatables/dataTables.bootstrap.css"/>
<script src="<?php echo base_url()?>datatables/jquery.dataTables.js"></script>
<script src="<?php echo base_url()?>datatables/dataTables.bootstrap.js"></script>

<div class="container">
	<h2>Manajemen User</h2>
	<hr>
	<?php 
	if($this->session->userdata('id_jenis_user')==1){?>
	<form class="form-inline" id="form_simpan" method="post">
		  <div class="form-group">
			<b>Tambah User Baru</b>
		  </div>
		  <div class="form-group">
			<input type="text" class="form-control" name="username" id="username" placeholder="Username">
		  </div>
		  <div class="form-group">
			<input type="password" class="form-control" name="password" id="password" placeholder="Password">
		  </div>
		  <div class="form-group">
			<select name="id_jenis_user" id="id_jenis_user" class="form-control">
			<?php foreach($jns_user as $key=>$val){
				echo '<option value="'.$key.'">'.$val.'</option>';
			}?>
			</select>
		  </div>
		  <div class="form-group" id="div_id_kelurahan">
			<select name="id_kelurahan" class="form-control">
			<?php foreach($data_kelurahan as $key=>$val){
				echo '<option value="'.$key.'">'.$val.'</option>';
			}?>
			</select>
		  </div>
		  <button type="button" class="btn btn-default" id="simpan">Simpan</button>
	</form>
	<?php } ?>
<br>
	<table class="table table-bordered table-hover" id="mytable">
		<thead>
			<tr>
				<th width="80px">No</th>
				<th>Username</th>
				<th>Level</th>
				<th>Nama Kelurahan</th>
				<th width="150px">Aksi</th>
			</tr>
		</thead>
	</table>
</div>

<div class="modal fade" id="ModalEdit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Edit User</h4>
      </div>
      <div class="modal-body">
		<form class="form-horizontal" id="form_edit">
		<input type="hidden" name="hidden_id_user_edit" id="hidden_id_user_edit">
		<input type="hidden" name="hidden_password_edit" id="hidden_password_edit">
		  <div class="form-group">
			<label class="col-sm-3 control-label">Username</label>
			<div class="col-sm-7">
			  <input type="text" class="form-control" name="username_edit" id="username_edit" placeholder="Username">
			</div>
		  </div>
		  <div class="form-group">
			<label class="col-sm-3 control-label">Password</label>
			<div class="col-sm-7">
			  <input type="password" class="form-control" name="password_edit" id="password_edit" placeholder="Password">
			  <div class="checkbox">
				<label>
				  <input type="checkbox" name="aktifkan_form_password" id="aktifkan_form_password" value="password_ganti"> Centang jika ingin ganti password
				</label>
			  </div>
			</div>
		  </div>
		  <?php
		  if($this->session->userdata('id_jenis_user')==1){
		  ?>
		  <div class="form-group">
			<label class="col-sm-3 control-label">Hak Akses</label>
			<div class="col-sm-7">
			  <select name="id_jenis_user_edit" id="id_jenis_user_edit" class="form-control">
				<?php foreach($jns_user as $key=>$val){
					echo '<option value="'.$key.'">'.$val.'</option>';
				}?>
				</select>
			</div>
		  </div>
		  <div class="form-group" id="div_edit_id_kelurahan">
			<label class="col-sm-3 control-label">Kelurahan</label>
			<div class="col-sm-7">
				<select name="id_kelurahan" id="id_kelurahan_edit" class="form-control">
				<?php foreach($data_kelurahan as $key=>$val){
					echo '<option value="'.$key.'">'.$val.'</option>';
				}?>
				</select>
			 </div>
		  </div>
		  <?php } ?>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Keluar</button>
        <button type="button" class="btn btn-primary" id="edit_sekarang">Edit</button>
		</form>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
	$( document ).ajaxComplete(function() {
		if($("#id_jenis_user_edit").val()==2){
			$("#div_edit_id_kelurahan").show();
		}else{
			$("#div_edit_id_kelurahan").hide();
		}
		$("#id_jenis_user_edit").change(function(){
			if($(this).val()=='2')
				$("#div_edit_id_kelurahan").show();
			else
				$("#div_edit_id_kelurahan").hide();
		});
	});

	$(document).ready(function() {

		$("#div_id_kelurahan").hide();
		$("#password_edit").prop('readonly', true);
		
	 	$("#id_jenis_user").change(function(){
			if($(this).val()=='2')
				$("#div_id_kelurahan").show();
			else
				$("#div_id_kelurahan").hide();
		});
		$("#aktifkan_form_password").change(function(){
			if(this.checked) {
				$("#password_edit").prop('readonly', false);
			}else
				$("#password_edit").prop('readonly', true);
		});
		
		$.fn.dataTableExt.oApi.fnPagingInfo = function(oSettings)
		{
			return {
				"iStart": oSettings._iDisplayStart,
				"iEnd": oSettings.fnDisplayEnd(),
				"iLength": oSettings._iDisplayLength,
				"iTotal": oSettings.fnRecordsTotal(),
				"iFilteredTotal": oSettings.fnRecordsDisplay(),
				"iPage": Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength),
				"iTotalPages": Math.ceil(oSettings.fnRecordsDisplay() / oSettings._iDisplayLength)
			};
		};

		var t = $("#mytable").dataTable({
			initComplete: function() {
				var api = this.api();
				$('#mytable_filter input')
						.off('.DT')
						.on('keyup.DT', function(e) {
							if (e.keyCode == 13) {
								api.search(this.value).draw();
					}
				});
			},
			oLanguage: {
				sProcessing: "<div align='center'><h3>Loading...</h3></div>"
			},
			processing: true,
			serverSide: true,
			ajax: {"url": "<?php echo $this->uri->segment(1);?>/json", "type": "POST"},
			/*
			createdRow: function( row, data, dataIndex ) {
				var username = $(row).find('td:eq(1)').html();
				var level = $(row).find('td:eq(2)').html();
				$( row ).find('tr').attr('data-x', username);
				$( row ).find('td:eq(2)').attr('username', username);
				$( row ).find('td:eq(2)').attr('level', level);
			},
			*/
			columns: [
				{
					"data": "ID",
					"orderable": false
				},
				{"data": "username"},{"data": "jenis_user"},{"data": "nama_kelurahan"},{"data": "view","orderable": false}
			],
			order: [[1, 'asc']],
			
			rowCallback: function(row, data, iDisplayIndex) {
				var info = this.fnPagingInfo();
				var page = info.iPage;
				var length = info.iLength;
				var index = page * length + (iDisplayIndex + 1);
				$('td:eq(0)', row).html(index);
			}
		});
		
	
		$('#mytable tbody').on( 'click', 'tr', function () {
			$('#mytable .active_tr').removeClass('active_tr');
			$(this).addClass('active_tr');
			var username=$('#mytable .active_tr td:nth-child(3)').attr('username');
			var level=$('#mytable .active_tr td:nth-child(3)').attr('level');
		} );
	
		$('#mytable tbody').on( 'click', '.edit', function () {
			//alert($(this).attr('id'));
			$("#div_edit_id_kelurahan").hide();
			$.ajax({
				type  : "POST",
				dataType: "json",
				url   : "<?php echo base_url("manajemen_user/get_data_user");?>",
				data  : {id_user:$(this).attr('id')},
				success : function(value)
				{	
					$("#hidden_id_user_edit").val(value.id_user);
					$("#username_edit").val(value.username);
					$("#id_jenis_user_edit").val(value.id_jenis_user);
					$("#id_kelurahan_edit").val(value.id_kelurahan);
					$("#hidden_password_edit").val(value.password);
					
				}
			});
			$("#password_edit").val('');
			$("#password_edit").prop('readonly', true);
			$("#aktifkan_form_password").prop('checked', false);
			$("#ModalEdit").modal('show');
		});
		
		$("#simpan").click(function(){
			$.ajax({
				type  : "POST",
				dataType: "html",
				url   : "<?php echo base_url("manajemen_user/simpan_user");?>",
				data  : $('#form_simpan').serialize(),
				success : function(value)
				{	
				
					if(value==1)
						t.fnDraw();
					else
						alert("MAAF USERNAME SUDAH DIGUNAKAN");
				
				}
			});
		});
		
		$("#edit_sekarang").click(function(){
			
			$.ajax({
				type  : "POST",
				dataType: "html",
				url   : "<?php echo base_url("manajemen_user/update_user");?>",
				data  : $('#form_edit').serialize(),
				success : function(value)
				{	
					if(value==1){
						t.fnDraw();
						$("#ModalEdit").modal('hide');
					}else{
						alert("MAAF USERNAME SUDAH DIGUNAKAN");
					}
				}
			});
		});
		
		
	});
</script>

