@extends('frontend.layouts.master')
@section('title') Donate @endsection
@section('main-content')

        <!-- Start Page Title Area -->
        <div class="page-title-area">
            <div class="d-table">
                <div class="d-table-cell">
                    <div class="container">
                        <div class="page-title-content">
                            <h2>Donate</h2>
                            <ul>
                                <li><a href="{{route('home')}}">Home</a></li>
                                <li>Donate</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Page Title Area -->
        <!-- Start Causes Area -->
        <section class="causes-section pt-100 pb-100">
            <div class="container">
                <div class="section-title">
                    <span>
                        <i class="flaticon-ribbon"></i>
                        Our Donation Causes
                    </span>
                    <h2>The causes we care about</h2>
                    <p></p>
                </div>

                <div class="row">
                    @if($causes->isNotEmpty())
                        @foreach($causes as $cause)
                    <div class="col-lg-4 col-md-6">
                        <div class="single-causes">
                            <img src="{{ Storage::url($cause->image) }}" alt="{{$cause->cause_title}}">
                            <div class="icon">
                                <i class="flaticon-book-1"></i>
                            </div>

                            <div class="causes-content" style="width: 100%;">
                                <span>{{$cause->cause_title}}</span>
                                <h3>{{$cause->cause_title}}</h3>
                                <p>{!! ($cause->details) !!}</p>

                                <div class="causes-progress-bar">
                                    <div class="causes-progress-content">
                                        <span>Raised: ${{number_format($cause->raised_amount, 2)}}</span>
                                        
                                        <div class="text-right">
                                            <span>Goal: ${{number_format($cause->intended_budget, 2)}}</span>
                                        </div>
                                    </div>
                                    
                                    @php
                                        $progressPercentage = $cause->intended_budget > 0 ? min(($cause->raised_amount / $cause->intended_budget) * 100, 100) : 0;
                                    @endphp
                                    
                                    {{-- <div class="progress" style="height: 8px; margin-top: 10px;">
                                        <div class="progress-bar" role="progressbar" style="width: {{$progressPercentage}}%; background-color: #ff6b35;" aria-valuenow="{{$progressPercentage}}" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div> --}}
                                    
                                    <p style="margin-top: 10px; font-size: 14px; color: #666;">Raised by {{$cause->donors_count}} people</p>
                                </div>
                                
                                <a href="{{route('donate.detail',$cause->id)}}" class="causes-btn-one">
                                    Donate Now
                                    <i class="flaticon-right"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                    @endforeach
                    @endif

                    
                </div>
            </div>
        </section>
        <!-- End Causes Area -->

@endsection