@extends('layouts.admin')

@section('content')
<div class="max-w-5xl mx-auto py-10 px-6">

    <!-- 🏷️ Title -->
    <h1 class="text-3xl font-bold text-gray-800 mb-6 text-center">
        Attendance Management
    </h1>

    <!-- 🧭 Choice Cards -->
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 sm:gap-8 justify-items-center mb-6">

        <!-- 🏐 QR Scan -->
        <a href="{{ route('admin.attendance.scan') }}" 
           class="block w-full bg-white border border-gray-200 rounded-xl shadow-sm hover:shadow-lg hover:-translate-y-1 transition p-8 text-left">
            <h2 class="text-xl font-semibold text-indigo-600">Scan QR Attendance</h2>
            <p class="text-gray-600 mt-2">
                Scan the QR code from the receipt to record attendance automatically.
            </p>
        </a>

        <!-- 🖊 Manual Attendance -->
        <a href="{{ route('admin.attendance.manual') }}" 
           class="block w-full bg-white border border-gray-200 rounded-xl shadow-sm hover:shadow-lg hover:-translate-y-1 transition p-8 text-left">
            <h2 class="text-xl font-semibold text-indigo-600">Manual Attendance</h2>
            <p class="text-gray-600 mt-2">
                Record attendance manually using Booking ID.
            </p>
        </a>

    </div>

    <!-- 📅 Filter Section -->
    <div class="mb-6">
        <form method="GET" action="{{ route('admin.attendance.choose') }}" class="flex flex-wrap items-end gap-4">

            <div>
                <label class="font-semibold text-gray-700">Select Date</label>
                <input 
                    type="date" 
                    name="date" 
                    value="{{ $date ?? now()->format('Y-m-d') }}" 
                    class="border border-gray-300 rounded p-2"
                >
            </div>

            <button class="bg-indigo-600 text-white px-4 py-2 rounded hover:bg-indigo-700 transition">
                Filter Logs
            </button>
        </form>
    </div>

    <!-- 📘 Attendance Log Table -->
    <div class="bg-white shadow rounded-lg p-6">
        <h2 class="text-xl font-bold text-gray-800 mb-4">Attendance History</h2>

        <div class="overflow-x-auto">
            <table class="min-w-full text-left text-sm">
                <thead>
                    <tr class="border-b bg-gray-50 text-gray-700">
                        <th class="p-3">#</th>
                        <th class="p-3">Booking ID</th>
                        <th class="p-3">User</th>
                        <th class="p-3">Facility</th>
                        <th class="p-3">Time</th>
                        <th class="p-3">Status</th>
                    </tr>
                </thead>

                <tbody>
                    @forelse ($logs as $index => $log)
                        @php 
                            $details = $log->details ?? []; 
                        @endphp

                        <tr class="border-b">
                            <td class="p-3">{{ $index + 1 }}</td>
                            <td class="p-3">{{ $log->booking_id }}</td>
                            <td class="p-3">{{ $details['user'] ?? '-' }}</td>
                            <td class="p-3">{{ $details['facility'] ?? '-' }}</td>

                            <td class="p-3">
                                {{ \Carbon\Carbon::parse($log->scanned_at)->format('d M Y, h:i A') }}
                            </td>

                            <td class="p-3">
                                @if ($log->status == 'present')
                                    <span class="text-green-600 font-semibold">Present</span>
                                @elseif ($log->status == 'duplicate')
                                    <span class="text-yellow-600 font-semibold">Duplicate</span>
                                @else
                                    <span class="text-gray-600">Manual</span>
                                @endif
                            </td>
                        </tr>

                    @empty
                        <tr>
                            <td colspan="6" class="p-6 text-center text-gray-500">
                                No attendance records found for this date.
                            </td>
                        </tr>
                    @endforelse
                </tbody>

            </table>
        </div>

    </div>

</div>
@endsection