@extends('layout.app_706')
@section('title')
	SPV JobList
@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-->
                <!--begin::Actions-->
                <div class="subheader-separator subheader-separator-ver mt-2 mb-2 mr-4 bg-gray-200"></div>
                <button type="button" class="btn btn-light-primary font-weight-bolder btn-sm" data-toggle="modal" data-target="#AddJob">
                    Tugas Tambahan
                </button>
                <!--end::Actions-->
            </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" 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 _table-hover-gtheme" id="tabel">
									<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>
    <!--end::Entry-->

    <div class="modal" id="CloseJob" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="titleModal">
                        Close Job
                    </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">
						×
					</span>
                    </button>
                </div>
                {!! Form::open(['route' => 'spv.close.job','id'=>'form_closeJob']) !!}
                <input type="hidden" name="status" id="status" value="">
                <input type="hidden" name="recID" id="recID" value="">
                <div class="modal-body">
                    <div class="col-lg-12">
                        <div class="form-group m-form__group">
                            <label class="col-form-label">Remark SPV</label>
                            <textarea name="remark" class="form-control" id="remark"></textarea>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
                        Close
                    </button>
                    <button type="submit" class="btn btn-primary">
                        Simpan
                    </button>
                </div>
                {!! Form::close() !!}
            </div>
        </div>
    </div>
    
	<div class="modal" id="AddJob" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="titleModal">
                        Tugas Tambahan
                    </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">
						×
					</span>
                    </button>
                </div>
                {!! Form::open(['route' => 'spv.add.job','id'=>'form_addJob','enctype'=>'multipart/form-data']) !!}
                <div class="modal-body">
                    <div class="col-lg-12">
                        <div class="form-group m-form__group">
                            <label for="uraian">
                                Judul
                            </label>
                            <input class="form-control m-input m-input--air" id="judul" name="judul" value="{{old('judul')}}" >
                        </div>
                        <div class="form-group m-form__group">
                            <label for="uraian">
                                Uraian Permohonan
                            </label>
                            <textarea class="form-control m-input m-input--air" id="uraian" name="uraian" rows="3">{{old('uraian')}}</textarea>
                        </div>
                        <div class="form-group m-form__group">
                            <label for="fileName">
                                File Browser
                            </label>
                            <div></div>
                            <div class="custom-file">
                                <input type="file" class="custom-file-input" id="photo" name="photo">
                                <label class="custom-file-label" for="fileName">
                                    Choose file
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
                        Close
                    </button>
                    <button type="submit" class="btn btn-primary">
                        Simpan
                    </button>
                </div>
                {!! Form::close() !!}
            </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 (max-width: 991.98px){
		.d-none-mobile {
			display:none!important;
		}
		.w_200px { max-width:100px!important;}
	}
