@extends('layouts.app')

@section('title', 'Attendance punches')
@section('heading', 'Attendance punches')

@section('content')
@include('settings.partials.back-to-home')
    <x-card>
        <div class="mb-4 flex flex-wrap justify-between items-center gap-3">
            <p class="text-sm text-slate-600">Raw biometric punch log (audit). Both-mode devices use First IN / Last OUT; login/logout devices use gate sessions.</p>
            <a href="{{ route('biometric-devices.index') }}" class="inline-flex items-center rounded-lg bg-slate-100 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-200">Devices</a>
        </div>

        <form method="GET" class="mb-4 grid gap-3 sm:grid-cols-2 lg:grid-cols-6">
            <div>
                <label class="block text-xs font-medium text-slate-500">Status</label>
                <select name="status" class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm js-select2">
                    <option value="">All</option>
                    @foreach(['pending','applied','ignored','error'] as $st)
                        <option value="{{ $st }}" @selected(request('status') === $st)>{{ ucfirst($st) }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-xs font-medium text-slate-500">Device</label>
                <select name="device_id" class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm js-select2">
                    <option value="">All</option>
                    @foreach($devices as $device)
                        <option value="{{ $device->id }}" @selected((string) request('device_id') === (string) $device->id)>{{ $device->terminal_alias ?: $device->terminal_sn }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-xs font-medium text-slate-500">Emp code</label>
                <input type="text" name="emp_code" value="{{ request('emp_code') }}" class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm">
            </div>
            <div>
                <label class="block text-xs font-medium text-slate-500">From</label>
                <input type="date" name="from" value="{{ request('from') }}" class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm">
            </div>
            <div>
                <label class="block text-xs font-medium text-slate-500">To</label>
                <input type="date" name="to" value="{{ request('to') }}" class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm">
            </div>
            <div class="flex items-end">
                <button type="submit" class="w-full rounded-lg bg-slate-800 px-4 py-2 text-sm font-medium text-white hover:bg-slate-700">Filter</button>
            </div>
        </form>

        <x-table>
            <x-slot name="head">
                <tr>
                    <th class="whitespace-nowrap px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">When</th>
                    <th class="whitespace-nowrap px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Att. date</th>
                    <th class="whitespace-nowrap px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Emp</th>
                    <th class="whitespace-nowrap px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Type</th>
                    <th class="whitespace-nowrap px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Device</th>
                    <th class="whitespace-nowrap px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Status</th>
                    <th class="whitespace-nowrap px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Message</th>
                    <th class="whitespace-nowrap px-4 py-3 text-right text-xs font-medium uppercase text-slate-500">Actions</th>
                </tr>
            </x-slot>
            @forelse($punches as $punch)
                <tr>
                    <td class="whitespace-nowrap px-4 py-3 text-sm text-slate-700">{{ $punch->punch_datetime?->format('Y-m-d H:i:s') }}</td>
                    <td class="whitespace-nowrap px-4 py-3 text-sm text-slate-600">{{ $punch->attendance_date?->format('Y-m-d') ?: '—' }}</td>
                    <td class="whitespace-nowrap px-4 py-3 text-sm">
                        <span class="font-mono text-slate-800">{{ $punch->emp_code }}</span>
                        @if($punch->user)
                            <span class="block text-xs text-slate-500">{{ $punch->user->name }}</span>
                        @endif
                    </td>
                    <td class="whitespace-nowrap px-4 py-3 text-sm">
                        @if($punch->processed_type)
                            <span class="inline-flex rounded-full bg-slate-100 px-2 py-0.5 text-xs font-medium text-slate-700">{{ $punch->processed_type }}</span>
                            @if($punch->is_duplicate)
                                <span class="ml-1 text-[10px] text-amber-600">dup</span>
                            @endif
                        @else
                            <span class="text-slate-400">{{ $punch->punch_state ?: '—' }}</span>
                        @endif
                    </td>
                    <td class="whitespace-nowrap px-4 py-3 text-sm text-slate-600">{{ $punch->device?->terminal_alias ?: $punch->terminal_sn }}</td>
                    <td class="whitespace-nowrap px-4 py-3 text-sm">
                        @php
                            $colors = [
                                'applied' => 'bg-emerald-50 text-emerald-700',
                                'pending' => 'bg-amber-50 text-amber-700',
                                'ignored' => 'bg-slate-100 text-slate-600',
                                'error' => 'bg-red-50 text-red-700',
                            ];
                        @endphp
                        <span class="inline-flex rounded-full px-2 py-0.5 text-xs font-medium {{ $colors[$punch->status] ?? 'bg-slate-100 text-slate-600' }}">{{ $punch->status }}</span>
                    </td>
                    <td class="px-4 py-3 text-xs text-slate-500 max-w-xs truncate" title="{{ $punch->error_message }}">{{ $punch->error_message ?: '—' }}</td>
                    <td class="whitespace-nowrap px-4 py-3 text-right text-sm">
                        @if(auth()->user()->hasPermission('biometric_devices_manage') || auth()->user()->is_superadmin)
                            <form action="{{ route('attendance-punches.retry', $punch) }}" method="POST" class="inline">
                                @csrf
                                <button type="submit" class="text-slate-600 hover:text-slate-900">Retry</button>
                            </form>
                        @endif
                    </td>
                </tr>
            @empty
                <tr><td colspan="8" class="px-4 py-8 text-center text-sm text-slate-500">No punches yet.</td></tr>
            @endforelse
        </x-table>
        @if($punches->hasPages())<div class="mt-4">{{ $punches->links() }}</div>@endif
    </x-card>
@endsection