@extends("LaravelVueAdmin.layouts.app")

@section("contentheader_title", "Security Akses")
@section("contentheader_description", "List Security Akses")
@section("section", "Security Akses")
@section("sub_section", " List Security Akses")
@section("htmlheader_title", "Security Akses")

@section("headerElems")
@lv_access("Roles", "create")
<ul class="fab-menu fab-menu-absolute fab-menu-top-right affix-top" data-fab-toggle="click" id="fab-menu-affixed-right">
	<li>
		<a class="fab-menu-btn btn bg-primary-300 btn-float btn-rounded btn-icon legitRipple">
			<i class="fab-icon-open icon-grid3"></i>
			<i class="fab-icon-close icon-cross2"></i>
		</a>

		<ul class="fab-menu-inner">
			<li>
				<div data-fab-label="Tambah Hak Akses">
					<button class="btn btn-default btn-rounded btn-icon btn-float legitRipple" data-toggle="modal" data-target="#AddModal">
						<i class="icon-compose"></i>
					</button>
				</div>
			</li>
		</ul>
	</li>
</ul>
@endlv_access
@endsection

@section("main-content")

@if (count($errors) > 0)
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

<!-- Ajax sourced data -->
<div class="panel panel-flat">
		<div class="panel-heading">
			
		</div>

		@hasSection('description')
		<div class="panel-body">
			@yield('description')
		</div>
		@endif

		<table id="example1" class="table datatable-responsive-control-right table-xxs">
			<thead>
				<tr>
					<th></th>
					<th>ID</th>
					<th>ID Perangkat</th>
					<th>Key</th>
					<th>Status</th>
					<th>Update Terakhir</th>
					<th>Aksi</th>
				</tr>
			</thead>
		</table>
	</div>
		<!-- /ajax sourced data -->

<div class="modal fade nontabindex" id="AddModal" 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">Add Akses</h4>
			</div>
			<div class="modal-body">
				<div class="box-body">
					<form action="{{route(config('LaravelVueAdmin.adminRoute').'.security.akses.doAdd')}}" method="POST" class="form-horizontal" enctype="multipart/form-data">
							{{csrf_field()}}
				            <div class="form-group">
				                <label class="col-lg-3 control-label">ID Perangkat:</label>
				                <div class="col-lg-9">
				                    <input id="unit_id" name="unit_id" class="form-control" type="text" required/>
				                </div>
				            </div>
				            <div class="form-group">
				                <label class="col-lg-3 control-label">Key:</label>
				                <div class="col-lg-6">
				                    <input id="access_key" name="access_key" class=" access_key form-control readonly" type="text" required="required"  />
				                </div>
				                <div class="col-lg-2">
				                    <input type="button" name="generate" value="Generate" data-action="create"  onclick="makeid($(this))" class="btn btn-primary">
				                </div>
				            </div>
							<div class="form-group">
				                <label for="status" class="col-lg-3 control-label">Status:</label>
				                <div class="col-lg-9">
				                    <select name="status" id="status" class="form-control status" required="required">
				                        <option value="">-- Pilih Status --</option>
				                        <option value="0" selected>Baru</option>
				                    </select>
				                </div>
				           </div>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
				{!! Form::submit( 'Submit', ['class'=>'btn btn-success']) !!}
			</div>
		</form>
		</div>
	</div>
</div>



@endsection

@push('scripts')
<script type="text/javascript" src="{{ asset('/LaravelVueAdmin/assets/js/plugins/notifications/sweet_alert.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('/LaravelVueAdmin/assets/js/pages/extra_fab.js') }}"></script>
<script src="{{ asset('LaravelVueAdmin/assets/js/plugins/tables/datatables/datatables.min.js') }}"></script>
<script src="{{ asset('LaravelVueAdmin/assets/js/plugins/tables/datatables/extensions/responsive.min.js') }}"></script>
<script type="text/javascript">
	$(".readonly").on('keydown paste', function(e){
        e.preventDefault();
    });
    function makeid(ele) {
    	var action = ele.data('action');
        var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
        var string_length = 15;
        var randomstring = '';
        for (var i=0; i<string_length; i++) {
            var rnum = Math.floor(Math.random() * chars.length);
            randomstring += chars.substring(rnum,rnum+1);
        }
        if(action == "edit"){
       	 $('.access_key_edit').val(randomstring);
        } else {
       	 $('.access_key').val(randomstring);  	
        }
    }
