@extends('layouts.admin')
@section('title', 'Fundraisers')
@section('page-title', 'Fundraisers')
@section('page-subtitle', 'Manage fundraising campaigns')

@section('content')
<div class="space-y-6">
    <div class="grid grid-cols-1 md:grid-cols-5 gap-6">
        <div class="card-royal p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-[var(--text-secondary)]">Total Raised</p>
                    <p class="text-2xl font-bold font-cinzel text-[var(--text-primary)]">{{ church_setting('currency_symbol', 'GH₵') }}{{ number_format($stats['total_raised'] ?? 0, 2) }}</p>
                </div>
                <div class="w-12 h-12 rounded-full bg-green-500/20 flex items-center justify-center">
                    <i class="fas fa-coins text-green-500 text-xl"></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)]">Active Campaigns</p>
                    <p class="text-2xl font-bold font-cinzel text-[var(--text-primary)]">{{ $stats['active_fundraisers'] ?? 0 }}</p>
                </div>
                <div class="w-12 h-12 rounded-full bg-gold-500/20 flex items-center justify-center">
                    <i class="fas fa-bullhorn text-gold-500 text-xl"></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 Donors</p>
                    <p class="text-2xl font-bold font-cinzel text-[var(--text-primary)]">{{ $stats['total_donors'] ?? 0 }}</p>
                </div>
                <div class="w-12 h-12 rounded-full bg-blue-500/20 flex items-center justify-center">
                    <i class="fas fa-users text-blue-500 text-xl"></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 Donations</p>
                    <p class="text-2xl font-bold font-cinzel text-[var(--text-primary)]">{{ $stats['total_donations'] ?? 0 }}</p>
                </div>
                <div class="w-12 h-12 rounded-full bg-purple-500/20 flex items-center justify-center">
                    <i class="fas fa-hand-holding-heart text-purple-500 text-xl"></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)]">Campaigns</p>
                    <p class="text-2xl font-bold font-cinzel text-[var(--text-primary)]">{{ $stats['total_fundraisers'] ?? 0 }}</p>
                </div>
                <div class="w-12 h-12 rounded-full bg-royal-500/20 flex items-center justify-center">
                    <i class="fas fa-folder-open text-royal-500 text-xl"></i>
                </div>
            </div>
        </div>
    </div>

    <div class="card-royal p-6">
        <div class="flex justify-between items-center mb-6">
            <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)]">
                <i class="fas fa-bullhorn mr-2 text-gold-500"></i> Fundraising Campaigns
            </h3>
            <a href="{{ route('admin.finance.fundraisers.create') }}" class="btn-royal px-4 py-2 rounded-lg text-white">
                <i class="fas fa-plus mr-2"></i> New Campaign
            </a>
        </div>
        
        <div class="mb-6">
            <form action="{{ route('admin.finance.fundraisers.index') }}" method="GET" class="flex flex-wrap gap-4">
                <input type="text" name="search" value="{{ $filters['search'] ?? '' }}" placeholder="Search campaigns..." 
                    class="px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)] flex-1 min-w-[200px]">
                <select name="status" class="px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">
                    <option value="">All Status</option>
                    <option value="draft" {{ ($filters['status'] ?? '') == 'draft' ? 'selected' : '' }}>Draft</option>
                    <option value="active" {{ ($filters['status'] ?? '') == 'active' ? 'selected' : '' }}>Active</option>
                    <option value="completed" {{ ($filters['status'] ?? '') == 'completed' ? 'selected' : '' }}>Completed</option>
                    <option value="cancelled" {{ ($filters['status'] ?? '') == 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                </select>
                <select name="type" class="px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">
                    <option value="">All Types</option>
                    <option value="general" {{ ($filters['type'] ?? '') == 'general' ? 'selected' : '' }}>General</option>
                    <option value="building" {{ ($filters['type'] ?? '') == 'building' ? 'selected' : '' }}>Building</option>
                    <option value="mission" {{ ($filters['type'] ?? '') == 'mission' ? 'selected' : '' }}>Mission</option>
                    <option value="charity" {{ ($filters['type'] ?? '') == 'charity' ? 'selected' : '' }}>Charity</option>
                    <option value="equipment" {{ ($filters['type'] ?? '') == 'equipment' ? 'selected' : '' }}>Equipment</option>
                </select>
                <button type="submit" class="btn-royal px-4 py-2 rounded-lg text-white">
                    <i class="fas fa-search mr-2"></i> Filter
                </button>
            </form>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            @forelse($fundraisers as $fundraiser)
                <div class="border border-[var(--border-color)] rounded-xl overflow-hidden hover:shadow-lg transition-shadow">
                    <div class="p-4 bg-gradient-to-r from-gold-500/10 to-royal-500/10">
                        <div class="flex justify-between items-start mb-2">
                            <span class="px-2 py-1 text-xs font-semibold rounded 
                                @if($fundraiser->status === 'active') bg-green-100 text-green-700
                                @elseif($fundraiser->status === 'completed') bg-blue-100 text-blue-700
                                @elseif($fundraiser->status === 'cancelled') bg-red-100 text-red-700
                                @else bg-gray-100 text-gray-700 @endif">
                                {{ ucfirst($fundraiser->status) }}
                            </span>
                            <span class="px-2 py-1 text-xs font-semibold rounded bg-gray-100 text-gray-700 capitalize">
                                {{ $fundraiser->type }}
                            </span>
                        </div>
                        <h4 class="font-cinzel font-semibold text-lg text-[var(--text-primary)]">{{ $fundraiser->title }}</h4>
                    </div>
                    
                    <div class="p-4">
                        <div class="mb-4">
                            <div class="flex justify-between text-sm mb-1">
                                <span class="text-[var(--text-secondary)]">Progress</span>
                                <span class="font-semibold text-[var(--text-primary)]">{{ $fundraiser->progress_percentage }}%</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2">
                                <div class="bg-gold-500 h-2 rounded-full transition-all" style="width: {{ $fundraiser->progress_percentage }}%"></div>
                            </div>
                        </div>
                        
                        <div class="flex justify-between text-sm mb-4">
                            <div>
                                <p class="text-[var(--text-secondary)]">Raised</p>
                                <p class="font-bold text-green-600">{{ church_setting('currency_symbol', 'GH₵') }}{{ number_format($fundraiser->raised_amount, 2) }}</p>
                            </div>
                            <div class="text-right">
                                <p class="text-[var(--text-secondary)]">Target</p>
                                <p class="font-bold text-[var(--text-primary)]">{{ church_setting('currency_symbol', 'GH₵') }}{{ number_format($fundraiser->target_amount, 2) }}</p>
                            </div>
                        </div>
                        
                        <div class="flex justify-between text-xs text-[var(--text-secondary)] mb-4">
                            <span><i class="fas fa-users mr-1"></i> {{ $fundraiser->donor_count }} donors</span>
                            @if($fundraiser->end_date)
                                <span><i class="fas fa-calendar mr-1"></i> Ends {{ $fundraiser->end_date->format('M j, Y') }}</span>
                            @endif
                        </div>
                        
                        <div class="flex gap-2">
                            <a href="{{ route('admin.finance.fundraisers.show', $fundraiser->id) }}" class="flex-1 text-center px-3 py-2 bg-gold-500 text-white rounded-lg hover:bg-gold-600 transition-colors text-sm">
                                <i class="fas fa-eye mr-1"></i> View
                            </a>
                            <a href="{{ route('admin.finance.fundraisers.edit', $fundraiser->id) }}" class="px-3 py-2 border border-[var(--border-color)] rounded-lg hover:bg-[var(--bg-secondary)] transition-colors text-sm">
                                <i class="fas fa-edit"></i>
                            </a>
                        </div>
                    </div>
                </div>
            @empty
                <div class="col-span-3 text-center py-12">
                    <i class="fas fa-bullhorn text-6xl text-gray-300 mb-4"></i>
                    <p class="text-[var(--text-secondary)]">No fundraising campaigns found.</p>
                    <a href="{{ route('admin.finance.fundraisers.create') }}" class="inline-block mt-4 text-gold-500 hover:text-gold-600">
                        Create your first campaign <i class="fas fa-arrow-right ml-1"></i>
                    </a>
                </div>
            @endforelse
        </div>
        
        <div class="mt-6">
            {{ $fundraisers->links() }}
        </div>
    </div>
</div>
@endsection