@extends("layouts.master")
@section("title", "News")
@section("content")
    <div class="breadcrumb-wrapper bg-cover" style="background-image: url('{{ asset("assets/img/inner/breadcrumb.jpg") }}');">
        <div class="container">
            <div class="page-heading">
                <div class="breadcrumb-sub-title">
                    <h1 class="wow fadeInUp" data-wow-delay=".3s">News</h1>
                </div>
                <ul class="breadcrumb-items wow fadeInUp" data-wow-delay=".5s">
                    <li>
                        <a href="{{ route("home") }}">
                            Home
                        </a>
                    </li>
                    <li>
                        <i class="fa-solid fa-chevron-right"></i>
                    </li>
                    <li>
                        News
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <section class="section-padding">
        <div class="container">
            <div class="row">
                @forelse ($newsItems as $news)
                    <div class="col-lg-4 col-md-6 mb-4">
                        <div class="p-3 h-100 border" style="background:#fff;">
                            @if ($news->image)
                                <div class="mb-3">
                                    @if ($news->category)
                                        <div class="mb-2">
                                            <span class="badge bg-secondary">{{ $news->category }}</span>
                                        </div>
                                    @endif
                                    <a href="{{ route("news-show", $news->slug) }}"><img
                                            src="{{ asset("storage/" . ltrim($news->image, "/")) }}"
                                            alt="{{ $news->title }}"
                                            style="width:100%; height:220px; object-fit:cover;"></a>        
                                </div>
                            @endif

                            <h4 class="mb-2">
                                <a href="{{ route("news-show", $news->slug) }}">{{ $news->title }}</a>
                            </h4>
                            @if ($news->description)
                                <p class="mb-3">{{ \Illuminate\Support\Str::limit(strip_tags($news->description), 140) }}
                                </p>
                            @endif
                            <div class="d-flex gap-2 flex-wrap">
                                <a href="{{ route("news-show", $news->slug) }}" class="theme-btn">
                                    View Details
                                    <i class="fa-solid fa-arrow-up-right"></i>
                                </a>
                                @if ($news->pdf)
                                    <a href="{{ asset("storage/" . ltrim($news->pdf, "/")) }}" class="theme-btn"
                                        target="_blank" rel="noopener" download>
                                        Download PDF
                                        <i class="fa-solid fa-download"></i>
                                    </a>
                                @endif
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="col-12">
                        <p>No news available right now.</p>
                    </div>
                @endforelse
            </div>
            <div class="mt-4">
                {{ $newsItems->links() }}
            </div>
        </div>
    </section>

@endsection