@extends('layouts.admin')
@section('title', 'Children Ministry')
@section('page-title', 'Children Ministry')
@section('page-subtitle', 'Manage classes, students, and attendance')

@section('content')
<div class="space-y-6">
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
        <div class="card-royal p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-[var(--text-secondary)]">Active Classes</p>
                    <p class="text-3xl font-bold font-cinzel text-[var(--text-primary)]">{{ $stats['active_classes'] ?? 0 }}</p>
                </div>
                <div class="w-14 h-14 rounded-full bg-gold-500/20 flex items-center justify-center">
                    <i class="fas fa-chalkboard-teacher text-gold-500 text-2xl"></i>
                </div>
            </div>
        </div>
        
        <div class="card-royal p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-[var(--text-secondary)]">Total Students</p>
                    <p class="text-3xl font-bold font-cinzel text-[var(--text-primary)]">{{ $stats['total_students'] ?? 0 }}</p>
                </div>
                <div class="w-14 h-14 rounded-full bg-blue-500/20 flex items-center justify-center">
                    <i class="fas fa-child text-blue-500 text-2xl"></i>
                </div>
            </div>
        </div>
        
        <div class="card-royal p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-[var(--text-secondary)]">Active Students</p>
                    <p class="text-3xl font-bold font-cinzel text-green-500">{{ $stats['active_students'] ?? 0 }}</p>
                </div>
                <div class="w-14 h-14 rounded-full bg-green-500/20 flex items-center justify-center">
                    <i class="fas fa-user-check text-green-500 text-2xl"></i>
                </div>
            </div>
        </div>
        
        <div class="card-royal p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-[var(--text-secondary)]">Attendance Rate</p>
                    <p class="text-3xl font-bold font-cinzel text-[var(--text-primary)]">
                        {{ $stats['total_students'] > 0 ? round(($stats['active_students'] / $stats['total_students']) * 100) : 0 }}%
                    </p>
                </div>
                <div class="w-14 h-14 rounded-full bg-purple-500/20 flex items-center justify-center">
                    <i class="fas fa-percentage text-purple-500 text-2xl"></i>
                </div>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <a href="{{ route('admin.sunday-school.classes.index') }}" class="card-royal p-6 hover:shadow-lg transition-all group">
            <div class="flex items-center gap-4">
                <div class="w-14 h-14 rounded-xl bg-gold-500/20 flex items-center justify-center group-hover:bg-gold-500 transition-colors">
                    <i class="fas fa-chalkboard-teacher text-gold-500 text-2xl group-hover:text-white transition-colors"></i>
                </div>
                <div>
                    <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)]">Classes</h3>
                    <p class="text-sm text-[var(--text-secondary)]">Manage Children Ministry classes</p>
                </div>
            </div>
        </a>
        
        <a href="{{ route('admin.sunday-school.students.index') }}" class="card-royal p-6 hover:shadow-lg transition-all group">
            <div class="flex items-center gap-4">
                <div class="w-14 h-14 rounded-xl bg-blue-500/20 flex items-center justify-center group-hover:bg-blue-500 transition-colors">
                    <i class="fas fa-child text-blue-500 text-2xl group-hover:text-white transition-colors"></i>
                </div>
                <div>
                    <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)]">Students</h3>
                    <p class="text-sm text-[var(--text-secondary)]">Manage student roster</p>
                </div>
            </div>
        </a>
        
        <a href="{{ route('admin.sunday-school.attendance.index') }}" class="card-royal p-6 hover:shadow-lg transition-all group">
            <div class="flex items-center gap-4">
                <div class="w-14 h-14 rounded-xl bg-green-500/20 flex items-center justify-center group-hover:bg-green-500 transition-colors">
                    <i class="fas fa-clipboard-check text-green-500 text-2xl group-hover:text-white transition-colors"></i>
                </div>
                <div>
                    <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)]">Attendance</h3>
                    <p class="text-sm text-[var(--text-secondary)]">Track student attendance</p>
                </div>
            </div>
        </a>
    </div>

    <div class="card-royal p-6">
        <div class="flex justify-between items-center mb-6">
            <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)]">
                <i class="fas fa-child mr-2 text-blue-500"></i> Recent Students
            </h3>
            <a href="{{ route('admin.sunday-school.students.index') }}" class="text-sm text-gold-500 hover:underline">View All</a>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
            @forelse($recentStudents as $student)
                <a href="{{ route('admin.sunday-school.students.show', $student->id) }}" class="p-4 border border-[var(--border-color)] rounded-xl hover:border-gold-500 transition-colors">
                    <div class="flex items-center gap-3 mb-2">
                        @if($student->profile_photo)
                            <img src="{{ asset('storage/' . $student->profile_photo) }}" alt="{{ $student->full_name }}" class="w-12 h-12 rounded-full object-cover">
                        @else
                            <div class="w-12 h-12 rounded-full bg-gradient-to-br from-gold-500 to-royal-600 flex items-center justify-center text-white font-bold">
                                {{ substr($student->first_name, 0, 1) }}{{ substr($student->last_name ?? '', 0, 1) }}
                            </div>
                        @endif
                        <div class="min-w-0">
                            <h4 class="font-semibold text-[var(--text-primary)] truncate">{{ $student->full_name }}</h4>
                            <p class="text-xs text-[var(--text-secondary)]">{{ $student->age }} years old</p>
                        </div>
                    </div>
                    <p class="text-xs text-[var(--text-secondary)]">{{ $student->parent_phone }}</p>
                </a>
            @empty
                <div class="col-span-4 text-center py-4 text-[var(--text-secondary)]">
                    No students yet. <a href="{{ route('admin.sunday-school.students.create') }}" class="text-gold-500 hover:underline">Add one</a>
                </div>
            @endforelse
        </div>
    </div>

    <div class="card-royal p-6">
        <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)] mb-6">
            <i class="fas fa-layer-group mr-2 text-gold-500"></i> Classes Overview
        </h3>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            @forelse($classes as $class)
                <a href="{{ route('admin.sunday-school.classes.show', $class->id) }}" class="p-4 border border-[var(--border-color)] rounded-xl hover:border-gold-500 transition-colors">
                    <div class="flex justify-between items-start mb-2">
                        <span class="px-2 py-1 text-xs font-semibold rounded {{ $class->is_active ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-700' }}">
                            {{ $class->is_active ? 'Active' : 'Inactive' }}
                        </span>
                        <span class="text-xs text-[var(--text-secondary)]">{{ $class->students_count }} students</span>
                    </div>
                    <h4 class="font-semibold text-[var(--text-primary)] mb-1">{{ $class->name }}</h4>
                    <p class="text-sm text-[var(--text-secondary)] mb-2">{{ $class->age_group }}</p>
                    <div class="flex items-center gap-1 mb-2">
                        @forelse($class->students->take(5) as $student)
                            @if($student->profile_photo)
                                <img src="{{ asset('storage/' . $student->profile_photo) }}" alt="{{ $student->first_name }}" class="w-8 h-8 rounded-full object-cover border-2 border-white">
                            @else
                                <div class="w-8 h-8 rounded-full bg-gradient-to-br from-gold-500 to-royal-600 flex items-center justify-center text-white text-xs font-bold border-2 border-white">
                                    {{ substr($student->first_name, 0, 1) }}{{ substr($student->last_name ?? '', 0, 1) }}
                                </div>
                            @endif
                        @empty
                        @endforelse
                        @if($class->students_count > 5)
                            <span class="w-8 h-8 rounded-full bg-[var(--bg-secondary)] flex items-center justify-center text-xs text-[var(--text-secondary)] border-2 border-white">+{{ $class->students_count - 5 }}</span>
                        @endif
                    </div>
                    <p class="text-xs text-[var(--text-secondary)]">
                        <i class="fas fa-user mr-1"></i> {{ $class->teacher_name ?? 'No teacher assigned' }}
                    </p>
                    <p class="text-xs text-[var(--text-secondary)]">
                        <i class="fas fa-clock mr-1"></i> {{ $class->schedule }}
                    </p>
                </a>
            @empty
                <div class="col-span-3 text-center py-8 text-[var(--text-secondary)]">
                    No classes found. <a href="{{ route('admin.sunday-school.classes.create') }}" class="text-gold-500 hover:underline">Create one now</a>
                </div>
            @endforelse
        </div>
    </div>
</div>
@endsection