</script>
<script>
$(".status").select2();
$(function () {
	$(".nontabindex").removeAttr('tabindex');	
	$.extend( $.fn.dataTable.defaults, {
		autoWidth: false,
		responsive: true,
		columnDefs: [{
			className: 'control',
			orderable: false,
			targets:   [0]
		}],
		dom: '<"datatable-header"fl><"datatable-scroll"t><"datatable-footer"ip>',
		lengthMenu: [[50, 100, 150, -1], [50, 100, 150, "Semua"]],
		iDisplayLength: 50,
		language: {
			"url": "{{ asset('LaravelVueAdmin/assets/js/plugins/tables/datatables/Indonesian.json') }}"
		},
		drawCallback: function () {
			$(this).find('tr').slice(-3).find('.dropdown, .btn-group').addClass('dropup');
		},
		preDrawCallback: function() {
			$(this).find('tr').slice(-3).find('.dropdown, .btn-group').removeClass('dropup');
		}
	});

	var tabel = $("#example1").DataTable({
		responsive: {
			details: {
				type: 'column',
				target: [0]
			}
		},
		processing: true,
		serverSide: true,
		ajax: "{{ route(config('LaravelVueAdmin.adminRoute').'.security.akses.datatable') }}",
		columnDefs: [
		{
			className: 'control',
			orderable: false,
			targets: [0]
		},{
			visible: false,
			targets: [1]
		},{
			className: 'text-center',
			orderable: false,
			width: "100px",
			targets: [6]
		}],
	});
	$.fn.dataTable.ext.errMode = 'none';
	$('#example1').on('error.dt', function(e, settings, techNote, message) {
		(function($) {
				$.jGrowl('Terjadi kesalahan saat <strong>memuat data</strong>, Silahkan <a class="alert-link" onclick="window.location.reload(true);"><u><i class="icon-reload-alt"></i>MUAT ULANG</u></a> halaman!', {
					position: 'center',
					theme: 'bg-danger alert-styled-left',
					sticky: true,
					header: 'PROSES DIHENTIKAN'
				});
		})(window.jQuery);
	});
	$("#role-add-form").validate({

	});
	$(document).on("click", ".hapus", function () {
		id=$(this).data('id');
		swal({
			title: "Apakah anda yakin?",
			text: "Data yang dihapus tidak dapat dikembalikan",
			type: "warning",
			showCancelButton: true,
			confirmButtonColor: "#EF5350",
			confirmButtonText: "Hapus",
			cancelButtonText: "Batal",
			closeOnConfirm: false,
			closeOnCancel: false
		},
		function(isConfirm){
			if (isConfirm) {
				$.ajax({
					url: $("#formHapus-"+id).attr('action'),
					data: $("#formHapus-"+id).serialize(),
					type: 'POST',
					dataType: 'json',
					beforeSend: function(){
						swal('Loading', 'Sedang menghapus data . . .', 'info');
					},
					success: function(res){
						if (res.result == 'success') {
							swal({
								title: "Sukses!",
								text: res.msg,
								type: 'success',
								confirmButtonColor: '#27ae60',
								allowOutsideClick: false,
							},
							function(result){
								tabel.ajax.reload( null, false );
							});
						} else {
							swal('Error!', res.msg, 'error');
						}
					},
					error: function(errors){
						swal("Oops", errors.statusText, "error");
					}
				});
			}
			else {
				swal({
					title: "Batal",
					text: "Proses dibatalkan",
					confirmButtonColor: "#2196F3",
					type: "error"
				});
			}
		});
	});
	$(document).on("click", ".reset", function () {
		id=$(this).data('id');
		swal({
			title: "Apakah anda yakin?",
			text: "Data yang sudah direset tidak dapat dikembalikan",
			type: "warning",
			showCancelButton: true,
			confirmButtonColor: "#EF5350",
			confirmButtonText: "Reset",
			cancelButtonText: "Batal",
			closeOnConfirm: false,
			closeOnCancel: false
		},
		function(isConfirm){
			if (isConfirm) {
				$.ajax({
					url: $("#formReset-"+id).attr('action'),
					data: $("#formReset-"+id).serialize(),
					type: 'POST',
					dataType: 'json',
					beforeSend: function(){
						swal('Loading', 'Sedang mereset data . . .', 'info');
					},
					success: function(res){
						if (res.result == 'success') {
							swal({
								title: "Sukses!",
								text: res.msg,
								type: 'success',
								confirmButtonColor: '#27ae60',
								allowOutsideClick: false,
							},
							function(result){
								tabel.ajax.reload( null, false );
							});
						} else {
							swal('Error!', res.msg, 'error');
						}
					},
					error: function(errors){
						swal("Oops", errors.statusText, "error");
					}
				});
			}
			else {
				swal({
					title: "Batal",
					text: "Proses dibatalkan",
					confirmButtonColor: "#2196F3",
					type: "error"
				});
			}
		});
	});
});

</script>
@endpush