@extends('layouts.app')

@section('content')
{{--*/ usort($tableGrid, "SiteHelpers::_sort") /*--}}
<div class="page-titles">
  <h2> {{ $pageTitle }} <small> Data Timbangan (Jumlah SPTA) </small></h2>
</div>
<style>
	.table td {
		border: 1px solid #c0b9b9;
		padding: 10px;
	}
	</style>
<div  class="card">
	<div class="card-body">
		<div class="toolbar-nav">
			<div class="row">
				    
				<div class="col-md-6 text-right">
					{!! Form::open(['url' => url($pageModule), 'method' => 'get', 'class' => 'form-inline']) !!}
						<div class="form-group">
							<label for="month" class="mr-2">Month:</label>
							{!! Form::select('month', [
								'01' => 'January', '02' => 'February', '03' => 'March', '04' => 'April',
								'05' => 'May', '06' => 'June', '07' => 'July', '08' => 'August',
								'09' => 'September', '10' => 'October', '11' => 'November', '12' => 'December'
							], request('month', date('m')), ['class' => 'form-sm-control mr-2']) !!}
						</div>
						<div class="form-group">
							<label for="year" class="mr-2">Year:</label>
							{!! Form::selectRange('year', 2000, date('Y'), request('year', date('Y')), ['class' => 'form-sm-control mr-2', 'placeholder' => 'Select Year']) !!}
						</div>
						<button type="submit" class="btn btn-sm btn-primary">Filter</button>
						<button type="button" class="btn btn-sm btn-secondary" onclick="location.reload();">Refresh</button>
						<button type="button" class="btn btn-xs btn-primary" onclick="exportToExcel()">Download Excel</button>
					{!! Form::close() !!}
				</div>
			</div>
		<div >

	


		 {!! Form::open(array('url'=>'monitoringsyncronisasi/delete/', 'class'=>'form-horizontal' ,'id' =>'SximoTable' )) !!}
		 <div class="table-responsive" style="min-height:300px;">
@php 
				date_default_timezone_set('Asia/Jakarta');
	$d = cal_days_in_month(CAL_GREGORIAN, request('month', date('m')), request('year', date('Y')));

@endphp				
		<div style="overflow-x:auto;">
			<div style="max-height:500px; overflow-y:auto;">
				<table class="table table-hover table-striped" style="min-width:1200px;" id="databaseconsole">
					<thead class="thead-light" style="position: sticky; top: 0; z-index: 2; background: #fff;">
						<tr>
							<th class="number"> No </th>			
							<th> Kode PG </th>
							<th> Nama PG </th>
							@for($i=1; $i<=$d; $i++)
								<th>{{ $i }}</th>
							@endfor				
						</tr>
					</thead>
					<tbody>
						@php $previousKodePg = null; $i = 0; @endphp
						@foreach ($results as $key => $row)
							@if ($row->kode_pg != $previousKodePg)
								<tr>
									<td width="30"> {{ ++$i }} </td>	
									<td>{!! $row->kode_pg !!}</td>
									<td>{!! $row->nama_pg !!}</td>
									@for($j=1; $j<=$d; $j++)
										@php 
											$found = false; 
											$jml_spta = 0; 
											$jml_spta_console = 0;
											$currentDate = date('Y-m-d');
											$loopDate = date('Y-m-d', strtotime(request('year',date('Y'))."-".request('month',date('m'))."-" . str_pad($j, 2, '0', STR_PAD_LEFT)));
										@endphp
										@foreach ($results as $data)
											@if(date('j', strtotime($data->tgl_timbang)) == $j && $data->kode_pg == $row->kode_pg)
												@php $jml_spta = $data->jml_spta; $jml_spta_console = $data->jml_spta_console; $found = true;  @endphp
												@break
											@endif
										@endforeach
										@if($jml_spta == 0)
											<td>
												@if($loopDate < $currentDate)
													<a href="#" onclick="syncDataNew('{{ $row->kode_pg }}', '{{ $j }}', '{{ $loopDate }}')"><i class="fas fa-sync-alt"></i></a>
												@else
													{{ '-' }}
												@endif
											</td>
										@else
											<td style="background: greenyellow;font-weight: 600;">
												<a href="#" onclick="getDataDetail('{{ $loopDate }}', '{{ $row->kode_pg }}')">{{ $jml_spta }}</a>
												<span class="sync-icon" style="display:none;">
													<a href="#" onclick="syncDataNew('{{ $row->kode_pg }}', '{{ $j }}', '{{ $loopDate }}')"><i class="fas fa-sync-alt"></i></a>
												</span>
												
												<style>
												.sync-icon {
													margin-left: 5px;
												}
												</style>
												<br><span style="color: {{ $jml_spta_console != $jml_spta ? 'red' : 'black' }};">{{ $jml_spta_console }}</span>
												<span class="sync-icon2" style="display:none;">
													<a href="#" onclick="syncDataSBH('{{ $row->kode_pg }}', '{{ $j }}', '{{ $loopDate }}')"><i class="fas fa-sync-alt"></i></a>
												</span>
											</td>
										@endif
									@endfor
								</tr>
								@php $previousKodePg = $row->kode_pg; @endphp
							@endif
						@endforeach

						<script>
							function syncData(kodePg, day, tgl) {
								if (confirm('Are you sure you want to sync data for Kode PG: ' + kodePg + ' on tanggal: ' + tgl + '?')) {
									$.ajax({
										url: '{{ url("consolespreadsheet/tarikdatatimbang") }}?pabrik_gula='+kodePg+'&tgl='+tgl,
										type: 'GET',
										success: function(response) {
											alert(response.message);
											// location.reload();
										},
										error: function(xhr, status, error) {
											alert('Failed to sync data: ' + error);
										}
									});
								}
							}

							function syncDataNew(kodePg, day, tgl) {
								if (confirm('Are you sure you want to sync data for Kode PG: ' + kodePg + ' on tanggal: ' + tgl + '?')) {
									$.ajax({
										url: '{{ url("datatimbangan/getdatatimbangnew") }}?pabrik_gula='+kodePg+'&tgl1='+tgl+'&tgl2='+tgl,
										type: 'GET',
										success: function(response) {
											alert(response.message);
											// location.reload();
										},
										error: function(xhr, status, error) {
											alert('Failed to sync data: ' + error);
										}
									});
								}
							}

								function syncDataSBH(kodePg, day, tgl) {
								if (confirm('Are you sure you want to sync data SBH for Kode PG: ' + kodePg + ' on tanggal: ' + tgl + '?')) {
									$.ajax({
										url: '{{ url("consolespreadsheet/tarikdatasbh") }}?pabrik_gula='+kodePg+'&tgl='+tgl,
										type: 'GET',
										success: function(response) {
											alert(response.message);
											// location.reload();
										},
										error: function(xhr, status, error) {
											alert('Failed to sync data: ' + error);
										}
									});
								}
							}

							function getDataDetail(tgl, kodePg) {
								$.ajax({
									url: '{{ url("monitoringsyncronisasi/getdatadetail") }}',
									type: 'GET',
									data: { tgl: tgl, kode_pg: kodePg },
									success: function(response) {
										let modalContent = '<table class="table table-bordered"><thead><tr><th>Nama Kebun</th><th>Nama Rayon</th><th>Tanggal Timbang</th><th>Jumlah</th></tr></thead><tbody>';
										let totalJumlah = 0;
										response.data.forEach(function(item) {
											modalContent += '<tr><td>' + item.nama_kebun + '</td><td>' + item.nama_rayon + '</td><td>' + item.tgl_timbang + '</td><td>' + item.jml + '</td></tr>';
											totalJumlah += parseInt(item.jml);
										});
										modalContent += '</tbody>';
										modalContent += '<tfoot><tr><td colspan="3" style="text-align:right; font-weight:bold;">Total</td><td>' + totalJumlah + '</td></tr></tfoot>';
										modalContent += '</table>';

										let modalHtml = `
											<div class="modal fade" id="dataDetailModal" tabindex="-1" role="dialog" aria-labelledby="dataDetailModalLabel" aria-hidden="true">
												<div class="modal-dialog" role="document">
													<div class="modal-content">
														<div class="modal-header">
															<h5 class="modal-title" id="dataDetailModalLabel">Data Detail</h5>
															<button type="button" class="close" data-dismiss="modal" aria-label="Close">
																<span aria-hidden="true">&times;</span>
															</button>
														</div>
														<div class="modal-body">
															${modalContent}
														</div>
														<div class="modal-footer">
															<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
														</div>
													</div>
												</div>
											</div>
										`;

										$('body').append(modalHtml);
										$('#dataDetailModal').modal('show');
										$('#dataDetailModal').on('hidden.bs.modal', function () {
											$(this).remove();
										});
									},
									error: function(xhr, status, error) {
										alert('Failed to fetch data detail: ' + error);
									}
								});
							}

							  function exportToExcel() {
                    const table = document.getElementById("databaseconsole").outerHTML;
                    const filename = "data_console_lhp.xls";
const html = [
                                    '<html xmlns:o="urn:schemas-microsoft-com:office:office" ',
                                    'xmlns:x="urn:schemas-microsoft-com:office:excel" ',
                                    'xmlns="http://www.w3.org/TR/REC-html40">',
                                    '<head>',
                                    '<!--[if gte mso 9]>',
                                    '<xml>',
                                    '<' + 'x:ExcelWorkbook>',
                                    '<' + 'x:ExcelWorksheets>',
                                    '<' + 'x:ExcelWorksheet>',
                                    '<' + 'x:Name>Sheet1</' + 'x:Name>',
                                    '<' + 'x:WorksheetOptions>',
                                    '<' + 'x:DisplayGridlines/>',
                                    '</' + 'x:WorksheetOptions>',
                                    '</' + 'x:ExcelWorksheet>',
                                    '</' + 'x:ExcelWorksheets>',
                                    '</' + 'x:ExcelWorkbook>',
                                    '</xml>',
                                    '<![endif]-->',
                                    '</head>',
                                    '<body>' + table + '</body>',
                                    '</html>'
                                ].join('');

                    const blob = new Blob([html], { type: "application/vnd.ms-excel" });
                    const url = URL.createObjectURL(blob);

                    const a = document.createElement("a");
                    a.href = url;
                    a.download = filename;
                    a.click();

                    URL.revokeObjectURL(url);
                }

				function downloadExcel() {
                    const table = document.querySelector('#databaseconsole');
                    const workbook = XLSX.utils.book_new();
                    const worksheet = XLSX.utils.table_to_sheet(table);
                    XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");

                    // Create a downloadable link
                    const excelData = XLSX.write(workbook, { bookType: 'xlsx', type: 'binary' });
                    const blob = new Blob([s2ab(excelData)], { type: "application/octet-stream" });
                    const link = document.createElement("a");
                    link.href = URL.createObjectURL(blob);
                    link.download = "data_syncronisasi.xlsx";
                    document.body.appendChild(link);

                    // Trigger download
                    link.click();
                    document.body.removeChild(link);

                    // Helper function to convert string to ArrayBuffer
                    function s2ab(s) {
                        const buf = new ArrayBuffer(s.length);
                        const view = new Uint8Array(buf);
                        for (let i = 0; i < s.length; i++) {
                            view[i] = s.charCodeAt(i) & 0xFF;
                        }
                        return buf;
                    }

                }
						</script>

		<script>
								document.addEventListener('DOMContentLoaded', function() {
									const cells = document.querySelectorAll('td[style*="background: greenyellow"]');
									cells.forEach(function(cell) {
										cell.addEventListener('mouseenter', function() {
											const icon = cell.querySelector('.sync-icon');
											if (icon) icon.style.display = 'inline';
											const icon2 = cell.querySelector('.sync-icon2');
											if (icon2) icon2.style.display = 'inline';
										});
										cell.addEventListener('mouseleave', function() {
											const icon = cell.querySelector('.sync-icon');
											if (icon) icon.style.display = 'none';
											const icon2 = cell.querySelector('.sync-icon2');
											if (icon2) icon2.style.display = 'none';
										});
									});
								});
								</script>
					</tbody>
				</table>
			</div>
		</div>
		<style>
			.table thead th {
				position: sticky;
				top: 0;
				background: #fff;
				z-index: 2;
			}
		</style>
		<input type="hidden" name="md" value="" />
		</div>
		{!! Form::close() !!}
		
		
		@include('footer')
	</div>  
</div>
@stop