@extends('master.layout')

@section('extended_css')
@stop

@section('content')
	<section class="content-header">
		<h1>
			{{ $title }}
			@if(!empty($smallTitle))
			<small>{{ $smallTitle }}</small>
			@endif
		</h1>
		<ol class="breadcrumb">
			<li><a href="{{ route('home') }}"><i class="fa fa-dashboard"></i> Home</a></li>
			<li>Users</li>
			<li class="active">{{ $title }}</li>
		</ol>
	</section>

	<div class='col-lg-12 col-md-12 col-sm-12 col-xs-12'>
		<div class="loading" align="center" style="display: none;">
			<img src="{!! url('dist/img/loading.gif') !!}" width="60%">
		</div>
	</div>

	<section class="content">
		<div class="row">
			<div class='col-lg-12 col-md-12 col-sm-12 col-xs-12'>
				<div class="box box-success main-layer">
					<div class="col-md-4 col-sm-4 col-xs-12 form-inline main-layer p-5">
						@if(Sentinel::getUser()->level_user == 1)
							<button type="button" class="btn btn-sm btn-primary" id="btn-add">
								<span class="fa fa-plus"></span> &nbsp Tambah User
							</button>
						@endif
					</div>
					<!-- Search -->
					<div class="col-md-8 col-sm-8 col-xs-12 form-inline main-layer panelSearch">
						<div class="form-group">
							<select class="input-sm form-control input-s-sm inline v-middle option-search" id="search-option"></select>
						</div>
						<div class="form-group">
							<input type="text" class="input-sm form-control" placeholder="Search" id="search">
						</div>
					</div>
					<div class='clearfix'></div>
					<div class="col-md-12 p-0">
						<!-- Datagrid -->
						<div class="table-responsive">
							<table class="table table-striped b-t b-light" id="datagrid"></table>
						</div>
						<footer class="panel-footer">
							<div class="row">
								<!-- Page Option -->
								<div class="col-sm-1 hidden-xs">
									<select class="input-sm form-control input-s-sm inline v-middle option-page" id="option"></select>
								</div>
								<!-- Page Info -->
								<div class="col-sm-6 text-center">
									<small class="text-muted inline m-t-sm m-b-sm" id="info"></small>
								</div>
								<!-- Paging -->
								<div class="col-sm-5 text-right text-center-xs">
									<ul class="pagination pagination-sm m-t-none m-b-none" id="paging"></ul>
								</div>
							</div>
						</footer>
					</div>
					<div class='clearfix'></div>
				</div>
				<div class="other-page"></div>
				<div class="modal-dialog"></div>
			</div>
		</div>
	</section>
@stop

