@extends('layout.app_706')
@section('title')
	Monitoring 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 ">
		<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">
									<!-- <span> -->
										Data Permohonan
									<!-- </span> -->
								</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 table-bordered table-hover m-table" id="tabel">
									<thead>
										<tr>
											<th>Tgl</th>
											<th>Judul</th>
											<th>Uraian</th>
											<th>Bagian Terkait</th>
											<th>Status</th>
											<th>Menu</th>
										</tr>
									</thead>
									<tbody>
									</tbody>
								</table>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

        </div>
        <!--end::Container-->
    </div>
    <!--end::Entry-->

<div class="modal" id="modal_lacak" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="titleModal">
                    Lacak 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="m-timeline-3__items" id="detail_lacak">
							<div class="m-timeline-3__item m-timeline-3__item--info">
								<span class="m-timeline-3__item-time">
									09:00
								</span>
								<div class="m-timeline-3__item-desc">
									<span class="m-timeline-3__item-text">
										Lorem ipsum dolor sit amit,consectetur eiusmdd tempor
									</span>
									<br>
									<span class="m-timeline-3__item-user-name">
										<a href="#" class="m-link m-link--metal m-timeline-3__item-link">
											By Bob
										</a>
									</span>
								</div>
							</div>
							<div class="m-timeline-3__item m-timeline-3__item--warning">
								<span class="m-timeline-3__item-time">
									10:00
								</span>
								<div class="m-timeline-3__item-desc">
									<span class="m-timeline-3__item-text">
										Lorem ipsum dolor sit amit
									</span>
									<br>
									<span class="m-timeline-3__item-user-name">
										<a href="#" class="m-link m-link--metal m-timeline-3__item-link">
											By Sean
										</a>
									</span>
								</div>
							</div>
							<div class="m-timeline-3__item m-timeline-3__item--brand">
								<span class="m-timeline-3__item-time">
									11:00
								</span>
								<div class="m-timeline-3__item-desc">
									<span class="m-timeline-3__item-text">
										Lorem ipsum dolor sit amit eiusmdd tempor
									</span>
									<br>
									<span class="m-timeline-3__item-user-name">
										<a href="#" class="m-link m-link--metal m-timeline-3__item-link">
											By James
										</a>
									</span>
								</div>
							</div>
							<div class="m-timeline-3__item m-timeline-3__item--success">
								<span class="m-timeline-3__item-time">
									12:00
								</span>
								<div class="m-timeline-3__item-desc">
									<span class="m-timeline-3__item-text">
										Lorem ipsum dolor
									</span>
									<br>
									<span class="m-timeline-3__item-user-name">
										<a href="#" class="m-link m-link--metal m-timeline-3__item-link">
											By James
										</a>
									</span>
								</div>
							</div>
							<div class="m-timeline-3__item m-timeline-3__item--danger">
								<span class="m-timeline-3__item-time">
									14:00
								</span>
								<div class="m-timeline-3__item-desc">
									<span class="m-timeline-3__item-text">
										Lorem ipsum dolor sit amit,consectetur eiusmdd
									</span>
									<br>
									<span class="m-timeline-3__item-user-name">
										<a href="#" class="m-link m-link--metal m-timeline-3__item-link">
											By Derrick
										</a>
									</span>
								</div>
							</div>
							<div class="m-timeline-3__item m-timeline-3__item--info">
								<span class="m-timeline-3__item-time">
									15:00
								</span>
								<div class="m-timeline-3__item-desc">
									<span class="m-timeline-3__item-text">
										Lorem ipsum dolor sit amit,consectetur
									</span>
									<br>
									<span class="m-timeline-3__item-user-name">
										<a href="#" class="m-link m-link--metal m-timeline-3__item-link">
											By Iman
										</a>
									</span>
								</div>
							</div>
							<div class="m-timeline-3__item m-timeline-3__item--brand">
								<span class="m-timeline-3__item-time">
									17:00
								</span>
								<div class="m-timeline-3__item-desc">
									<span class="m-timeline-3__item-text">
										Lorem ipsum dolor sit consectetur eiusmdd tempor
									</span>
									<br>
									<span class="m-timeline-3__item-user-name">
										<a href="#" class="m-link m-link--metal m-timeline-3__item-link">
											By Aziko
										</a>
									</span>
								</div>
							</div>
						</div>
					</div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">
                    Close
                </button>
            </div>
        </div>
    </div>
</div>
@endsection
@section('css')
<link href="{{asset('assets/vendors/custom/datatables/datatables.bundle.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('assets/vendors/general/select2/dist/css/select2.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 src="{{asset('assets/vendors/custom/select2/select2.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('monitoringpermohonan-data') }}",
	        "columns": [
	            // {data: 'kode'},
	            {data: 'tgl_entri'},
	            {data: 'judul'},
	            {data: 'uraian'},
	            {data: 'jabatan_terkait.namajabatan'},
	            {data: 'ket_status.ket'},
	            {data: 'menu', orderable: false, searchable: false}
	        ],
	        "order": [[0,'desc']]
	    });
	    $("#spv").select2({width: '100%'});
	});

	function lacak(kode){
		mApp.block("#tabel",{
			overlayColor:"#000000",
			type:"loader",
			state:"success",
			message:"Please wait...",
			// baseZ: 1000, 
		});
		$.ajax({
	        type: "POST",
	        url: "{{route('permohonan-lacak')}}",
	        data: {recid: kode, _token: "{{ csrf_token() }}"},
	        success: function (result)
	        {
	        	$('#modal_lacak').modal('show');
	            $('#tabel').DataTable().ajax.reload();
	            $("#detail_lacak").empty();
	            var image = '';
				if(result.data.foto_checker != null){
					var url = "{{url('api/gambar')}}/image&" + result.data.foto_checker;
					image = '<a href="'+url+'" target="_blank"><button type="button" class="btn btn-outline-success"><i class="fa fa-file-image"></i> File Verifikasi</button></a>';
				}
	            $.each(result.lacak, function( index, value ) {
	            	$("#detail_lacak").append('<div class="m-timeline-3__item m-timeline-3__item--info">' +
								'<span class="m-timeline-3__item-time" style="font-size: 9px;">' +
									value.tanggal +
								'</span>' +
								'<div class="m-timeline-3__item-desc">' +
									'<span class="m-timeline-3__item-text">' +
										value.ket +
									'</span>' +
									'<br>' +
									'<span class="m-timeline-3__item-user-name">' +
										'<a href="#" class="m-link m-link--metal m-timeline-3__item-link">' +
											'Oleh. ' + value.nama +
										'</a>' +
									'</span>' +
								'</div>' +
							'</div>');
	            });
	            $("#detail_lacak").append(image);
	            mApp.unblock("#tabel");
	        }
	    });
	}
</script>
@endsection