@extends('layouts.admin')
@section('title', $fundraiser->title)
@section('page-title', $fundraiser->title)
@section('page-subtitle', 'Campaign details and donations')

@section('content')
<div class="space-y-6">
    @if(session('success'))
    <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded">
        {{ session('success') }}
    </div>
    @endif

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div class="lg:col-span-2">
            <div class="card-royal p-6">
                <div class="flex justify-between items-start mb-6">
                    <div>
                        <span class="px-3 py-1 text-sm 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="ml-2 px-3 py-1 text-sm font-semibold rounded bg-gray-100 text-gray-700 capitalize">
                            {{ $fundraiser->type }}
                        </span>
                    </div>
                    <div class="flex gap-2">
                        @if($fundraiser->status === 'draft')
                            <form action="{{ route('admin.finance.fundraisers.activate', $fundraiser->id) }}" method="POST">
                                @csrf
                                <button type="submit" class="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600">
                                    <i class="fas fa-play mr-1"></i> Activate
                                </button>
                            </form>
                        @elseif($fundraiser->status === 'active')
                            <form action="{{ route('admin.finance.fundraisers.complete', $fundraiser->id) }}" method="POST">
                                @csrf
                                <button type="submit" class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600">
                                    <i class="fas fa-check mr-1"></i> Complete
                                </button>
                            </form>
                            <form action="{{ route('admin.finance.fundraisers.cancel', $fundraiser->id) }}" method="POST">
                                @csrf
                                <button type="submit" class="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600">
                                    <i class="fas fa-times mr-1"></i> Cancel
                                </button>
                            </form>
                        @endif
                    </div>
                </div>
                
                <h2 class="font-cinzel text-2xl font-bold text-[var(--text-primary)] mb-4">{{ $fundraiser->title }}</h2>
                
                @if($fundraiser->description)
                    <p class="text-[var(--text-secondary)] mb-6">{{ $fundraiser->description }}</p>
                @endif
                
                <div class="mb-6">
                    <div class="flex justify-between text-sm mb-2">
                        <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-4">
                        <div class="bg-gradient-to-r from-gold-500 to-green-500 h-4 rounded-full transition-all" style="width: {{ $fundraiser->progress_percentage }}%"></div>
                    </div>
                </div>
                
                <div class="grid grid-cols-3 gap-4 mb-6">
                    <div class="text-center p-4 bg-green-50 rounded-lg">
                        <p class="text-2xl font-bold text-green-600">{{ church_setting('currency_symbol', 'GH₵') }}{{ number_format($fundraiser->raised_amount, 2) }}</p>
                        <p class="text-sm text-[var(--text-secondary)]">Raised</p>
                    </div>
                    <div class="text-center p-4 bg-gray-50 rounded-lg">
                        <p class="text-2xl font-bold text-[var(--text-primary)]">{{ church_setting('currency_symbol', 'GH₵') }}{{ number_format($fundraiser->target_amount, 2) }}</p>
                        <p class="text-sm text-[var(--text-secondary)]">Target</p>
                    </div>
                    <div class="text-center p-4 bg-red-50 rounded-lg">
                        <p class="text-2xl font-bold text-red-600">{{ church_setting('currency_symbol', 'GH₵') }}{{ number_format($fundraiser->remaining_amount, 2) }}</p>
                        <p class="text-sm text-[var(--text-secondary)]">Remaining</p>
                    </div>
                </div>
                
                <div class="flex justify-between items-center text-sm text-[var(--text-secondary)]">
                    <span><i class="fas fa-users mr-1"></i> {{ $fundraiser->donor_count }} donors</span>
                    @if($fundraiser->start_date)
                        <span><i class="fas fa-calendar mr-1"></i> {{ $fundraiser->start_date->format('M j, Y') }}</span>
                    @endif
                    @if($fundraiser->end_date)
                        <span><i class="fas fa-flag-checkered mr-1"></i> Ends {{ $fundraiser->end_date->format('M j, Y') }}</span>
                    @endif
                </div>
            </div>
            
            <div class="card-royal p-6 mt-6">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)]">
                        <i class="fas fa-list mr-2 text-gold-500"></i> Recent Donations
                    </h3>
                    <a href="{{ route('admin.finance.fundraisers.donate', $fundraiser->id) }}" class="btn-royal px-4 py-2 rounded-lg text-white text-sm">
                        <i class="fas fa-plus mr-1"></i> Add Donation
                    </a>
                </div>
                
                <div class="space-y-3">
                    @forelse($fundraiser->donations->take(10) as $donation)
                        <div class="flex items-center justify-between p-3 bg-[var(--bg-secondary)] rounded-lg">
                            <div class="flex items-center gap-3">
                                <div class="w-10 h-10 rounded-full bg-gradient-to-br from-gold-500 to-royal-600 flex items-center justify-center text-white font-bold">
                                    {{ $donation->is_anonymous ? '?' : substr($donation->member?->full_name ?? $donation->donor_name ?? 'N', 0, 1) }}
                                </div>
                                <div>
                                    <p class="font-medium text-[var(--text-primary)]">
                                        {{ $donation->is_anonymous ? 'Anonymous' : ($donation->member?->full_name ?? $donation->donor_name ?? 'N/A') }}
                                    </p>
                                    <p class="text-xs text-[var(--text-secondary)]">
                                        {{ $donation->created_at->format('M j, Y g:i A') }} • {{ ucfirst($donation->payment_method) }}
                                    </p>
                                </div>
                            </div>
                            <div class="text-right">
                                <p class="font-bold text-green-600">{{ church_setting('currency_symbol', 'GH₵') }}{{ number_format($donation->amount, 2) }}</p>
                                <form action="{{ route('admin.finance.fundraisers.donation.delete', $donation->id) }}" method="POST" class="inline">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="text-red-500 text-xs hover:text-red-700" onclick="return confirm('Delete this donation?')">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </form>
                            </div>
                        </div>
                    @empty
                        <p class="text-center text-[var(--text-secondary)] py-8">No donations yet. Be the first to contribute!</p>
                    @endforelse
                </div>
            </div>
        </div>
        
        <div class="space-y-6">
            <div class="card-royal p-6">
                <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)] mb-4">Actions</h3>
                <div class="space-y-3">
                    <a href="{{ route('admin.finance.fundraisers.donate', $fundraiser->id) }}" class="w-full btn-royal px-4 py-3 rounded-lg text-white text-center block">
                        <i class="fas fa-hand-holding-usd mr-2"></i> Record Donation
                    </a>
                    <a href="{{ route('admin.finance.fundraisers.edit', $fundraiser->id) }}" class="w-full px-4 py-3 rounded-lg border border-[var(--border-color)] text-[var(--text-primary)] text-center block hover:bg-[var(--bg-secondary)]">
                        <i class="fas fa-edit mr-2"></i> Edit Campaign
                    </a>
                    <form action="{{ route('admin.finance.fundraisers.destroy', $fundraiser->id) }}" method="POST" onsubmit="return confirm('Delete this fundraiser?')">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="w-full px-4 py-3 rounded-lg border border-red-500 text-red-500 text-center block hover:bg-red-50">
                            <i class="fas fa-trash mr-2"></i> Delete Campaign
                        </button>
                    </form>
                </div>
            </div>
            
            @if($topDonors->count() > 0)
            <div class="card-royal p-6">
                <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)] mb-4">
                    <i class="fas fa-trophy mr-2 text-gold-500"></i> Top Donors
                </h3>
                <div class="space-y-3">
                    @foreach($topDonors as $index => $donor)
                        <div class="flex items-center gap-3">
                            <span class="w-6 h-6 rounded-full bg-gold-500 text-white flex items-center justify-center text-sm font-bold">
                                {{ $index + 1 }}
                            </span>
                            <div class="flex-1">
                                <p class="font-medium text-[var(--text-primary)]">{{ $donor->member?->full_name ?? 'N/A' }}</p>
                                <p class="text-xs text-[var(--text-secondary)]">{{ $donor->donation_count }} donations</p>
                            </div>
                            <p class="font-bold text-gold-500">{{ church_setting('currency_symbol', 'GH₵') }}{{ number_format($donor->total_amount, 2) }}</p>
                        </div>
                    @endforeach
                </div>
            </div>
            @endif
        </div>
    </div>
</div>
@endsection