@extends('layout.app_706')
@section('title')
	@if(!empty($dt))
		@if($dt=='all')
			Seluruh permohonan
		@elseif($dt=='history')
			History Tugas Anda
		@endif
	@else
		Inbox Anda
	@endif
	{{-- !empty($dt)?'Seluruh Permohonan':'Inbox Task List' --}} 
@endsection
@section('content')
	
    <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">
            <div class="d-flex align-items-center flex-wrap mr-2">
                <h5 class="text-dark font-weight-bold mt-2 mb-2 mr-5">
                    @yield('title')
                </h5>
            </div>
        </div>
    </div>
	    
    <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" id="data">
					<div class="card-body m-portlet__body">
						<div class="m-section" id="data-kategori">
							<div class="m-section__content">
								<table class="table table-separate table-head-custom" id="tabel" width="100%">
									<thead>
										<tr>
											<th>Pemohon</th>
											<th>Uraian</th>
											<th>Tgl Entry</th>
											<th></th>
										</tr>
									</thead>
									<tbody data-link="row" class="rowlinks">
									</tbody>
								</table>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

        </div>
        <!--end::Container-->
    </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 (max-width: 991.98px){
		.d-none-mobile {
			display:none!important;
		}
		.w_200px { max-width:100px!important;}
	}
	@media (min-width: 992px){
		.table th, .table td { 
			vertical-align: top;
			overflow: hidden; 
			text-overflow: ellipsis; 
			white-space: nowrap; 
    		-webkit-line-clamp: 3;
		}		
		.table th.w-100px, .table td.w-10 {
			max-width:100px!important;
		}
		.table th.w-20, .table td.w-20 {
			max-width:20%!important;
		}
		.table th.w-50, .table td.w-50 {
			max-width:50%!important;
		}
		.w-10 { width:10%!important;}
		.w-20 { width:20%!important;}
		.w-25 { width:25%!important;}
		.w-50 { width:50%!important;}
		.w-75 { width:75%!important;}
		.w-80 { width:80%!important;}
		.w-100 { width:100%!important;}
		.w-50px { max-width:50px!important;}
		.w-100px { width:100px!important;}
		.w_200px { width:200px!important;}
		.w-200px { max-width:200px!important;}
		.w-300px { max-width:300px!important;}
		.w-400px { max-width:400px!important;}
	}
		*/
</style>
@endsection

@section('js')
<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/clamp/clamp.min.js?v=7.0.6')}}"></script>
<script src="{{asset('assets_7.0.6/plugins/custom/moment/moment_locales.min.js?v=7.0.6')}}"></script>
<script src="{{asset('assets_7.0.6/plugins/custom/moment/moment.min.js?v=7.0.6')}}"></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 () {	
		$('#tabel').DataTable({
			responsive: true,
	    	"pageLength": 10,
	        "processing": true,
	        "serverSide": true,
	        // "ajax" 		: "{{ route('task.data') }}",			
	        "ajax": {
	            "url" 	: "{{ route('task.data') }}",
	         	"type"	: "GET",
	         	"data" 	: {
		            "dt"  		: "{{ $dt }}"
	        	}
	        },
			"order" 	: [[ 2, 'desc' ]],
	        "columns" 	: [
	            { data: null, name: 'judul' , className: 'align-top w_200px' , orderable:false, defaultContent: "", 
	                render: function(data, type, row, meta) {
						if ( data.user_pemohon == null){
							// var user_img 	= 'user-pdam.png';
							// var nama 		= data.jabatan.namajabatan;
							// var bagian 		= data.jabatan.namajabatan.replace('Manajer ','');
							var user_img 	= data.nip_spvworker.trim() + '.jpg';
							var nama 		= data.data_spv.nama.trim();
							var bagian 		= data.jabatan.namajabatan.replace('Manajer ','');
						}
						else {
							var user_img 	= data.user_pemohon.nip.trim() + '.jpg';
							var nama 		= data.user_pemohon.nama;
							var bagian 		= data.jabatan.namajabatan.replace('Manajer ','');
						}
						// var bagian = data.jabatan.namajabatan.replace('Manajer ','');
						output = 
							'<div class="d-flex align-items-center">\
									<div class="symbol symbol-40 symbol-sm flex-shrink-0">\
										<img class="" src="avatar/' + user_img + '" onerror="this.onerror=null; this.src=\'avatar/user-pdam.png\'" alt="photo">\
									</div>\
									<div class="d-none-mobile ml-4">\
										<div class="text-dark-75 font-weight-bolder font-size-lg mb-0 text-truncate">' + nama + '</div>\
										<span class="text-muted font-weight-bold text-hover-primary text-truncate">' + bagian + '</span>\
									</div>\
							</div>';
	                    return output;
	                }
	            },  			
	            { data: null, name: 'uraian' , className: 'align-top _mw-100-300px mw-400px' , orderable:false, defaultContent: "", 
	                render: function(data, type, row, meta) {
						var output 	= '';
						var cLabel 	= 'primary';
						output += 	'<div class="font-weight-bolder font-size-lg mb-0 text-truncate">' + data.judul + '</div>';
						output += 	'<div class="font-weight-bold text-muted text-truncate">' + data.uraian + '</div>';
						if ( data.ket_status !== null){
							if( data.status < 5 ){ cLabel='warning';}
							output += 	
								'<div class="mt-2">\
									<span class="label label-light-'+cLabel+' font-weight-bold label-inline mr-1">'+data.ket_status.ket+'</span>\
								</div>';
						}
						return output;
	                }
	            },   			
	            { data: null, name: 'tgl_entri' , className: 'align-top text-right w-100px' , searchable: false, 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 YYYY') + '</div>';
						return output;
	                }
	            }, 	
				
				{ data: 'option', className: 'w-150px d-none rowlink-skip' ,orderable: false, searchable: false},
				
	        ],
			"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 });
		});
	});
</script>
@endsection