@use('App\Enums\PermissionName')
@use('App\Models\Attendance')

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Attendance') }}
        </h2>
    </x-slot>

    <div class="py-8">
        <div class="flex flex-col gap-6 px-4 sm:px-6 lg:px-8">
            <x-toast :message="session('status')" />

            <div class="grid grid-cols-2 gap-4 sm:grid-cols-5">
                <x-stat-card :label="__('In today')" :value="$counts['in']" tone="emerald" compact>
                    <x-slot name="icon"><svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg></x-slot>
                </x-stat-card>
                <x-stat-card :label="__('Late')" :value="$counts['late']" tone="amber" compact>
                    <x-slot name="icon"><svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" /></svg></x-slot>
                </x-stat-card>
                <x-stat-card :label="__('Absent')" :value="$counts['absent']" :tone="$counts['absent'] > 0 ? 'amber' : 'emerald'" compact>
                    <x-slot name="icon"><svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg></x-slot>
                </x-stat-card>
                <x-stat-card :label="__('On leave / holiday')" :value="$counts['away']" tone="violet" compact>
                    <x-slot name="icon"><svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5" /></svg></x-slot>
                </x-stat-card>
                <x-stat-card :label="__('Not in yet')" :value="$counts['pending']" compact>
                    <x-slot name="icon"><svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" /></svg></x-slot>
                </x-stat-card>
            </div>

            <div class="overflow-hidden rounded-2xl bg-white shadow-raised">
                <x-table-toolbar>
                    <form method="GET" action="{{ route('attendance.index') }}" class="flex flex-wrap items-center gap-4">
                        <label class="flex items-center gap-2 text-sm text-gray-600">
                            <span>{{ __('Day') }}</span>
                            <input type="date" name="date" value="{{ $date->toDateString() }}" max="{{ $today->toDateString() }}" onchange="this.form.requestSubmit()" class="rounded-lg border-gray-300 py-2 text-sm text-gray-700 shadow-sm focus:border-brand-500 focus:ring-brand-500">
                        </label>

                        @if ($locations->isNotEmpty())
                            <label class="flex items-center gap-2 text-sm text-gray-600">
                                <span>{{ __('Location') }}</span>
                                <select name="location_id" onchange="this.form.requestSubmit()" class="rounded-lg border-gray-300 py-2 text-sm text-gray-700 shadow-sm focus:border-brand-500 focus:ring-brand-500">
                                    <option value="">{{ __('All locations') }}</option>
                                    @foreach ($locations as $location)
                                        <option value="{{ $location->id }}" @selected($selectedLocationId === $location->id)>{{ $location->name }}</option>
                                    @endforeach
                                </select>
                            </label>
                        @endif

                        <div class="flex items-center gap-1 text-sm">
                            <a href="{{ route('attendance.index', ['date' => $date->subDay()->toDateString(), 'location_id' => $selectedLocationId]) }}" class="rounded-lg px-2 py-1 text-gray-600 hover:bg-gray-100">‹ {{ __('Prev') }}</a>
                            @if ($date->lessThan($today))
                                <a href="{{ route('attendance.index', ['date' => $date->addDay()->toDateString(), 'location_id' => $selectedLocationId]) }}" class="rounded-lg px-2 py-1 text-gray-600 hover:bg-gray-100">{{ __('Next') }} ›</a>
                            @endif
                        </div>
                    </form>

                    <x-slot name="actions">
                        <x-secondary-button :href="route('attendance.monthly', ['month' => $date->format('Y-m'), 'location_id' => $selectedLocationId])">{{ __('Monthly summary') }}</x-secondary-button>

                        @can(PermissionName::ManageAttendance->value)
                            <x-primary-button :href="route('attendance.create', ['date' => $date->toDateString()])">
                                <x-icon-plus />
                                {{ __('Mark a day') }}
                            </x-primary-button>
                        @endcan
                    </x-slot>
                </x-table-toolbar>

                <div class="border-b border-gray-100 px-6 py-3 text-sm text-gray-600">
                    <span class="font-semibold text-gray-900">{{ $date->format('l, F j, Y') }}</span>
                    @if ($date->isSameDay($today))
                        · {{ __('Today') }}
                    @endif
                    @unless (Attendance::isWorkingDay($date))
                        · <x-badge tone="gray">{{ __('Weekend') }}</x-badge>
                    @endunless
                </div>

                @if ($rows->isEmpty())
                    <div class="px-6 py-12 text-center text-sm text-gray-600">{{ __('No active employees to show.') }}</div>
                @else
                    <div class="overflow-x-auto">
                        <table class="w-full border-collapse text-sm">
                            <thead>
                                <tr class="border-y border-gray-200 bg-gray-50 text-xs font-semibold uppercase tracking-wider text-gray-500">
                                    <th class="px-6 py-3 text-start">{{ __('Employee') }}</th>
                                    <th class="px-6 py-3 text-start">{{ __('Location') }}</th>
                                    <th class="px-6 py-3 text-start">{{ __('Status') }}</th>
                                    <th class="px-6 py-3 text-start">{{ __('In') }}</th>
                                    <th class="px-6 py-3 text-start">{{ __('Out') }}</th>
                                    <th class="px-6 py-3 text-start">{{ __('Hours') }}</th>
                                    <th class="px-6 py-3 text-end">{{ __('Actions') }}</th>
                                </tr>
                            </thead>

                            <tbody class="divide-y divide-gray-100">
                                @foreach ($rows as $row)
                                    @php $employee = $row['employee']; $attendance = $row['attendance']; @endphp
                                    <tr class="hover:bg-gray-50">
                                        <td class="px-6 py-3">
                                            <div class="flex items-center gap-3">
                                                <x-avatar :user="$employee" />
                                                <div class="min-w-0">
                                                    <div class="truncate font-semibold text-gray-900">{{ $employee->name }}</div>
                                                    <div class="truncate text-xs text-gray-500">{{ $employee->designation() }}</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="px-6 py-3 text-gray-700">{{ $employee->location?->name ?? '—' }}</td>
                                        <td class="px-6 py-3">@include('attendance.partials.status-badge', ['status' => $row['status'], 'derived' => $row['derived']])</td>
                                        <td class="px-6 py-3 text-gray-700">{{ $attendance?->localCheckIn()?->format('g:i A') ?? '—' }}</td>
                                        <td class="px-6 py-3 text-gray-700">{{ $attendance?->localCheckOut()?->format('g:i A') ?? '—' }}</td>
                                        <td class="px-6 py-3 text-gray-700">{{ Attendance::formatHours($attendance?->hoursWorked()) }}</td>
                                        <td class="px-6 py-3">
                                            <div class="flex items-center justify-end gap-2">
                                                <x-table-action :href="route('attendance.employee', ['user' => $employee->id, 'month' => $date->format('Y-m')])">{{ __('History') }}</x-table-action>
                                                @can(PermissionName::ManageAttendance->value)
                                                    @if ($attendance)
                                                        <x-table-action :href="route('attendance.edit', $attendance)">{{ __('Edit') }}</x-table-action>
                                                    @else
                                                        <x-table-action :href="route('attendance.create', ['employee' => $employee->id, 'date' => $date->toDateString()])">{{ __('Mark') }}</x-table-action>
                                                    @endif
                                                @endcan
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
            </div>
        </div>
    </div>
</x-app-layout>