@extends('layouts.mainlayout')
@section('title', 'Biometric Reports')
@section('main')
    <div class="container">
        <h1>Biometric Reports</h1>

        <!-- Display error messages if any -->
        @if(session('error'))
            <div class="alert alert-danger">
                {{ session('error') }}
            </div>
        @endif

        <!-- Date Picker Form -->
        <form method="GET" action="{{ route('bioreports.index') }}">
            <div class="form-group">
                <label for="date">Select Date:</label>
                <input type="date" id="date" name="date" value="{{ $selectedDate }}" class="form-control">
            </div>
            <button type="submit" class="btn btn-primary mt-2">Generate Report</button>
        </form>

        <!-- Display the API data -->
        @if(isset($groupedData) && $groupedData->isNotEmpty())
            <h2 class="mt-4">Device Logs for {{ $selectedDate }}</h2>
            <table class="table table-bordered table-hover mt-3">
                <thead class="thead-dark">
                    <tr>
                        <th>Employee ID</th>
                        <th>Employee Name</th>
                        <th style="width: 250px;">Log Times</th> <!-- Increased column width -->
                        <!-- <th>Serial Number</th>
                        <th>Punch Directions</th>
                        <th>Temperatures</th>
                        <th>Temperature States</th> -->
                    </tr>
                </thead>
                <tbody>
                    @foreach($groupedData as $employeeCode => $records)
                        <tr>
                            <td>{{ $employeeCode }}</td>
                            <td>{{ $employeeNames[$employeeCode] ?? 'Unknown' }}</td>
                            <td>
                                <!-- Display log times with descriptive labels -->
                                @foreach($records as $index => $record)
                                    @php
                                        $highlightClass = '';
                                        if ($index === 0) {
                                            $highlightClass = 'font-weight-bold'; // Style for 1st punch
                                        } elseif ($index === 1) {
                                            $highlightClass = 'font-weight-bold'; // Style for 2nd punch
                                    } elseif ($index > 1) {
                                            // Alternate highlight colors for punches after the 2nd
                                            $highlightClass = $index % 2 === 0 ? 'bg-info' : 'bg-success'; 
                                        }
                                    @endphp
                                    <span class="{{ $highlightClass }}">
                                        {{ ($index + 1) . ' Punch: ' . \Carbon\Carbon::parse($record['LogDate'])->format('H:i:s') }}
                                    </span><br>
                                @endforeach
                            </td>
                            <!-- <td>{{ implode(', ', $records->pluck('SerialNumber')->unique()->toArray()) }}</td>
                            <td>{{ implode(', ', $records->pluck('PunchDirection')->toArray()) }}</td>
                            <td>{{ implode(', ', $records->pluck('Temperature')->toArray()) }}</td>
                            <td>{{ implode(', ', $records->pluck('TemperatureState')->toArray()) }}</td> -->
                        </tr>
                    @endforeach
                </tbody>
            </table>
        @else
            <p>No data available for the selected date.</p>
        @endif
    </div>
@endsection