</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/moment/moment.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/extensions/rowlink.js?v=7.0.6')}}"></script>
<script type="text/javascript">

	$(document).ready(function () {
		$('#tabel').DataTable({
			responsive: true,
	        "processing": true,
	        "serverSide": true,
	        "ajax": "{{ route('get.spv.listdata') }}",
	        "columns": [
	            // {data: 'kode'},
	            { data: null, className: 'align-top' , name: 'user_pemohon.nama' , orderable:false, defaultContent: "", 
	                render: function(data, type, row, meta) {
                        if( data.user_pemohon.nama == 'SPV TSI'){
                            var bagian = data.jabatan.namajabatan.replace('Manajer ','');
                            output = '<div class="d-flex align-items-top">\
                                    <div class="symbol symbol-40 symbol-sm flex-shrink-0">\
                                        <img class="" src="avatar/user-pdam.png" onerror="this.onerror=null; this.src=\'avatar/user-pdam.png\'" alt="photo">\
                                    </div>\
                                    <div class="ml-4 d-none-mobile">\
                                        <div class="text-dark-75 font-weight-bolder font-size-lg mb-0">' + data.user_pemohon.nama + '</div>\
                                        <span class="text-muted font-weight-bold text-hover-primary">' + bagian + '</span>\
                                    </div>\
                                </div>';
                            return output;

                        }else{
                            var user_img = data.user_pemohon.nip.trim() + '.jpg';
                            var bagian = data.jabatan.namajabatan.replace('Manajer ','');
                            output = '<div class="d-flex align-items-top">\
                                    <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="ml-4 d-none-mobile">\
                                        <div class="text-dark-75 font-weight-bolder font-size-lg mb-0">' + data.user_pemohon.nama + '</div>\
                                        <span class="text-muted font-weight-bold text-hover-primary">' + bagian + '</span>\
                                    </div>\
                                </div>';
                            return output;
                        }
	                }
	            },  	
				// { data: 'dt_uraian', orderable: false, searchable: false },			
	            { data: null, className: 'align-top' , name: 'judul' , orderable:false, defaultContent: "", 
	                render: function(data, type, row, meta) {
						// console.log(type);
						var output = '';
						output += '<div class="font-weight-bolder font-size-lg mb-0">' + data.judul + '</div>';
						output += '<div class="font-weight-bold text-muted">' + data.uraian + '</div>';
						return output;
	                }
	            },   			
	            { data: null, className: 'align-top w-100px' , orderable:false, 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 YY') + '</div>';
						return output;
	                }
	            }, 	
				{ data: 'menu', className: 'align-top' ,visible: false, orderable: false, searchable: false },	
	            // {data: 'date_entry'},
	            // {data: 'jabatan.namajabatan'},
	            // {data: 'judul'},
	            // {data: 'uraian'},
	            // {data: 'menu', orderable: false, searchable: false}
	        ],
			"drawCallback": function( settings ) {             
	            var api = this.api();	              
	            api.$('td').not( ".NoClick" ).css('cursor','pointer');
	            // api.$('td a').ripple();
			},
	    });
		
		$('#form_closeJob').submit(function (event) {
                event.preventDefault();
                var post_url = $(this).attr("action"); //get form action url
                var form = $('#form_closeJob')[0]; // You need to use standard javascript object here
                var formData = new FormData(form);
                $.ajax( {
                    type: "POST",
                    url: post_url,
                    processData: false,
                    contentType: false,
                    data: formData,
                    success: function( response ) {
                        if (response.status==true){
                            $('body').append(response.message);
                            $('#tabel').DataTable().ajax.reload();
                            $('#form_closeJob').trigger('reset');
                            $('#recID').val('');
                            $('#status').val('');
                            $('#CloseJob').modal('hide');
                        } else{
                            $('body').append(response.message);
                        }
                    }
                });

        });
	});
	
		function closeJob(id) {
            $('#CloseJob').modal('show');
            $('#titleModal').empty();
            $('#titleModal').append('Close Job');
            $('#status').val(0);
            $('#recID').val(id);
        }
        
        function rejectJob(id) {
            $('#CloseJob').modal('show');
            $('#titleModal').empty();
            $('#titleModal').append('Reject Job');
            $('#status').val(1);
            $('#recID').val(id);
        }
        
	function backJob(id) {        
		Swal.fire({
			title 	: "Apakah Anda Yakin?",
			text 	: "Kembali Task kepada Helpdesk",
			icon 	: "warning",
			showCancelButton: true,
			confirmButtonText: "Simpan"
		}).then(function(result) {
			if (result.value) {
				KTApp.block("#kt_projects_add_form",{
					overlayColor:"#000000",
					type:"loader",
					state:"success",
					message:"Please wait...",
					// baseZ: 1000, 
				});
				$.ajax({
					type: "POST",
					url: "{{route('spv.back.job')}}",
					data: {recid: id, _token: "{{ csrf_token() }}"},
					success: function (result)
					{                        
                        if (result.status==true){
                            KTApp.unblock("#kt_projects_add_form");
                            Swal.fire(
                                "Information",
                                "Back Task berhasil Disimpan",
                                "success"
                            )
                            $('#tabel').DataTable().ajax.reload();
                        } else{
                            $('body').append(result.message);
                        }
					}
				});
			}
		});
    }
</script>
@endsection