

<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>




