@extends('layouts.authorized')
@inject('pusdafilconstant', '\App\Util\PusdafilConstant')

@section('headerCustom')
	@php
		$title = 'Pelaporan Harian Pusdafil'; 
	@endphp
@endsection

@section('title', $title)

@section('cssCustom')
	<style>
        .table-button {
            display: none; 
        }
		.jumbotron{
			background-color: lemonchiffon;
			border-radius: 5px
		}
		.times{
			color: red;
		}
		.tab-link{
			border-bottom: 3px solid #337ab7;
			border-radius: 8px
		}
    </style>
@endsection

@section('content')

	<div class="row">
		<div class="col-md-12">
			<div class="card">
				{{-- <div class="card-header">
					<span>Informasi Data Laporan</span>
				</div> --}}
				<div class="card-body">
					<div class="row">
						<div class="col-md-12">
							<div class="col-md-12">
								<div class="jumbotron p-20">
									<h4><strong>Peraturan Pelaporan Pusdafil V.2 !</strong></h4>
									<h5>Waktu Pelaporan : </h5>
									<ol>
										<li>
											pelaporan pada window time pertama dilakukan pada pukul 
											<strong class="times">19.01 WIB s.d 22.00 WIB</strong>, mengirimkan data 
											hari ini.
										</li>
										<li>
											pelaporan pada window time kedua dilakukan pada pukul 
											<strong class="times">07.01 WIB s.d 10.00 WIB</strong>, mengirimkan data 
											kemaren (H-1).
										</li>
									</ol>

									<h5>Metode Pelaporan : </h5>
									<ol>
										<li>
											<strong>INSERT : </strong> melaporkan data transaksi baru (dapat dilaporkan pada
											window time 1 dan window time 2).
										</li>
										<li>
											<strong>UPDATE : </strong> merubah data transaksi pada hari yang sama (dapat
											dilaporkan pada window time 1 dan window time 2).
										</li>
										<li>
											<strong>KOREKSI : </strong> memperbaiki data transaksi pada hari yang berbeda
											(dapat dilaporkan pada window time 1 dan window time 2). <strong>Terdapat catatan penyelenggara 
											harus mengirimkan surat untuk dibukakan akses oleh OJK untuk melakukan koreksi</strong>.
										</li>
									</ol>
								</div>
							</div>
							<div class="col-md-12">
								<ul class="nav nav-pills fs-15 tab-link">
									<li class="active"><a data-toggle="tab" href="#report-history">Riwayat Pelaporan</a></li>
									<li><a data-toggle="tab" href="#proccess-report">Proses Pelaporan</a></li>
								</ul>
								<div class="tab-content pt-10">
									<div id="report-history" class="tab-pane fade in active">
										<h4><strong>Riwayat Pelaporan Data</strong></h4>
										{{-- <a class="btn btn-primary" href="{{ route('admin.report.generate.pusdafilDailyReport', ['method' => $pusdafilconstant::API_METHOD_INSERT]) }}">Generate Data Laporan </a> --}}
										<div class="table-responsive">
											<table class="table table-bordered">
												<thead>
													<tr>
														<th>Insert</th>
														<th>Update</th>
														<th>Koreksi</th>
													</tr>
												</thead>
												<tbody>
													@foreach ($listFile as $item)
														<tr>
															<td>
																@if (!empty($item['insert']))
																	<i class="fa fa-file-archive-o" aria-hidden="true"></i>
																	<a href="{{ route('admin.report.download.pusdafilDailyReport', ['file' => $item['insert']]) }}">{{ $item['insert'] }}</a> <br/>
																	@if (!empty($item['submissionIdInsert']))
																		<button class="btn btn-primary pt-5 pb-5 mt-10 btn-check-report" data-toggle="modal" data-target="#check-report" id="btn-check-report" type="button" data-submissionid={{ $item['submissionIdInsert'] }}>Cek Status Laporan</button>
																	@endif
																@else
																	<p>-</p>
																@endif
															</td>
															<td>
																@if (!empty($item['update']))
																	<i class="fa fa-file-archive-o" aria-hidden="true"></i>
																	<a href="{{ route('admin.report.download.pusdafilDailyReport', ['file' => $item['update']]) }}">{{ $item['update'] }}</a> <br/>
																	@if (!empty($item['submissionIdUpdate']))
																		<button class="btn btn-primary pt-5 pb-5 mt-10 btn-check-report" data-toggle="modal" data-target="#check-report" id="btn-check-report" type="button" data-submissionid={{ $item['submissionIdUpdate'] }}>Cek Status Laporan</button>
																	@endif
																@else
																	<p>-</p>
																@endif
															</td>
															<td>
																@if (!empty($item['koreksi']))
																	<i class="fa fa-file-archive-o" aria-hidden="true"></i>
																	<a href="{{ route('admin.report.download.pusdafilDailyReport', ['file' => $item['koreksi']]) }}">{{ $item['koreksi'] }}</a> <br/>
																	@if (!empty($item['submissionIdKoreksi']))
																		<button class="btn btn-primary pt-5 pb-5 mt-10 btn-check-report" data-toggle="modal" data-target="#check-report" id="btn-check-report" type="button" data-submissionid={{ $item['submissionIdKoreksi'] }}>Cek Status Laporan</button>
																	@endif
																@else
																	<p>-</p>
																@endif
															</td>
														</tr>
													@endforeach
												</tbody>
											</table>
										</div>
									</div>	
									<div id="proccess-report" class="tab-pane fade in">
										<h4><strong>Pelaporan Harian Pusdafil Metode Update dan Koreksi</strong></h4>
										<div class="col-md-12">
											<div class="col-md-12">
												<label>Pilih metode pelaporan : </label>
												<br/>
												<input type="radio" name="reportMethod" value="{{ $pusdafilconstant::API_METHOD_UPDATE }}" required/> {{ $pusdafilconstant::API_METHOD_LABELS[$pusdafilconstant::API_METHOD_UPDATE] }}
												<input class="ml-20" type="radio" name="reportMethod" value="{{ $pusdafilconstant::API_METHOD_KOREKSI }}"/> {{ $pusdafilconstant::API_METHOD_LABELS[$pusdafilconstant::API_METHOD_KOREKSI] }}
											</div>
											<div class="col-md-12">
												<div class="form-group">
													<label class="mt-10">Token <small><em class="text-warning" style="font-weight: initial;">* (Khusus pelaporan dengan metode koreksi)</em></small> : </label>
													<input class="form-control" type="text" name="reportToken" disabled>
												</div>
												<div class="form-group">
													<label class="mt-10">Tanggal <small><em class="text-warning" style="font-weight: initial;">* (Khusus pelaporan dengan metode koreksi)</em></small> : </label>
													<div class="input-group date datepickerinput">
														<input id="reportDate" name="reportDate" type="text" data-date-format="YYYY-MM-DD" class="form-control" disabled>
														<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
													</div>
												</div>
											</div>
											@foreach ($pusdafilconstant::FUND_LABELS as $key => $value)
												<div class="col-md-4">
													<div class="form-group">
														<label>{{ $value }} : </label> <br/>
														<small style="color: #969696;">* nama file : {{ $key }}.csv</small>
														<input class="form-control" type="file" accept=".csv" name="{{$key}}" required/>
													</div>
												</div>
											@endforeach
											<div class="col-md-12 mt-10">
												<button class="btn btn-primary" data-toggle="modal" data-target="#report" id="btn-report" type="button" disabled>Submit</button>								
											</div>
										</div>
									</div>
								</div>	
							</div>
						</div>			
					</div>
				</div>
			</div>
		</div>
	</div>

	<div id="report" class="modal fade" role="dialog">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header p-15">
					<h4 class="modal-title">Pelaporan Data Pusdafil</h4>
				</div>
				<div class="modal-body p-15 text-center">
					<p>Anda yakin melakukan pelaporan data harian pusdafil menggunakan metode <strong>UPDATE</strong> ?</p>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">
						Batal
					</button>
					<button class="btn btn-primary btnUpdateStatus">
						Proses
					</button>
				</div>
			</div>
		</div>
	</div>

	<div id="check-report" class="modal fade" role="dialog">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title" style="display: contents;">Cek Status Pelaporan</h4>
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>
				<div class="modal-body">
					<div class="row">
						<div class="col-12">
							<ul>
								<li>
									<p>
										<strong>Status Pelaporan</strong> : <strong id="responseStatus">Harap tunggu, proses pemanggilan API Pusdafil versi 2.0 . . .</strong>
									</p>
								</li>
								<li>
									<p><strong>Pesan :</strong></p>
									<p id="responseMessage"></p>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

@endsection

@section('jsCustom')
	<script>
		$(document).ready(function() {
			$('[name="reportMethod"]').change(function (e) { 
				$('#btn-report').prop('disabled', false);
				if ($('[name="reportMethod"]:checked').val() == {{ $pusdafilconstant::API_METHOD_KOREKSI }}) {
					$('[name="reportToken"], [name="reportDate"]').prop('disabled', false);
				} else {
					$('[name="reportToken"], [name="reportDate"]').prop('disabled', true);
				}
			});

			$('.btn-check-report').on('click', function () {
				let submissionId 	= $(this).data('submissionid');
				let url 			= `{{ route('admin.report.pusdafilCheckStatusReport') }}/${submissionId}`;
				
				$.ajax({
					type: "get",
					url: url,
					data: {},
					dataType: "json",
					success: function (response) {
						$('#responseStatus').text(response.response.status);
						$('#responseMessage').html(response.response.data);
						if (response.response.status == 'error') {
							$('#responseStatus').css('color', 'red');
						} else {
							$('#responseStatus').css('color', 'green');
						}
					}
				});
			});
        })
	</script>
@endsection