@extends('layouts.portal')

@section('title', 'Attendance')

@section('page-header')
    <div class="mb-8">
        <h1 class="font-display text-2xl font-extrabold text-slate-900 sm:text-3xl">Attendance</h1>
        <p class="mt-1 text-sm text-slate-500">Attendance record for {{ $child->full_name }}.</p>
    </div>
@endsection

@section('content')
    <div class="grid grid-cols-2 gap-4 lg:grid-cols-4">
        <x-portal.stat-card title="Present" value="{{ $attendance['counts']['present'] }}" tone="emerald" icon="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
        <x-portal.stat-card title="Absent" value="{{ $attendance['counts']['absent'] }}" tone="rose" icon="M6 18L18 6M6 6l12 12"/>
        <x-portal.stat-card title="Late" value="{{ $attendance['counts']['late'] }}" tone="amber" icon="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"/>
        <x-portal.stat-card title="Excused / Sick" value="{{ $attendance['counts']['excused'] }}" tone="sky" icon="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
    </div>

    <div class="mt-6 grid gap-6 lg:grid-cols-3">
        {{-- Rate dial --}}
        <x-portal.panel heading="Overall rate" class-name="" padding>
            <div class="flex flex-col items-center py-2">
                @php $rate = $attendance['rate']; $color = $rate >= 90 ? '#10b981' : ($rate >= 75 ? '#f59e0b' : '#f43f5e'); @endphp
                <div class="relative h-40 w-40">
                    <svg viewBox="0 0 120 120" class="h-full w-full -rotate-90">
                        <circle cx="60" cy="60" r="52" fill="none" stroke="#f1f5f9" stroke-width="12"/>
                        <circle cx="60" cy="60" r="52" fill="none" stroke="{{ $color }}" stroke-width="12" stroke-linecap="round"
                                stroke-dasharray="{{ 2 * pi() * 52 }}"
                                stroke-dashoffset="{{ 2 * pi() * 52 * (1 - min($rate, 100) / 100) }}"/>
                    </svg>
                    <div class="absolute inset-0 flex flex-col items-center justify-center">
                        <span class="font-display text-3xl font-extrabold text-slate-900">{{ $rate }}%</span>
                        <span class="text-xs font-medium text-slate-400">attendance</span>
                    </div>
                </div>
                <p class="mt-3 rounded-full px-3 py-1 text-xs font-bold {{ $rate >= 75 ? 'bg-emerald-50 text-emerald-600' : 'bg-rose-50 text-rose-600' }}">
                    {{ $rate >= 75 ? 'Meeting requirement' : 'Below 75% requirement' }}
                </p>
            </div>
        </x-portal.panel>

        {{-- Recent records --}}
        <div class="lg:col-span-2">
            <x-portal.panel heading="Recent days" subtitle="Last {{ $attendance['recent']->count() }} marked days" :padding="false">
                <ul class="divide-y divide-slate-50">
                    @forelse ($attendance['recent'] as $record)
                        <li class="flex items-center gap-4 px-5 py-3.5 transition hover:bg-slate-50/70">
                            <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-slate-50 text-[11px] font-bold uppercase leading-none text-slate-500 ring-1 ring-slate-100">
                                {{ $record->date->format('D') }}<br>{{ $record->date->format('d') }}
                            </div>
                            <div class="min-w-0 flex-1">
                                <p class="text-sm font-semibold text-slate-700">{{ $record->date->format('l, j M Y') }}</p>
                                @if ($record->remarks)
                                    <p class="truncate text-xs text-slate-400">{{ $record->remarks }}</p>
                                @endif
                            </div>
                            @php
                                $map = ['present' => 'emerald', 'absent' => 'rose', 'late' => 'amber', 'excused' => 'sky', 'sick' => 'sky'];
                            @endphp
                            <x-portal.badge tone="{{ $map[$record->status] ?? 'slate' }}">{{ ucfirst($record->status) }}</x-portal.badge>
                        </li>
                    @empty
                        <li class="px-5 py-8"><x-portal.empty message="No attendance records yet."/></li>
                    @endforelse
                </ul>
            </x-portal.panel>
        </div>
    </div>
@endsection