@extends('layouts.app')

@section('title', 'Donation Projects')

@push('styles')
<style>
    .progress {
        height: 8px;
    }
</style>
@endpush

@section('content')
    <div class="d-flex justify-content-between align-items-start mb-4 flex-column flex-md-row gap-3">
        <div>
            <h2 class="mb-1">Donation Projects</h2>
            <p class="text-muted">Support transparent initiatives with visible goals and progress.</p>
        </div>
        <a href="{{ route('donations') }}" class="btn btn-primary align-self-start">Donate Now</a>
    </div>

    <div class="row g-4">
        @foreach($projects as $project)
            <div class="col-lg-4 col-md-6">
                <div class="card h-100 shadow-sm">
                    <img src="{{ $project->image ?? 'https://via.placeholder.com/600x400' }}" class="card-img-top" alt="{{ $project->title }}">
                    <div class="card-body d-flex flex-column">
                        <h5>{{ $project->title }}</h5>
                        <p class="text-muted flex-grow-1">{{ \Illuminate\Support\Str::limit($project->description, 130) }}</p>
                        <div class="mb-2">
                            <div class="progress">
                                <div class="progress-bar" role="progressbar" style="width: {{ min(100, $project->goal_amount > 0 ? ($project->raised_amount / $project->goal_amount) * 100 : 0) }}%;" aria-valuenow="{{ $project->raised_amount }}" aria-valuemin="0" aria-valuemax="{{ $project->goal_amount }}"></div>
                            </div>
                            <small class="text-muted">{{ number_format($project->raised_amount,2) }} raised of ৳{{ number_format($project->goal_amount,2) }}</small>
                        </div>
                        <div class="d-flex gap-2">
                            <a href="{{ route('projects.show', $project->slug) }}" class="btn btn-sm btn-secondary flex-grow-1">Details</a>
                            <a href="{{ route('donations') }}" class="btn btn-sm btn-primary flex-grow-1">Donate</a>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    <div class="mt-4">
        {{ $projects->links() }}
    </div>
@endsection