@extends('layouts.frontend')
@section('title_page', 'All News - Rusizi Veterinary')

@section('content')

<!--Start breadcrumb area (Operation Required: Custom Background Image/Title)-->

<section class="breadcrumb-area style2" style="background-image: url({{asset('images/resources/breadcrumb-bg-2.jpg')}});">
<div class="container">
<div class="row">
<div class="col-xl-12">
<div class="inner-content-box clearfix">
<div class="title-s2 text-center">
<span>LATEST UPDATES</span>
<h1>Our News & Articles</h1>
</div>
<div class="breadcrumb-menu float-left">
<ul class="clearfix">
<li><a href="{{ url('/') }}">Home</a></li>
<li class="active">News</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<!--End breadcrumb area-->

<!--Start blog area-->

<section id="blog-area" class="blog-large-area">
<div class="container">
<div class="row">
<div class="col-xl-9 col-lg-8 col-md-12 col-sm-12">
<div class="blog-post">

                {{-- Loop through the news items (using $newsItems from the controller) --}}
                @forelse ($newsItems as $item)
                    <!--Start Single blog Post style4-->
                    <div class="single-blog-post style4 wow fadeInUp" data-wow-delay="0ms" data-wow-duration="1500ms">
                        <div class="img-holder">
                            {{-- Using the Accessor: $item->imageUrl to get the full path --}}
                            <img src="{{ asset('public/news/' . $item->Image) }}" alt="{{ $item->NewsTitle }}">
                            <div class="overlay-style-two"></div>
                            <div class="overlay">
                                <div class="box">
                                    <div class="link-icon">
                                        {{-- Updated link to use ID and your route name --}}
                                        <a href="{{ route('frontend.blog.view', $item->id) }}"><span class="icon-link1"></span></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="text-holder">
                            {{-- Display News Title and link --}}
                            <h3 class="blog-title"><a href="{{ route('frontend.blog.view', $item->id) }}">{{ $item->NewsTitle }}</a></h3>
                            <div class="meta-box">
                                <ul class="meta-info">
                                    {{-- Display Author Name (from user relationship) --}}
                                    <li>By <a href="#">{{ $item->user->name ?? 'Admin' }}</a></li>
                                    {{-- Display formatted Date (using the Date attribute which is cast to a date object) --}}
                                    <li>On <a href="#">{{ $item->Date->format('F d, Y') }}</a></li>
                                    {{-- Display Category Type --}}
                                    <li>In <a href="#">{{ $item->CategoryType ?? 'General' }}</a></li>
                                </ul>
                            </div>
                            <div class="text">
                                {{-- Display a summary of News Details, stripping tags in case it's rich HTML --}}
                                <p>{{ Str::limit(strip_tags($item->NewsDetails), 250) }}</p>
                            </div>
                            <div class="button">
                                <a class="btn-one" href="{{ route('frontend.blog.view', $item->id) }}">Read More<span class="flaticon-next"></span></a>
                            </div>
                        </div>
                    </div>
                    <!--End Single blog Post style4-->
                @empty
                    <p class="text-center p-5">No news articles available at the moment.</p>
                @endforelse

            </div>

            {{-- Pagination Links --}}
            <div class="row">
                <div class="col-md-12">
                    <div class="post-pagination text-center">
                        {{ $newsItems->links() }}
                    </div>
                </div>
            </div>

        </div>

        <!--Start sidebar Wrapper-->
        <div class="col-xl-3 col-lg-4 col-md-7 col-sm-12">
            <div class="sidebar-wrapper">
                {{-- Search Form --}}
               <div class="sidebar-search-box">
                        <form action="{{ route('blog.search') }}" method="GET" class="search-form">
                            <input name="query" placeholder="Search news..." type="text">
                            <button type="submit"><i class="fa fa-search" aria-hidden="true"></i></button>
                        </form>
                    </div>

 
                </div>

                <!--Start single sidebar (OPERATION REQUIRED: Populate Categories)-->
                <div class="single-sidebar categories-box">
                    <div class="sidebar-title"><div class="title">  Categories</div></div>
                    <ul class="categories clearfix">
                         <li><a href="{{route('frontend.category','Insemination')}}">Insemination</a></li>
                         <li><a href="{{ route('frontend.category','Vaccination') }}">Vaccination</a></li>
                          <li><a href="{{ route('frontend.category','Animal Treatment') }}">Animal Treatment</a></li>
                           <li><a href="{{ route('frontend.category','Animal Insurance') }}">Animal Insurance</a></li>
                            <li><a href="{{ route('frontend.category','Iniative Youth') }}">Iniative Youth</a></li>
                             <li><a href="{{ route('frontend.category','Animal Product Inspection') }}">Animal Product Inspection</a></li>
                             <li><a href="{{ route('frontend.category','One Health') }}">One Health</a></li>
                              
                    </ul>
                </div>
                <!--End single sidebar-->

                <!--Start single sidebar (OPERATION REQUIRED: Populate Recent Posts)-->
               <div class="single-sidebar">
    <div class="sidebar-title">
        <div class="title">Recent Posts</div>
    </div>
    <ul class="recent-post">
        @forelse ($recentNews as $recent)
            <li>
                <div class="img-holder">
                    <img src="{{ asset('public/news/' . $recent->Image) }}" alt="{{ $recent->NewsTitle }}">
                    <div class="overlay-style-one">
                        <div class="box">
                            <div class="content">
                                <a href="{{ route('frontend.blog.view', $recent->id) }}">
                                    <span class="icon-link"></span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="title-holder">
                    <span>{{ \Carbon\Carbon::parse($recent->Date)->format('F d, Y') }}</span>
                    <h5 class="post-title">
                        <a href="{{ route('frontend.blog.view', $recent->id) }}">
                            {{ Str::limit($recent->NewsTitle, 40) }}
                        </a>
                    </h5>
                </div>
            </li>
        @empty
            <li><p>No recent posts.</p></li>
        @endforelse
    </ul>
</div>
<!--End single sidebar-->


                   <div class="single-sidebar">
                                <div class="sidebar-title">
                                    <div class="title">Our Gallery</div>
                                </div>
                                <ul class="instagram">
                                   

                                    @forelse ($recentImages as $image)
                                    
                                    <li>
                                        <div class="img-holder">
                                            <img width="50"  height="50" src="{{ asset('public/gallery/thumbnails/'.$image->image_path) }}" alt="Awesome Image">
                                            <div class="overlay-style-one">
                                                <div class="box">
                                                    <div class="content">
                                                        <a href="#"><span class="icon-heart"></span>1k</a>
                                                        <a href="#"><span class="icon-comment"></span>84</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>

                                    @empty
                                    <li><p>No images available.</p></li>
                                    @endforelse
                                </ul>
                                <div class="follow-us-button">
                                    <a class="btn-two" href="#">View More on Gallery<span class="flaticon-next"></span></a>
                                </div>
                            </div>
            </div>
        </div>
        <!--End Sidebar Wrapper-->

    </div>
</div>

</section>
<!--End blog area-->

@endsection('content')