@extends('layout.app')
@section('title')
	Setting Kategori | {{env('APP_NAME')}}
@endsection
@section('content')
<div class="m-grid__item m-grid__item--fluid m-wrapper">
	<!-- BEGIN: Subheader -->
	<!-- <div class="m-subheader ">
		<div class="d-flex align-items-center">
			<div class="mr-auto">
				<h3 class="m-subheader__title m-subheader__title--separator">
					Bobot
				</h3>
			</div>
		</div>
	</div> -->
	<!-- END: Subheader -->
	<div class="m-content">
		<div class="row">
			<div class="col-md-12">
				<div class="m-portlet m-portlet--primary m-portlet--head-solid-bg m-portlet--head-sm {{($data == null) ? '' : 'm--hide'}}" m-portlet="true" id="data">
					<div class="m-portlet__head">
						<div class="m-portlet__head-caption">
							<div class="m-portlet__head-title">
								<span class="m-portlet__head-icon">
									<i class="flaticon-coins"></i>
								</span>
								<h3 class="m-portlet__head-text">
									Data Kategori Permohonan
								</h3>
							</div>
						</div>
						<div class="m-portlet__head-tools">
							<ul class="m-portlet__nav">
								<!-- <li class="m-portlet__nav-item">
									<a href="#" m-portlet-tool="toggle" class="m-portlet__nav-link m-portlet__nav-link--icon"><i class="la la-angle-down"></i></a>
								</li>
								<li class="m-portlet__nav-item">
									<a href="#" m-portlet-tool="fullscreen" class="m-portlet__nav-link m-portlet__nav-link--icon"><i class="la la-expand"></i></a>
								</li>
								<li class="m-portlet__nav-item">
									<a href="#" m-portlet-tool="remove" class="m-portlet__nav-link m-portlet__nav-link--icon"><i class="la la-close"></i></a>
								</li> -->
							</ul>
						</div>
					</div>
					<div class="m-portlet__body">
						<div class="m-section" id="data-kategori">
							@if(Session::has('status') && Session::get('status') == 9)
								<div class="alert alert-danger alert-dismissible fade show" role="alert">
									<button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
									<strong>
										Gagal!
									</strong>
									Kode Sudah Digunakan. Silahkan input dengan kode baru.....
								</div>
							@endif
							<div class="m-section__content">
								<button type="button" id="tambah" class="btn btn-success btn-sm"><i class="fa fa-plus"></i> Tambah</button>
								<br><br>
								<table class="table table-bordered table-hover m-table" id="tabel">
									<thead>
										<tr>
											<th>Bagian</th>
											<th>Nama</th>
											<th>Menu</th>
										</tr>
									</thead>
									<tbody>
									</tbody>
								</table>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-12">
				<div class="m-portlet m-portlet--creative m-portlet--first m-portlet--bordered-semi {{($data == null) ? 'm--hide' : ''}}" id="form">
					<div class="m-portlet__head">
						<div class="m-portlet__head-caption">
							<div class="m-portlet__head-title">
								<h2 class="m-portlet__head-label m-portlet__head-label--focus">
									<span>
										Form Object Permohonan
									</span>
								</h2>
							</div>
						</div>
					</div>
					<div class="m-portlet__body">
						<div class="m-section" id="data-kategori">
							<div class="m-section__content">
								<form class="m-form m-form--fit m-form--label-align-right" method="post" action="{{route('settingkategori-simpan')}}">
									<input type="hidden" name="_token" value="{{csrf_token()}}">
									<input type="hidden" name="tipe" value="{{($data == null) ? 1 : 2}}">
									<input type="hidden" name="id" value="{{@$data->recid or ''}}">
									<div class="form-group m-form__group row">
										<label class="col-form-label col-md-2">Nama Kategori</label>
										<div class="col-md-6">
											<input type="text" class="form-control m-input m-input--air" required name="nama" value="{{@$data->nama or ''}}">
										</div>
									</div>
									<div class="form-group m-form__group row">
										<label class="col-form-label col-md-2">&nbsp;</label>
										<div class="col-md-6">
											<button type="submit" class="btn btn-success">Simpan</button>
											<a href="{{route('settingkategori-link')}}"><button type="button" id="kembali" class="btn btn-secondary">Kembali</button></a>
										</div>
									</div>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="modal" id="modal-track" role="dialog">
	<div class="modal-dialog modal-lg" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalLabel">
					Track Record
				</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">
						×
					</span>
				</button>
			</div>
			<div class="modal-body">
				<div class="row">
					<div class="col-12">
						<table class="table">
							<thead>
								<tr>
									<th>#</th>
									<th>Permohonan</th>
									<th>Uraian</th>
									<th>Bagian</th>
								</tr>
							</thead>
							<tbody id="tbodi">
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
@endsection
@section('css')
<link href="{{asset('assets/vendors/custom/datatables/datatables.bundle.css')}}" rel="stylesheet" type="text/css" />
<style type="text/css">
	.modal-lg {
	    max-width: 75%;
	}
</style>
@endsection
@section('js')
<!--begin::Page Vendors -->
<script src="{{asset('assets/vendors/custom/datatables/datatables.bundle.js')}}" type="text/javascript"></script>
<script type="text/javascript">

	$(document).ready(function () {
		$("#tambah").click(function(){
			$("#data").addClass('m--hide');
			$("#form").removeClass('m--hide');
		});
		$('#tabel').DataTable({
	        "processing": true,
	        "serverSide": true,
	        "ajax": "{{ route('settingkategori-data') }}",
	        "columns": [
	            // {data: 'kode'},
	            {data: 'jabatan.namajabatan', orderable: false, searchable: false},
	            {data: 'nama'},
	            {data: 'menu', orderable: false, searchable: false}
	        ],
			"order": [[1, 'asc']]
	    });
	});

	function hapus(kode){
		mApp.block("#tabel",{
			overlayColor:"#000000",
			type:"loader",
			state:"success",
			message:"Please wait...",
			// baseZ: 1000, 
		});
		$.ajax({
	        type: "POST",
	        url: "{{route('settingkategori-hapus')}}",
	        data: {id: kode, _token: "{{ csrf_token() }}"},
	        success: function (result)
	        {
	            $('#tabel').DataTable().ajax.reload();
	            mApp.unblock("#tabel");
	        }
	    });
	}

	function track(kode){
		mApp.block("#tabel",{
			overlayColor:"#000000",
			type:"loader",
			state:"success",
			message:"Please wait...",
			// baseZ: 1000, 
		});
		$.ajax({
	        type: "POST",
	        url: "{{route('settingobject-track')}}",
	        data: {id: kode, _token: "{{ csrf_token() }}"},
	        success: function (result)
	        {
	            $('#tabel').DataTable().ajax.reload();
	            mApp.unblock("#tabel");
	            $("#modal-track").modal('show');
	            $.each(result.hasil, function( index, value ) {
					$("#tbodi").append('<tr>'+
							'<td>' + (index+1) + '</td>'+
							'<td>' + value.judul + '</td>'+
							'<td>' + value.uraian + '</td>'+
							'<td>' + value.jabatan.namajabatan + '</td>'+
						'</tr>');
				});
	        }
	    });
	}
</script>
@endsection