@extends('layout.app_706')
@section('title')
	Approval Permohonan
@endsection
@section('content')
	
    <!--begin::Subheader-->
    <div class="subheader py-2 py-lg-4  subheader-solid " id="kt_subheader">
        <div class=" container-fluid  d-flex align-items-center justify-content-between flex-wrap flex-sm-nowrap">
            <!--begin::Info-->
            <div class="d-flex align-items-center flex-wrap mr-2">
                <!--begin::Page Title-->
                <h5 class="text-dark font-weight-bold mt-2 mb-2 mr-5">
                    @yield('title')
                </h5>
                <!--end::Page Title-->
            </div>
            <!--end::Info-->
        </div>
    </div>
    <!--end::Subheader-->

	
    <!--begin::Entry-->
    <div class="d-flex flex-column-fluid">
        <!--begin::Container-->
        <div class=" container-fluid ">
		<div class="row">
			<div class="col-12">
				<div class="card m-portlet m-portlet--creative m-portlet--first m-portlet--bordered-semi {{($data == null) ? '' : 'm--hide'}}" id="data">
					<!-- <div class="card-header 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--accent">
										Data Approval Permohonan
								</h2>
							</div>
						</div>
					</div> -->
					<div class="card-body 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>
								SPV Sudah Terdaftar.....
							</div>
							@endif
							<div class="m-section__content">
								<!-- <button type="button" id="tambah" class="btn btn-outline-info">Tambah</button> -->
								<!-- <br><br> -->
								<table class="table x_table-bordered table-hover m-table" id="tabel">
									<thead>
										<tr>
											<th>Uraian</th>
											<th>Tgl</th>
											<th>Status</th>
											<th>Menu</th>
										</tr>
									</thead>
									<tbody data-link="row" class="rowlinks">
									</tbody>
								</table>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		</div>
        <!--end::Container-->
    </div>
    <!--end::Entry-->
	
<div class="modal fade" id="modal_detail" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="titleModal">
                    Detail Permohonan
                </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="col-lg-12">
                    <div class="m-timeline-3">
						<div class="mb-1" id="detail_lacak">
						</div>
					</div>
                </div>
            </div>
            <div class="modal-footer d-flex justify-content-between">
				<div class="modal-footer-toolbars"></div>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">
                    Close
                </button>
            </div>
        </div>
    </div>
</div>
@endsection
@section('css')
<link href="{{asset('assets_7.0.6/plugins/custom/datatables/datatables.bundle.css?v=7.0.6')}}" rel="stylesheet" type="text/css" />
<style type="text/css">
	.modal-lg {
	    max-width: 75%;
	}	
	@media (min-width: 992px){
		.table {
			table-layout: fixed;
			/* min-width: 768px; */
		}
		.td-w-medium {
			width: 5rem;
		}
		.td-w-truncate div {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			display: -webkit-box;
    		-webkit-line-clamp: 1;
    		-webkit-box-orient: vertical;
		}
	}
