<div class="p-4">
    <h2 class="text-lg font-bold mb-4 text-gray-700 uppercase tracking-wider">
        GUARD PATROL ENTRY STATUS TABLE :
    </h2>
    <div class="overflow-x-auto rounded-lg shadow">
        <table class="w-full w-[600px] divide-y divide-gray-200 text-sm text-center">
            <thead class="bg-gray-100 text-s font-semibold uppercase text-gray-700">
                <tr>
                    <th rowspan="2" class="border px-4 py-2" style="width: 60px;">Patrol Round</th>
                    <th rowspan="2" class="border px-4 py-2">Guard Name</th>
                    <th colspan="3" class="border px-4 py-2">Patrol</th>
                    @php
                        $newSeqNoCnt = $seqNoCnt+1;
                    @endphp
                    <th colspan="{{ $newSeqNoCnt }}" class="border px-4 py-2">Sequences</th>
                </tr>
                <tr>
                    <th class="border px-4 py-2">Start Time</th>
                    <th class="border px-4 py-2">End Time</th>
                    <th class="border px-4 py-2">Lap Time</th>
                    {{-- <th class="border px-4 py-2" title="<?php echo htmlspecialchars($seqTitle1); ?>">1</th> --}}
                    @forelse($startSeqCheckPoints as $seq => $checkpoint)
                        @php
                            $seqTitle = '';
                            if ($checkpoint && $checkpoint->checkPointNames1 && $checkpoint->checkPointNames2) {
                                $seqTitle = $checkpoint->checkPointNames1->name . " - " . $checkpoint->checkPointNames2->name;
                            }
                        @endphp
                        @if ($seq == 1)
                            <th class="border px-4 py-2" style="" title="">1</th>
                        @endif
                        <th class="border px-4 py-2" title="{{ $seqTitle }}">{{ $seq + 1 }}</th>
                    @empty
                        <th class="border px-4 py-2" title="Sequences not found!">0</th>
                    @endforelse
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                @forelse ($records as $index => $record)
                    <tr class="hover:bg-gray-50">
                        <td class="border px-4 py-2" title="Patrol Round">{{ $index + 1 }}</td>
                        {{-- <td class="text-center border px-4 py-2 whitespace-nowrap">{{ $record['created_at'] ?? '' }}</td> --}}
                        <td class="border px-4 py-2" title="Guard Name">{{ $record['guard_name'] ?? '' }}</td>
                        <td class="border px-4 py-2" title="Start Time">{{ $record['start_time'] ?? '' }}</td>
                        <td class="border px-4 py-2" title="End Time">{{ $record['end_time'] ?? '' }}</td>
                        <td class="border px-4 py-2" title="Lap Time">{{ $record['lap_time'] ?? '' }}</td>
                        <td class="border px-4 py-2" title="">0</td>
                        {{-- <td class="border px-4 py-2" style="{{ $bgStyle1 }}" title="<?php echo htmlspecialchars($seqTitle1); ?>">{{ $actualVal1 }}</td> --}}
                        @foreach($startSeqCheckPoints as $seq => $checkpoint)
                            @php
                                $seqTitle = '';
                                if ($checkpoint && $checkpoint->checkPointNames1 && $checkpoint->checkPointNames2) {
                                    $seqTitle = $checkpoint->checkPointNames1->name . " - " . $checkpoint->checkPointNames2->name;
                                }

                                $actualVal = $record["Sequence_$seq"] ?? 'X';
                                $minVal = $checkpoint->min_cushioning;
                                $maxVal = $checkpoint->max_cushioning;// . "\n"
                                $seqTitTime = $seqTitle . "\n". $record["Sequence_Time_$seq"] ?? '';

                                if ($actualVal == 'X') {
                                    $bgStyle = 'background-color: #f87171;';// 'bg-red-500'; // Tailwind red
                                } elseif (is_numeric($actualVal) && is_numeric($minVal) && is_numeric($maxVal)) {
                                    if ($actualVal < $minVal) {
                                        $bgStyle = 'background-color: #fde68a;';// 'bg-yellow-300'; // Tailwind yellow
                                    } elseif ($actualVal > $maxVal) {
                                        $bgStyle = 'background-color: #f87171;';// 'bg-red-500'; // Tailwind red
                                    } else {
                                        $bgStyle = 'background-color: #4ade80;';// 'bg-green-400'; // Tailwind green
                                    }
                                } else {
                                    $bgStyle = '';
                                }
                            @endphp
                            <td class="border px-4 py-2" style="{{ $bgStyle }}" title="{{ $seqTitTime }}">{{ $actualVal }}</td>
                        @endforeach
                    </tr>
                @empty
                    <tr>
                        <td colspan="14" class="px-4 py-4 text-center text-gray-500">
                            No records found.
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
