171 lines
11 KiB
PHP
171 lines
11 KiB
PHP
|
|
|
|
<div class="flex-none md:flex space-x-4 w-full">
|
|
|
|
<!-- First Table (08:00 AM to 19:00 PM) -->
|
|
<div class="w-full px-2 py-2">
|
|
<table class="w-full divide-y divide-gray-200 border-1 rounded-lg overflow-hidden">
|
|
<thead class="bg-gray-100">
|
|
<tr>
|
|
<th class="px-2 py-2 text-center border text-xs font-bold text-gray-700 uppercase tracking-wider">No</th>
|
|
<th class="px-2 py-2 text-center border text-xs font-bold text-gray-700 uppercase tracking-wider">Time Range</th>
|
|
<th class="px-2 py-2 text-center border text-xs font-bold text-gray-700 uppercase tracking-wider">Production Quantity</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white divide-y divide-gray-200">
|
|
@php
|
|
// Static time range for the first 12 hours (08:00 AM to 07:00 PM)
|
|
$timeRanges = [
|
|
'08:00 AM - 09:00 AM',
|
|
'09:00 AM - 10:00 AM',
|
|
'10:00 AM - 11:00 AM',
|
|
'11:00 AM - 12:00 PM',
|
|
'12:00 PM - 13:00 PM',
|
|
'13:00 PM - 14:00 PM',
|
|
'14:00 PM - 15:00 PM',
|
|
'15:00 PM - 16:00 PM',
|
|
'16:00 PM - 17:00 PM',
|
|
'17:00 PM - 18:00 PM',
|
|
'18:00 PM - 19:00 PM',
|
|
'19:00 PM - 20:00 PM',
|
|
];
|
|
@endphp
|
|
|
|
@foreach ($timeRanges as $index => $timeRange)
|
|
<tr>
|
|
<td class="px-3 py-2 border text-center text-xs whitespace-nowrap">{{ $index + 1 }}</td>
|
|
<td class="px-3 py-2 border text-center text-xs whitespace-nowrap">{{ $timeRange }}</td>
|
|
<td class="px-3 py-2 border text-xs text-center whitespace-nowrap">
|
|
{{ $hourlyData[$index] ?? 0 }}
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="w-full px-2 py-2">
|
|
<table class="w-full divide-y divide-gray-200 border-1 rounded-lg overflow-hidden">
|
|
<thead class="bg-gray-100">
|
|
<tr>
|
|
<th class="px-2 py-2 text-center border text-xs font-bold text-gray-700 uppercase tracking-wider">No</th>
|
|
<th class="px-2 py-2 text-center border text-xs font-bold text-gray-700 uppercase tracking-wider">Time Range</th>
|
|
<th class="px-2 py-2 text-center border text-xs font-bold text-gray-700 uppercase tracking-wider">Production Quantity</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white divide-y divide-gray-200">
|
|
@php
|
|
// Static time range for the first 12 hours (08:00 AM to 07:00 PM)
|
|
$timeRanges = [
|
|
'20:00 PM - 21:00 PM',
|
|
'21:00 PM - 22:00 PM',
|
|
'22:00 PM - 23:00 PM',
|
|
'23:00 PM - 12:00 AM',
|
|
'12:00 AM - 01:00 AM',
|
|
'01:00 AM - 02:00 AM',
|
|
'02:00 AM - 03:00 AM',
|
|
'03:00 AM - 04:00 AM',
|
|
'04:00 AM - 05:00 AM',
|
|
'05:00 AM - 06:00 AM',
|
|
'06:00 AM - 07:00 AM',
|
|
'07:00 AM - 08:00 AM',
|
|
];
|
|
@endphp
|
|
|
|
@foreach ($timeRanges as $index => $timeRange)
|
|
<tr>
|
|
<td class="px-3 py-2 border text-center text-xs whitespace-nowrap">{{ $index + 13 }}</td>
|
|
<td class="px-3 py-2 border text-center text-xs whitespace-nowrap">{{ $timeRange }}</td>
|
|
<td class="px-3 py-2 border text-xs text-center whitespace-nowrap">
|
|
{{ $hourlyData[$index + 12] ?? 0 }}
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Second Table (20:00 PM to 08:00 AM next day) -->
|
|
{{-- <div class="w-full px-2">
|
|
<table class="w-full divide-y divide-gray-200 border-1 rounded-lg overflow-hidden">
|
|
<thead class="bg-gray-100">
|
|
<tr>
|
|
<th class="px-3 py-2 border text-center text-xs font-bold text-gray-800 uppercase tracking-wider">No</th>
|
|
<th class="px-3 py-2 border text-center text-xs font-bold text-gray-800 uppercase tracking-wider">Time Range</th>
|
|
<th class="px-3 py-2 border text-center text-xs font-bold text-gray-800 uppercase tracking-wider">Production Quantity</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white divide-y divide-gray-200">
|
|
<tr><td class="px-3 py-2 border text-center text-xs whitespace-nowrap">13</td><td class="px-3 py-2 border text-center text-xs whitespace-nowrap">08:00 PM - 09:00 PM</td><td class="px-3 py-2 border text-xs text-center whitespace-nowrap">{{ $productionQuantities[12] }}</td></tr>
|
|
<tr><td class="px-3 py-2 border text-center text-xs whitespace-nowrap">14</td><td class="px-3 py-2 border text-center text-xs whitespace-nowrap">09:00 PM - 10:00 PM</td><td class="px-3 py-2 border text-xs text-center whitespace-nowrap">{{ $productionQuantities[13] }}</td></tr>
|
|
<tr><td class="px-3 py-2 border text-center text-xs whitespace-nowrap">15</td><td class="px-3 py-2 border text-center text-xs whitespace-nowrap">10:00 PM - 11:00 PM</td><td class="px-3 py-2 border text-xs text-center whitespace-nowrap">{{ $productionQuantities[14] }}</td></tr>
|
|
<tr><td class="px-3 py-2 border text-center text-xs whitespace-nowrap">16</td><td class="px-3 py-2 border text-center text-xs whitespace-nowrap">11:00 PM - 12:00 AM</td><td class="px-3 py-2 border text-xs text-center whitespace-nowrap">{{ $productionQuantities[15] }}</td></tr>
|
|
<tr><td class="px-3 py-2 border text-center text-xs whitespace-nowrap">17</td><td class="px-3 py-2 border text-center text-xs whitespace-nowrap">12:00 AM - 01:00 AM</td><td class="px-3 py-2 border text-xs text-center whitespace-nowrap">{{ $productionQuantities[16] }}</td></tr>
|
|
<tr><td class="px-3 py-2 border text-center text-xs whitespace-nowrap">18</td><td class="px-3 py-2 border text-center text-xs whitespace-nowrap">01:00 AM - 02:00 AM</td><td class="px-3 py-2 border text-xs text-center whitespace-nowrap">{{ $productionQuantities[17] }}</td></tr>
|
|
<tr><td class="px-3 py-2 border text-center text-xs whitespace-nowrap">19</td><td class="px-3 py-2 border text-center text-xs whitespace-nowrap">02:00 AM - 03:00 AM</td><td class="px-3 py-2 border text-xs text-center whitespace-nowrap">{{ $productionQuantities[18] }}</td></tr>
|
|
<tr><td class="px-3 py-2 border text-center text-xs whitespace-nowrap">20</td><td class="px-3 py-2 border text-center text-xs whitespace-nowrap">03:00 AM - 04:00 AM</td><td class="px-3 py-2 border text-xs text-center whitespace-nowrap">{{ $productionQuantities[19] }}</td></tr>
|
|
<tr><td class="px-3 py-2 border text-center text-xs whitespace-nowrap">21</td><td class="px-3 py-2 border text-center text-xs whitespace-nowrap">04:00 AM - 05:00 AM</td><td class="px-3 py-2 border text-xs text-center whitespace-nowrap">{{ $productionQuantities[20] }}</td></tr>
|
|
<tr><td class="px-3 py-2 border text-center text-xs whitespace-nowrap">22</td><td class="px-3 py-2 border text-center text-xs whitespace-nowrap">05:00 AM - 06:00 AM</td><td class="px-3 py-2 border text-xs text-center whitespace-nowrap">{{ $productionQuantities[21] }}</td></tr>
|
|
<tr><td class="px-3 py-2 border text-center text-xs whitespace-nowrap">23</td><td class="px-3 py-2 border text-center text-xs whitespace-nowrap">06:00 AM - 07:00 AM</td><td class="px-3 py-2 border text-xs text-center whitespace-nowrap">{{ $productionQuantities[22] }}</td></tr>
|
|
<tr><td class="px-3 py-2 border text-center text-xs whitespace-nowrap">24</td><td class="px-3 py-2 border text-center text-xs whitespace-nowrap">07:00 AM - 08:00 AM</td><td class="px-3 py-2 border text-xs text-center whitespace-nowrap">{{ $productionQuantities[23] }}</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div> --}}
|
|
</div>
|
|
|
|
|
|
{{-- //..perfect logic --}}
|
|
|
|
{{-- <div class="flex space-x-4 w-full">
|
|
<!-- First Table: 08:00 AM to 07:00 PM -->
|
|
<div class="w-full px-2">
|
|
<table class="w-full divide-y divide-gray-200 border-1 rounded-lg border-black overflow-hidden">
|
|
<thead class="bg-gray-100">
|
|
<tr>
|
|
<th class="px-3 py-3 border text-center text-xs font-bold text-gray-700 uppercase tracking-wider">No</th>
|
|
<th class="px-3 py-3 border text-center text-xs font-bold text-gray-700 uppercase tracking-wider">Time Range</th>
|
|
<th class="px-3 py-3 border text-center text-xs font-bold text-gray-700 uppercase tracking-wider">Production Quantity</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white divide-y divide-gray-200">
|
|
@foreach ($hourlyData as $index => $data)
|
|
@if ($index < 12) <!-- First 12 time ranges (AM) -->
|
|
<tr>
|
|
<td class="px-3 py-2 border text-center text-xs whitespace-nowrap">{{ $index + 1 }}</td>
|
|
<td class="px-3 py-2 border text-center text-xs whitespace-nowrap">{{ $data['time'] }}</td>
|
|
<td class="px-3 py-2 border text-center text-xs whitespace-nowrap">{{ $data['quantity'] ?: '0' }}</td> <!-- Show 0 if no data -->
|
|
</tr>
|
|
@endif
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Second Table: 08:00 PM to 08:00 AM -->
|
|
<div class="w-full px-2">
|
|
<table class="w-full divide-y divide-gray-200 border-1 rounded-lg overflow-hidden">
|
|
<thead class="bg-gray-100">
|
|
<tr>
|
|
<th class="px-3 py-3 border text-center text-xs font-bold text-gray-700 uppercase tracking-wider">No</th>
|
|
<th class="px-3 py-3 border text-center text-xs font-bold text-gray-700 uppercase tracking-wider">Time Range</th>
|
|
<th class="px-3 py-3 border text-center text-xs font-bold text-gray-700 uppercase tracking-wider">Production Quantity</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white divide-y divide-gray-200">
|
|
@foreach ($hourlyData as $index => $data)
|
|
@if ($index >= 12) <!-- Last 12 time ranges (PM to AM) -->
|
|
<tr>
|
|
<td class="px-3 py-2 border text-center text-xs whitespace-nowrap">{{ $index + 1 }}</td>
|
|
<td class="px-3 py-2 border text-center text-xs whitespace-nowrap">{{ $data['time'] }}</td>
|
|
<td class="px-3 py-2 border text-center text-xs whitespace-nowrap">{{ $data['quantity'] ?: '0' }}</td> <!-- Show 0 if no data -->
|
|
</tr>
|
|
@endif
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div> --}}
|
|
|
|
|
|
|