@extends('website.layouts.app')

@section('content')

    @include('website.layouts.title_section')


    <style>
    .campaign-description {
        font-size: 1rem;
        line-height: 1.8;
    }

    .progress-bar {
        font-weight: 600;
        font-size: 0.95rem;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: width 1.5s ease-in-out;
    }

    .card:hover {
        transform: scale(1.02);
        transition: 0.3s ease-in-out;
    }

    .btn-success {
        background: linear-gradient(to right, #28a745, #45b36b);
        border: none;
        transition: 0.3s;
    }

    .btn-success:hover {
        background: linear-gradient(to right, #218838, #36a65c);
    }

    .card-title {
        font-weight: bold;
        color: #198754;
    }
</style>

<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-md-10 col-lg-8" data-aos="fade-up" data-aos-delay="100">
            <div class="card shadow-lg border-0 rounded-4 mb-5">
                <div class="card-body p-5">
                    <h2 class="card-title text-center mb-4">{{ $campaign->title }}</h2>

                    @if($campaign->image)
                        <img src="{{ url('storage/' . $campaign->image) }}" class="img-fluid rounded mb-4" alt="{{ $campaign->title }}">
                    @endif

                    @if($campaign->description && $campaign->description != NULL)
                    <div class="mb-4 campaign-description">
                        {!! $campaign->description !!}
                    </div>
                    @endif

                    <div class="mb-3 text-muted">
                        <strong>Start Date:</strong> {{ $campaign->start_date ? date('d M Y', strtotime($campaign->start_date)) : 'N/A' }}<br>
                        <strong>End Date:</strong> {{ $campaign->end_date ? date('d M Y', strtotime($campaign->end_date)) : 'N/A' }}
                    </div>

                    @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-3" style="height: 28px;">
                        <div class="progress-bar bg-success" role="progressbar" style="width: {{ $percentage }}%;">
                            ₹{{ number_format($raised) }} raised ({{ $percentage }}%)
                        </div>
                    </div>
                    <p><strong>Goal:</strong> ₹{{ number_format($goal) }}</p>

                    <div class="d-flex justify-content-between align-items-center mt-4">
                        @if($campaign->read_more_link)
                            <a href="{{ $campaign->read_more_link }}" class="btn btn-outline-secondary rounded-pill" target="_blank">
                                <i class="bi bi-info-circle me-1"></i> Read More
                            </a>
                        @endif

                        <a href="{{ route('donation', $campaign->id) }}" class="btn btn-lg btn-success shadow px-4 rounded-pill">
                            <i class="fas fa-donate me-1"></i> Donate Now
                        </a>
                    </div>
                </div>
            </div>
        </div>

        {{-- Other Campaigns --}}
        <div class="col-md-12 col-lg-12">
            @if($campaigns_data && $campaigns_data->count())
                <div class="mt-5" data-aos="fade-up" data-aos-delay="200">
                    <h3 class="card-title text-center mb-4">Other Campaigns</h3>
                    <div class="row g-4">
                        @foreach($campaigns_data as $rel)
                            <div class="col-md-4">
                                <div class="card shadow-sm h-100 rounded-3 border-0">
                                    <img src="{{ $rel->image }}" class="card-img-top" alt="{{ $rel->title }}">
                                    <div class="card-body d-flex flex-column justify-content-between">
                                        <h5 class="card-title">{{ $rel->title }}</h5>
                                        <a href="{{ route('campaigns.detail', Crypt::encrypt($rel->id)) }}" class="btn btn-outline-primary rounded-pill btn-sm mt-auto">
                                            <i class="bi bi-arrow-right-circle me-1"></i> View
                                        </a>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif
        </div>
    </div>
</div>


@endsection