<x-app-layout>
    <x-slot name="title">Attendances</x-slot>
    <div class="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">Daily Attendance Tracker</h1>
            <p class="text-sm text-gray-500 mt-1">Mark and monitor daily attendance for all active sales agents.</p>
        </div>
        
        <form action="{{ route('attendance.index') }}" method="GET" class="flex items-center gap-2">
            <input type="date" name="date" value="{{ $date }}" class="rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm" onchange="this.form.submit()">
            <button type="submit" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 text-sm font-medium">Filter</button>
        </form>
    </div>

    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
        <form action="{{ route('attendance.store') }}" method="POST">
            @csrf
            <input type="hidden" name="date" value="{{ $date }}">
            
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Agent Name</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Check In</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Check Out</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        @foreach($agents as $agent)
                            @php
                                $att = $attendances->get($agent->id);
                                $status = $att ? $att->status : 'Present'; // Default
                                $check_in = $att ? ($att->check_in ? \Carbon\Carbon::parse($att->check_in)->format('H:i') : '') : '09:00';
                                $check_out = $att ? ($att->check_out ? \Carbon\Carbon::parse($att->check_out)->format('H:i') : '') : '18:00';
                            @endphp
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm font-medium text-gray-900">{{ $agent->user->name ?? 'Unknown' }}</div>
                                    <div class="text-sm text-gray-500">{{ $agent->department ?? 'Sales' }}</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <select name="attendances[{{ $agent->id }}][status]" class="block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
                                        <option value="Present" {{ $status == 'Present' ? 'selected' : '' }}>Present</option>
                                        <option value="Absent" {{ $status == 'Absent' ? 'selected' : '' }}>Absent</option>
                                        <option value="Half Day" {{ $status == 'Half Day' ? 'selected' : '' }}>Half Day</option>
                                        <option value="Leave" {{ $status == 'Leave' ? 'selected' : '' }}>Leave</option>
                                    </select>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <input type="time" name="attendances[{{ $agent->id }}][check_in]" value="{{ $check_in }}" class="block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <input type="time" name="attendances[{{ $agent->id }}][check_out]" value="{{ $check_out }}" class="block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            
            @if($agents->count() > 0)
                <div class="p-6 bg-gray-50 border-t border-gray-200 flex justify-end">
                    <button type="submit" class="inline-flex justify-center py-2 px-6 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                        Save Attendance
                    </button>
                </div>
            @else
                <div class="p-12 text-center text-gray-500">
                    No active agents found in the system.
                </div>
            @endif
        </form>
    </div>
</x-app-layout>
