@extends('layouts.app')

@section('content')
{{--*/ usort($tableGrid, "SiteHelpers::_sort") /*--}}
<div class="page-titles">
  <h2> {{ $pageTitle }} <small> {{ $pageNote }} </small></h2>
</div>
<div  class="card">
	<div class="card-body">
		<div class="toolbar-nav">
			<div class="row">
				<div class="col-md-6">
					<a href="#" class="btn btn-sm btn-primary" id="download-xlsx">Download Excel</a>
				</div>    
			</div>
		<div class="table-modern-container my-4">
			{!! Form::open(['url'=>'monitoringtimbangharian/delete/', 'class'=>'form-horizontal', 'id'=>'SximoTable']) !!}
			<div class="table-responsive" style="max-height:600px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); overflow-x: auto;">
				<table class="table table-hover table-striped align-middle" style="border-radius: 12px; overflow: hidden; width:100%; ">
					<thead class="bg-gradient-primary text-white">
						<tr>
							<th class="number" style="position: sticky; top: 0; left: 0; z-index: 210; background: linear-gradient(90deg, #4f8cff 0%, #38b6ff 100%);">
								No
							</th>
							@foreach ($rowData[0] as $key => $value)
								<th
									@if ($loop->index == 7)
										style="position: sticky; top: 0; left: 60px; z-index: 205; background: linear-gradient(90deg, #4f8cff 0%, #38b6ff 100%);"
									@else
										style="position: sticky; top: 0; z-index: 205; background: linear-gradient(90deg, #4f8cff 0%, #38b6ff 100%);"
									@endif
								>
									{{ $key }}
								</th>
							@endforeach
						</tr>
					</thead>
					<tbody>
						@foreach ($rowData as $row)
							<tr>
								<td width="30" class="fw-bold text-primary" style="position: sticky; left: 0; background: #f0f6ff; z-index: 203;">{{ ++$i }}</td>
								@foreach ($rowData[0] as $key => $field)
									<td 
										@if ($loop->index == 7) 
											style="position: sticky; left: 60px; background: #f0f6ff; z-index: 202;" 
										@endif
									>
										{{ $row->{$key} }}
									</td>
								@endforeach
							</tr>
						@endforeach
					</tbody>
				</table>
				<input type="hidden" name="md" value="" />
			</div>
			{!! Form::close() !!}
		</div>
		<style>
			.table-modern-container {
				background: #f8fafc;
				border-radius: 16px;
				padding: 24px;
				box-shadow: 0 4px 16px rgba(0,0,0,0.07);
			}
			.table thead.bg-gradient-primary {
				background: linear-gradient(90deg, #4f8cff 0%, #38b6ff 100%);
				color: #fff;
			}
			.table th, .table td {
				vertical-align: middle;
				padding: 12px 16px;
			}
			.table-striped > tbody > tr:nth-of-type(odd) {
				background-color: #f0f6ff;
			}
			.table-hover > tbody > tr:hover {
				background-color: #e3f0ff;
				transition: background 0.2s;
			}
		</style>
		
			<!-- SheetJS (xlsx) CDN -->
						<script src="https://cdn.jsdelivr.net/npm/xlsx/dist/xlsx.full.min.js"></script>
						<script>
						(function(){
							// cari tabel di container
							function getTable() {
								return document.querySelector('.table-modern-container table');
							}

							// membuat workbook dari tabel
							function tableToWorkbook(table) {
								var wb = XLSX.utils.book_new();
								var ws = XLSX.utils.table_to_sheet(table, {raw:true});
								XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
								return wb;
							}

							var csvBtn = document.getElementById('download-csv');
							var xlsxBtn = document.getElementById('download-xlsx');

							if(csvBtn){
								csvBtn.addEventListener('click', function(e){
									e.preventDefault();
									var table = getTable();
									if(!table) return alert('Table not found.');
									var ws = XLSX.utils.table_to_sheet(table, {raw:true});
									var csv = XLSX.utils.sheet_to_csv(ws);
									var blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
									var filename = '{{ $pageModule ?? "table" }}.csv';
									if (navigator.msSaveBlob) {
										navigator.msSaveBlob(blob, filename);
									} else {
										var link = document.createElement('a');
										link.href = URL.createObjectURL(blob);
										link.download = filename;
										document.body.appendChild(link);
										link.click();
										document.body.removeChild(link);
										URL.revokeObjectURL(link.href);
									}
								});
							}

							if(xlsxBtn){
								xlsxBtn.addEventListener('click', function(e){
									e.preventDefault();
									var table = getTable();
									if(!table) return alert('Table not found.');
									var wb = tableToWorkbook(table);
									var filename = '{{ $pageModule ?? "table" }}.xlsx';
									XLSX.writeFile(wb, filename);
								});
							}
						})();
						</script>
		
		@include('footer')
	</div>  
</div>
@stop