</style>
@endsection
@section('js')
<!--begin::Page Vendors -->
<script src="{{asset('assets_7.0.6/plugins/custom/datatables/datatables.bundle.js?v=7.0.6')}}" type="text/javascript"></script>
<script src="{{asset('assets_7.0.6/plugins/custom/extensions/rowlink.js?v=7.0.6')}}"></script>
<!-- <script src="{{asset('assets_7.0.6/plugins/custom/ui/ripple.min.js?v=7.0.6')}}"></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('approvalpermohonan-data') }}",			
			"columnDefs": [
				{ className: "td-w-medium", "targets": [ 1,2,3 ] }
			],
	        "columns": [					
	            { data: null, name: 'judul' , className: 'td-w-truncate' , orderable:false, defaultContent: "", 
	                render: function(data, type, row, meta) {
						var output = '';
						output += '<div class="font-weight-bolder font-size-lg mb-0">' + data.judul + '</div>';
						output += '<div class="font-weight-bold text-muted clamp">' + data.uraian + '</div>';
						return output;
	                }
	            },   			 			
	            { data: null, name: 'tgl_entri' , defaultContent: "", 
	                render: function(data, type, row, meta) {
						var output = '';
						output += '<div class="font-weight-bolder text-primary mb-0">' + moment(data.tgl_entri).format('DD MMM YY') + '</div>';
						return output;
	                }
	            }, 				 			
	            { data: null, name: 'ket_status.ket' , orderable:true, searchable: true, defaultContent: "", 
	                render: function(data, type, row, meta) {
						var output = '';						
						output += '<span class="label label-lg label-light-warning label-inline">' + data.ket_status.ket + '</span>';
						return output;
	                }
	            }, 	
	            {data: 'menu', orderable: false, searchable: false, visible: false}
	        ],
	        "order": [[0,'desc']],
			"drawCallback": function( settings ) {             
	            var api = this.api();	              
	            api.$('td').not( ".NoClick" ).css('cursor','pointer');
	            // api.$('td a').ripple();
			},
	    });
		
		$('.clamp').each(function(index, element) {
			$clamp(element, { clamp: 1, useNativeClamp: false });
		});
	});

	function detail(kode){
		KTApp.block("#tabel",{
			overlayColor:"#000000",
			type:"loader",
			state:"success",
			message:"Please wait...",
			// baseZ: 1000, 
		});
		var urlContent = "{{ route('permohonan-detail') }}";
			$(".modal-footer-toolbars").empty();
			$('#detail_lacak').load( urlContent ,
                { 	kode 	: kode , _token: "{{ csrf_token() }}" },    
                function(data, status, jqXGR) { 
					$(".modal-footer-toolbars").append('<div class="">' +
						'<a href="#" class="btn btn-primary font-weight-bold btn-pill mr-2" onclick="approve('+kode+')">Approve</a>'+
						'<a href="#" class="btn btn-warning font-weight-bold btn-pill mr-2" onclick="revisi('+kode+')">Revisi</a>'+
					'</div>');
					$('#modal_detail').modal('show');
					KTApp.unblock("#tabel");
            });	
		// $.ajax({
	    //     type: "POST",
	    //     url: "{{route('approvalpermohonan-simpan')}}",
	    //     data: {recid: kode, _token: "{{ csrf_token() }}"},
	    //     success: function (result)
	    //     {
	    //     	$('#tabel').DataTable().ajax.reload();
	    //         KTApp.unblock("#tabel");
	    //     }
	    // });
	}

	function approve(kode){
		KTApp.block("#tabel",{
			overlayColor:"#000000",
			type:"loader",
			state:"success",
			message:"Please wait...",
			// baseZ: 1000, 
		});
		$.ajax({
	        type: "POST",
	        url: "{{route('approvalpermohonan-simpan')}}",
	        data: {recid: kode, status:'2', _token: "{{ csrf_token() }}"},
	        success: function (result)
	        {
				$('#modal_detail').modal('hide');
	        	$('#tabel').DataTable().ajax.reload();
	            KTApp.unblock("#tabel");
				Swal.fire(
					"Info!",
					"data berhasil disimpan...",
					"success"
				);
	        }
	    });
	}

	function revisi(kode){
		// Swal.fire('Good job!');
		Swal.fire({
			// title: "Keterangan Revisi",
			input: "textarea",
			inputPlaceholder: "Keterangan Revisi",
			// text: "<div><textarea></textarea></div>",
			// icon: "warning",
			showCancelButton: true,
			confirmButtonText: "Revisi",
			cancelButtonText: "Cancel",
			reverseButtons: true,
			// inputValidator: function(value) { // validates your input
			// 	return new Promise(function(resolve, reject) {
			// 		if (value != '' && value != null) {
			// 			// document.getElementById('closeComment').value = value; // assign this to other elements in your form
			// 			swal("Success!", "You comment: " + value, "success");
			// 			// call other functions or do an AJAX call or sumbit your form
			// 		}
			// 		else {
			// 			reject('Please enter a valid text');
			// 		}
			// 	});
			// }
		}).then(function(result) {
			if (result.isConfirmed) {	
				$.ajax({
				    type: "POST",
				    url: "{{route('approvalpermohonan-simpan')}}",
				    data: { 
						recid		: kode, 
						keterangan 	: result.value ,
						status		:'0',
						 _token		: "{{ csrf_token() }}"
					},
				    success: function (result)
				    {
						$('#modal_detail').modal('hide');
				    	$('#tabel').DataTable().ajax.reload();
						Swal.fire(
							"Info!",
							"data berhasil disimpan...",
							"success"
						);
				    }
				});
			} 
			// console.log(result);
		});
		// KTApp.block("#tabel",{
		// 	overlayColor:"#000000",
		// 	type:"loader",
		// 	state:"success",
		// 	message:"Please wait...",
		// 	// baseZ: 1000, 
		// });
		// $.ajax({
	    //     type: "POST",
	    //     url: "{{route('approvalpermohonan-simpan')}}",
	    //     data: { recid: kode, status:'0', _token: "{{ csrf_token() }}"},
	    //     success: function (result)
	    //     {
		// 		$('#modal_detail').modal('hide');
	    //     	$('#tabel').DataTable().ajax.reload();
	    //         KTApp.unblock("#tabel");
	    //     }
	    // });
	}
	
</script>
@endsection