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

@section('content')
<div class="space-y-6">
    {{-- Children Selector & Summary --}}
    @foreach($children as $child)
        <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
            <div class="flex items-center mb-4">
                <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 font-bold text-lg">
                    {{ strtoupper(substr($child->name, 0, 1)) }}
                </div>
                <div class="ml-4">
                    <h3 class="text-lg font-semibold text-gray-800">{{ $child->name }}</h3>
                    <p class="text-sm text-gray-500">{{ $child->studentProfile?->class_?->full_name ?? 'N/A' }} | {{ $child->studentProfile?->admission_number }}</p>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div class="bg-gray-50 rounded-lg p-4">
                    <p class="text-sm text-gray-500">Recent Marks</p>
                    @forelse($child->marks->take(3) as $mark)
                        <p class="text-sm mt-1">{{ $mark->exam->subject->name ?? '' }}: <span class="font-semibold">{{ $mark->marks_obtained }}/{{ $mark->exam->total_marks }}</span></p>
                    @empty
                        <p class="text-sm text-gray-400 mt-1">No marks yet</p>
                    @endforelse
                </div>
                <div class="bg-gray-50 rounded-lg p-4">
                    <p class="text-sm text-gray-500">Quick Links</p>
                    <div class="mt-2 space-y-1">
                        <a href="{{ route('academics.exams.index') }}" class="block text-sm text-blue-600 hover:underline">View All Marks</a>
                        <a href="{{ route('attendance.index') }}" class="block text-sm text-blue-600 hover:underline">Attendance Report</a>
                        <a href="{{ route('fees.index') }}" class="block text-sm text-blue-600 hover:underline">Fee Details</a>
                    </div>
                </div>
                <div class="bg-gray-50 rounded-lg p-4">
                    <p class="text-sm text-gray-500">Actions</p>
                    <div class="mt-2 space-y-1">
                        <a href="{{ route('attendance.leave.index') }}" class="block text-sm text-blue-600 hover:underline">Apply Leave</a>
                        <a href="{{ route('communication.conversations') }}" class="block text-sm text-blue-600 hover:underline">Message Teacher</a>
                    </div>
                </div>
            </div>
        </div>
    @endforeach

    {{-- Announcements --}}
    <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
        <h3 class="text-lg font-semibold text-gray-800 mb-4">Announcements</h3>
        @forelse($announcements as $a)
            <div class="border-b border-gray-100 py-3 last:border-0">
                <p class="font-medium text-gray-800">{{ $a->title }}</p>
                <p class="text-sm text-gray-600 mt-1">{{ Str::limit($a->content, 120) }}</p>
            </div>
        @empty
            <p class="text-gray-500 text-sm">No announcements.</p>
        @endforelse
    </div>
</div>
@endsection