@extends('layouts.admin')
@section('title', 'Reports')
@section('page-title', 'Reports & Analytics')
@section('page-subtitle', 'Generate and view system reports')

@section('content')
<div class="space-y-6">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <a href="{{ route('admin.reports.attendance') }}" class="card-royal p-6 hover:border-gold-500 transition-all group">
            <div class="flex items-center gap-4 mb-4">
                <div class="w-14 h-14 rounded-xl bg-blue-500/20 flex items-center justify-center">
                    <i class="fas fa-clipboard-check text-blue-500 text-2xl"></i>
                </div>
                <div>
                    <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)] group-hover:text-gold-500">Attendance Report</h3>
                    <p class="text-sm text-[var(--text-secondary)]">Track service attendance</p>
                </div>
            </div>
            <p class="text-sm text-[var(--text-secondary)]">View detailed attendance records, trends, and statistics across all services.</p>
        </a>
        
        <a href="{{ route('admin.reports.members') }}" class="card-royal p-6 hover:border-gold-500 transition-all group">
            <div class="flex items-center gap-4 mb-4">
                <div class="w-14 h-14 rounded-xl bg-green-500/20 flex items-center justify-center">
                    <i class="fas fa-users text-green-500 text-2xl"></i>
                </div>
                <div>
                    <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)] group-hover:text-gold-500">Members Report</h3>
                    <p class="text-sm text-[var(--text-secondary)]">Member statistics</p>
                </div>
            </div>
            <p class="text-sm text-[var(--text-secondary)]">Analyze membership demographics, growth trends, and status breakdown.</p>
        </a>
        
        <a href="{{ route('admin.reports.finance') }}" class="card-royal p-6 hover:border-gold-500 transition-all group">
            <div class="flex items-center gap-4 mb-4">
                <div class="w-14 h-14 rounded-xl bg-gold-500/20 flex items-center justify-center">
                    <i class="fas fa-chart-line text-gold-500 text-2xl"></i>
                </div>
                <div>
                    <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)] group-hover:text-gold-500">Finance Report</h3>
                    <p class="text-sm text-[var(--text-secondary)]">Financial statements</p>
                </div>
            </div>
            <p class="text-sm text-[var(--text-secondary)]">Generate comprehensive financial reports including donations, expenses, and budgets.</p>
        </a>
        
        <a href="{{ route('admin.reports.offerings') }}" class="card-royal p-6 hover:border-gold-500 transition-all group">
            <div class="flex items-center gap-4 mb-4">
                <div class="w-14 h-14 rounded-xl bg-amber-500/20 flex items-center justify-center">
                    <i class="fas fa-coins text-amber-500 text-2xl"></i>
                </div>
                <div>
                    <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)] group-hover:text-gold-500">Offerings Report</h3>
                    <p class="text-sm text-[var(--text-secondary)]">Church offerings</p>
                </div>
            </div>
            <p class="text-sm text-[var(--text-secondary)]">Track and analyze church offerings by service, type, and collection method.</p>
        </a>
        
        <a href="{{ route('admin.reports.donations') }}" class="card-royal p-6 hover:border-gold-500 transition-all group">
            <div class="flex items-center gap-4 mb-4">
                <div class="w-14 h-14 rounded-xl bg-teal-500/20 flex items-center justify-center">
                    <i class="fas fa-hand-holding-usd text-teal-500 text-2xl"></i>
                </div>
                <div>
                    <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)] group-hover:text-gold-500">Donations Report</h3>
                    <p class="text-sm text-[var(--text-secondary)]">Member donations</p>
                </div>
            </div>
            <p class="text-sm text-[var(--text-secondary)]">View and analyze member donations, campaigns, and giving trends.</p>
        </a>
        
        <a href="{{ route('admin.reports.tithes') }}" class="card-royal p-6 hover:border-gold-500 transition-all group">
            <div class="flex items-center gap-4 mb-4">
                <div class="w-14 h-14 rounded-xl bg-emerald-500/20 flex items-center justify-center">
                    <i class="fas fa-book-open text-emerald-500 text-2xl"></i>
                </div>
                <div>
                    <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)] group-hover:text-gold-500">Tithes Report</h3>
                    <p class="text-sm text-[var(--text-secondary)]">Tithes & welfare</p>
                </div>
            </div>
            <p class="text-sm text-[var(--text-secondary)]">Track tithes payments, member contributions, and monthly trends.</p>
        </a>
        
        <a href="{{ route('admin.reports.welfare') }}" class="card-royal p-6 hover:border-gold-500 transition-all group">
            <div class="flex items-center gap-4 mb-4">
                <div class="w-14 h-14 rounded-xl bg-rose-500/20 flex items-center justify-center">
                    <i class="fas fa-heart text-rose-500 text-2xl"></i>
                </div>
                <div>
                    <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)] group-hover:text-gold-500">Welfare Report</h3>
                    <p class="text-sm text-[var(--text-secondary)]">Welfare contributions</p>
                </div>
            </div>
            <p class="text-sm text-[var(--text-secondary)]">Analyze welfare contributions, arrears, and member participation.</p>
        </a>
        
        <a href="{{ route('admin.reports.audit-log') }}" class="card-royal p-6 hover:border-gold-500 transition-all group">
            <div class="flex items-center gap-4 mb-4">
                <div class="w-14 h-14 rounded-xl bg-purple-500/20 flex items-center justify-center">
                    <i class="fas fa-history text-purple-500 text-2xl"></i>
                </div>
                <div>
                    <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)] group-hover:text-gold-500">Audit Log</h3>
                    <p class="text-sm text-[var(--text-secondary)]">Activity history</p>
                </div>
            </div>
            <p class="text-sm text-[var(--text-secondary)]">Track user activities, system changes, and security events.</p>
        </a>
    </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-download mr-2 text-gold-500"></i> Export Data
        </h3>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            <a href="{{ route('admin.reports.export.members') }}" class="p-4 border border-[var(--border-color)] rounded-lg hover:bg-[var(--bg-secondary)] transition-colors text-center">
                <i class="fas fa-file-csv text-2xl text-green-500 mb-2"></i>
                <p class="text-[var(--text-primary)] font-medium">Export Members</p>
                <p class="text-xs text-[var(--text-secondary)]">Download as CSV</p>
            </a>
            
            <a href="{{ route('admin.reports.export.attendance') }}" class="p-4 border border-[var(--border-color)] rounded-lg hover:bg-[var(--bg-secondary)] transition-colors text-center">
                <i class="fas fa-file-csv text-2xl text-blue-500 mb-2"></i>
                <p class="text-[var(--text-primary)] font-medium">Export Attendance</p>
                <p class="text-xs text-[var(--text-secondary)]">Download as CSV</p>
            </a>
            
            <a href="{{ route('admin.reports.export.finance') }}" class="p-4 border border-[var(--border-color)] rounded-lg hover:bg-[var(--bg-secondary)] transition-colors text-center">
                <i class="fas fa-file-csv text-2xl text-gold-500 mb-2"></i>
                <p class="text-[var(--text-primary)] font-medium">Export Finance</p>
                <p class="text-xs text-[var(--text-secondary)]">Download as CSV</p>
            </a>
            
            <a href="{{ route('admin.reports.export.offerings') }}" class="p-4 border border-[var(--border-color)] rounded-lg hover:bg-[var(--bg-secondary)] transition-colors text-center">
                <i class="fas fa-file-csv text-2xl text-amber-500 mb-2"></i>
                <p class="text-[var(--text-primary)] font-medium">Export Offerings</p>
                <p class="text-xs text-[var(--text-secondary)]">Download as CSV</p>
            </a>
            
            <a href="{{ route('admin.reports.export.tithes') }}" class="p-4 border border-[var(--border-color)] rounded-lg hover:bg-[var(--bg-secondary)] transition-colors text-center">
                <i class="fas fa-file-csv text-2xl text-emerald-500 mb-2"></i>
                <p class="text-[var(--text-primary)] font-medium">Export Tithes</p>
                <p class="text-xs text-[var(--text-secondary)]">Download as CSV</p>
            </a>
            
            <a href="{{ route('admin.reports.export.welfare') }}" class="p-4 border border-[var(--border-color)] rounded-lg hover:bg-[var(--bg-secondary)] transition-colors text-center">
                <i class="fas fa-file-csv text-2xl text-rose-500 mb-2"></i>
                <p class="text-[var(--text-primary)] font-medium">Export Welfare</p>
                <p class="text-xs text-[var(--text-secondary)]">Download as CSV</p>
            </a>
        </div>
    </div>
</div>
@endsection