@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">
					<div class="btn-group">
						<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
							<i class="fa fa-bars"></i> Bulk Action
						</button>
						<ul class="dropdown-menu">
							@if($access['is_excel'] == 1)
								<li class="nav-item">
									<a href="{{ url($pageModule . '/export?do=excel&return=' . $return) }}" class="dropdown-item">
										<i class="fa fa-file-excel-o text-success"></i> Export CSV
									</a>
								</li>
							@endif
						</ul>
					</div>
				</div>
				<div class="col-md-6">
						<div class="input-group">
							<form action="{{ url($pageModule) }}" method="GET" class="d-flex"> 
								<input type="date" name="tgl" class="form-sm-control" placeholder="Filter tanggal" value="{{ $tgl ?? date('Y-m-d') }}" style="width: 150px; margin-right: 5px;">
								<div class="input-group-append">
									<button type="submit" class="btn btn-sm btn-primary">Filter</button>
								</div>
							</form>
						</div>
				</div>    
			</div>
		<div class="table-responsive mt-4">
			{!! Form::open(['url' => 'reportlkppekerjaandetil/delete/', 'class' => 'form-horizontal', 'id' => 'SximoTable']) !!}
			<div style="overflow-x:auto; max-height: 500px;">
				<table class="table table-hover table-striped table-bordered align-middle shadow-sm rounded" style="background: #fff; min-width: 1200px;">
					<thead class="thead-dark" style="background: linear-gradient(90deg, #007bff 0%, #00c6ff 100%); color: #fff;">
						<tr>
							<th class="number freeze-col freeze-col-1 freeze-row-1" style="vertical-align: middle;">No</th>
							@php $colIndex = 1; @endphp
							@foreach ($tableGrid as $t)
								@if($t['view'] == '1')
									@if($colIndex != 41)
										<th class="freeze-col @if($colIndex <= 5) freeze-col-{{ $colIndex+1 }} @endif freeze-row-1" style="vertical-align: middle; @if($colIndex == 5) text-align: right; @endif">{{ $t['label'] }}</th>
									@endif
									@php $colIndex++; @endphp
								@endif
							@endforeach
						</tr>
					</thead>
					<tbody>
						@foreach ($rowData as $row)
							<tr>
								<td width="30" class="freeze-col freeze-col-1" style="background: #f1f3f6; font-weight: bold;">{{ ++$i }}</td>
								@php $colIndex = 1; @endphp
								@foreach ($tableGrid as $field)
									@if($field['view'] == '1')
										<?php $limited = isset($field['limited']) ? $field['limited'] : ''; ?>
										@if(SiteHelpers::filterColumn($limited))
											@if($colIndex != 41)
												<td
													class="freeze-col @if($colIndex <= 5) freeze-col-{{ $colIndex+1 }} @endif"
													@if($colIndex == 5)
														style="text-align: right;"
													@elseif($colIndex == 42)
														style="text-align: center;"
													@elseif($colIndex >= 6 && is_numeric($row->{$field['field']}))
														style="text-align: right;"
													@endif
												>
													@if($colIndex == 5)
														@if(floatval($row->{$field['field']}) == 0)
															-
														@else
															{{ number_format($row->{$field['field']}, 3) }}
														@endif
													@elseif($colIndex == 42)
														@if(is_numeric($row->{$field['field']}))
															{{ number_format($row->{$field['field']}, 0) }}
														@else
															{!! SiteHelpers::formatRows($row->{$field['field']}, $field, $row) !!}
														@endif
													@elseif($colIndex >= 6 && is_numeric($row->{$field['field']}))
														@if(floatval($row->{$field['field']}) == 0)
															-
														@else
															{{ number_format($row->{$field['field']}, 3) }}
														@endif
													@else
														{!! SiteHelpers::formatRows($row->{$field['field']}, $field, $row) !!}
													@endif
												</td>
											@endif
											@php $colIndex++; @endphp
										@endif
									@endif
								@endforeach
							</tr>
						@endforeach
					</tbody>
				</table>
			</div>
			<input type="hidden" name="md" value="" />
			{!! Form::close() !!}

			<style>
			/* Freeze first 5 columns */
			.table th.freeze-col,
			.table td.freeze-col {
				position: sticky;
				left: 0;
				z-index: 3;
				background: #fff;
			}
			.table th.freeze-col-1, .table td.freeze-col-1 { left: 0; z-index: 4; }
			.table th.freeze-col-2, .table td.freeze-col-2 { left: 60px; z-index: 4; }
			.table th.freeze-col-3, .table td.freeze-col-3 { left: 180px; z-index: 4; }
			.table th.freeze-col-4, .table td.freeze-col-4 { left: 340px; z-index: 4; }
			.table th.freeze-col-5, .table td.freeze-col-5 { left: 500px; z-index: 4; }

			/* Adjust width for each frozen column as needed */
			.table th.freeze-col-1, .table td.freeze-col-1 { min-width: 60px; max-width: 60px; }
			.table th.freeze-col-2, .table td.freeze-col-2 { min-width: 120px; max-width: 120px; }
			.table th.freeze-col-3, .table td.freeze-col-3 { min-width: 160px; max-width: 160px; }
			.table th.freeze-col-4, .table td.freeze-col-4 { min-width: 160px; max-width: 160px; }
			.table th.freeze-col-5, .table td.freeze-col-5 { min-width: 160px; max-width: 160px; }

			/* Ensure sticky columns are above others */
			.table th.freeze-col, .table td.freeze-col { background: #fff; box-shadow: 2px 0 2px -1px #e0e0e0; }

			/* Freeze first row (header) */
			.table thead th.freeze-row-1 {
				position: sticky;
				top: 0;
				z-index: 10;
				background: linear-gradient(90deg, #007bff 0%, #00c6ff 100%) !important;
				color: #fff;
			}
			</style>
			</div>
			<style>
				.table thead th {
					border-bottom: 2px solid #007bff;
					font-size: 1rem;
					text-align: center;
					position: sticky;
					top: 0;
					z-index: 2;
					background: linear-gradient(90deg, #007bff 0%, #00c6ff 100%) !important;
					color: #fff;
				}
				.table-striped tbody tr:nth-of-type(odd) {
					background-color: #f8fafc;
				}
				.table-striped tbody tr:nth-of-type(even) {
					background-color: #e9f5ff;
				}
				.table-hover tbody tr:hover {
					background-color: #d1ecff;
					transition: background 0.2s;
				}
				.table td, .table th {
					vertical-align: middle;
				}
			</style>
		
		
		@include('footer')
	</div>  
</div>
@stop