@extends('layouts.app')
@section('title', 'Parent Dashboard')
@section('page-title', 'Dashboard')

@section('content')
@php
    $hour = now()->hour;
    $greeting = $hour < 12 ? 'Good Morning' : ($hour < 17 ? 'Good Afternoon' : 'Good Evening');
@endphp

<div class="space-y-6">

    {{-- Greeting --}}
    <div>
        <h2 class="text-2xl font-bold text-stone-800">{{ $greeting }}, {{ explode(' ', auth()->user()->name)[0] }}</h2>
        <p class="text-stone-500 text-sm mt-0.5">Here's how your children are doing</p>
    </div>

    <div class="grid lg:grid-cols-3 gap-6">
        {{-- Left: Children cards (2 cols) --}}
        <div class="lg:col-span-2 space-y-6">

            @foreach($children as $child)
            @php
                $att = $childAttendance[$child->id] ?? ['total' => 0, 'present' => 0, 'absent' => 0, 'late' => 0, 'percentage' => 0];
                $childMarks = $child->marks->take(5);
            @endphp
            <div class="bg-white rounded-2xl ring-1 ring-stone-200/60 shadow-sm overflow-hidden">
                {{-- Child Header --}}
                <div class="bg-gradient-to-r from-amber-50 to-stone-50 px-6 py-4 border-b border-stone-100 flex items-center gap-4">
                    <div class="w-14 h-14 bg-amber-500 rounded-2xl flex items-center justify-center shadow-sm">
                        <span class="text-white font-bold text-xl">{{ strtoupper(substr($child->name, 0, 1)) }}</span>
                    </div>
                    <div class="flex-1">
                        <h3 class="text-lg font-bold text-stone-800">{{ $child->name }}</h3>
                        <p class="text-sm text-stone-500">{{ $child->studentProfile?->class_?->full_name ?? 'N/A' }} · {{ $child->studentProfile?->admission_number ?? '' }}</p>
                    </div>
                    <div class="text-right">
                        <p class="text-2xl font-extrabold {{ $att['percentage'] >= 90 ? 'text-green-600' : ($att['percentage'] >= 75 ? 'text-amber-600' : 'text-red-600') }}">{{ $att['percentage'] }}%</p>
                        <p class="text-[10px] text-stone-400 uppercase tracking-wider">Attendance</p>
                    </div>
                </div>

                <div class="p-6">
                    {{-- Attendance Mini Stats --}}
                    <div class="grid grid-cols-4 gap-3 mb-5">
                        <div class="bg-stone-50 rounded-xl p-3 text-center">
                            <p class="text-lg font-extrabold text-stone-800">{{ $att['total'] }}</p>
                            <p class="text-[9px] text-stone-400 uppercase font-semibold">Total Days</p>
                        </div>
                        <div class="bg-green-50 rounded-xl p-3 text-center">
                            <p class="text-lg font-extrabold text-green-600">{{ $att['present'] }}</p>
                            <p class="text-[9px] text-green-500 uppercase font-semibold">Present</p>
                        </div>
                        <div class="bg-red-50 rounded-xl p-3 text-center">
                            <p class="text-lg font-extrabold text-red-600">{{ $att['absent'] }}</p>
                            <p class="text-[9px] text-red-500 uppercase font-semibold">Absent</p>
                        </div>
                        <div class="bg-amber-50 rounded-xl p-3 text-center">
                            <p class="text-lg font-extrabold text-amber-600">{{ $att['late'] }}</p>
                            <p class="text-[9px] text-amber-500 uppercase font-semibold">Late</p>
                        </div>
                    </div>

                    {{-- Recent Marks --}}
                    @if($childMarks->isNotEmpty())
                    <h4 class="text-xs font-semibold text-stone-400 uppercase tracking-wider mb-2">Recent Marks</h4>
                    <table class="w-full text-sm mb-4">
                        <tbody>
                            @foreach($childMarks as $mark)
                            <tr class="border-b border-stone-50 last:border-0">
                                <td class="py-2 font-medium text-stone-700">{{ $mark->exam->subject->name ?? '—' }}</td>
                                <td class="py-2 text-stone-400 text-xs">{{ $mark->exam->name }}</td>
                                <td class="py-2 text-right">
                                    @if($mark->is_absent)
                                    <span class="text-xs text-red-500 font-semibold">ABSENT</span>
                                    @else
                                    <span class="font-bold text-stone-700">{{ $mark->marks_obtained }}</span><span class="text-stone-400">/{{ $mark->exam->total_marks }}</span>
                                    <span class="ml-1 inline-flex px-1.5 py-0.5 rounded text-[10px] font-bold
                                        {{ in_array($mark->grade, ['A+','A']) ? 'bg-green-100 text-green-700' :
                                           (in_array($mark->grade, ['B+','B']) ? 'bg-amber-100 text-amber-700' :
                                           ($mark->grade === 'F' ? 'bg-red-100 text-red-700' : 'bg-stone-100 text-stone-600')) }}">
                                        {{ $mark->grade }}
                                    </span>
                                    @endif
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                    @endif

                    {{-- Quick Links --}}
                    <div class="flex flex-wrap gap-2">

                        {{-- Class Teacher Info --}}
                        @php $childClass = $childClasses[$child->id] ?? null; @endphp
                        @if($childClass && $childClass->classTeacher)
                        <div class="w-full flex items-center gap-3 p-3 bg-amber-50 rounded-xl ring-1 ring-amber-200/40 mb-2">
                            <div class="w-9 h-9 bg-amber-500 rounded-full flex items-center justify-center flex-shrink-0">
                                <span class="text-white font-bold text-xs">
                                    {{ strtoupper(substr($childClass->classTeacher->name, 0, 1)) }}{{ strtoupper(substr(explode(' ', $childClass->classTeacher->name)[1] ?? '', 0, 1)) }}
                                </span>
                            </div>
                            <div class="flex-1 min-w-0">
                                <p class="text-xs font-bold text-stone-700">{{ $childClass->classTeacher->name }}</p>
                                <p class="text-[9px] text-amber-600 font-semibold uppercase">Class Teacher</p>
                            </div>
                            @if($childClass->asstClassTeacher)
                            <div class="text-right">
                                <p class="text-[10px] text-stone-500 font-medium">{{ $childClass->asstClassTeacher->name }}</p>
                                <p class="text-[9px] text-stone-400">Asst. CT</p>
                            </div>
                            @endif
                        </div>
                        @endif
                        <a href="{{ route('academics.exams.index') }}" class="inline-flex items-center gap-1.5 px-3 py-2 bg-stone-100 hover:bg-stone-200 rounded-lg text-xs font-semibold text-stone-600 transition">
                            <i class="fas fa-chart-line text-[10px]"></i> All Marks
                        </a>
                        <a href="{{ route('attendance.index', ['child_id' => $child->id]) }}" class="inline-flex items-center gap-1.5 px-3 py-2 bg-stone-100 hover:bg-stone-200 rounded-lg text-xs font-semibold text-stone-600 transition">
                            <i class="fas fa-clipboard-check text-[10px]"></i> Attendance
                        </a>
                        <a href="{{ route('fees.index') }}" class="inline-flex items-center gap-1.5 px-3 py-2 bg-stone-100 hover:bg-stone-200 rounded-lg text-xs font-semibold text-stone-600 transition">
                            <i class="fas fa-rupee-sign text-[10px]"></i> Fees
                        </a>
                        <a href="{{ route('attendance.leave.index') }}" class="inline-flex items-center gap-1.5 px-3 py-2 bg-amber-100 hover:bg-amber-200 rounded-lg text-xs font-semibold text-amber-700 transition">
                            <i class="fas fa-paper-plane text-[10px]"></i> Apply Leave
                        </a>
                    </div>
                </div>
            </div>
            @endforeach

            @if($children->isEmpty())
            <div class="bg-white rounded-2xl ring-1 ring-stone-200/60 shadow-sm p-12 text-center">
                <i class="fas fa-child text-4xl text-stone-300 mb-3 block"></i>
                <p class="text-stone-500">No children linked to your account yet.</p>
                <p class="text-xs text-stone-400 mt-1">Contact the school admin to link your children.</p>
            </div>
            @endif
        </div>

        {{-- Right sidebar --}}
        <div class="space-y-6">

            {{-- School Contact --}}
            <div class="bg-amber-500 rounded-2xl p-5 text-white shadow-sm">
                <h3 class="font-bold text-sm mb-2">Need Help?</h3>
                <p class="text-xs text-amber-100 mb-3">Contact the school directly</p>
                <div class="space-y-2">
                    @if(!empty($schoolSettings['school_phone']))
                    <a href="tel:{{ $schoolSettings['school_phone'] }}" class="flex items-center gap-2 bg-white/20 rounded-lg px-3 py-2 hover:bg-white/30 transition">
                        <i class="fas fa-phone text-xs"></i>
                        <span class="text-xs font-medium">{{ $schoolSettings['school_phone'] }}</span>
                    </a>
                    @endif
                    <a href="{{ route('communication.conversations') }}" class="flex items-center gap-2 bg-white/20 rounded-lg px-3 py-2 hover:bg-white/30 transition">
                        <i class="fas fa-comments text-xs"></i>
                        <span class="text-xs font-medium">Message Teacher</span>
                    </a>
                </div>
            </div>

            {{-- Mini Calendar --}}
            <div class="bg-white rounded-2xl ring-1 ring-stone-200/60 shadow-sm p-5">
                @php $today = now(); $firstDay = $today->copy()->startOfMonth(); $lastDay = $today->copy()->endOfMonth(); @endphp
                <div class="flex items-center justify-between mb-3">
                    <h3 class="font-bold text-stone-800 text-sm">{{ $today->format('F Y') }}</h3>
                </div>
                <div class="grid grid-cols-7 gap-0.5 text-center">
                    @foreach(['S','M','T','W','T','F','S'] as $d)
                    <div class="text-[10px] font-semibold text-stone-400 py-1">{{ $d }}</div>
                    @endforeach
                    @for($i = 0; $i < $firstDay->dayOfWeek; $i++)
                    <div class="text-[11px] text-stone-300 py-1.5"></div>
                    @endfor
                    @for($d = 1; $d <= $lastDay->day; $d++)
                    <div class="text-[11px] py-1.5 font-medium rounded-lg {{ $d == $today->day ? 'bg-amber-500 text-white font-bold' : 'text-stone-600' }}">{{ $d }}</div>
                    @endfor
                </div>
            </div>

            {{-- Upcoming Events --}}
            @include('components.upcoming-events')

            {{-- Announcements --}}
            <div class="bg-white rounded-2xl ring-1 ring-stone-200/60 shadow-sm overflow-hidden">
                <div class="px-5 py-4 border-b border-stone-100">
                    <h3 class="font-bold text-stone-800 text-sm"><i class="fas fa-bullhorn text-amber-500 mr-2"></i>Announcements</h3>
                </div>
                @forelse($announcements as $a)
                <div class="px-5 py-3 border-b border-stone-50 last:border-0">
                    <p class="text-sm font-semibold text-stone-700">{{ $a->title }}</p>
                    <p class="text-xs text-stone-400 mt-0.5 line-clamp-2">{{ Str::limit($a->content, 80) }}</p>
                    <p class="text-[10px] text-stone-300 mt-1">{{ $a->created_at->diffForHumans() }}</p>
                </div>
                @empty
                <div class="p-5 text-center text-stone-400 text-sm">No announcements</div>
                @endforelse
            </div>
        </div>
    </div>
</div>
@endsection