@extends('layouts.app')

@section('title', 'Staff Attendance Report')

@section('content')
    <div class="flex flex-col gap-6">
        <div>
            <h1 class="text-lg font-semibold">Staff Attendance Report</h1>
            <p class="text-xs text-muted-foreground">Daily present/absent grid for the whole staff over a date range</p>
        </div>

        <div class="rounded-xl border border-border bg-card">
            <form method="get" action="{{ route('staff.attendance-report') }}" class="flex flex-wrap items-end gap-3 p-3">
                <div class="flex flex-col gap-1.5">
                    <label class="text-xs text-muted-foreground">From</label>
                    <input type="date" name="from" value="{{ $from }}" class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                </div>
                <div class="flex flex-col gap-1.5">
                    <label class="text-xs text-muted-foreground">To</label>
                    <input type="date" name="to" value="{{ $to }}" class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                </div>
                <button class="h-9 rounded-lg bg-primary px-3 text-sm font-medium text-primary-foreground hover:bg-primary/90">Generate</button>
            </form>
        </div>

        <div class="overflow-x-auto rounded-xl border border-border bg-card">
            <table class="w-full text-sm">
                <thead>
                    <tr class="border-b">
                        <th class="px-3 py-2 text-left text-xs uppercase text-muted-foreground">Staff</th>
                        @foreach ($dates as $d)
                            <th class="px-1 py-2 text-center text-[11px] text-muted-foreground">{{ \Carbon\Carbon::parse($d)->format('d/m') }}</th>
                        @endforeach
                        <th class="px-3 py-2 text-center text-xs uppercase text-muted-foreground">Days</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($staff as $s)
                        @php $t = $totals[$s->id]; @endphp
                        <tr class="border-b last:border-0">
                            <td class="whitespace-nowrap px-3 py-1.5">
                                <span class="font-medium">{{ $s->full_name }}</span>
                                <span class="text-xs text-muted-foreground"> · {{ $s->role }}</span>
                            </td>
                            @foreach ($dates as $d)
                                @php $v = $map[$s->id][$d] ?? '-'; @endphp
                                <td class="px-1 py-1.5 text-center font-mono text-xs {{ $v === 'P' ? 'text-emerald-600' : ($v === 'A' ? 'text-destructive' : 'text-muted-foreground/50') }}">{{ $v }}</td>
                            @endforeach
                            <td class="px-3 py-1.5 text-center tabular-nums text-xs">{{ $t['present'] }}/{{ $t['days'] }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
@endsection