@php
    $yojanas = App\Models\Yojana::where('status', 'active')->orderBy('created_at', 'desc')->limit(8)->get();
@endphp
@push('styles')
    <style>
    /* Custom Styles */
    .project-card {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .project-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important;
    }

    .overlay-gradient {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 70%;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
        pointer-events: none;
    }

    .project-overlay-content {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 1.5rem;
        color: white;
        z-index: 2;
    }

    .project-overlay-content h5 {
        font-weight: 600;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    }

    /* Responsive Adjustments */
    @media (max-width: 768px) {
        .project-overlay-content {
            padding: 1rem;
        }

        .project-overlay-content h5 {
            font-size: 1rem;
        }

        .btn-sm {
            font-size: 0.75rem;
        }
    }

    /* Owl Carousel Customization (if needed) */
    .owl-carousel-2 .owl-nav button {
        background: rgba(0, 0, 0, 0.5) !important;
        border-radius: 50% !important;
        width: 40px;
        height: 40px;
        color: white !important;
    }

    .owl-carousel-2 .owl-nav button:hover {
        background: var(--bs-primary) !important;
    }
</style>
@endpush
<div class="container-fluid py-3 bg-light">
    <div class="container-fluid">
        <!-- Section Header -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="d-flex flex-wrap align-items-center justify-content-between">
                    <div>
                        <h2 class="mb-1 fw-bold text-dark">Recent Projects</h2>
                        <p class="text-muted mb-0">Explore our latest successful yojanas and initiatives</p>
                    </div>
                    <a href="{{ route('show.yojana') }}" class="btn btn-outline-primary btn-sm rounded-pill px-4">
                        View All <i class="bi bi-arrow-right ms-1"></i>
                    </a>
                </div>
            </div>
        </div>

        <!-- Projects Carousel -->
        <div class="owl-carousel owl-carousel-2 carousel-item-4 position-relative">
            @forelse ($yojanas as $yojana)
                <div class="card border-0 shadow-sm rounded-3 overflow-hidden project-card">
                    <div class="position-relative" style="height: 280px;">
                        <img class="img-fluid w-100 h-100" src="{{ asset($yojana->image) }}" alt="{{ $yojana->name }}"
                            style="object-fit: cover;" loading="lazy">

                        <!-- Overlay Gradient -->
                        <div class="overlay-gradient"></div>

                        <!-- Content Overlay -->
                        <div class="project-overlay-content">
                            @if($yojana->is_complete == 1)
                            <span class="badge bg-primary mb-2 px-3 py-1 rounded-pill">Completed</span>
                            @else
                            <span class="badge bg-primary mb-2 px-3 py-1 rounded-pill">Incompleted</span>
                              @endif
                            <h5 class="text-white mb-2">{{ Str::limit($yojana->name, 50) }}</h5>
                          

                            @if (!empty($yojana->completion_date))
                                <p class="text-white-50 small mb-3">
                                    <i class="bi bi-calendar-check"></i>
                                    Completed: {{ \Carbon\Carbon::parse($yojana->completion_date)->format('M Y') }}
                                </p>
                            @endif

                            <a href="{{ route('blog.details', $yojana->slug) }}"
                                class="btn btn-sm btn-light rounded-pill px-3">
                                View Details <i class="bi bi-arrow-right-short"></i>
                            </a>
                        </div>
                    </div>
                </div>
            @empty
                <div class="col-12 text-center py-3">
                    <div class="alert alert-info border-0 rounded-3">
                        <i class="bi bi-info-circle-fill me-2"></i>
                        No completed projects found at the moment.
                    </div>
                </div>
            @endforelse
        </div>

    </div>
</div>