@extends('layouts.frontend')
@section('title', 'Fundraisers - ' . church_name())
@section('content')

<!-- Hero Section -->
<section class="relative py-24 bg-gradient-to-br from-royal-800 via-royal-900 to-gray-900 overflow-hidden">
    <div class="absolute inset-0">
        <div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1469571486292-0ba58a3f068b?w=1920')] bg-cover bg-center opacity-20"></div>
        <div class="absolute inset-0 bg-gradient-to-r from-royal-900/95 to-royal-800/80"></div>
    </div>
    
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div class="text-center">
            <span class="inline-flex items-center gap-2 px-4 py-1 rounded-full bg-gold-500/20 text-gold-400 text-sm font-medium mb-6">
                <i class="fas fa-hand-holding-heart"></i>
                Support Our Mission
            </span>
            <h1 class="font-cinzel text-5xl md:text-6xl font-bold text-white mb-6">Fundraising Campaigns</h1>
            <p class="text-xl text-gray-300 max-w-2xl mx-auto">
                Join us in making a difference. Your generous contributions help us achieve our mission and serve our community.
            </p>
        </div>
    </div>
</section>

<!-- Active Fundraisers -->
@if($activeFundraisers->count() > 0)
<section class="py-20 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <h2 class="font-cinzel text-4xl font-bold text-gray-900 mb-4">Active Campaigns</h2>
            <p class="text-gray-600">Support our current fundraising initiatives</p>
        </div>
        
        <div class="grid lg:grid-cols-2 gap-8">
            @foreach($activeFundraisers as $fundraiser)
            <div class="bg-white rounded-2xl shadow-xl overflow-hidden">
                <div class="h-48 bg-gradient-to-br from-royal-600 to-royal-800 flex items-center justify-center relative">
                    <div class="absolute inset-0 bg-black/20"></div>
                    <div class="text-center relative z-10">
                        <span class="px-4 py-1 rounded-full bg-white/20 text-white text-sm font-medium backdrop-blur-sm">
                            {{ ucfirst($fundraiser->type) }}
                        </span>
                        <h3 class="text-3xl font-cinzel font-bold text-white mt-4">{{ $fundraiser->title }}</h3>
                    </div>
                </div>
                
                <div class="p-6">
                    @if($fundraiser->description)
                    <p class="text-gray-600 mb-6">{{ Str::limit($fundraiser->description, 200) }}</p>
                    @endif
                    
                    <div class="mb-6">
                        <div class="flex justify-between text-sm mb-2">
                            <span class="text-gray-600">Progress</span>
                            <span class="font-semibold text-royal-600">{{ round($fundraiser->progress_percentage, 1) }}%</span>
                        </div>
                        <div class="w-full bg-gray-200 rounded-full h-4">
                            <div class="bg-gradient-to-r from-gold-500 to-gold-600 h-4 rounded-full transition-all duration-500" style="width: {{ min($fundraiser->progress_percentage, 100) }}%"></div>
                        </div>
                        <div class="flex justify-between text-sm mt-2">
                            <span class="text-gray-600">GH₵{{ number_format($fundraiser->raised_amount, 2) }} raised</span>
                            <span class="text-gray-600">of GH₵{{ number_format($fundraiser->target_amount, 2) }}</span>
                        </div>
                    </div>
                    
                    @if($fundraiser->end_date)
                    <div class="flex items-center gap-2 text-sm text-gray-500 mb-6">
                        <i class="fas fa-clock text-gold-500"></i>
                        <span>Ends: {{ \Carbon\Carbon::parse($fundraiser->end_date)->format('M d, Y') }}</span>
                        @php
                            $daysLeft = \Carbon\Carbon::now()->diffInDays($fundraiser->end_date, false);
                        @endphp
                        @if($daysLeft > 0)
                            <span class="text-royal-600 font-medium">({{ $daysLeft }} days left)</span>
                        @endif
                    </div>
                    @endif
                    
                    <button onclick="showDonateModal({{ $fundraiser->id }}, '{{ $fundraiser->title }}', {{ $fundraiser->target_amount - $fundraiser->raised_amount }})" class="w-full px-6 py-3 bg-gold-500 text-white rounded-full font-semibold hover:bg-gold-600 transition-colors">
                        <i class="fas fa-donate mr-2"></i> Donate Now
                    </button>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endif

<!-- Upcoming Fundraisers -->
@if($upcomingFundraisers->count() > 0)
<section class="py-20 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <h2 class="font-cinzel text-4xl font-bold text-gray-900 mb-4">Coming Soon</h2>
            <p class="text-gray-600">Get ready to support these upcoming campaigns</p>
        </div>
        
        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            @foreach($upcomingFundraisers as $fundraiser)
            <div class="bg-gray-50 rounded-xl p-6 border border-gray-200">
                <span class="inline-block px-3 py-1 rounded-full bg-blue-100 text-blue-700 text-xs font-medium mb-3">
                    {{ ucfirst($fundraiser->type) }}
                </span>
                <h3 class="font-cinzel text-xl font-bold text-gray-900 mb-2">{{ $fundraiser->title }}</h3>
                <p class="text-gray-600 text-sm mb-4">{{ Str::limit($fundraiser->description, 100) }}</p>
                <div class="flex items-center justify-between">
                    <span class="text-sm text-gray-500">
                        <i class="fas fa-bullseye mr-1"></i>
                        Target: GH₵{{ number_format($fundraiser->target_amount, 2) }}
                    </span>
                    @if($fundraiser->start_date)
                    <span class="text-sm text-royal-600">
                        <i class="fas fa-calendar mr-1"></i>
                        {{ \Carbon\Carbon::parse($fundraiser->start_date)->format('M d') }}
                    </span>
                    @endif
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endif

