sipadu_mbip/resources/views/main-dashboard/api/view_api_key.blade.php

@extends('layout.master', ['uid' => $user->_id, 'token' => $user->token_firebase])
@section('page_title', 'Kompaun')
@section('sub_page_title', '')
@section('name', $user->StaffDetail->full_name)
@section('img_profile', $user->StaffDetail->profile_img)

@section('content')
<style type="text/css">
	select.form-control, select.form-control:focus, select.form-control:hover { 
		border: 1px solid #ccc !important;
		height: auto !important;
	}

	.panel-group .panel {
	    margin-bottom: 0;
	    overflow: hidden;
	    border-radius: 4px;
	}
	.panel-default {
    	border-color: #ddd;
	}
	.panel-default>.panel-heading {
	    color: #333;
	    background-color: #f5f5f5;
	    border-color: #ddd;
	}
	.panel-title {
	    margin-top: 0;
	    margin-bottom: 0;
	    font-size: 16px;
	    color: inherit;
	}

	.panel-body .table>thead>tr>th, .panel-body .table>tbody>tr>th, .panel-body .table>tfoot>tr>th, .panel-body .table>thead>tr>td, .panel-body .table>tbody>tr>td, .panel-body .table>tfoot>tr>td , .panel-body div{
	    padding: 8px 15px;
	    line-height: 1.428571429;
	    vertical-align: top;
	    border-top: 1px solid #ddd;
	}
	.glyphicon { margin-right:10px; }
	.panel-body { padding:0px; }
	.panel-body table tr td { padding-left: 15px }
	.panel-body table tr td a:hover , .panel-body div a:hover{ color: #d84315 !important; }
	.panel-body .table, .panel-body div {margin-bottom: 0px; }

	.active { color: #d84315; }
	.active:hover { color: #d84315; }
	hr {
	    margin-top: 0.6rem !important;
	    margin-bottom: 0.6rem !important;
	}
</style>

<div class="inner-page">
	<div class="row">
		<div class="col-md-12">
			<div class="fluid">
				@if(count($errors) > 0)
				<div class="alert alert-danger icons-alert">
					@foreach($errors->all() as $error)
					<p>{{$error}}</p>
					@endforeach
				</div>
				@endif

				@if(Session::get('error_msg'))
				<div class="alert alert-danger icons-alert">
					{!! Session::get('error_msg') !!}
				</div>
				@elseif(Session::get('success_msg'))
				<div class="alert alert-success icons-alert">
					{!! Session::get('success_msg') !!}
				</div>
				@endif
			</div>
		</div>
	</div>

	<div class="row">
		<div class="col-xl-2 col-md-12">
			<div class="panel panel-default">
				<div class="panel-heading">
					<h4 class="panel-title"> Navigasi </h4>
				</div>

				<div class="panel-body">
					<div>
						<a href="{{ url('/main/api-key') }}" class="active">Senarai Api Key</a>
					</div>
					<div>
						<a href="{{ url('/main/api-integration') }}">Senarai Api Integrasi</a>
					</div>	
				</div>
			</div>
		</div>

		<div class="col-xl-10">
			<div class="card">
				<div class="card-header">
					<h5>Manage your application Api Keys</h5>
					<button type="button" class="btn btn-sm btn-outline-danger float-right waves-effect" data-toggle="modal" data-target="#TambahApi">Create New Api Key</button>
				</div>
				<div class="card-block">
					<div class="dt-responsive table-responsive">
						<table id="api" class="table table-sm table-striped table-bordered nowrap">
							<thead>
								<tr>
									<th>Name</th>
									<th>Key Prefix</th>
									<th>Scopes</th>
									<th>Action</th>
								</tr>
							</thead>
							<tfoot>
								<tr>
									<th>Name</th>
									<th>Key Prefix</th>
									<th>Scopes</th>
									<th>Action</th>
								</tr>
							</tfoot>
						</table>
					</div>
				</div>
				<!-- <div class="animation-modal"> -->
				<div class="modal fade" id="TambahApi" tabindex="-1" role="dialog">
					<div class="modal-dialog modal-lg" role="document">
						<div class="modal-content">
							<div class="modal-header">
								<h4 class="modal-title">Create New Api Key</h4>
								<button type="button" class="close" data-dismiss="modal" aria-label="Close">
									<span aria-hidden="true">&times;</span>
								</button>
							</div>
							<div class="modal-body">
								<form action="{{ url('/main/add-api-key') }}" class="main cussPayment" method="POST">
									<input type="hidden" name="_token" id="csrf-token" value="{{ Session::token() }}" />

									<div class="row clearfix">
										<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
											<label for="subject"><b>Name <code>*</code></b></label>
											<div class="form-group">
												<input type="text" name="name" id="name" class="form-control" required="">
											</div>
										</div>
									</div>

									<div class="row clearfix">
										<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
											<label for="subject"><b>Please scopes: </b></label>
										</div>
									</div>

									<div class="row clearfix">
										<div class="col-lg-1"></div>
										<div class="col-lg-3"><label for="subject">Compound Apis</label></div>
										<div class="col-lg-8">
											<div class="row">
												<div class="col-md-12">
													<div class="border-checkbox-section">

														<div class="border-checkbox-group border-checkbox-group-primary">
															<input class="border-checkbox" type="checkbox" id="compound_search" name="compound_search">
															<label class="border-checkbox-label" for="compound_search">compound.search</label>
														</div>

													</div>
												</div>

												<div class="col-md-12">
													<div class="border-checkbox-section">

														<div class="border-checkbox-group border-checkbox-group-primary">
															<input class="border-checkbox" type="checkbox" id="compound_update" name="compound_update">
															<label class="border-checkbox-label" for="compound_update">compound.update.status</label>
														</div>
														
													</div>
												</div>
											</div>
										</div>
									</div>
									<hr>
									<button type="button" class="btn btn-sm btn-default waves-effect float-left" data-dismiss="modal">Close</button>
									<button type="submit" class="btn btn-sm btn-danger float-right waves-effect">Create Api Key</button>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
@endsection

@section('external_js')

<script type="text/javascript">
	$.ajaxSetup({
		headers: {
			'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
		}
	});

	var table = $('#api').DataTable({
			"ordering": false,
			"serverSide": true,
			"processing": true,
			"ajax": "{{ url('/api/setting/api-key/list') }}",
			"columns": [
			{ "data": "index","name": "index"},
			{ "data": "key_prefix","name": "key_prefix"},
			{ "data": "scopes","name": "scopes"},
			{ "data": "action", "name": "action"}
			],	
			"columnDefs": [
			{  
				"render": function ( data, type, row ) {
					if (data.indexOf("New/") >= 0) {
						var split = data.split('/');
						return '<label class="label label-success">'+split[0]+'</label>&nbsp;'+split[1];
					}else {
						return data;
					}
				},
				"targets": 0,
			},
			{
			"render": function ( data, type, row ) {

				var name = '';
				if (row.index.indexOf("New/") >= 0) {
					var split = row.index.split('/');
					name = split[1];
				}else {
					name = row.index;
				}

				return '<div class="btn-group btn-group-sm" style="float: none;"> <a onclick="deleteA(\''+data+'\',\'' + name + '\')" data-toggle="tooltip" data-placement="top" title="Delete Api Key" class="tabledit-delete-button btn btn-danger waves-effect waves-light" style="float: none;"><span class="icofont icofont-ui-delete" style="color:white"></span></a></div>';
			},
			"targets": 3,
		},
			],				
			"language": {
				"paginate": {
					"previous": "Sebelum",
					"next": "Selepas"
				},
				"sLengthMenu": "Tunjukkan _MENU_ entri",
				"zeroRecords": "Tiada Data Ditemui",
				"infoEmpty": "Tiada Rekod Yang Wujud",
				"infoFiltered": "(Ditapis daripada _MAX_ jumlah rekod)",
				"info": "Tunjuk _START_ hingga _END_ daripada _TOTAL_ entri",
				"sSearch": "Cari:",
			}
		});

	function deleteA(cid,name) {

		swal({
			title: "Are you sure?",
			text: "Delete this Api Key ( " + name + " )",
			html: true,
			type: "warning",
			showCancelButton: true,
			confirmButtonClass: "btn-danger",
			confirmButtonText: "Yes!",
			cancelButtonText: "No!",
			closeOnConfirm: false
		},
		function(isConfirm){
			if (!isConfirm) return;
			$.ajax({
				type: "POST",
				url: "{{ url('api/delete-api-key') }}",
				data: { id: cid },
				success:function(data){
					if(data['status'] == "true"){
						swal({
							title: "Success",
							text: data['desc'],
							type: "success",
							showCancelButton: false,
							confirmButtonText: "OK!",
							closeOnConfirm: true
						},
						function(){
							table.ajax.url("{{ url('/api/setting/api-key/list') }}").load();
						});
					}else if(data['status'] == "false"){
						swal({
							title: "Unsuccessfully",
							text: data['desc'],
							type: "error",
							showCancelButton: false,
							confirmButtonText: "OK!",
							closeOnConfirm: true
						},
						function(){
							table.ajax.url("{{ url('/api/setting/api-key/list') }}").load();
						});
					}
				},
				error: function (xhr, ajaxOptions, thrownError) {
	                swal("Error deleting!", "Oops Something Error", "error");
	            }
			});
		});
	};

	$(document).ready(function() {

		$(".theme-loader").animate({
			opacity: "0"
		},1000);
		
		setTimeout(function() {
			$(".theme-loader").remove();
		}, 800);

		/*** Tooltip ***/
		$('#api').on('draw.dt', function () {
		    $('[data-toggle="tooltip"]').tooltip();
		});

	});
</script>
@endsection