@section('script')
	<script type="text/javascript">
		var datagrid = $("#datagrid").datagrid({
			url                     : "{!! route('adminDatagrid') !!}",
			primaryField            : 'id_admin',
			rowNumber               : true,
			rowCheck                : false,
			searchInputElement      : '#search',
			searchFieldElement      : '#search-option',
			pagingElement           : '#paging',
			optionPagingElement     : '#option',
			pageInfoElement         : '#info',
			columns                 : [
				{field: 'email', title: 'Email', editable: false, sortable: true, width: 200, align: 'left', search: true},
				{field: 'nik', title: 'NIK', editable: false, sortable: true, width: 200, align: 'left', search: true},
				{field: 'nama_admin', title: 'Nama', editable: false, sortable: true, width: 200, align: 'left', search: true},
				{field: 'jenis_kelamin', title: 'Jenis Kelamin', editable: false, sortable: true, width: 150, align: 'center', search: true,
					custom_search: {appendClass: 'input-sm form-control',
						option: [
							{text: 'Laki-Laki', value: 'Laki-Laki'},
							{text: 'Perempuan', value: 'Perempuan'}
						]
					}
				},
				{field: 'alamat', title: 'Alamat', editable: false, sortable: true, width: 300, align: 'left', search: true},
				{field: 'actives', title: 'Status', editable: false, sortable: true, width: 100, align: 'center', search: true,
					custom_search: {appendClass: 'input-sm form-control',
						option: [
							{text: 'Aktif', value: '1'},
							{text: 'Tidak Aktif', value: '0'}
						]
					},
					rowStyler: function(rowData, rowIndex) {
						return actives(rowData, rowIndex);
					}
				},
				{field: 'menu', title: 'Menu', sortable: false, width: 100, align: 'center', search: false, 
					rowStyler: function(rowData, rowIndex) {
						return menu(rowData, rowIndex);
					}
				}
			]
		});

		$(document).ready(function() {
			datagrid.run();
		});

		$('#btn-add').click(function(){
			$('.loading').show();
			$('.main-layer').hide();
			$.post("{!! route('formAddAdmin') !!}").done(function(data){
				if(data.status == 'success'){
					$('.loading').hide();
					$('.other-page').html(data.content).fadeIn();
				} else {
					$('.main-layer').show();
				}
			});
		});

		function detail(rowIndex) {
			var id = datagrid.getRowData(rowIndex).id_admin;
			$.post("{!! route('detailAdmin') !!}", {id:id}).done(function(data){
				if(data.status == 'success'){
					$('.modal-dialog').html(data.content);
				}
			});
		}
		function nonActive(rowIndex) {
			var rowData = datagrid.getRowData(rowIndex);
			swal(
				{
					title: "Apa anda yakin Tidak meng-Aktifkan Akun Admin Ini?",
					text: "Akun Admin akan di Tidak Aktifkan dari sistem dan Akun tidak dapat melakukan Login!",
					type: "warning",
					showCancelButton: true,
					confirmButtonColor: "#DD6B55",
					confirmButtonText: "Saya yakin!",
					cancelButtonText: "Batal!",
					closeOnConfirm: false
				},
				function(){
					$.post("{!! route('nonActiveAdmin') !!}", {id:rowData.id_admin}).done(function(data){
						if(data.status == 'success'){
							datagrid.reload();
							swal("Berhasil !", "Akun Admin Berhasil di Non Aktifkan", "success");
						}
					});
				}
			);
		}
		function active(rowIndex) {
			var rowData = datagrid.getRowData(rowIndex);
			swal(
				{
					title: "Apa anda yakin meng-Aktifkan Akun Admin Ini?",
					text: "Akun Admin akan di Aktifkan dari sistem dan Akun dapat melakukan Login!",
					type: "warning",
					showCancelButton: true,
					confirmButtonColor: "#DD6B55",
					confirmButtonText: "Saya yakin!",
					cancelButtonText: "Batal!",
					closeOnConfirm: false
				},
				function(){
					$.post("{!! route('activeAdmin') !!}", {id:rowData.id_admin}).done(function(data){
						if(data.status == 'success'){
							datagrid.reload();
							swal("Berhasil!", "Akun Admin Berhasil di Aktifkan", "success");
						}
					});
				}
			);
		}
		function resetPassword(rowIndex) {
			var rowData = datagrid.getRowData(rowIndex);
			swal(
				{
					title: "Apa anda yakin Mereset Password Akun Admin Ini?",
					text: "Password Akun Admin akan di Reset sesuai dengan NIK Admin!",
					type: "warning",
					showCancelButton: true,
					confirmButtonColor: "#DD6B55",
					confirmButtonText: "Saya yakin!",
					cancelButtonText: "Batal!",
					closeOnConfirm: false
				},
				function(){
					$.post("{!! route('resetPasswordAdmin') !!}", {id:rowData.id_admin}).done(function(data){
						if(data.status == 'success'){
							datagrid.reload();
							swal("Berhasil!", "Password Akun Admin Berhasil di Reset", "success");
						}
					});
				}
			);
		}
		function updated(rowIndex) {
			var rowData = datagrid.getRowData(rowIndex);
			$('.loading').show();
			$('.main-layer').hide();
			$.post("{!! route('formEditAdmin') !!}", {id:rowData.id_admin}).done(function(data){
				if(data.status == 'success'){
					$('.loading').hide();
					$('.other-page').html(data.content).fadeIn();
				} else {
					$('.main-layer').show();
				}
			});
		}

		function deleted(rowIndex) {
			var rowData = datagrid.getRowData(rowIndex);
			swal(
				{
					title: "Apa anda yakin menghapus Akun Admin Ini?",
					text: "Akun Admin akan dihapus dari sistem dan tidak dapat dikembalikan!",
					type: "warning",
					showCancelButton: true,
					confirmButtonColor: "#DD6B55",
					confirmButtonText: "Saya yakin!",
					cancelButtonText: "Batal!",
					closeOnConfirm: false
				},
				function(){
					$.post("{!! route('deleteAdmin') !!}", {id:rowData.id_admin}).done(function(data){
						if(data.status == 'success'){
							datagrid.reload();
							swal("Berhasil!", "Akun Admin Berhasil Dihapus", "success");
						}
					});
				}
			);
		}

		function actives(rowData, rowIndex){
			var tag;
			if(rowData.active == '1'){
				tag = '<div style="color:#fff;background-color:#449d44;border-color:#d43f3a;padding:2px 5px;font-size:12px;line-height:1.5;border-radius:3px;display: inline-block;" >Aktif</div>';
			} else {
				tag = '<div style="color:#fff;background-color:#d9534f;border-color:#d43f3a;padding:2px 5px;font-size:12px;line-height:1.5;border-radius:3px;display: inline-block;" >Tidak Aktif</div>';
			}
			return tag;
		}

		function menu(rowData, rowIndex) {
			var level_user = {{ Sentinel::getUser()->level_user }};
			if(level_user == 1){
				var menu = 
					'<div class="btn-group">' + 
					'<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-bars"></i></a>' +
					'<ul class="dropdown-menu pull-right">' +
					'<li onclick="detail('+rowIndex+')"><a href="javascript:void(0);"><i class="fa fa-eye"></i> Detail</a></li>';
				if (rowData.active == '1') {
					menu += '<li onclick="nonActive('+rowIndex+')"><a href="javascript:void(0);"><i class="fa fa-lock"></i> Non-Active Account</a></li>';
				}else{
					menu += '<li onclick="active('+rowIndex+')"><a href="javascript:void(0);"><i class="fa fa-unlock"></i> Active Account</a></li>';
				};
				menu += '<li onclick="resetPassword('+rowIndex+')"><a href="javascript:void(0);"><i class="fa fa-refresh"></i> Reset Password</a></li>' +
					'<li onclick="updated('+rowIndex+')"><a href="javascript:void(0);"><i class="fa fa-pencil"></i> Edit</a></li>'+
					'<li onclick="deleted('+rowIndex+')"><a href="javascript:void(0);"><i class="fa fa-trash-o"></i> Delete</a></li>' +
					'</ul>' +
					'</div>';
			}else{
				var menu = '<a onclick="detail('+rowIndex+')" href="javascript:void(0);" class="btn btn-xs btn-primary"><i class="fa fa-eye"></i> Detail</a>';
			}
			return menu;
		}
	</script>
@stop