@extends('layouts.admin')
@section('title', $student->full_name)
@section('page-title', $student->full_name)
@section('page-subtitle', 'Student details')

@section('content')
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <div class="lg:col-span-2">
        <div class="card-royal p-6">
            <div class="flex justify-between items-start mb-6">
                <div class="flex items-center gap-4">
                    @if($student->profile_photo)
                        <img src="{{ asset('storage/' . $student->profile_photo) }}?v={{ $student->updated_at->timestamp }}" 
                             alt="{{ $student->full_name }}" 
                             class="w-16 h-16 rounded-full object-cover">
                    @else
                        <div class="w-16 h-16 rounded-full bg-gradient-to-br from-gold-500 to-royal-600 flex items-center justify-center text-white text-2xl font-bold">
                            {{ substr($student->first_name, 0, 1) }}{{ substr($student->last_name ?? '', 0, 1) }}
                        </div>
                    @endif
                    <div>
                        <h2 class="font-cinzel text-2xl font-bold text-[var(--text-primary)]">{{ $student->full_name }}</h2>
                        <span class="px-2 py-1 text-sm font-semibold rounded 
                            @if($student->status === 'active') bg-green-100 text-green-700
                            @elseif($student->status === 'graduated') bg-blue-100 text-blue-700
                            @else bg-gray-100 text-gray-700 @endif">
                            {{ ucfirst($student->status) }}
                        </span>
                    </div>
                </div>
                <div class="flex gap-2">
                    <a href="{{ route('admin.sunday-school.students.edit', $student->id) }}" class="px-4 py-2 border border-[var(--border-color)] rounded-lg hover:bg-[var(--bg-secondary)]">
                        <i class="fas fa-edit mr-1"></i> Edit
                    </a>
                </div>
            </div>
            
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
                <div class="text-center p-3 bg-[var(--bg-secondary)] rounded-lg">
                    <p class="text-2xl font-bold text-[var(--text-primary)]">{{ $student->age }}</p>
                    <p class="text-xs text-[var(--text-secondary)]">Years Old</p>
                </div>
                <div class="text-center p-3 bg-[var(--bg-secondary)] rounded-lg">
                    <p class="text-lg font-bold text-[var(--text-primary)]">{{ ucfirst($student->gender) }}</p>
                    <p class="text-xs text-[var(--text-secondary)]">Gender</p>
                </div>
                <div class="text-center p-3 bg-[var(--bg-secondary)] rounded-lg">
                    <p class="text-lg font-bold text-[var(--text-primary)]">{{ $student->date_of_birth->format('M j, Y') }}</p>
                    <p class="text-xs text-[var(--text-secondary)]">Date of Birth</p>
                </div>
                <div class="text-center p-3 bg-[var(--bg-secondary)] rounded-lg">
                    <p class="text-lg font-bold text-[var(--text-primary)]">{{ $student->class?->name ?? 'N/A' }}</p>
                    <p class="text-xs text-[var(--text-secondary)]">Class</p>
                </div>
            </div>
            
            <h4 class="font-semibold text-[var(--text-primary)] mb-3">Attendance Summary</h4>
            <div class="grid grid-cols-3 gap-4 mb-6">
                <div class="text-center p-3 bg-green-50 rounded-lg">
                    <p class="text-2xl font-bold text-green-600">{{ $student->attendanceRecords->where('present', true)->count() }}</p>
                    <p class="text-xs text-[var(--text-secondary)]">Days Present</p>
                </div>
                <div class="text-center p-3 bg-red-50 rounded-lg">
                    <p class="text-2xl font-bold text-red-600">{{ $student->attendanceRecords->where('present', false)->count() }}</p>
                    <p class="text-xs text-[var(--text-secondary)]">Days Absent</p>
                </div>
                <div class="text-center p-3 bg-blue-50 rounded-lg">
                    <p class="text-2xl font-bold text-blue-600">
                        {{ $student->attendanceRecords->count() > 0 ? round(($student->attendanceRecords->where('present', true)->count() / $student->attendanceRecords->count()) * 100) : 0 }}%
                    </p>
                    <p class="text-xs text-[var(--text-secondary)]">Attendance Rate</p>
                </div>
            </div>
        </div>
    </div>
    
    <div class="space-y-6">
        <div class="card-royal p-6">
            <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)] mb-4">
                <i class="fas fa-user-tie mr-2 text-gold-500"></i> Parent/Guardian
            </h3>
            <div class="space-y-3">
                <div>
                    <p class="text-sm text-[var(--text-secondary)]">Name</p>
                    <p class="font-medium text-[var(--text-primary)]">{{ $student->parent_name }}</p>
                </div>
                <div>
                    <p class="text-sm text-[var(--text-secondary)]">Phone</p>
                    <p class="font-medium text-[var(--text-primary)]">{{ $student->parent_phone }}</p>
                </div>
                @if($student->parent_email)
                <div>
                    <p class="text-sm text-[var(--text-secondary)]">Email</p>
                    <p class="font-medium text-[var(--text-primary)]">{{ $student->parent_email }}</p>
                </div>
                @endif
                @if($student->parent)
                <div>
                    <p class="text-sm text-[var(--text-secondary)]">Church Member</p>
                    <a href="{{ route('admin.members.show', $student->parent_id) }}" class="text-gold-500 hover:underline">
                        {{ $student->parent->full_name }}
                    </a>
                </div>
                @endif
            </div>
        </div>
        
        @if($student->notes)
        <div class="card-royal p-6">
            <h3 class="font-semibold text-[var(--text-primary)] mb-2">Notes</h3>
            <p class="text-[var(--text-secondary)]">{{ $student->notes }}</p>
        </div>
        @endif
    </div>
</div>
@endsection