<?php
$base_url = base_url();
$this->load->view('layout/admin/header', array('base_url' => $base_url));
$this->load->view('layout/admin/sidebar', array('base_url' => $base_url));
?>				
				<div class="main-content">
					<div class="breadcrumbs" id="breadcrumbs">
						<script type="text/javascript">
							try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){}
						</script>

						<ul class="breadcrumb">
							<li>
								<i class="icon-home home-icon"></i>
								<a href="#">Trang chủ</a>
							</li>

							<li>
								<a href="#">Quản lý tài khoản</a>
							</li>
							<li>
								<a href="#">Người dùng</a>
							</li>
							<li class="active">Thống kê tài khoản</li>
						</ul><!-- .breadcrumb -->

						<div class="nav-search" id="nav-search">
							<form class="form-search">
								<span class="input-icon">
									<input type="text" placeholder="Tìm kiếm ..." class="nav-search-input" id="nav-search-input" autocomplete="off" />
									<i class="icon-search nav-search-icon"></i>
								</span>
							</form>
						</div><!-- #nav-search -->
					</div>

					<div class="page-content">
						<div class="page-header">
							<h1>
								Người dùng
								<small>
									<i class="icon-double-angle-right"></i>
									thống kê tài khoản
								</small>
							</h1>
						</div><!-- /.page-header -->
						
						<script src="<?php echo $base_url;?>assets/js/jquery-2.0.3.min.js"></script>
						<script src="<?php echo $base_url;?>assets/js/jquery.dataTables.min.js"></script>
						<script src="<?php echo $base_url;?>assets/js/jquery.dataTables.bootstrap.js"></script>
						<script type="text/javascript">
							
							jQuery(function($) {
								var oTable1 = $('#sample-table-2').dataTable( {
								"aoColumns": [
								  { "bSortable": false },
								  null, null,null, null,
								  { "bSortable": false }
								] } );
								
								
								$('table th input:checkbox').on('click' , function(){
									var that = this;
									$(this).closest('table').find('tr > td:first-child input:checkbox')
									.each(function(){
										this.checked = that.checked;
										$(this).closest('tr').toggleClass('selected');
									});
										
								});
							
							});
						</script>

						<div class="row">
							<div class="col-xs-12">
								<!-- PAGE CONTENT BEGINS -->
								<div class="table-header" style="padding-bottom:4px">
									Thống kê tài khoản

									<button class="btn btn-success pull-right" data-toggle="modal" href="#addUser">
										<i class="icon-plus"></i>
										Thêm thành viên
									</button>
										
								</div>

								<div class="table-responsive">
									<table id="sample-table-2" class="table table-striped table-bordered table-hover">
										<thead>
											<tr>
												<th class="center">
													<label>
														<input type="checkbox" class="ace" />
														<span class="lbl"></span>
													</label>
												</th>
												<th>Số điện thoại</th>
												<th class="hidden-480">Tiền</th>

												<th>
													<i class="icon-time bigger-110 hidden-480"></i>
													Ngày đăng ký
												</th>
												<th class="hidden-480">Trạng thái</th>

												<th></th>
											</tr>
										</thead>

										<tbody>
											<?php foreach ($users as $key=>$user): ?>
											<tr>
												<td class="center">
													<label>
														<input type="checkbox" class="ace" />
														<span class="lbl"></span>
													</label>
												</td>

												<td>
													<a href="#"><?php echo $user->cellphone; ?></a>
												</td>
												<td class="hidden-480"><?php echo $user->acc_balanced; ?></td>
												<td><?php echo $user->created_time; ?></td>

												<td class="hidden-480">
													<span class="label label-sm label-success">Kích hoạt</span>
												</td>

												<td>
													<div class="visible-md visible-lg hidden-sm hidden-xs action-buttons">
														<a class="blue" href="#">
															<i class="icon-zoom-in bigger-130"></i>
														</a>
											
														<a class="green" data-us-index=<?php echo $key; ?> data-toggle="modal" href="#editUser" title="Edit">
															<i class="icon-pencil bigger-130"></i>
														</a>

														<a class="red" data-us-id=<?php echo $user->us_id; ?> data-toggle="modal" href="#deleteUser" title="Delete">
															<i class="icon-trash bigger-130"></i>
														</a>
													</div>

													<div class="visible-xs visible-sm hidden-md hidden-lg">
														<div class="inline position-relative">
															<button class="btn btn-minier btn-yellow dropdown-toggle" data-toggle="dropdown">
																<i class="icon-caret-down icon-only bigger-120"></i>
															</button>

															<ul class="dropdown-menu dropdown-only-icon dropdown-yellow pull-right dropdown-caret dropdown-close">
																<li>
																	<a href="#" class="tooltip-info" data-rel="tooltip" title="View">
																		<span class="blue">
																			<i class="icon-zoom-in bigger-120"></i>
																		</span>
																	</a>
																</li>

																<li>
																	<a class="green" data-us-index=<?php echo $key; ?> data-toggle="modal" href="#editUser" title="Edit">
																		<span class="green">
																			<i class="icon-edit bigger-120"></i>
																		</span>
																	</a>
																</li>

																<li>
																	<a class="red" data-admin-id=<?php echo $user->us_id; ?> data-toggle="modal" href="#deleteUser" title="Delete">
																		<span class="red">
																			<i class="icon-trash bigger-120"></i>
																		</span>
																	</a>
																</li>
															</ul>
														</div>
													</div>
												</td>
											</tr>
											<?php endforeach; ?>
										</tbody>
									</table>
								</div>
								
								<!-- Edit User -->
								<div tabindex="-1" class="modal fade in" id="editUser">
									<div class="modal-dialog">
										<div class="modal-content">
											<div class="modal-header no-padding">
												<div class="table-header">
													<button aria-hidden="true" data-dismiss="modal" class="close" type="button">
														<span class="white">×</span>
													</button>
													Sửa người dùng
												</div>
											</div>
									
											<div class="modal-body">
												<form method="post" class="form-horizontal" id="validation-edit-form" action="<?php echo $base_url; ?>admin/user_account/update">
													<input type="hidden" name="id" id="form-field-0" value="">
													<div class="form-group">
														<label for="form-field-1" class="col-sm-3 control-label no-padding-right"> Số điện thoại </label>
														<div class="col-sm-9">
															<label class="block clearfix has-error">
																<span class="input-icon">
																	<input type="text" name="phone" placeholder="Phone" id="form-field-1" value="">
																	<i class="icon-user blue"></i>
																</span>
																<div class="help-block"> </div>
															</label>
														</div>
													</div>

													<div class="form-group">
														<label for="form-field-2" class="col-sm-3 control-label no-padding-right"> Tiền </label>
														<div class="col-sm-9">
															<span class="input-icon">
																<input type="text" name="balance" placeholder="" id="form-field-2" value="">
																<i class="icon-user blue"></i>
															</span>
														</div>
														<label class="block clearfix has-error">
															<div class="help-block"> </div>
														</label>
														
													</div>

													<div class="space-4"></div>
													<div class="clearfix form-actions">
														<div class="col-md-offset-3 col-md-9">
															<button type="submit" name="submit" class="btn btn-info">
																<i class="icon-ok bigger-110"></i>
																Hoàn tất
															</button>

															&nbsp; &nbsp; &nbsp;
															<button type="reset" name="reset" class="btn">
																<i class="icon-undo bigger-110"></i>
																Xóa hết
															</button>
														</div>
													</div>
												</form>
											</div>
										</div>
									</div>
								</div>
								<!-- End Edit Admin -->
								
								<!-- Add User -->
								<div tabindex="-1" class="modal fade in" id="addUser">
									<div class="modal-dialog">
										<div class="modal-content">
											<div class="modal-header no-padding">
												<div class="table-header">
													<button aria-hidden="true" data-dismiss="modal" class="close" type="button">
														<span class="white">×</span>
													</button>
													Tạo mới thành viên
												</div>
											</div>

											<div class="modal-body">
												<form method="post" class="form-horizontal" id="validation-form" action="<?php echo $base_url; ?>admin/user_account/insert">
													<div class="form-group">
														<label for="form-field-1" class="col-sm-3 control-label no-padding-right"> Số điện thoại </label>

														<div class="col-sm-9">
															<span class="input-icon">
																<input type="number" name="cellphone" placeholder="phone" id="form-field-1">
																<i class="icon-phone blue"></i>
															</span>
														</div>
														<div class="help-block"> </div>
													</div>

													<div class="clearfix form-actions">
														<div class="col-md-offset-3 col-md-9">
															<button type="submit" name="submit" class="btn btn-info">
																<i class="icon-ok bigger-110"></i>
																Hoàn tất
															</button>

															&nbsp; &nbsp; &nbsp;
															<button type="reset" class="btn">
																<i class="icon-undo bigger-110"></i>
																Xóa hết
															</button>
														</div>
													</div>

													</div>
												</form>
											</div>
										</div><!-- /.modal-content -->
									</div><!-- /.modal-dialog -->
								</div>
								
								<!-- Delete User -->
								<div tabindex="-1" class="modal fade in" id="deleteUser">
									<div class="modal-dialog">
										<div class="modal-content">
											<div class="modal-header no-padding">
												<div class="table-header">
													<button aria-hidden="true" data-dismiss="modal" class="close" type="button">
														<span class="white">×</span>
													</button>
													Xóa người dùng
												</div>
											</div>
											
											<div class="modal-body">
												<form method="post" class="form-horizontal" id="validation-form" action="<?php echo $base_url; ?>admin/user_account/delete">
													<input type="hidden" name="id" id="form-field-0" value="">
													<div class="form-group">
														<center><h4> Chắc chắn muốn xóa tài khoản này? </h4></center>
													</div>
													<div class="clearfix form-actions">
														<div class="col-md-offset-3 col-md-9">
															<button type="submit" name="submit" class="btn btn-info">
																<i class="icon-ok bigger-110"></i>
																Xóa
															</button>

															&nbsp; &nbsp; &nbsp;
															<button type="reset" name="reset" class="btn" data-dismiss="modal">
																<i class="icon-undo bigger-110"></i>
																Hủy
															</button>
														</div>
													</div>
												</form>
											</div>
										</div>
									</div>
								</div>					
								<!-- End Delete User -->		
								<script>
									$('#deleteUser').on('show.bs.modal', function(e) {
										var id = parseInt($(e.relatedTarget).data('us-id'));
										$(e.currentTarget).find('input[name="id"]').val(id);
									});
									$('#editUser').on('show.bs.modal', function(e) {
										//get data-id attribute of the clicked element
										var index = parseInt($(e.relatedTarget).data('us-index'));
										//populate the textbox
										var ar = <?php echo json_encode($users) ?>;
										
										$(e.currentTarget).find('input[name="phone"]').val(ar[index].cellphone);
										$(e.currentTarget).find('input[name="balance"]').val(ar[index].acc_balanced);
										$(e.currentTarget).find('input[name="id"]').val(ar[index].us_id);
									});	
									
								</script>
								<!-- PAGE CONTENT ENDS -->
							</div><!-- /.col -->
						</div><!-- /.row -->
					</div><!-- /.page-content -->
				</div><!-- /.main-content -->

			</div><!-- /.main-container-inner -->

			<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
				<i class="icon-double-angle-up icon-only bigger-110"></i>
			</a>
		</div><!-- /.main-container -->
<?php
$this->load->view('layout/admin/footer', array('base_url' => $base_url));
?>