@extends('layouts.app')
@section('title', 'Child Attendance')
@section('page-title', 'Child Attendance')

@section('content')
<div class="space-y-6">

    {{-- Child + Month Selector --}}
    <div class="bg-white rounded-xl shadow-sm ring-1 ring-gray-200/60 p-4">
        <form method="GET" class="flex flex-wrap items-center gap-4">
            <div>
                <label class="block text-xs font-medium text-gray-600 mb-1">Child</label>
                <select name="child_id" onchange="this.form.submit()" class="border border-gray-300 rounded-lg px-3 py-2 text-sm">
                    @foreach($children as $child)
                        <option value="{{ $child->id }}" {{ $selectedChild == $child->id ? 'selected' : '' }}>
                            {{ $child->name }} — {{ $child->studentProfile?->class_?->full_name ?? 'N/A' }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-600 mb-1">Month</label>
                <input type="month" name="month" value="{{ $month }}"
                       class="border border-gray-300 rounded-lg px-3 py-2 text-sm" onchange="this.form.submit()">
            </div>
            <div class="flex gap-2 ml-auto mt-5">
                <a href="{{ route('attendance.index', ['child_id' => $selectedChild, 'month' => \Carbon\Carbon::parse($month)->subMonth()->format('Y-m')]) }}"
                   class="text-sm text-gray-500 hover:text-gray-700 px-2 py-1"><i class="fas fa-chevron-left"></i></a>
                <a href="{{ route('attendance.index', ['child_id' => $selectedChild, 'month' => \Carbon\Carbon::parse($month)->addMonth()->format('Y-m')]) }}"
                   class="text-sm text-gray-500 hover:text-gray-700 px-2 py-1"><i class="fas fa-chevron-right"></i></a>
            </div>
        </form>
    </div>

    {{-- Stats Cards --}}
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div class="bg-white rounded-xl shadow-sm ring-1 ring-gray-200/60 p-4">
            <p class="text-xs text-gray-500 uppercase font-medium">Attendance Rate</p>
            <p class="text-2xl font-bold mt-1 {{ $stats['percentage'] >= 90 ? 'text-green-600' : ($stats['percentage'] >= 75 ? 'text-yellow-600' : 'text-red-600') }}">
                {{ $stats['percentage'] }}%
            </p>
        </div>
        <div class="bg-white rounded-xl shadow-sm ring-1 ring-gray-200/60 p-4">
            <p class="text-xs text-gray-500 uppercase font-medium">Present</p>
            <p class="text-2xl font-bold text-green-600 mt-1">{{ $stats['present'] }}</p>
        </div>
        <div class="bg-white rounded-xl shadow-sm ring-1 ring-gray-200/60 p-4">
            <p class="text-xs text-gray-500 uppercase font-medium">Absent</p>
            <p class="text-2xl font-bold text-red-600 mt-1">{{ $stats['absent'] }}</p>
        </div>
        <div class="bg-white rounded-xl shadow-sm ring-1 ring-gray-200/60 p-4">
            <p class="text-xs text-gray-500 uppercase font-medium">Late / Half Day</p>
            <p class="text-2xl font-bold text-yellow-600 mt-1">{{ $stats['late'] + $stats['half_day'] }}</p>
        </div>
    </div>

    {{-- Calendar --}}
    <div class="bg-white rounded-xl shadow-sm ring-1 ring-gray-200/60 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-100 bg-gray-50/50">
            <h3 class="font-semibold text-gray-800">
                <i class="fas fa-calendar-alt mr-2 text-gray-400"></i>
                {{ \Carbon\Carbon::parse($month)->format('F Y') }}
            </h3>
        </div>
        <div class="p-4">
            <div class="grid grid-cols-7 gap-1 mb-1">
                @foreach(['Sun','Mon','Tue','Wed','Thu','Fri','Sat'] as $day)
                <div class="text-center text-xs font-semibold text-gray-500 py-2">{{ $day }}</div>
                @endforeach
            </div>
            <div class="grid grid-cols-7 gap-1">
                @php
                    $firstDay = $startDate->copy()->startOfMonth();
                    $lastDay = $startDate->copy()->endOfMonth();
                    $startPadding = $firstDay->dayOfWeek;
                @endphp
                @for($i = 0; $i < $startPadding; $i++)
                <div class="aspect-square"></div>
                @endfor
                @for($day = 1; $day <= $lastDay->day; $day++)
                @php
                    $dateStr = $startDate->format('Y-m') . '-' . str_pad($day, 2, '0', STR_PAD_LEFT);
                    $dateObj = \Carbon\Carbon::parse($dateStr);
                    $attendance = $attendances->get($dateStr);
                    $isSunday = $dateObj->isSunday();
                    $isFuture = $dateObj->isFuture();
                    $isToday = $dateObj->isToday();
                    $bgClass = 'bg-gray-50 text-gray-400';
                    $icon = '';
                    if ($isSunday) { $bgClass = 'bg-gray-100 text-gray-300'; }
                    elseif ($isFuture) { $bgClass = 'bg-gray-50 text-gray-300'; }
                    elseif ($attendance) {
                        $bgClass = match($attendance->status) {
                            'present' => 'bg-green-50 text-green-700 ring-1 ring-green-200',
                            'absent' => 'bg-red-50 text-red-700 ring-1 ring-red-200',
                            'late' => 'bg-yellow-50 text-yellow-700 ring-1 ring-yellow-200',
                            'half_day' => 'bg-orange-50 text-orange-700 ring-1 ring-orange-200',
                            'excused' => 'bg-blue-50 text-blue-700 ring-1 ring-blue-200',
                            default => 'bg-gray-50 text-gray-400',
                        };
                        $icon = match($attendance->status) { 'present'=>'✅','absent'=>'❌','late'=>'⏰','half_day'=>'🕐','excused'=>'📋',default=>'' };
                    }
                @endphp
                <div class="aspect-square rounded-lg {{ $bgClass }} {{ $isToday ? 'ring-2 ring-primary-500' : '' }} flex flex-col items-center justify-center text-xs"
                     title="{{ $attendance ? ucfirst($attendance->status) : '' }}">
                    <span class="font-semibold">{{ $day }}</span>
                    @if($icon)<span class="text-[10px] mt-0.5">{{ $icon }}</span>@endif
                    @if($isSunday && !$isFuture)<span class="text-[8px] mt-0.5">OFF</span>@endif
                </div>
                @endfor
            </div>
        </div>
        <div class="px-6 py-3 border-t border-gray-100 bg-gray-50/30 flex flex-wrap gap-4 text-xs text-gray-600">
            <span>✅ Present</span><span>❌ Absent</span><span>⏰ Late</span><span>🕐 Half Day</span><span>📋 Excused</span>
        </div>
    </div>
</div>
@endsection