@extends('layouts.app')

@section('style')
@endsection

@section('content')
<h1 class="h3 mb-2 text-gray-800">Daftar Permohonan</h1>

<div class="card shadow mb-4">
	<div class="card-header py-3">
	<h6 class="m-0 font-weight-bold text-primary">Tabel Permohonan</h6>
	</div>
	<div class="card-body">
		<div class="table-responsive">
			<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
				<thead>
					<tr>
						<th>No</th>
						<th>Tiket</th>
						<th>Nama</th>
						<th>NIK</th>
						<th>File NIK</th>
						<th>e-Mail</th>
						<th>Telepon</th>
						<th>Faksimili</th>
						<th>Jenis</th>
						<th>File Akta</th>
						<!-- <th>Alamat</th>
						<th>Rincian</th>
						<th>Cara Memperoleh</th>
						<th>Cara Mendapatkan</th> -->
						<th>Tanggal Masuk</th>
						<th>Status</th>
						<th>Aksi</th>
					</tr>
				</thead>
				<tbody>
					@php $no = 1; @endphp
	                @foreach($permohonan as $row)
					<tr>
						<td>{{$no++}}</td>
						<td>{{$row->tiket}}</td>
						<td>{{$row->nama}}</td>
						<td>{{$row->nik}}</td>
						<td>@if($row->filenik) <button class="btn btn-primary btn-sm lihatfile" data-file="{{$row->filenik}}"  title="Lihat"><i class="fas fa-fw fa-eye"></i></button> @else Tidak Ada File @endif</td>
						<td>{{$row->email}}</td>
						<td>{{$row->telepon}}</td>
						<td>{{$row->faksimili}}</td>
						<td>{{$row->jenis}}</td>
						<td>@if($row->fileakta) <button class="btn btn-primary btn-sm lihatpdf" data-file="{{$row->fileakta}}"  title="Lihat"><i class="fas fa-fw fa-eye"></i></button> @else Tidak Ada File @endif</td>
						<!-- <td>{{$row->alamat}}</td>
						<td>{{$row->rincian}}</td>
						<td>{{$row->cara}}</td>
						<td>{{$row->caramendapatkan}}</td> -->
						<td>{{$row->created_at->locale('in')->isoFormat('dddd, DD MMMM YYYY, HH:mm:ss')}}</td>
						<td>{{isset($row->statuspermohonan->last()->status) ? $row->statuspermohonan->last()->status : ""}}</td>
						<td>
							<a href="{{route('detailpermohonan',$row->id)}}" class="btn btn-sm btn-success" title="Detail"><i class="fas fa-fw fa-search"></i></a>
							<button class="btn btn-sm btn-warning status" data-id="{{$row->id}}" data-laststat="{{$row->statuspermohonan->last()}}" title="Status" {{($row->statusterakhir() ? '' : 'disabled')}}><i class="fas fa-fw fa-edit"></i></button>
						</td>
					</tr>
					@endforeach
				</tbody>
			</table>
		</div>
	</div>
</div>

@endsection

@section('modal')
@endsection

@section('script')
<script>
	jQuery(function($) {
		$('#dataTable').DataTable();
		
		$(".lihatfile").on("click",function(){
			bootbox.alert({message: "<img class='col-12' src='"+$(this).data('file').replace('public/', '../storage/')+"'>",size: 'large'});
		});

		$(".lihatpdf").on("click",function(){
			bootbox.alert({message: "<object data="+$(this).data('file').replace('public/', '../storage/')+" style='width: 100%;height: 700px;'></object>",size: 'large'});
		});

		$(".status").on("click",function(){
			var id = $(this).data("id");
			var last = $(this).data("laststat");
			var stat = bootbox.dialog({ 
			    title: 'Status',
			    message: 	'<form id="modalform" action="#" method="POST" enctype="multipart/form-data">'+
								'@method("PUT")'+
								'@csrf'+
								'<div class="form-group">'+
									'<label for="status">Status</label>'+
									'<select class="form-control" id="status" name="status">'+
									'<option value="">-- Pilih Status --</option>'+
									'<option value="Tolak">Tolak</option>'+
									'<option value="Proses">Proses</option>'+
									'<option value="Selesai">Selesai</option>'+
									'</select>'+
								'</div>'+
								'<div class="form-group">'+
									'<label for="keterangan">Keterangan</label>'+
									'<textarea class="form-control" id="keterangan" name="keterangan" rows="3"></textarea>'+
								'</div>'+
								'<div class="form-group">'+
									'<label for="upload">Upload File</label>'+
									'<div class="input-group">'+
										'<div class="custom-file">'+
										'<input type="file" name="upload" class="custom-file-input" id="upload">'+
										'<label class="custom-file-label" for="upload">Pilih File...</label>'+
										'</div>'+
									'</div>'+
									'<label for="upload" class="error"></label>'+
								'</div>'+
			    			'</form>',
			    size: 'large',
			    onEscape: true,
			    backdrop: true,
			    buttons: {
			        fee: {
			            label: 'Ok',
			            className: 'btn-primary',
			            callback: function(){
			            	$("#modalform").submit();
			            	return false;
			            }
			        }
			    }
			});
			stat.on('shown.bs.modal', function () {
				$("#modalform").attr("action","permohonan/"+id);
				if(last){
					$("#status").val(last["status"]);
					$("#keterangan").attr("placeholder", last["keterangan"]);
				}
				$("#modalform").validate({
					rules: {
						status: "required",
						keterangan: "required",
						// 			{
						// 				required: function() {
						// 					if($("#status").val() == "Tolak"){
						// 						return true;
						// 					}else{
						// 						return false;
						// 					}
						// 				}
						// 			},
						upload: {
							accept: "image/*"
						},
					},
					messages: {
						status: "Status harus di pilih",
						keterangan: "Keterangan tidak boleh kosong",
						upload: "File tidak sesuai",
					}
				});

				$('#upload').on('change',function(){
	                var namafile = $(this).val();
	                if(namafile){
	                	$(this).next('.custom-file-label').html(namafile.replace('C:\\fakepath\\', ""));
	                }else{
	                	$(this).next('.custom-file-label').html("Pilih File...");
	                }
	            });
			})
		});

	})
</script>
@endsection