@extends('layouts.admin')
@section('title', 'Super Admin - Multi-Branch Monitoring')
@section('page-title', 'Multi-Branch Monitoring')
@section('page-subtitle', 'Monitor all church branches from a single dashboard')

@section('content')
<div class="space-y-6">
    <div class="flex items-center justify-between">
        <div>
            <h2 class="text-2xl font-cinzel font-bold text-[var(--text-primary)]">Organization Overview</h2>
            <p class="text-sm text-[var(--text-secondary)]">Real-time monitoring of all branches</p>
        </div>
        <a href="{{ route('admin.superadmin.compare') }}" class="btn-royal px-4 py-2 rounded-lg text-white flex items-center gap-2">
            <i class="fas fa-balance-scale"></i> Compare Branches
        </a>
    </div>

    <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
        <div class="stat-card rounded-xl p-5 bg-gradient-to-br from-blue-500/10 to-blue-600/10 border border-blue-500/20">
            <div class="flex items-center gap-3">
                <div class="w-12 h-12 rounded-lg bg-blue-500/20 flex items-center justify-center">
                    <i class="fas fa-church text-blue-500 text-xl"></i>
                </div>
                <div>
                    <p class="text-3xl font-bold text-[var(--text-primary)]">{{ $stats['total_churches'] }}</p>
                    <p class="text-xs text-[var(--text-secondary)]">Total Branches</p>
                </div>
            </div>
        </div>

        <div class="stat-card rounded-xl p-5 bg-gradient-to-br from-green-500/10 to-green-600/10 border border-green-500/20">
            <div class="flex items-center gap-3">
                <div class="w-12 h-12 rounded-lg bg-green-500/20 flex items-center justify-center">
                    <i class="fas fa-users text-green-500 text-xl"></i>
                </div>
                <div>
                    <p class="text-3xl font-bold text-[var(--text-primary)]">{{ number_format($stats['total_members']) }}</p>
                    <p class="text-xs text-[var(--text-secondary)]">Total Members</p>
                </div>
            </div>
        </div>

        <div class="stat-card rounded-xl p-5 bg-gradient-to-br from-purple-500/10 to-purple-600/10 border border-purple-500/20">
            <div class="flex items-center gap-3">
                <div class="w-12 h-12 rounded-lg bg-purple-500/20 flex items-center justify-center">
                    <i class="fas fa-user-cog text-purple-500 text-xl"></i>
                </div>
                <div>
                    <p class="text-3xl font-bold text-[var(--text-primary)]">{{ $stats['total_users'] }}</p>
                    <p class="text-xs text-[var(--text-secondary)]">System Users</p>
                </div>
            </div>
        </div>

        <div class="stat-card rounded-xl p-5 bg-gradient-to-br from-gold-500/10 to-gold-600/10 border border-gold-500/20">
            <div class="flex items-center gap-3">
                <div class="w-12 h-12 rounded-lg bg-gold-500/20 flex items-center justify-center">
                    <i class="fas fa-hand-holding-usd text-gold-500 text-xl"></i>
                </div>
                <div>
                    <p class="text-2xl font-bold text-[var(--text-primary)]">GH₵{{ number_format($stats['total_donations'] + $stats['total_tithes'] + $stats['total_welfare'] + $stats['total_offerings'], 0) }}</p>
                    <p class="text-xs text-[var(--text-secondary)]">Total Income</p>
                </div>
            </div>
        </div>

        <div class="stat-card rounded-xl p-5 bg-gradient-to-br from-red-500/10 to-red-600/10 border border-red-500/20">
            <div class="flex items-center gap-3">
                <div class="w-12 h-12 rounded-lg bg-red-500/20 flex items-center justify-center">
                    <i class="fas fa-receipt text-red-500 text-xl"></i>
                </div>
                <div>
                    <p class="text-2xl font-bold text-[var(--text-primary)]">GH₵{{ number_format($stats['total_expenses'], 0) }}</p>
                    <p class="text-xs text-[var(--text-secondary)]">Total Expenses</p>
                </div>
            </div>
        </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">
                <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)]">
                    <i class="fas fa-chart-line mr-2 text-gold-500"></i> Financial Trends (All Branches)
                </h3>
                <span class="text-xs text-[var(--text-secondary)]">Last 6 months</span>
            </div>
            <div class="relative" style="height: 250px;">
                <canvas id="financialTrendsChart"></canvas>
            </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> Recent Activity
            </h3>
            <div class="space-y-3 max-h-64 overflow-y-auto">
                @forelse($recentActivity as $activity)
                    <div class="flex items-start gap-3 p-3 rounded-lg bg-[var(--bg-secondary)]">
                        <div class="w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0
                            {{ $activity['type'] === 'donation' ? 'bg-green-500/20 text-green-500' : '' }}
                            {{ $activity['type'] === 'expense' ? 'bg-red-500/20 text-red-500' : '' }}
                            {{ $activity['type'] === 'member' ? 'bg-blue-500/20 text-blue-500' : '' }}">
                            @if($activity['type'] === 'donation')
                                <i class="fas fa-hand-holding-usd text-sm"></i>
                            @elseif($activity['type'] === 'expense')
                                <i class="fas fa-receipt text-sm"></i>
                            @else
                                <i class="fas fa-user-plus text-sm"></i>
                            @endif
                        </div>
                        <div class="flex-1 min-w-0">
                            <p class="text-sm text-[var(--text-primary)] truncate">{{ $activity['description'] }}</p>
                            <p class="text-xs text-[var(--text-secondary)]">{{ $activity['church'] }}</p>
                        </div>
                        @if($activity['amount'])
                            <span class="text-xs font-semibold {{ $activity['type'] === 'donation' ? 'text-green-500' : 'text-red-500' }}">
                                GH₵{{ number_format($activity['amount'], 0) }}
                            </span>
                        @endif
                    </div>
                @empty
                    <p class="text-center text-[var(--text-secondary)] py-4">No recent activity</p>
                @endforelse
            </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-building mr-2 text-gold-500"></i> Branch Overview
            </h3>
        </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)]">Branch</th>
                        <th class="text-center py-3 px-4 text-sm font-medium text-[var(--text-secondary)]">Members</th>
                        <th class="text-center py-3 px-4 text-sm font-medium text-[var(--text-secondary)]">Users</th>
                        <th class="text-right py-3 px-4 text-sm font-medium text-[var(--text-secondary)]">Total Income</th>
                        <th class="text-right py-3 px-4 text-sm font-medium text-[var(--text-secondary)]">Total Expenses</th>
                        <th class="text-right py-3 px-4 text-sm font-medium text-[var(--text-secondary)]">Net Balance</th>
                        <th class="text-center py-3 px-4 text-sm font-medium text-[var(--text-secondary)]">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($churchStats as $church)
                        <tr class="border-b border-[var(--border-color)] hover:bg-[var(--bg-secondary)]">
                            <td class="py-4 px-4">
                                <div class="flex items-center gap-3">
                                    <div class="w-10 h-10 rounded-lg bg-gold-500/20 flex items-center justify-center">
                                        <i class="fas fa-church text-gold-500"></i>
                                    </div>
                                    <div>
                                        <p class="font-medium text-[var(--text-primary)]">{{ $church->name }}</p>
                                        <p class="text-xs text-[var(--text-secondary)]">{{ $church->location ?? 'No location' }}</p>
                                    </div>
                                </div>
                            </td>
                            <td class="py-4 px-4 text-center text-[var(--text-primary)]">{{ number_format($church->members_count ?? 0) }}</td>
                            <td class="py-4 px-4 text-center text-[var(--text-primary)]">{{ $church->users_count ?? 0 }}</td>
                            <td class="py-4 px-4 text-right text-green-500 font-semibold">GH₵{{ number_format($church->total_income ?? 0, 2) }}</td>
                            <td class="py-4 px-4 text-right text-red-500 font-semibold">GH₵{{ number_format($church->total_expenses ?? 0, 2) }}</td>
                            <td class="py-4 px-4 text-right font-semibold {{ ($church->total_income - ($church->total_expenses ?? 0)) >= 0 ? 'text-green-500' : 'text-red-500' }}">
                                GH₵{{ number_format(($church->total_income ?? 0) - ($church->total_expenses ?? 0), 2) }}
                            </td>
                            <td class="py-4 px-4 text-center">
                                <a href="{{ route('admin.superadmin.church', $church->id) }}" class="inline-flex items-center gap-1 px-3 py-1.5 rounded-lg bg-gold-500/10 text-gold-500 hover:bg-gold-500/20 text-sm">
                                    <i class="fas fa-eye"></i> View
                                </a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </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-bar mr-2 text-gold-500"></i> Branch Comparison Trends
            </h3>
            <span class="text-xs text-[var(--text-secondary)]">Income vs Expenses by Branch</span>
        </div>
        
        <div class="grid grid-cols-1 lg:grid-cols-4 gap-4 mb-6">
            @foreach($branchTrends['churches'] as $index => $church)
                <div class="flex items-center gap-3 p-3 rounded-lg bg-[var(--bg-secondary)]">
                    <div class="w-3 h-3 rounded-full" style="background-color: {{ $church['color'] }}"></div>
                    <span class="text-sm text-[var(--text-primary)] truncate">{{ $church['name'] }}</span>
                </div>
            @endforeach
        </div>
        
        <div class="relative" style="height: 350px;">
            <canvas id="branchComparisonChart"></canvas>
        </div>
        
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-6 pt-6 border-t border-[var(--border-color)]">
            @foreach($branchTrends['churches'] as $church)
                @php
                    $totalIncome = array_sum($church['income']);
                    $totalExpenses = array_sum($church['expenses']);
                    $net = $totalIncome - $totalExpenses;
                @endphp
                <div class="text-center p-4 rounded-lg bg-gradient-to-br from-[var(--bg-secondary)] to-transparent">
                    <div class="w-3 h-3 rounded-full mx-auto mb-2" style="background-color: {{ $church['color'] }}"></div>
                    <p class="text-xs text-[var(--text-secondary)] mb-1">{{ $church['name'] }}</p>
                    <p class="text-lg font-bold text-green-500">GH₵{{ number_format($totalIncome, 0) }}</p>
                    <p class="text-xs text-red-500">Exp: GH₵{{ number_format($totalExpenses, 0) }}</p>
                </div>
            @endforeach
        </div>
    </div>