<!-- Completed Fundraisers -->
@if($completedFundraisers->count() > 0)
<section class="py-20 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <h2 class="font-cinzel text-4xl font-bold text-gray-900 mb-4">Completed Campaigns</h2>
            <p class="text-gray-600">Thank you for your support on these campaigns</p>
        </div>
        
        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            @foreach($completedFundraisers as $fundraiser)
            <div class="bg-white rounded-xl p-6 border border-gray-100 shadow-md opacity-90">
                <div class="flex items-start justify-between mb-3">
                    <span class="inline-block px-3 py-1 rounded-full bg-green-100 text-green-700 text-xs font-medium">
                        Completed
                    </span>
                    <span class="text-xs text-gray-500">
                        {{ \Carbon\Carbon::parse($fundraiser->end_date)->format('M Y') }}
                    </span>
                </div>
                <h3 class="font-cinzel text-lg font-bold text-gray-900 mb-2">{{ $fundraiser->title }}</h3>
                <div class="flex items-center justify-between">
                    <span class="text-sm text-gray-600">
                        <i class="fas fa-coins mr-1 text-gold-500"></i>
                        Raised: GH₵{{ number_format($fundraiser->raised_amount, 2) }}
                    </span>
                    <span class="text-sm font-medium text-green-600">
                        {{ round($fundraiser->progress_percentage, 0) }}%
                    </span>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endif

<!-- No Fundraisers Message -->
@if($activeFundraisers->count() == 0 && $upcomingFundraisers->count() == 0 && $completedFundraisers->count() == 0)
<section class="py-20 bg-gray-50">
    <div class="max-w-2xl mx-auto px-4 text-center">
        <div class="w-24 h-24 mx-auto mb-6 rounded-full bg-gray-100 flex items-center justify-center">
            <i class="fas fa-hand-holding-heart text-4xl text-gray-400"></i>
        </div>
        <h2 class="text-2xl font-cinzel font-bold text-gray-900 mb-4">No Active Campaigns</h2>
        <p class="text-gray-600 mb-8">There are no fundraising campaigns at this time. Check back soon!</p>
        <a href="{{ route('home') }}" class="inline-flex items-center gap-2 px-6 py-3 bg-gold-500 text-white rounded-full font-semibold hover:bg-gold-600 transition-colors">
            <i class="fas fa-home"></i> Return Home
        </a>
    </div>
</section>
@endif

<!-- Donation Modal -->
<div id="donateModal" class="fixed inset-0 bg-black/50 z-50 hidden items-center justify-center p-4">
    <div class="bg-white rounded-2xl p-8 max-w-md w-full">
        <div class="flex items-center justify-between mb-6">
            <h3 class="text-2xl font-cinzel font-bold text-gray-900">Make a Donation</h3>
            <button onclick="hideDonateModal()" class="text-gray-400 hover:text-gray-600">
                <i class="fas fa-times text-xl"></i>
            </button>
        </div>
        
        <p class="text-gray-600 mb-4">Campaign: <span id="modalCampaign" class="font-semibold text-gray-900"></span></p>
        <p class="text-sm text-gray-500 mb-6">Remaining goal: <span id="modalRemaining" class="font-semibold text-gold-600"></span></p>
        
        @if(session('success'))
            <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded-lg mb-4">
                {{ session('success') }}
            </div>
        @endif
        
        <form action="" method="POST" id="donateForm">
            @csrf
            <div class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Your Name *</label>
                    <input type="text" name="donor_name" required 
                        class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-gold-500 focus:border-gold-500"
                        placeholder="Enter your name">
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Email (optional)</label>
                    <input type="email" name="donor_email" 
                        class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-gold-500 focus:border-gold-500"
                        placeholder="your@email.com">
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Phone (optional)</label>
                    <input type="tel" name="donor_phone" 
                        class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-gold-500 focus:border-gold-500"
                        placeholder="+233 XX XXX XXXX">
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Donation Amount (GHS) *</label>
                    <input type="number" name="amount" required min="1" step="0.01"
                        class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-gold-500 focus:border-gold-500"
                        placeholder="0.00">
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Payment Method</label>
                    <select name="payment_method" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-gold-500 focus:border-gold-500">
                        <option value="cash">Cash</option>
                        <option value="bank_transfer">Bank Transfer</option>
                        <option value="mobile_money">Mobile Money</option>
                    </select>
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Message (optional)</label>
                    <textarea name="notes" rows="2" 
                        class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-gold-500 focus:border-gold-500"
                        placeholder="Leave a message of support..."></textarea>
                </div>
            </div>
            
            <button type="submit" class="w-full mt-6 px-6 py-3 bg-gold-500 text-white rounded-full font-semibold hover:bg-gold-600 transition-colors">
                <i class="fas fa-heart mr-2"></i> Submit Donation
            </button>
        </form>
    </div>
</div>

<script>
function showDonateModal(id, title, remaining) {
    document.getElementById('modalCampaign').textContent = title;
    document.getElementById('modalRemaining').textContent = 'GH₵' + remaining.toFixed(2);
    document.getElementById('donateForm').action = '/fundraisers/' + id + '/donate';
    document.getElementById('donateModal').classList.remove('hidden');
    document.getElementById('donateModal').classList.add('flex');
}

function hideDonateModal() {
    document.getElementById('donateModal').classList.add('hidden');
    document.getElementById('donateModal').classList.remove('flex');
}

document.getElementById('donateModal').addEventListener('click', function(e) {
    if (e.target === this) {
        hideDonateModal();
    }
});
</script>

@endsection