@extends('layouts.app')
@section('title', 'Attendance Logs')

@section('content')
<div class="flex items-center justify-between mb-6">
    <h1 class="text-2xl font-bold text-gray-800">Attendance Logs</h1>
    <a href="{{ route('attendance.scanner') }}"
       class="bg-indigo-600 text-white px-4 py-2 rounded-lg text-sm hover:bg-indigo-700">
        ← Back to Scanner
    </a>
</div>

{{-- Filters --}}
<form method="GET" class="bg-white rounded-xl shadow p-4 mb-6 flex flex-wrap gap-3">
    <input type="date" name="date" value="{{ request('date') }}"
           class="border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400">

    <select name="student_id" class="border rounded-lg px-3 py-2 text-sm focus:outline-none">
        <option value="">All Students</option>
        @foreach($students as $s)
            <option value="{{ $s->id }}" {{ request('student_id') == $s->id ? 'selected' : '' }}>
                {{ $s->name }}
            </option>
        @endforeach
    </select>

    <select name="status" class="border rounded-lg px-3 py-2 text-sm focus:outline-none">
        <option value="">All Statuses</option>
        @foreach(['present','late','denied'] as $st)
            <option value="{{ $st }}" {{ request('status') === $st ? 'selected' : '' }}>
                {{ ucfirst($st) }}
            </option>
        @endforeach
    </select>

    <button type="submit" class="bg-indigo-600 text-white px-4 py-2 rounded-lg text-sm">Filter</button>
    <a href="{{ route('attendance.index') }}" class="text-sm text-gray-400 self-center hover:underline">Clear</a>
</form>

{{-- Table --}}
<div class="bg-white rounded-xl shadow overflow-hidden">
    <table class="min-w-full text-sm">
        <thead class="bg-gray-50 text-xs text-gray-500 uppercase">
            <tr>
                <th class="px-4 py-3 text-left">Student</th>
                <th class="px-4 py-3 text-left">Date</th>
                <th class="px-4 py-3 text-left">Check-In</th>
                <th class="px-4 py-3 text-left">Check-Out</th>
                <th class="px-4 py-3 text-left">Status</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-100">
            @forelse($attendances as $a)
            <tr class="hover:bg-gray-50">
                <td class="px-4 py-3">
                    <div class="font-medium text-gray-800">{{ $a->student->name }}</div>
                    <div class="text-xs text-gray-400">{{ $a->student->barcode }}</div>
                </td>
                <td class="px-4 py-3 text-gray-600">{{ $a->checked_in_at->format('M d, Y') }}</td>
                <td class="px-4 py-3 text-gray-600">{{ $a->checked_in_at->format('H:i:s') }}</td>
                <td class="px-4 py-3 text-gray-600">
                    {{ $a->checked_out_at ? $a->checked_out_at->format('H:i:s') : '—' }}
                </td>
                <td class="px-4 py-3">
                    <span class="px-2 py-1 text-xs rounded-full font-medium
                        {{ $a->status === 'present' ? 'bg-green-100 text-green-700' :
                           ($a->status === 'late'   ? 'bg-yellow-100 text-yellow-700' :
                                                      'bg-red-100 text-red-700') }}">
                        {{ ucfirst($a->status) }}
                    </span>
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="5" class="px-4 py-8 text-center text-gray-400">No attendance records found.</td>
            </tr>
            @endforelse
        </tbody>
    </table>
    <div class="px-4 py-3 border-t">{{ $attendances->links() }}</div>
</div>
@endsection