@extends('layouts.admin')
@section('title', 'Attendance Statistics')
@section('page-title', 'Attendance Statistics')
@section('page-subtitle', 'Attendance overview for ' . now()->format('F Y'))

@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)]">Today ({{ now()->format('M d') }})</p>
                    <p class="text-3xl font-bold text-[var(--text-primary)]">{{ $todayStats['total'] }}</p>
                    <p class="text-xs text-[var(--text-secondary)]">check-ins today</p>
                </div>
                <div class="w-14 h-14 rounded-full bg-gold-500/20 flex items-center justify-center">
                    <i class="fas fa-calendar-day 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)]">This Week</p>
                    <p class="text-3xl font-bold text-[var(--text-primary)]">{{ $weekStats['total'] }}</p>
                    <p class="text-xs text-[var(--text-secondary)]">attendees</p>
                </div>
                <div class="w-14 h-14 rounded-full bg-royal-500/20 flex items-center justify-center">
                    <i class="fas fa-calendar-week text-royal-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)]">This Month</p>
                    <p class="text-3xl font-bold text-[var(--text-primary)]">{{ $monthStats['total'] }}</p>
                    <p class="text-xs text-[var(--text-secondary)]">attendees</p>
                </div>
                <div class="w-14 h-14 rounded-full bg-green-500/20 flex items-center justify-center">
                    <i class="fas fa-calendar-alt 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)]">Total Members</p>
                    <p class="text-3xl font-bold text-[var(--text-primary)]">{{ $totalMembers }}</p>
                    <p class="text-xs text-[var(--text-secondary)]">active members</p>
                </div>
                <div class="w-14 h-14 rounded-full bg-blue-500/20 flex items-center justify-center">
                    <i class="fas fa-users text-blue-500 text-2xl"></i>
                </div>
            </div>
        </div>
    </div>
    
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-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-fire mr-2 text-gold-500"></i> Top Services
            </h3>
            <div class="space-y-4">
                @forelse($topServices as $service)
                    <div class="flex items-center justify-between p-4 bg-[var(--bg-secondary)] rounded-lg">
                        <div>
                            <p class="text-[var(--text-primary)] font-medium">{{ $service->name }}</p>
                            <p class="text-sm text-[var(--text-secondary)]">{{ $service->attendances_count }} total attendance</p>
                        </div>
                        <div class="text-right">
                            <p class="text-2xl font-bold text-gold-500">{{ $service->latest_attendance ?? 0 }}</p>
                            <p class="text-xs text-[var(--text-secondary)]">last service</p>
                        </div>
                    </div>
                @empty
                    <p class="text-center text-[var(--text-secondary)] py-4">No service data yet</p>
                @endforelse
            </div>
        </div>
        
        <div class="card-royal p-6">
            <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)] mb-4">
                <i class="fas fa-trophy mr-2 text-gold-500"></i> Most Consistent Attendees
            </h3>
            <div class="space-y-4">
                @forelse($topAttendees as $attendee)
                    @php
                        $daysInMonth = now()->daysInMonth;
                        $attendancesCount = $attendee->attendances_count ?? 0;
                        $attendanceRate = $daysInMonth > 0 ? ($attendancesCount / $daysInMonth) * 100 : 0;
                    @endphp
                    <div class="flex items-center gap-4 p-4 bg-[var(--bg-secondary)] rounded-lg">
                        @if($attendee->profile_photo)
                            <img src="{{ asset('storage/' . $attendee->profile_photo) }}" alt="{{ $attendee->full_name }}" class="w-12 h-12 rounded-full object-cover border-2 border-gold-500/30">
                        @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 text-lg">
                                {{ substr($attendee->full_name, 0, 1) }}{{ substr(explode(' ', $attendee->full_name)[1] ?? '', 0, 1) }}
                            </div>
                        @endif
                        <div class="flex-1">
                            <p class="text-[var(--text-primary)] font-medium">{{ $attendee->full_name }}</p>
                            <p class="text-sm text-[var(--text-secondary)]">{{ $attendancesCount }} attendances this month</p>
                        </div>
                        <div class="text-gold-500 font-bold text-lg">
                            {{ round($attendanceRate, 1) }}%
                        </div>
                    </div>
                @empty
                    <p class="text-center text-[var(--text-secondary)] py-4">No attendee data yet</p>
                @endforelse
            </div>
        </div>
    </div>
    
    <div class="card-royal p-6">
        <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)] mb-4">
            <i class="fas fa-clock mr-2 text-gold-500"></i> Upcoming Services
        </h3>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            @forelse($upcomingServices as $service)
                <div class="p-4 border border-[var(--border-color)] rounded-lg hover:border-gold-500 transition-colors">
                    <p class="text-[var(--text-primary)] font-semibold">{{ $service->name }}</p>
                    <p class="text-sm text-[var(--text-secondary)]">{{ $service->formatted_date }}</p>
                    <p class="text-xs text-[var(--text-secondary)] mt-1">{{ $service->formatted_time }}</p>
                </div>
            @empty
                <div class="col-span-3 text-center text-[var(--text-secondary)] py-4">No upcoming services</div>
            @endforelse
        </div>
    </div>
</div>
@endsection