@extends('layouts.manager')

@section('header')
    <h2 class="font-semibold text-xl text-gray-800">Staff Attendance Records</h2>
@endsection

@section('content')
<div class="flex justify-between mb-4">
    <h3 class="text-lg font-semibold">Team Attendance</h3>
</div>

@if (session('success'))
    <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-2 rounded mb-3">
        {{ session('success') }}
    </div>
@endif

<!-- Date Range Filter -->
<div class="mb-4 flex gap-2 items-center flex-wrap">
    <label class="font-semibold">Filter by Date Range:</label>
    <input type="date" id="startDate" class="px-3 py-2 border border-gray-300 rounded"
           value="{{ $startDate }}" placeholder="Start Date">
    <span class="text-gray-600">to</span>
    <input type="date" id="endDate" class="px-3 py-2 border border-gray-300 rounded"
           value="{{ $endDate }}" placeholder="End Date">
    <button onclick="filterByDateRange()" class="px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700">
        Filter
    </button>
    @if($startDate || $endDate)
        <a href="{{ route('attendance.index') }}" class="px-3 py-2 bg-gray-500 text-white rounded hover:bg-gray-600">
            Clear Filter
        </a>
    @endif
</div>

<div class="bg-white shadow rounded-lg overflow-hidden">
    <table class="w-full text-left border-collapse">
        <thead class="bg-gray-100 border-b">
            <tr>
                <th class="py-3 px-4">#</th>
                <th class="py-3 px-4">Employee No</th>
                <th class="py-3 px-4">Staff Name</th>
                <th class="py-3 px-4">Date</th>
                <th class="py-3 px-4">Check-In Time</th>
                <th class="py-3 px-4">Image</th>
                
            </tr>
        </thead>
        <tbody>
            @forelse ($attendances as $attendance)
                @php
                    $isToday = $attendance->attendance_date->isToday();
                    $rowClass = $isToday ? 'bg-yellow-50 border-l-4 border-yellow-400' : 'hover:bg-gray-50';
                @endphp
                <tr class="border-b {{ $rowClass }}">
                    <td class="py-2 px-4">{{ $loop->iteration }}</td>
                    <td class="py-2 px-4">
                        <span class="font-semibold text-indigo-600">{{ $attendance->user->employee?->employee_no ?? 'N/A' }}</span>
                    </td>
                    <td class="py-2 px-4">{{ $attendance->user->name }}</td>
                    <td class="py-2 px-4">
                        {{ $attendance->attendance_date->format('M d, Y') }}
                        @if($isToday)
                            <span class="ml-2 inline-block px-2 py-1 bg-yellow-200 text-yellow-800 text-xs font-semibold rounded-full">
                                TODAY 🎯
                            </span>
                        @endif
                    </td>
                    <td class="py-2 px-4">{{ $attendance->check_in_time->format('H:i') }}</td>
                    <td class="py-2 px-4">
                        <img src="{{ asset('storage/' . $attendance->image) }}" alt="Attendance Image" class="w-16 h-16 rounded-full object-cover">
                    </td>
                    
                </tr>
            @empty
                <tr>
                    <td colspan="7" class="text-center py-4 text-gray-500">
                        No attendance records found.
                    </td>
                </tr>
            @endforelse
        </tbody>
    </table>
</div>

<div class="mt-4">
    {{ $attendances->links() }}
</div>

<script>
function filterByDateRange() {
    const startDate = document.getElementById('startDate').value;
    const endDate = document.getElementById('endDate').value;

    let url = "{{ route('attendance.index') }}";

    if (startDate || endDate) {
        url += "?";
        if (startDate) url += "start_date=" + startDate;
        if (startDate && endDate) url += "&";
        if (endDate) url += "end_date=" + endDate;
    }

    window.location.href = url;
}

// Allow Enter key to trigger filter
document.getElementById('endDate')?.addEventListener('keypress', function(e) {
    if (e.key === 'Enter') filterByDateRange();
});
</script>
@endsection