</div>
@endsection

@section('inline_scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const trendsData = @json($monthlyTrends);
    const labels = trendsData.map(d => d.month);
    
    const donations = trendsData.map(d => d.donations + d.tithes + d.welfare + d.offerings);
    const expenses = trendsData.map(d => d.expenses);
    
    new Chart(document.getElementById('financialTrendsChart'), {
        type: 'line',
        data: {
            labels: labels,
            datasets: [{
                label: 'Income',
                data: donations,
                borderColor: '#22c55e',
                backgroundColor: 'rgba(34, 197, 94, 0.1)',
                fill: true,
                tension: 0.4,
                borderWidth: 3,
                pointBackgroundColor: '#22c55e',
                pointBorderColor: '#fff',
                pointBorderWidth: 2,
                pointRadius: 5,
            }, {
                label: 'Expenses',
                data: expenses,
                borderColor: '#ef4444',
                backgroundColor: 'rgba(239, 68, 68, 0.1)',
                fill: true,
                tension: 0.4,
                borderWidth: 3,
                pointBackgroundColor: '#ef4444',
                pointBorderColor: '#fff',
                pointBorderWidth: 2,
                pointRadius: 5,
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: true,
                    position: 'top',
                    labels: {
                        color: '#6b7280',
                        usePointStyle: true,
                        padding: 20,
                    }
                },
                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,
                    callbacks: {
                        label: function(context) {
                            return context.dataset.label + ': GH₵' + Number(context.raw).toLocaleString();
                        }
                    }
                }
            },
            scales: {
                x: {
                    grid: { display: false },
                    ticks: { color: '#6b7280' }
                },
                y: {
                    beginAtZero: true,
                    grid: { color: 'rgba(107, 114, 128, 0.1)' },
                    ticks: {
                        color: '#6b7280',
                        callback: function(value) {
                            return 'GH₵' + value.toLocaleString();
                        }
                    }
                }
            }
        }
    });

    const branchTrendsData = @json($branchTrends);
    const branchLabels = branchTrendsData.labels;
    const branchChurches = branchTrendsData.churches;

    const branchDatasets = [];
    branchChurches.forEach((church, idx) => {
        branchDatasets.push({
            label: church.name + ' - Income',
            data: church.income,
            borderColor: church.color,
            backgroundColor: 'transparent',
            tension: 0.4,
            borderWidth: 2,
            pointRadius: 4,
            pointHoverRadius: 6,
        });
    });

    new Chart(document.getElementById('branchComparisonChart'), {
        type: 'line',
        data: {
            labels: branchLabels,
            datasets: branchDatasets
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            interaction: {
                mode: 'index',
                intersect: false,
            },
            plugins: {
                legend: {
                    display: true,
                    position: 'top',
                    labels: {
                        color: '#6b7280',
                        usePointStyle: true,
                        padding: 15,
                        filter: function(legendItem) {
                            return legendItem.text.includes('Income');
                        }
                    }
                },
                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,
                    callbacks: {
                        label: function(context) {
                            return context.dataset.label + ': GH₵' + Number(context.raw).toLocaleString();
                        }
                    }
                }
            },
            scales: {
                x: {
                    grid: { display: false },
                    ticks: { color: '#6b7280', font: { size: 11 } }
                },
                y: {
                    beginAtZero: true,
                    grid: { color: 'rgba(107, 114, 128, 0.1)' },
                    ticks: {
                        color: '#6b7280',
                        callback: function(value) {
                            return 'GH₵' + value.toLocaleString();
                        }
                    }
                }
            }
        }
    });
});
</script>
@endsection