@extends('layouts.admin')
@section('title', 'Dashboard')
@section('page-title', 'Dashboard')
@section('page-subtitle', 'Church overview and statistics')

@section('content')
<div class="space-y-6">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <div class="stat-card rounded-xl p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-[var(--text-secondary)] text-sm">Total Members</p>
                    <p class="text-3xl font-bold font-cinzel text-[var(--text-primary)]">{{ number_format($stats['total_members']) }}</p>
                </div>
                <div class="stat-icon w-14 h-14 rounded-xl flex items-center justify-center">
                    <i class="fas fa-users text-2xl"></i>
                </div>
            </div>
            <p class="text-xs text-green-500 mt-2"><i class="fas fa-arrow-up"></i> {{ $stats['new_members_this_month'] }} this month</p>
        </div>

        <div class="stat-card rounded-xl p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-[var(--text-secondary)] text-sm">Active Members</p>
                    <p class="text-3xl font-bold font-cinzel text-[var(--text-primary)]">{{ number_format($stats['active_members']) }}</p>
                </div>
                <div class="stat-icon w-14 h-14 rounded-xl flex items-center justify-center">
                    <i class="fas fa-user-check text-2xl"></i>
                </div>
            </div>
            <p class="text-xs text-[var(--text-secondary)] mt-2">{{ round($stats['active_members'] / max($stats['total_members'], 1) * 100) }}% of total</p>
        </div>

        <div class="stat-card rounded-xl p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-[var(--text-secondary)] text-sm">Visitors</p>
                    <p class="text-3xl font-bold font-cinzel text-[var(--text-primary)]">{{ number_format($stats['total_visitors']) }}</p>
                </div>
                <div class="stat-icon w-14 h-14 rounded-xl flex items-center justify-center">
                    <i class="fas fa-user-friends text-2xl"></i>
                </div>
            </div>
            <p class="text-xs text-blue-500 mt-2"><i class="fas fa-arrow-up"></i> {{ $stats['new_visitors_this_month'] }} this month</p>
        </div>

        <div class="stat-card rounded-xl p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-[var(--text-secondary)] text-sm">Follow-ups</p>
                    <p class="text-2xl font-bold font-cinzel text-[var(--text-primary)]">{{ $stats['pending_follow_ups'] }}</p>
                </div>
                <div class="stat-icon w-14 h-14 rounded-xl flex items-center justify-center">
                    <i class="fas fa-tasks text-2xl"></i>
                </div>
            </div>
            @if($stats['overdue_follow_ups'] > 0)
                <p class="text-xs text-red-500 mt-2"><i class="fas fa-exclamation-triangle"></i> {{ $stats['overdue_follow_ups'] }} overdue</p>
            @endif
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div class="stat-card rounded-xl p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-[var(--text-secondary)] text-sm">Total Donations</p>
                    <p class="text-2xl font-bold font-cinzel text-gold-500">GH₵{{ number_format($stats['total_donations'], 2) }}</p>
                </div>
                <div class="stat-icon w-14 h-14 rounded-xl flex items-center justify-center">
                    <i class="fas fa-hand-holding-usd text-2xl"></i>
                </div>
            </div>
            <p class="text-xs text-gold-500 mt-2"><i class="fas fa-calendar"></i> GH₵{{ number_format($stats['donations_this_month'], 2) }} this month</p>
        </div>

        <div class="stat-card rounded-xl p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-[var(--text-secondary)] text-sm">Total Expenses</p>
                    <p class="text-2xl font-bold font-cinzel text-red-500">GH₵{{ number_format($stats['total_expenses'], 2) }}</p>
                </div>
                <div class="stat-icon w-14 h-14 rounded-xl flex items-center justify-center">
                    <i class="fas fa-receipt text-2xl"></i>
                </div>
            </div>
            <p class="text-xs text-[var(--text-secondary)] mt-2"><i class="fas fa-calendar"></i> GH₵{{ number_format($stats['expenses_this_month'], 2) }} this month</p>
        </div>

        <div class="stat-card rounded-xl p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-[var(--text-secondary)] text-sm">Upcoming Events</p>
                    <p class="text-2xl font-bold font-cinzel text-[var(--text-primary)]">{{ $eventStats['upcoming_events'] }}</p>
                </div>
                <div class="stat-icon w-14 h-14 rounded-xl flex items-center justify-center">
                    <i class="fas fa-calendar-alt text-2xl"></i>
                </div>
            </div>
            <p class="text-xs text-blue-500 mt-2"><i class="fas fa-calendar"></i> {{ $eventStats['events_this_month'] }} this month</p>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div class="card-royal p-6 lg:col-span-2">
            <div class="flex items-center justify-between mb-6">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-gold-500/20 to-gold-500/5 flex items-center justify-center">
                        <i class="fas fa-chart-line text-gold-500"></i>
                    </div>
                    <div>
                        <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)]">Attendance Trends</h3>
                        <p class="text-xs text-[var(--text-secondary)]">Last 6 months overview</p>
                    </div>
                </div>
                <a href="{{ route('admin.reports.attendance') }}" class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-gold-500/10 text-gold-500 hover:bg-gold-500/20 transition-all text-sm font-medium">
                    <i class="fas fa-external-link-alt text-xs"></i>
                    View Report
                </a>
            </div>
            
            <div class="relative">
                <canvas id="attendanceTrendChart" height="200"></canvas>
            </div>
            
            <div class="grid grid-cols-3 gap-4 mt-6 pt-6 border-t border-[var(--border-color)]">
                @php
                    $totalAttendance = collect($attendanceTrends)->sum('count');
                    $avgAttendance = count($attendanceTrends) > 0 ? round($totalAttendance / count($attendanceTrends)) : 0;
                    $maxAttendance = collect($attendanceTrends)->max('count') ?? 0;
                @endphp
                <div class="text-center p-3 rounded-lg bg-gradient-to-br from-gold-500/5 to-gold-500/10">
                    <p class="text-2xl font-bold font-cinzel text-gold-500">{{ number_format($totalAttendance) }}</p>
                    <p class="text-xs text-[var(--text-secondary)] mt-1">Total Attendance</p>
                </div>
                <div class="text-center p-3 rounded-lg bg-gradient-to-br from-emerald-500/5 to-emerald-500/10">
                    <p class="text-2xl font-bold font-cinzel text-emerald-500">{{ number_format($avgAttendance) }}</p>
                    <p class="text-xs text-[var(--text-secondary)] mt-1">Monthly Average</p>
                </div>
                <div class="text-center p-3 rounded-lg bg-gradient-to-br from-blue-500/5 to-blue-500/10">
                    <p class="text-2xl font-bold font-cinzel text-blue-500">{{ number_format($maxAttendance) }}</p>
                    <p class="text-xs text-[var(--text-secondary)] mt-1">Highest Month</p>
                </div>
            </div>
        </div>

        <div class="card-royal p-6">
            <div class="flex items-center justify-between mb-6">
                <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)]">Membership Status</h3>
            </div>
            <div class="flex items-center justify-center mb-4">
                <canvas id="membershipPieChart" width="160" height="160"></canvas>
            </div>
            <div class="space-y-3">
                @php $statusColors = ['active' => 'bg-green-500', 'new' => 'bg-blue-500', 'inactive' => 'bg-gray-500', 'prospect' => 'bg-yellow-500', 'transferred' => 'bg-purple-500', 'deceased' => 'bg-red-500']; @endphp
                @foreach($membershipBreakdown as $status => $count)
                    <div class="flex items-center justify-between">
                        <div class="flex items-center gap-2">
                            <span class="w-3 h-3 rounded-full {{ $statusColors[$status] ?? 'bg-[var(--text-secondary)]' }}"></span>
                            <span class="text-sm text-[var(--text-primary)] capitalize">{{ $status }}</span>
                        </div>
                        <span class="font-semibold text-[var(--text-primary)]">{{ $count }}</span>
                    </div>
                @endforeach
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div class="card-royal p-6">
            <div class="flex items-center justify-between mb-6">
                <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)]">Gender Distribution</h3>
            </div>
            <div class="flex items-center gap-8">
                <div class="relative">
                    <canvas id="genderPieChart" width="140" height="140"></canvas>
                </div>
                <div class="space-y-4 flex-1">
                    <div class="flex items-center justify-between p-3 rounded-lg bg-blue-50 dark:bg-blue-900/20">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white">
                                <i class="fas fa-male"></i>
                            </div>
                            <span class="text-[var(--text-primary)]">Male</span>
                        </div>
                        <span class="font-bold text-blue-500">{{ $genderBreakdown['male'] }}</span>
                    </div>
                    <div class="flex items-center justify-between p-3 rounded-lg bg-pink-50 dark:bg-pink-900/20">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 rounded-full bg-pink-500 flex items-center justify-center text-white">
                                <i class="fas fa-female"></i>
                            </div>
                            <span class="text-[var(--text-primary)]">Female</span>
                        </div>
                        <span class="font-bold text-pink-500">{{ $genderBreakdown['female'] }}</span>
                    </div>
                    @if($genderBreakdown['other'] > 0)
                    <div class="flex items-center justify-between p-3 rounded-lg bg-purple-50 dark:bg-purple-900/20">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 rounded-full bg-purple-500 flex items-center justify-center text-white">
                                <i class="fas fa-user"></i>
                            </div>
                            <span class="text-[var(--text-primary)]">Other</span>
                        </div>
                        <span class="font-bold text-purple-500">{{ $genderBreakdown['other'] }}</span>
                    </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="card-royal p-6">
            <div class="flex items-center justify-between mb-6">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-gold-500/20 to-emerald-500/20 flex items-center justify-center">
                        <i class="fas fa-chart-area text-gold-500"></i>
                    </div>
                    <div>
                        <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)]">Financial Overview</h3>
                        <p class="text-xs text-[var(--text-secondary)]">Last 6 months trends</p>
                    </div>
                </div>
                <div class="flex items-center gap-4">
                    <div class="flex items-center gap-2">
                        <span class="w-3 h-3 rounded-full bg-emerald-500"></span>
                        <span class="text-xs text-[var(--text-secondary)]">Income</span>
                    </div>
                    <div class="flex items-center gap-2">
                        <span class="w-3 h-3 rounded-full bg-red-500"></span>
                        <span class="text-xs text-[var(--text-secondary)]">Expenses</span>
                    </div>
                </div>
            </div>
            
            <div class="relative">
                <canvas id="financialTrendChart" height="160"></canvas>
            </div>
            
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-6 pt-6 border-t border-[var(--border-color)]">
                <div class="text-center p-3 rounded-lg bg-gradient-to-br from-emerald-500/5 to-emerald-500/10">
                    <p class="text-2xl font-bold font-cinzel text-emerald-500">GH₵{{ number_format(array_sum(array_column($financialTrends, 'income')), 0) }}</p>
                    <p class="text-xs text-[var(--text-secondary)] mt-1">Total Income</p>
                </div>
                <div class="text-center p-3 rounded-lg bg-gradient-to-br from-red-500/5 to-red-500/10">
                    <p class="text-2xl font-bold font-cinzel text-red-500">GH₵{{ number_format(array_sum(array_column($financialTrends, 'expenses')), 0) }}</p>
                    <p class="text-xs text-[var(--text-secondary)] mt-1">Total Expenses</p>
                </div>
                <div class="text-center p-3 rounded-lg bg-gradient-to-br from-gold-500/5 to-gold-500/10">
                    <p class="text-2xl font-bold font-cinzel text-gold-500">GH₵{{ number_format(array_sum(array_column($financialTrends, 'net_balance')), 0) }}</p>
                    <p class="text-xs text-[var(--text-secondary)] mt-1">Net Balance</p>
                </div>
                <div class="text-center p-3 rounded-lg bg-gradient-to-br from-blue-500/5 to-blue-500/10">
                    <p class="text-2xl font-bold font-cinzel text-blue-500">GH₵{{ number_format(collect($financialTrends)->avg('income') ?? 0, 0) }}</p>
                    <p class="text-xs text-[var(--text-secondary)] mt-1">Avg Monthly</p>
                </div>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div class="card-royal p-6">
            <div class="flex items-center justify-between mb-4">
                <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)]">Recent Members</h3>
                <a href="{{ route('admin.members.index') }}" class="text-sm text-gold-500 hover:text-gold-600">View All</a>
            </div>
            <div class="space-y-4">
                @forelse($recentActivity['recent_members'] as $member)
                    <a href="{{ route('admin.members.show', $member->id) }}" class="flex items-center gap-4 p-3 rounded-lg bg-[var(--bg-secondary)] hover:bg-[var(--bg-primary)] transition-colors">
                        @if($member->profile_photo)
                            <img src="{{ asset('storage/' . $member->profile_photo) }}" alt="{{ $member->full_name }}" class="w-10 h-10 rounded-full object-cover">
                        @else
                            <div class="w-10 h-10 rounded-full bg-gradient-to-br from-gold-400 to-royal-500 flex items-center justify-center text-white">
                                {{ substr($member->first_name, 0, 1) }}{{ substr($member->last_name, 0, 1) }}
                            </div>
                        @endif
                        <div class="flex-1 min-w-0">
                            <p class="font-medium text-[var(--text-primary)] truncate">{{ $member->full_name }}</p>
                            <p class="text-xs text-[var(--text-secondary)] capitalize">{{ $member->membership_status }}</p>
                        </div>
                        <span class="text-xs text-[var(--text-secondary)]">{{ $member->created_at->diffForHumans() }}</span>
                    </a>
                @empty
                    <p class="text-center text-[var(--text-secondary)] py-8">No recent members</p>
                @endforelse
            </div>
        </div>

        <div class="card-royal p-6">
            <div class="flex items-center justify-between mb-4">
                <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)]">Recent Donations</h3>
                <a href="{{ route('admin.finance.donations.index') }}" class="text-sm text-gold-500 hover:text-gold-600">View All</a>
            </div>
            <div class="space-y-4">
                @forelse($recentActivity['recent_donations'] as $donation)
                    <div class="flex items-center gap-4 p-3 rounded-lg bg-[var(--bg-secondary)]">
                        <div class="w-10 h-10 rounded-full bg-gradient-to-br from-gold-400 to-green-500 flex items-center justify-center text-white">
                            <i class="fas fa-hand-holding-usd"></i>
                        </div>
                        <div class="flex-1 min-w-0">
                            <p class="font-medium text-[var(--text-primary)] truncate">{{ $donation->is_anonymous ? 'Anonymous' : ($donation->donor_name ?? $donation->member?->full_name ?? 'Unknown') }}</p>
                            <p class="text-xs text-[var(--text-secondary)]">{{ $donation->donationType?->name ?? 'General' }}</p>
                        </div>
                        <span class="font-semibold text-gold-500">GH₵{{ number_format($donation->amount, 2) }}</span>
                    </div>
                @empty
                    <p class="text-center text-[var(--text-secondary)] py-8">No recent donations</p>
                @endforelse
            </div>
        </div>
    </div>

    <div class="card-royal p-6">
        <div class="flex items-center justify-between mb-4">
            <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)]">Upcoming Follow-ups</h3>
            <a href="{{ route('admin.clusters.follow-ups.index') }}" class="text-sm text-gold-500 hover:text-gold-600">View All</a>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead>
                    <tr class="border-b border-[var(--border-color)]">
                        <th class="text-left py-3 px-4 text-sm font-medium text-[var(--text-secondary)]">Date</th>
                        <th class="text-left py-3 px-4 text-sm font-medium text-[var(--text-secondary)]">Type</th>
                        <th class="text-left py-3 px-4 text-sm font-medium text-[var(--text-secondary)]">Member/Visitor</th>
                        <th class="text-left py-3 px-4 text-sm font-medium text-[var(--text-secondary)]">Assigned To</th>
                        <th class="text-left py-3 px-4 text-sm font-medium text-[var(--text-secondary)]">Status</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($upcomingFollowUps as $followUp)
                        <tr class="border-b border-[var(--border-color)] hover:bg-[var(--bg-secondary)]">
                            <td class="py-3 px-4">{{ $followUp->follow_up_date->format('M d, Y') }}</td>
                            <td class="py-3 px-4 capitalize"><i class="fas fa-{{ $followUp->type === 'visit' ? 'home' : ($followUp->type === 'call' ? 'phone' : 'envelope') }} mr-1"></i> {{ $followUp->type }}</td>
                            <td class="py-3 px-4">{{ $followUp->member?->full_name ?? $followUp->visitor?->full_name ?? 'N/A' }}</td>
                            <td class="py-3 px-4">{{ $followUp->assignee?->name ?? 'Unassigned' }}</td>
                            <td class="py-3 px-4">
                                <span class="px-2 py-1 rounded-full text-xs {{ $followUp->status === 'completed' ? 'bg-green-100 text-green-700' : 'bg-yellow-100 text-yellow-700' }}">
                                    {{ ucfirst($followUp->status) }}
                                </span>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="py-8 text-center text-[var(--text-secondary)]">No upcoming follow-ups</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <div class="card-royal p-6">
        <div class="flex items-center justify-between mb-4">
            <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)]">Upcoming Events</h3>
            <a href="{{ route('admin.events.index') }}" class="text-sm text-gold-500 hover:text-gold-600">View All</a>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead>
                    <tr class="border-b border-[var(--border-color)]">
                        <th class="text-left py-3 px-4 text-sm font-medium text-[var(--text-secondary)]">Event</th>
                        <th class="text-left py-3 px-4 text-sm font-medium text-[var(--text-secondary)]">Date & Time</th>
                        <th class="text-left py-3 px-4 text-sm font-medium text-[var(--text-secondary)]">Location</th>
                        <th class="text-left py-3 px-4 text-sm font-medium text-[var(--text-secondary)]">Type</th>
                        <th class="text-left py-3 px-4 text-sm font-medium text-[var(--text-secondary)]">RSVPs</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($upcomingEvents as $event)
                        <tr class="border-b border-[var(--border-color)] hover:bg-[var(--bg-secondary)]">
                            <td class="py-3 px-4">
                                <a href="{{ route('admin.events.show', $event) }}" class="text-[var(--text-primary)] hover:text-gold-500 font-medium">{{ $event->title }}</a>
                            </td>
                            <td class="py-3 px-4">
                                <div class="flex items-center gap-2">
                                    <i class="fas fa-calendar-day text-xs text-[var(--text-secondary)]"></i>
                                    <span>{{ $event->start_date->format('M d, Y') }}</span>
                                    <span class="text-[var(--text-secondary)]">{{ $event->start_date->format('h:i A') }}</span>
                                </div>
                            </td>
                            <td class="py-3 px-4 text-[var(--text-secondary)]">{{ $event->location ?? 'TBD' }}</td>
                            <td class="py-3 px-4">
                                <span class="px-2 py-1 rounded-full text-xs bg-blue-100 text-blue-700 capitalize">
                                    {{ str_replace('_', ' ', $event->event_type) }}
                                </span>
                            </td>
                            <td class="py-3 px-4">
                                <span class="flex items-center gap-1 text-[var(--text-secondary)]">
                                    <i class="fas fa-users text-xs"></i>
                                    {{ $event->rsvps_count }}
                                </span>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="py-8 text-center text-[var(--text-secondary)]">No upcoming events</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <!-- Active Fundraisers -->
    @if(count($activeFundraisers) > 0)
    <div class="card-royal p-6">
        <div class="flex items-center justify-between mb-4">
            <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)]">Active Fundraisers</h3>
            <a href="{{ route('admin.finance.fundraisers.index') }}" class="text-sm text-gold-500 hover:text-gold-600">View All</a>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            @foreach($activeFundraisers as $fundraiser)
            <div class="p-4 rounded-lg border border-[var(--border-color)] bg-gradient-to-br from-gold-500/5 to-gold-600/10">
                <div class="flex items-center gap-3 mb-3">
                    <div class="w-10 h-10 rounded-lg bg-gold-500/20 flex items-center justify-center">
                        <i class="fas fa-bullhorn text-gold-500"></i>
                    </div>
                    <div class="flex-1 min-w-0">
                        <h4 class="font-semibold text-[var(--text-primary)] truncate">{{ $fundraiser->title }}</h4>
                        <span class="text-xs px-2 py-0.5 rounded-full bg-gold-500/20 text-gold-600 capitalize">{{ $fundraiser->type }}</span>
                    </div>
                </div>
                
                <div class="mb-3">
                    <div class="flex justify-between text-xs mb-1">
                        <span class="text-[var(--text-secondary)]">Progress</span>
                        <span class="font-medium text-gold-600">{{ round($fundraiser->progress_percentage, 1) }}%</span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-2">
                        <div class="bg-gradient-to-r from-gold-500 to-gold-600 h-2 rounded-full" style="width: {{ min($fundraiser->progress_percentage, 100) }}%"></div>
                    </div>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-[var(--text-secondary)]">GH₵{{ number_format($fundraiser->raised_amount, 0) }}</span>
                        <span class="text-[var(--text-secondary)]">of GH₵{{ number_format($fundraiser->target_amount, 0) }}</span>
                    </div>
                </div>
                
                @if($fundraiser->end_date)
                <div class="flex items-center justify-between text-xs">
                    <span class="text-[var(--text-secondary)]">
                        <i class="fas fa-clock mr-1"></i>
                        {{ \Carbon\Carbon::parse($fundraiser->end_date)->diffForHumans() }}
                    </span>
                    <a href="{{ route('admin.finance.fundraisers.show', $fundraiser) }}" class="text-gold-500 hover:underline">View Details</a>
                </div>
                @endif
            </div>
            @endforeach
        </div>
    </div>
    @endif

    <div class="card-royal p-6">
        <div class="flex items-center justify-between mb-6">
            <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)]">System Trends</h3>
            <span class="text-xs text-[var(--text-secondary)]">Last 30 days comparison</span>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
            <div class="p-4 rounded-lg bg-gradient-to-br from-gold-500/10 to-gold-600/10 border border-gold-500/20">
                <div class="flex items-center gap-3 mb-2">
                    <div class="w-10 h-10 rounded-lg bg-gold-500/20 flex items-center justify-center">
                        <i class="fas fa-bullhorn text-gold-500"></i>
                    </div>
                    <div>
                        <p class="text-2xl font-bold text-[var(--text-primary)]">{{ $systemTrends['fundraisers']['total'] }}</p>
                        <p class="text-xs text-[var(--text-secondary)]">Fundraisers</p>
                    </div>
                </div>
                <div class="flex items-center justify-between text-xs">
                    <span class="text-green-500">{{ $systemTrends['fundraisers']['active'] }} active</span>
                    <span class="text-gold-500 font-semibold">GH₵{{ number_format($systemTrends['fundraisers']['total_raised'], 0) }} raised</span>
                </div>
            </div>

            <div class="p-4 rounded-lg bg-gradient-to-br from-blue-500/10 to-blue-600/10 border border-blue-500/20">
                <div class="flex items-center gap-3 mb-2">
                    <div class="w-10 h-10 rounded-lg bg-blue-500/20 flex items-center justify-center">
                        <i class="fas fa-child text-blue-500"></i>
                    </div>
                    <div>
                        <p class="text-2xl font-bold text-[var(--text-primary)]">{{ $systemTrends['sunday_school']['classes'] }}</p>
                        <p class="text-xs text-[var(--text-secondary)]">Children Ministry</p>
                    </div>
                </div>
                <div class="flex items-center text-xs">
                    <span class="text-blue-500">{{ $systemTrends['sunday_school']['students'] }} children</span>
                </div>
            </div>

            <div class="p-4 rounded-lg bg-gradient-to-br from-purple-500/10 to-purple-600/10 border border-purple-500/20">
                <div class="flex items-center gap-3 mb-2">
                    <div class="w-10 h-10 rounded-lg bg-purple-500/20 flex items-center justify-center">
                        <i class="fas fa-praying-hands text-purple-500"></i>
                    </div>
                    <div>
                        <p class="text-2xl font-bold text-[var(--text-primary)]">{{ $systemTrends['prayer_requests']['pending'] }}</p>
                        <p class="text-xs text-[var(--text-secondary)]">Prayer Requests</p>
                    </div>
                </div>
                <div class="flex items-center text-xs">
                    <span class="text-purple-500">{{ $systemTrends['prayer_requests']['answered_this_month'] }} answered this month</span>
                </div>
            </div>

            <div class="p-4 rounded-lg bg-gradient-to-br from-green-500/10 to-green-600/10 border border-green-500/20">
                <div class="flex items-center gap-3 mb-2">
                    <div class="w-10 h-10 rounded-lg bg-green-500/20 flex items-center justify-center">
                        <i class="fas fa-microphone text-green-500"></i>
                    </div>
                    <div>
                        <p class="text-2xl font-bold text-[var(--text-primary)]">{{ $systemTrends['equipment']['available'] }}</p>
                        <p class="text-xs text-[var(--text-secondary)]">Equipment Available</p>
                    </div>
                </div>
                <div class="flex items-center text-xs">
                    <span class="text-green-500">{{ $systemTrends['equipment']['total'] }} total / {{ $systemTrends['equipment']['in_maintenance'] }} in maintenance</span>
                </div>
            </div>

            <div class="p-4 rounded-lg bg-gradient-to-br from-royal-500/10 to-royal-600/10 border border-royal-500/20">
                <div class="flex items-center gap-3 mb-2">
                    <div class="w-10 h-10 rounded-lg bg-royal-500/20 flex items-center justify-center">
                        <i class="fas fa-chart-line text-royal-500"></i>
                    </div>
                    <div>
                        <p class="text-2xl font-bold text-[var(--text-primary)]">Growth</p>
                        <p class="text-xs text-[var(--text-secondary)]">Monthly Metrics</p>
                    </div>
                </div>
                <div class="space-y-1 text-xs">
                    <div class="flex justify-between">
                        <span class="text-[var(--text-secondary)]">Members:</span>
                        <span class="{{ $systemTrends['growth_metrics']['members_growth'] >= 0 ? 'text-green-500' : 'text-red-500' }}">
                            {{ $systemTrends['growth_metrics']['members_growth'] >= 0 ? '+' : '' }}{{ $systemTrends['growth_metrics']['members_growth'] }}%
                        </span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-[var(--text-secondary)]">Visitors:</span>
                        <span class="{{ $systemTrends['growth_metrics']['visitors_growth'] >= 0 ? 'text-green-500' : 'text-red-500' }}">
                            {{ $systemTrends['growth_metrics']['visitors_growth'] >= 0 ? '+' : '' }}{{ $systemTrends['growth_metrics']['visitors_growth'] }}%
                        </span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-[var(--text-secondary)]">Donations:</span>
                        <span class="{{ $systemTrends['growth_metrics']['donations_growth'] >= 0 ? 'text-green-500' : 'text-red-500' }}">
                            {{ $systemTrends['growth_metrics']['donations_growth'] >= 0 ? '+' : '' }}{{ $systemTrends['growth_metrics']['donations_growth'] }}%
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card-royal p-6">
        <div class="flex items-center justify-between mb-6">
            <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)]">
                <i class="fas fa-chart-pie mr-2 text-gold-500"></i> System Analytics
            </h3>
            <span class="text-xs text-[var(--text-secondary)]">Comprehensive system overview</span>
        </div>
        
        <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
            <div class="p-4 rounded-lg bg-gradient-to-br from-blue-500/10 to-blue-600/10 border border-blue-500/20">
                <div class="flex items-center gap-3 mb-2">
                    <div class="w-10 h-10 rounded-lg bg-blue-500/20 flex items-center justify-center">
                        <i class="fas fa-users-cog text-blue-500"></i>
                    </div>
                    <div>
                        <p class="text-2xl font-bold text-[var(--text-primary)]">{{ $systemAnalytics['users_count'] }}</p>
                        <p class="text-xs text-[var(--text-secondary)]">System Users</p>
                    </div>
                </div>
            </div>

            <div class="p-4 rounded-lg bg-gradient-to-br from-purple-500/10 to-purple-600/10 border border-purple-500/20">
                <div class="flex items-center gap-3 mb-2">
                    <div class="w-10 h-10 rounded-lg bg-purple-500/20 flex items-center justify-center">
                        <i class="fas fa-user-shield text-purple-500"></i>
                    </div>
                    <div>
                        <p class="text-2xl font-bold text-[var(--text-primary)]">{{ $systemAnalytics['roles_count'] }}</p>
                        <p class="text-xs text-[var(--text-secondary)]">Roles</p>
                    </div>
                </div>
            </div>

            <div class="p-4 rounded-lg bg-gradient-to-br from-teal-500/10 to-teal-600/10 border border-teal-500/20">
                <div class="flex items-center gap-3 mb-2">
                    <div class="w-10 h-10 rounded-lg bg-teal-500/20 flex items-center justify-center">
                        <i class="fas fa-church text-teal-500"></i>
                    </div>
                    <div>
                        <p class="text-2xl font-bold text-[var(--text-primary)]">{{ $systemAnalytics['services_count'] }}</p>
                        <p class="text-xs text-[var(--text-secondary)]">Services</p>
                    </div>
                </div>
            </div>

            <div class="p-4 rounded-lg bg-gradient-to-br from-orange-500/10 to-orange-600/10 border border-orange-500/20">
                <div class="flex items-center gap-3 mb-2">
                    <div class="w-10 h-10 rounded-lg bg-orange-500/20 flex items-center justify-center">
                        <i class="fas fa-layer-group text-orange-500"></i>
                    </div>
                    <div>
                        <p class="text-2xl font-bold text-[var(--text-primary)]">{{ $systemAnalytics['clusters_count'] }}</p>
                        <p class="text-xs text-[var(--text-secondary)]">Clusters</p>
                    </div>
                </div>
            </div>

            <div class="p-4 rounded-lg bg-gradient-to-br from-cyan-500/10 to-cyan-600/10 border border-cyan-500/20">
                <div class="flex items-center gap-3 mb-2">
                    <div class="w-10 h-10 rounded-lg bg-cyan-500/20 flex items-center justify-center">
                        <i class="fas fa-male text-cyan-500"></i>
                        <i class="fas fa-female text-pink-500 -ml-1"></i>
                    </div>
                    <div>
                        <p class="text-2xl font-bold text-[var(--text-primary)]">{{ $systemAnalytics['adult_members'] }}</p>
                        <p class="text-xs text-[var(--text-secondary)]">Adult Members</p>
                    </div>
                </div>
                <p class="text-xs text-[var(--text-secondary)]">{{ $systemAnalytics['minor_members'] }} minors</p>
            </div>


        </div>

        <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4 mt-4">
            <div class="p-4 rounded-lg bg-gradient-to-br from-rose-500/10 to-rose-600/10 border border-rose-500/20">
                <div class="flex items-center gap-3 mb-2">
                    <div class="w-10 h-10 rounded-lg bg-rose-500/20 flex items-center justify-center">
                        <i class="fas fa-exclamation-circle text-rose-500"></i>
                    </div>
                    <div>
                        <p class="text-2xl font-bold text-[var(--text-primary)]">{{ $systemAnalytics['pending_follow_ups'] }}</p>
                        <p class="text-xs text-[var(--text-secondary)]">Pending Follow-ups</p>
                    </div>
                </div>
                @if($systemAnalytics['overdue_follow_ups'] > 0)
                <p class="text-xs text-red-500 font-semibold">{{ $systemAnalytics['overdue_follow_ups'] }} overdue</p>
                @endif
            </div>

            <div class="p-4 rounded-lg bg-gradient-to-br from-amber-500/10 to-amber-600/10 border border-amber-500/20">
                <div class="flex items-center gap-3 mb-2">
                    <div class="w-10 h-10 rounded-lg bg-amber-500/20 flex items-center justify-center">
                        <i class="fas fa-clipboard-check text-amber-500"></i>
                    </div>
                    <div>
                        <p class="text-2xl font-bold text-[var(--text-primary)]">{{ round($systemAnalytics['avg_weekly_attendance']) }}</p>
                        <p class="text-xs text-[var(--text-secondary)]">Avg Weekly Attendance</p>
                    </div>
                </div>
            </div>

            <div class="p-4 rounded-lg bg-gradient-to-br from-green-500/10 to-green-600/10 border border-green-500/20">
                <div class="flex items-center gap-3 mb-2">
                    <div class="w-10 h-10 rounded-lg bg-green-500/20 flex items-center justify-center">
                        <i class="fas fa-hand-holding-usd text-green-500"></i>
                    </div>
                    <div>
                        <p class="text-2xl font-bold text-[var(--text-primary)]">{{ round($systemAnalytics['avg_donation']) }}</p>
                        <p class="text-xs text-[var(--text-secondary)]">Avg Donation (GH₵)</p>
                    </div>
                </div>
            </div>

            <div class="p-4 rounded-lg bg-gradient-to-br from-emerald-500/10 to-emerald-600/10 border border-emerald-500/20">
                <div class="flex items-center gap-3 mb-2">
                    <div class="w-10 h-10 rounded-lg bg-emerald-500/20 flex items-center justify-center">
                        <i class="fas fa-coins text-emerald-500"></i>
                    </div>
                    <div>
                        <p class="text-2xl font-bold text-[var(--text-primary)]">{{ round($systemAnalytics['avg_tithe']) }}</p>
                        <p class="text-xs text-[var(--text-secondary)]">Avg Tithe (GH₵)</p>
                    </div>
                </div>
            </div>

            <div class="p-4 rounded-lg bg-gradient-to-br from-gold-500/10 to-gold-600/10 border border-gold-500/20">
                <div class="flex items-center gap-3 mb-2">
                    <div class="w-10 h-10 rounded-lg bg-gold-500/20 flex items-center justify-center">
                        <i class="fas fa-hand-holding-heart text-gold-500"></i>
                    </div>
                    <div>
                        <p class="text-2xl font-bold text-[var(--text-primary)]">{{ $systemAnalytics['total_tithes'] }}</p>
                        <p class="text-xs text-[var(--text-secondary)]">Total Tithes Records</p>
                    </div>
                </div>
            </div>

            <div class="p-4 rounded-lg bg-gradient-to-br from-royal-500/10 to-royal-600/10 border border-royal-500/20">
                <div class="flex items-center gap-3 mb-2">
                    <div class="w-10 h-10 rounded-lg bg-royal-500/20 flex items-center justify-center">
                        <i class="fas fa-heart text-royal-500"></i>
                    </div>
                    <div>
                        <p class="text-2xl font-bold text-[var(--text-primary)]">{{ $systemAnalytics['total_welfare'] }}</p>
                        <p class="text-xs text-[var(--text-secondary)]">Total Welfare Records</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('inline_scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const chartColors = {
        green: '#22c55e',
        blue: '#3b82f6',
        gray: '#6b7280',
        yellow: '#eab308',
        purple: '#a855f7',
        red: '#ef4444',
        teal: '#14b8a6',
        emerald: '#10b981',
        rose: '#f43f5e',
        gold: '#f59e0b',
        cyan: '#06b6d4',
        indigo: '#6366f1',
        pink: '#ec4899',
        orange: '#f97316'
    };

    const attendanceTrendData = @json($attendanceTrends);
    const attendanceLabels = attendanceTrendData.map(d => d.month);
    const attendanceValues = attendanceTrendData.map(d => d.count);
    
    new Chart(document.getElementById('attendanceTrendChart'), {
        type: 'bar',
        data: {
            labels: attendanceLabels,
            datasets: [{
                label: 'Attendance',
                data: attendanceValues,
                backgroundColor: function(context) {
                    const chart = context.chart;
                    const ctx = chart.ctx;
                    const gradient = ctx.createLinearGradient(0, 0, 0, 200);
                    gradient.addColorStop(0, 'rgba(212, 175, 55, 0.9)');
                    gradient.addColorStop(1, 'rgba(212, 175, 55, 0.3)');
                    return gradient;
                },
                borderRadius: 8,
                borderSkipped: false,
                borderWidth: 0,
                barThickness: 40,
            }, {
                label: 'Trend Line',
                data: attendanceValues,
                type: 'line',
                borderColor: '#d4af37',
                borderWidth: 3,
                pointBackgroundColor: '#d4af37',
                pointBorderColor: '#fff',
                pointBorderWidth: 2,
                pointRadius: 6,
                pointHoverRadius: 8,
                fill: false,
                tension: 0.4,
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            interaction: {
                intersect: false,
                mode: 'index',
            },
            plugins: {
                legend: { display: false },
                tooltip: {
                    backgroundColor: 'rgba(26, 26, 46, 0.95)',
                    titleColor: '#f8f8f8',
                    bodyColor: '#a0a0b0',
                    borderColor: 'rgba(212, 175, 55, 0.3)',
                    borderWidth: 1,
                    padding: 12,
                    cornerRadius: 8,
                    displayColors: false,
                    callbacks: {
                        title: function(context) {
                            return context[0].label;
                        },
                        label: function(context) {
                            return 'Attendance: ' + context.raw.toLocaleString() + ' members';
                        }
                    }
                }
            },
            scales: {
                x: {
                    grid: { display: false },
                    ticks: {
                        color: '#6b7280',
                        font: { size: 12, weight: 500 }
                    }
                },
                y: {
                    beginAtZero: true,
                    grid: {
                        color: 'rgba(107, 114, 128, 0.1)',
                    },
                    ticks: {
                        color: '#6b7280',
                        font: { size: 12 },
                        stepSize: 10
                    }
                }
            },
            animation: {
                duration: 1500,
                easing: 'easeOutQuart'
            }
        }
    });

    const membershipData = @json($membershipBreakdown);
    const membershipLabels = Object.keys(membershipData).map(k => k.charAt(0).toUpperCase() + k.slice(1));
    const membershipValues = Object.values(membershipData);
    const membershipColors = Object.keys(membershipData).map(k => {
        const colorMap = {active: 'green', new: 'blue', inactive: 'gray', prospect: 'yellow', transferred: 'purple', deceased: 'red'};
        return chartColors[colorMap[k]] || chartColors.gray;
    });

    new Chart(document.getElementById('membershipPieChart'), {
        type: 'pie',
        data: {
            labels: membershipLabels,
            datasets: [{
                data: membershipValues,
                backgroundColor: membershipColors,
                borderWidth: 0
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: true,
            plugins: {
                legend: { display: false },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            const total = context.dataset.data.reduce((a, b) => a + b, 0);
                            const percentage = ((context.raw / total) * 100).toFixed(1);
                            return context.label + ': ' + context.raw + ' (' + percentage + '%)';
                        }
                    }
                }
            }
        }
    });

    const genderData = @json($genderBreakdown);
    new Chart(document.getElementById('genderPieChart'), {
        type: 'doughnut',
        data: {
            labels: ['Male', 'Female', 'Other'],
            datasets: [{
                data: [genderData.male, genderData.female, genderData.other],
                backgroundColor: [chartColors.blue, chartColors.pink, chartColors.purple],
                borderWidth: 0
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: true,
            cutout: '60%',
            plugins: {
                legend: { display: false },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            const total = context.dataset.data.reduce((a, b) => a + b, 0);
                            const percentage = total > 0 ? ((context.raw / total) * 100).toFixed(1) : 0;
                            return context.label + ': ' + context.raw + ' (' + percentage + '%)';
                        }
                    }
                }
            }
        }
    });

    const financialData = @json($financialBreakdown);
    new Chart(document.getElementById('financialPieChart'), {
        type: 'doughnut',
        data: {
            labels: ['Donations', 'Tithes', 'Welfare', 'Offerings', 'Expenses'],
            datasets: [{
                data: [financialData.donations, financialData.tithes, financialData.welfare, financialData.offerings, financialData.expenses],
                backgroundColor: [chartColors.teal, chartColors.emerald, chartColors.rose, chartColors.gold, chartColors.red],
                borderWidth: 0
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: true,
            cutout: '60%',
            plugins: {
                legend: { display: false },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            return context.label + ': GH₵' + Number(context.raw).toLocaleString();
                        }
                    }
                }
            }
        }
    });

    const financialTrendData = @json($financialTrends);
    const finTrendLabels = financialTrendData.map(d => d.month);
    const finIncomeData = financialTrendData.map(d => d.income);
    const finExpenseData = financialTrendData.map(d => d.expenses);
    const finNetData = financialTrendData.map(d => d.net_balance);

    new Chart(document.getElementById('financialTrendChart'), {
        type: 'line',
        data: {
            labels: finTrendLabels,
            datasets: [{
                label: 'Income',
                data: finIncomeData,
                borderColor: '#10b981',
                backgroundColor: 'rgba(16, 185, 129, 0.1)',
                fill: true,
                tension: 0.4,
                borderWidth: 3,
                pointBackgroundColor: '#10b981',
                pointBorderColor: '#fff',
                pointBorderWidth: 2,
                pointRadius: 5,
                pointHoverRadius: 7,
            }, {
                label: 'Expenses',
                data: finExpenseData,
                borderColor: '#ef4444',
                backgroundColor: 'rgba(239, 68, 68, 0.1)',
                fill: true,
                tension: 0.4,
                borderWidth: 3,
                pointBackgroundColor: '#ef4444',
                pointBorderColor: '#fff',
                pointBorderWidth: 2,
                pointRadius: 5,
                pointHoverRadius: 7,
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            interaction: {
                intersect: false,
                mode: 'index',
            },
            plugins: {
                legend: { display: false },
                tooltip: {
                    backgroundColor: 'rgba(26, 26, 46, 0.95)',
                    titleColor: '#f8f8f8',
                    bodyColor: '#a0a0b0',
                    borderColor: 'rgba(16, 185, 129, 0.3)',
                    borderWidth: 1,
                    padding: 12,
                    cornerRadius: 8,
                    displayColors: true,
                    callbacks: {
                        label: function(context) {
                            return context.dataset.label + ': GH₵' + Number(context.raw).toLocaleString();
                        },
                        afterBody: function(context) {
                            const idx = context[0].dataIndex;
                            const net = finNetData[idx];
                            return 'Net: ' + (net >= 0 ? '+' : '') + 'GH₵' + Number(net).toLocaleString();
                        }
                    }
                }
            },
            scales: {
                x: {
                    grid: { display: false },
                    ticks: {
                        color: '#6b7280',
                        font: { size: 12, weight: 500 }
                    }
                },
                y: {
                    beginAtZero: true,
                    grid: {
                        color: 'rgba(107, 114, 128, 0.1)',
                    },
                    ticks: {
                        color: '#6b7280',
                        font: { size: 12 },
                        callback: function(value) {
                            return 'GH₵' + Number(value).toLocaleString();
                        }
                    }
                }
            },
            animation: {
                duration: 1500,
                easing: 'easeOutQuart'
            }
        }
    });
});
</script>
@endsection