@extends('layouts.master')

@section('title', 'Donation')

@section('content')
<section class="page-header text-center">
    <div class="container">
        <h1 class="display-4 fw-bold">Give</h1>
        <p class="lead" style="opacity: 0.9;">Your generosity helps us spread the gospel and serve our community</p>
    </div>
</section>

<section class="section-padding">
    <div class="container">
        <div class="row g-5">
            <div class="col-lg-6">
                <h3 class="mb-4">Why Give?</h3>
                <p class="text-muted mb-4">Your donations help us:</p>
                <ul class="list-unstyled">
                    <li class="mb-3"><i class="fas fa-check-circle me-3" style="color: var(--primary-color);"></i>Spread the gospel of Jesus Christ to more people</li>
                    <li class="mb-3"><i class="fas fa-check-circle me-3" style="color: var(--primary-color);"></i>Support church plants and new branches</li>
                    <li class="mb-3"><i class="fas fa-check-circle me-3" style="color: var(--primary-color);"></i>Provide welfare support to those in need</li>
                    <li class="mb-3"><i class="fas fa-check-circle me-3" style="color: var(--primary-color);"></i>Maintain our church facilities</li>
                    <li class="mb-3"><i class="fas fa-check-circle me-3" style="color: var(--primary-color);"></i>Train and equip our pastors and leaders</li>
                    <li class="mb-3"><i class="fas fa-check-circle me-3" style="color: var(--primary-color);"></i>Run youth and children programs</li>
                    <li class="mb-3"><i class="fas fa-check-circle me-3" style="color: var(--primary-color);"></i>Support missionary work in the region</li>
                </ul>

                <div class="card border-0 text-white mt-4" style="background: linear-gradient(135deg, var(--primary-color), #ff8f5e); border-radius: 15px;">
                    <div class="card-body p-4">
                        <h4><i class="fas fa-bible me-2"></i>2 Corinthians 9:7</h4>
                        <p class="mb-0">"Every man according as he purposeth in his heart, so let him give; not grudgingly, or of necessity: for God loveth a cheerful giver."</p>
                    </div>
                </div>
            </div>

            <div class="col-lg-6">
                <div class="service-card" style="border-radius: 20px;">
                    <div class="card-body p-5">
                        <h3 class="mb-4">Make a Donation</h3>
                        
                        <div class="mb-4">
                            <h5 class="mb-3"><i class="fas fa-university me-2" style="color: var(--primary-color);"></i>Bank Transfer</h5>
                            <div class="p-4" style="background: #f8f9fa; border-radius: 10px;">
                                <p class="mb-1"><strong>Bank Name:</strong> {{ $donation->bank_name ?? 'N/A' }}</p>
                                <p class="mb-1"><strong>Account Name:</strong> {{ $donation->account_name ?? 'N/A' }}</p>
                                <p class="mb-1"><strong>Account Number:</strong> {{ $donation->account_number ?? 'N/A' }}</p>
                                <p class="mb-0"><strong>Sort Code:</strong> {{ $donation->sort_code ?? 'N/A' }}</p>
                            </div>
                        </div>

                        <div class="mb-4">
                            <h5 class="mb-3"><i class="fas fa-mobile-alt me-2" style="color: var(--primary-color);"></i>Mobile Money</h5>
                            <div class="p-4" style="background: #f8f9fa; border-radius: 10px;">
                                <p class="mb-1"><strong>Mobile Money:</strong> {{ $donation->mobile_money ?? 'N/A' }}</p>
                                <p class="mb-0"><strong>Provider:</strong> {{ $donation->mobile_provider ?? 'N/A' }}</p>
                            </div>
                        </div>

                        <hr>

                        <div class="mt-4">
                            <h5 class="mb-3">Quick Give</h5>
                            <div class="row g-2">
                                <div class="col-4">
                                    <button class="btn btn-outline-secondary w-100 py-2">$25</button>
                                </div>
                                <div class="col-4">
                                    <button class="btn btn-outline-secondary w-100 py-2">$50</button>
                                </div>
                                <div class="col-4">
                                    <button class="btn btn-outline-secondary w-100 py-2">$100</button>
                                </div>
                                <div class="col-4">
                                    <button class="btn btn-outline-secondary w-100 py-2">$250</button>
                                </div>
                                <div class="col-4">
                                    <button class="btn btn-outline-secondary w-100 py-2">$500</button>
                                </div>
                                <div class="col-4">
                                    <button class="btn btn-outline-secondary w-100 py-2">Other</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="section-padding" style="background-color: #f8f9fa;">
    <div class="container">
        <div class="row text-center mb-5">
            <div class="col-12">
                <span class="section-subtitle">Ways to Give</span>
                <h2 class="section-title">Types of Donations</h2>
            </div>
        </div>
        <div class="row g-4">
            <div class="col-md-4">
                <div class="service-card card h-100 p-4 text-center">
                    <div class="feature-icon d-inline-flex">
                        <i class="fas fa-tithe"></i>
                    </div>
                    <h4 class="mt-3">Tithes</h4>
                    <p class="text-muted">Support the ongoing ministry and operations of the church through your tithes.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="service-card card h-100 p-4 text-center">
                    <div class="feature-icon d-inline-flex">
                        <i class="fas fa-hand-holding-heart"></i>
                    </div>
                    <h4 class="mt-3">Offerings</h4>
                    <p class="text-muted">Give freewill offerings to support specific programs and initiatives of the church.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="service-card card h-100 p-4 text-center">
                    <div class="feature-icon d-inline-flex">
                        <i class="fas fa-building"></i>
                    </div>
                    <h4 class="mt-3">Building Fund</h4>
                    <p class="text-muted">Help us construct and maintain church facilities to better serve our community.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="section-padding text-center">
    <div class="container">
        <h2 class="mb-4">Questions About Giving?</h2>
        <p class="text-muted mb-4">Contact our finance team for any questions about donations or to set up regular giving.</p>
        <a href="{{ route('contact') }}" class="btn btn-primary-custom btn-lg">Contact Finance Team</a>
    </div>
</section>

<section class="section-padding text-center text-white" style="background: linear-gradient(135deg, var(--primary-color), #ff8f5e);">
    <div class="container">
        <h2 class="mb-4">Thank You for Your Support!</h2>
        <p class="mb-0 fs-5" style="opacity: 0.95;">May God bless you abundantly for your generosity.</p>
    </div>
</section>
@endsection
