@extends('website.layouts.app')

@section('content')

    @include('website.layouts.title_section')

    <!-- Campaigns Section -->
    <section class="donation-campaigns py-5">
        <div class="container">
            <div class="section-head text-center mb-5" data-aos="fade-up">
                <div class="label-title">Support Our Causes</div>
                <p class="sub-title">Your small help can bring big changes for the lives of cows in need.</p>
            </div>

            <div class="row justify-content-center">
                @foreach($campaigns as $index => $campaign)
                <div class="col-md-6 col-lg-4 mb-4" data-aos="fade-up" data-aos-delay="{{ $index * 100 }}">
                    <div class="card h-100 shadow">
                        <img src="{{ $campaign->image }}" class="card-img-top" alt="{{ $campaign->title }}">
                        <div class="card-body">
                            <h5 class="card-title">{{ $campaign->title }}</h5>
                            <p class="card-text">{!! Str::limit($campaign->description, 100) !!}</p>

                            @php
                                $goal = $campaign->goal_amount ?? 0;
                                $raised = $campaign->raised_amount ?? 0;
                                $percentage = $goal > 0 ? round(($raised / $goal) * 100, 2) : 0;
                            @endphp

                            <div class="progress mb-2">
                                <div class="progress-bar bg-success" style="width: {{ $percentage }}%;">
                                    {{ number_format($raised) }} raised
                                </div>
                            </div>
                            <p class="text-muted mb-2">Goal: {{ number_format($goal) }} ({{ $percentage }}%)</p>

                            <a href="{{ route('campaigns.detail', Crypt::encrypt($campaign->id)) }}" class="btn btn-success w-100">View Details</a>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </section>
 
@endsection