@extends('frontend.layouts.app')
@section('page_title')
    {{(!empty($page_title) && isset($page_title)) ? $page_title : ''}}
@endsection

@section('content')

    <!-- Hero Section -->
    <div id="admissionHeroCarousel" class="carousel slide" data-bs-ride="carousel" data-aos="fade-in" style="margin-top: 100px">
        <div class="carousel-inner">
            <div class="carousel-item-admission active">
                <img src="{{asset("assets/images/programs_hero.png")}}" class="hero-image d-block w-100"
                     alt="Banner Image">
                <div class="hero-gradient-overlay-program"></div>
                <div class="carousel-caption-admission text-start">
                    <div class="container">
                        <div class="row">
                            <div class="col-lg-6 col-md-8 col-sm-12">
                                <div class="hero-text-box" data-aos="fade-up" data-aos-delay="200">
                                    <h1 class="hero-title-text" data-aos="zoom-in" data-aos-delay="300">
                                        <span class="highlight" style="font-family: 'Poppins', sans-serif;">Stay updated with the latest news, insights, and stories from Aliz College</span>
                                    </h1>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- Blog Posts -->
    <section class="blog-section">
        <div class="container">
            <div class="row">
                @forelse($blogs as $blog)
                    <!-- Blog Card -->
                    <div class="col-lg-4 col-md-6 mb-3">
                        <div class="blog-card">
                            <img src="{{ !empty($blog->cover_image) ? asset('storage/' . $blog->cover_image) : 'https://images.unsplash.com/photo-1427504494785-3a9ca7044f45?w=600' }}"
                                 alt="{{ $blog->name }}"
                                 class="blog-card-img">
                            <div class="blog-card-body">
                                <h3 class="blog-card-title" style="font-family: 'Poppins', sans-serif;">{{ $blog->name }}</h3>
                                <p class="blog-card-excerpt" style="font-family: 'Poppins', sans-serif;">
                                    {{ !empty($blog->short_description) ? Str::limit($blog->short_description, 150) : Str::limit(strip_tags($blog->description), 150) }}
                                </p>
                                <div class="blog-meta">
                                    <div class="author-info">
                                        <span style="font-family: 'Poppins', sans-serif;">Posted On</span>
                                    </div>
                                    <span style="font-family: 'Poppins', sans-serif;">{{ \Carbon\Carbon::parse($blog->blog_date)->format('d-M-Y') }}</span>
                                </div>
                                <a href="{{ route('blog.show', $blog->slug) }}" class="read-more" style="font-family: 'Poppins', sans-serif;">Read More <i class="fas fa-arrow-right"></i></a>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="col-12 py-5">
                        <div class="text-center mt-5">
                            <h4 class="m-5" style="font-family: 'Poppins', sans-serif;">No blogs found</h4>
                            <p class="mb-5" style="font-family: 'Poppins', sans-serif;"> Please check back later for updates.</p>
                        </div>
                    </div>
                @endforelse
            </div>

            <!-- Pagination -->
            @if($blogs->hasPages())
                <div class="pagination-wrapper">
                    <div class="pagination">
                        {{-- Previous Page Link --}}
                        @if ($blogs->onFirstPage())
                            <span class="page-link disabled"><i class="fas fa-chevron-left"></i></span>
                        @else
                            <a href="{{ $blogs->previousPageUrl() }}" class="page-link"><i class="fas fa-chevron-left"></i></a>
                        @endif

                        {{-- Pagination Elements --}}
                        @foreach ($blogs->getUrlRange(1, $blogs->lastPage()) as $page => $url)
                            @if ($page == $blogs->currentPage())
                                <a href="{{ $url }}" class="page-link active">{{ $page }}</a>
                            @else
                                <a href="{{ $url }}" class="page-link">{{ $page }}</a>
                            @endif
                        @endforeach

                        {{-- Next Page Link --}}
                        @if ($blogs->hasMorePages())
                            <a href="{{ $blogs->nextPageUrl() }}" class="page-link"><i class="fas fa-chevron-right"></i></a>
                        @else
                            <span class="page-link disabled"><i class="fas fa-chevron-right"></i></span>
                        @endif
                    </div>
                </div>
            @endif
        </div>
    </section>

@endsection

@push('footer-scripts')
    <script>
        // Smooth scroll
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if(target) {
                    target.scrollIntoView({
                        behavior: 'smooth'
                    });
                }
            });
        });
    </script>
@endpush