@php
    // Sirf wahi columns select karein jo card me chahiye (Fast Loading)
    $sliderBlogs = \App\Models\Blog::select('id', 'title', 'slug', 'image', 'created_at', 'description')
        ->latest()
        ->take(6)
        ->get();
@endphp

@if($sliderBlogs->count() > 0)
{{-- Swiper.js CSS CDN --}}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />

<section class="blog-slider-section py-5">
    <div class="container">
        
        {{-- Section Header --}}
        <div class="d-flex flex-wrap justify-content-between align-items-end mb-4">
            <div>
                <span class="text-primary fw-bold text-uppercase fs-8 letter-spacing-1">Latest Insights</span>
                <h2 class="fw-bold text-dark mb-0">From Our Blog</h2>
            </div>
            <div class="d-flex align-items-center gap-2 mt-3 mt-md-0">
                <a href="{{ url('/blogs') }}" class="btn btn-outline-primary btn-sm rounded-pill px-3 me-2">View All Blogs</a>
                <button class="slider-btn-prev btn btn-light border shadow-sm rounded-circle d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                    <i class="fas fa-chevron-left text-dark"></i>
                </button>
                <button class="slider-btn-next btn btn-light border shadow-sm rounded-circle d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                    <i class="fas fa-chevron-right text-dark"></i>
                </button>
            </div>
        </div>

        {{-- Swiper Slider --}}
        <div class="swiper blogSwiper pb-5">
            <div class="swiper-wrapper">
                @foreach($sliderBlogs as $blog)
                    <div class="swiper-slide h-auto">
                        <div class="card blog-slider-card h-100 border-0 shadow-sm rounded-4 overflow-hidden d-flex flex-column bg-white">
                            
                            {{-- Blog Image with Lazy Loading --}}
                            <div class="blog-slider-img-wrap position-relative overflow-hidden" style="height: 210px;">
                                @if($blog->image)
                                    <img src="{{ asset($blog->image) }}" loading="lazy" class="w-100 h-100 object-fit-cover transition-img" alt="{{ $blog->title }}">
                                @else
                                    <img src="{{ asset('images/Logo-1.webp') }}" loading="lazy" class="w-100 h-100 object-fit-contain p-4 bg-light" alt="{{ $blog->title }}">
                                @endif
                                <span class="badge bg-dark bg-opacity-75 text-white position-absolute top-0 start-0 m-3 px-3 py-1.5 rounded-pill fs-8">
                                    <i class="far fa-calendar-alt me-1"></i>
                                    {{ $blog->created_at ? \Carbon\Carbon::parse($blog->created_at)->format('d M Y') : '' }}
                                </span>
                            </div>

                            {{-- Card Body --}}
                            <div class="card-body p-4 d-flex flex-column flex-grow-1">
                                <h5 class="card-title fw-bold text-dark mb-2 line-clamp-2">
                                    <a href="{{ url('/blogs/' . $blog->slug) }}" class="text-decoration-none text-dark hover-primary">
                                        {{ $blog->title }}
                                    </a>
                                </h5>

                                <p class="card-text text-muted small line-clamp-3 mb-4 flex-grow-1">
                                    {{ Str::limit(strip_tags($blog->description), 95) }}
                                </p>

                                <a href="{{ url('/blogs/' . $blog->slug) }}" class="fw-semibold text-primary text-decoration-none mt-auto d-inline-flex align-items-center gap-1">
                                    Read Article <i class="fas fa-arrow-right fs-8 transition-arrow"></i>
                                </a>
                            </div>

                        </div>
                    </div>
                @endforeach
            </div>

            <div class="swiper-pagination mt-4"></div>
        </div>

    </div>
</section>

{{-- Slider CSS --}}
<style>
.blog-slider-section { background-color: #fcfcfd; }
.fs-8 { font-size: 0.78rem; }
.letter-spacing-1 { letter-spacing: 1px; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.transition-img { transition: transform 0.4s ease; }
.blog-slider-card:hover .transition-img { transform: scale(1.06); }
.hover-primary:hover { color: #0d6efd !important; }
.blog-slider-card:hover .transition-arrow { transform: translateX(4px); }
.transition-arrow { transition: transform 0.2s ease; }
.swiper-pagination-bullet-active { background: #0d6efd !important; width: 24px !important; border-radius: 6px !important; }
</style>

{{-- Swiper.js Script --}}
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
    new Swiper(".blogSwiper", {
        slidesPerView: 1,
        spaceBetween: 24,
        loop: true,
        autoplay: {
            delay: 4000,
            disableOnInteraction: false,
            pauseOnMouseEnter: true,
        },
        navigation: {
            nextEl: ".slider-btn-next",
            prevEl: ".slider-btn-prev",
        },
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
        breakpoints: {
            640: { slidesPerView: 2, spaceBetween: 20 },
            1024: { slidesPerView: 3, spaceBetween: 24 },
        },
    });
});
</script>
@endif