@extends('layout.app')
@section('title')
	Data Histori | {{env('APP_NAME')}}
@endsection
@section('content')
<div class="m-grid__item m-grid__item--fluid m-wrapper">
	<div class="m-content">
		<div class="row">
			<div class="col-12">
				<div class="m-portlet m-portlet--creative m-portlet--first m-portlet--bordered-semi" id="data">
					<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--accent">
									Data Histori
								</h2>
							</div>
						</div>
					</div>
					<div class="m-portlet__body">
						<div class="m-section" id="data-kategori">
							<div class="m-section__content">
								<table class="table table-bordered table-hover m-table" id="tabel">
									<thead>
										<tr>
											<th>Tgl</th>
											<th>Bagian Terkait</th>
											<th>Judul</th>
											<th>Uraian</th>
											<th>Option</th>
										</tr>
									</thead>
									<tbody>
									</tbody>
								</table>
							</div>
						</div>
					</div>
				</div>
			</div>

		</div>
	</div>
</div>

<div class="modal" id="ModalHistory" role="dialog">
	<div class="modal-dialog modal-lg" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalLabel">
					Detail Job
				</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-6">
						<div class="col-lg-12" id="penyelesaian">
							<div class="form-group m-form__group">
								<label class="col-form-label">Judul</label>
								<input type="text" name="estimasi" readonly class="form-control" id="_judul">
								
							</div>
						</div>
						<div class="col-lg-12" id="penyelesaian">
							<div class="form-group m-form__group">
								<label class="col-form-label">Bagian Pemohon</label>
								<input type="text" name="estimasi" readonly class="form-control" id="_bagian">
							</div>
						</div>
						<div class="col-lg-12">
							<div class="form-group m-form__group">
								<label class="col-form-label">Uraian</label>
								<textarea name="uraianremarkSpv" readonly class="form-control" id="_uraian_"></textarea>
							</div>
						</div>
					</div>
					<div class="col-6">
						<div class="m-accordion m-accordion--default m-accordion--toggle-arrow" id="_detailworker" role="tablist">
						</div>
					</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 () {
		$('#tabel').DataTable({
	        "processing": true,
	        "serverSide": true,
	        "ajax": "{{ route('history-data', ['tipe' => $tipe]) }}",
	        "columns": [
	            {data: 'tgl_entri'},
	            {data: 'jabatan.namajabatan'},
	            {data: 'judul'},
	            {data: 'uraian'},
	            {data: 'option','class':'text-center',orderable: false,searchable: false},
	        ],
	        "order": [[0,'desc']]
	    });
	});

	function viewjob(id) {
		$('#ModalHistory').modal('show');
		$('#_detailworker').empty();
		$.ajax( {
			type: "POST",
			url: "{{route('history-view')}}",
			data: {'recid':id,'_token':'{{csrf_token()}}'},
			success: function( response ) {
				if (response.status){
					$('body').append(response.message);
					// $('#data_id').val(response.data.recid);//.prop('disabled',true);
					$('#_judul').val(response.data.judul);//.prop('disabled',true);
					$('#_bagian').val(response.data.jabatan.namajabatan);//.prop('disabled',true);
					// $('#uraian').empty();
					$('#_uraian_').text(response.data.uraian);//.prop('disabled',true);
					// alert(response.data.uraian);	
					$.each(response.data.data_requirement, function( index, value ) {
						var image = '';
						if(value.ext_file != null){
							var url = "{{url('api/gambar')}}/image&" + value.ext_file;
							image = '<a href="'+url+'" target="_blank"><button type="button" class="btn btn-outline-success"><i class="fa fa-file-image"></i> File Image</button></a>';
						}
						var status = value.penyelesaian + '<br><span class="m-badge m-badge--success m-badge--wide">Selesai ' + value.tgl_selesai + '</span>';
						var flag = '';
						if(value.status == 0) {
							status = '<span class="m-badge m-badge--danger m-badge--wide m-badge--rounded">Belum Dikerjakan</span>';
						}else if(value.status == 1) {
							status = '<span class="m-badge m-badge--warning m-badge--wide m-badge--rounded">Sedang Dikerjakan</span>&nbsp;&nbsp;&nbsp;<span class="m-badge m-badge--info m-badge--wide">Mulai ' + value.tgl_mulai + '</span>';
						}else if(value.status == 9) {
							flag = '&nbsp;<span class="m-badge m-badge--danger m-badge--wide">Rejected</span>';
						}else if(value.status == 11) {
							flag = '&nbsp;<span class="m-badge m-badge--success m-badge--wide">Aprroved</span>';
						}else if(value.status == 10) {
							flag = '&nbsp;<span class="m-badge m-badge--primary m-badge--wide">Checking</span>';
						}
						var approval = '';
						if(value.approve_at != null){
							approval = '<span class="m-badge m-badge--success m-badge--wide">Approved ' + value.approve_at + '</span>'
						}
						if(value.status == 9){
							approval = '<p><b>Remark:</b><br>' + value.remark_checker + '</p>'
						}
						$("#_detailworker").append('<div class="m-accordion__item">' +
							'<div class="m-accordion__item-head collapsed" srole="tab" id="m_accordion_3_item_' + index + '_head" data-toggle="collapse" href="#m_accordion_5_item_' + index + '_body" aria-expanded="  false">' +
								'<span class="m-accordion__item-icon">' +
									'<i class="fa flaticon-user-ok"></i>' +
								'</span>' +
								'<span class="m-accordion__item-title">' +
									value.worker.nama + flag +
								'</span>' +
								'<span class="m-accordion__item-mode"></span>' +
							'</div>' +
							'<div class="m-accordion__item-body collapse" id="m_accordion_5_item_' + index + '_body" class=" " role="tabpanel" aria-labelledby="m_accordion_5_item_' + index + '_head" data-parent="#_detailworker">' +
								'<div class="m-accordion__item-content">' +
									'<h4>Disposisi SPV&nbsp;&nbsp;&nbsp;<span class="m-badge m-badge--accent m-badge--wide">Estimasi ' + value.estimasi + ' Hari</span></h4>'+
									'<p><b>Task:</b><br>' + value.requirement + '<br><b>Keterangan:</b><br>' + value.keterangan + '<br><b>Remark:</b><br>' + value.remark + '</p>' +
									'<h4>Penyelesaian</h4>'+
									'<p>' + status + '</p>' +
									'<div class="form-group m-form__group">'+
										image +
									'</div>'+
									'<h4>Checker&nbsp;&nbsp;(' + response.data.checker.nama + ')</h4>'+
									approval +
								'</div>' +
							'</div>' +
						'</div>');			  
					});
					// var approval = '';
					// if(response.data.tgl_approval != null){
						// approval = '<span class="m-badge m-badge--success m-badge--wide">Selesai ' + response.data.tgl_approval + '</span>'
					// }
					// var remark_approval = response.data.remark_checker;
					// if(response.data.tgl_approval == null){
						// remark_approval = '<span class="m-badge m-badge--danger m-badge--wide">Belum ada</span>'
					// }
					// $("#_detailworker").append('<div class="m-accordion__item m-accordion__item--warning">' +
						// '<div class="m-accordion__item-head collapsed" srole="tab" id="m_accordion_5_item_99_head" data-toggle="collapse" href="#m_accordion_5_item_99_body" aria-expanded="  false">' +
							// '<span class="m-accordion__item-icon">' +
								// '<i class="fa flaticon-edit"></i>' +
							// '</span>' +
							// '<span class="m-accordion__item-title">' +
								// response.data.checker.nama +
							// '&nbsp;&nbsp;&nbsp;(Checker)</span>' +
							// '<span class="m-accordion__item-mode"></span>' +
						// '</div>' +
						// '<div class="m-accordion__item-body collapse" id="m_accordion_5_item_99_body" class=" " role="tabpanel" aria-labelledby="m_accordion_5_item_99_head" data-parent="#_detailworker">' +
							// '<div class="m-accordion__item-content">' +
								// '<h4>Remark' + approval + '</h4>'+
								// '<p>' + remark_approval + '</p>' +
								// '<div class="form-group m-form__group">'+
									// '' +
								// '</div>'+
							// '</div>' +
						// '</div>' +
					// '</div>');	
				} else{
					$('body').append(response.message);
				}
			}
		});
	}
</script>
@endsection