@extends('layouts.master')

@section('title', $page->title . ' | ' . setting('site.title'))

@section('content')

@push('custom-css')
<style>
    /* News & Insights tabs, pagination and read-more arrow use the footer's dark green gradient. */
    .news-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-bottom: 50px; }
    .news-tab {
        display: inline-block; padding: 12px 34px; border-radius: 30px;
        border: 2px solid #1c4226; color: #1c4226;
        font-weight: 600; text-transform: uppercase; letter-spacing: .04em; transition: all .25s ease;
    }
    .news-tab:hover,
    .news-tab.active {
        background: radial-gradient(120% 90% at 50% 0%, #1c4226 0%, #0e2414 55%, #091a0e 100%);
        border-color: transparent;
        color: #fff;
    }
    .news-date { font-weight: 600; opacity: .75; margin-bottom: 8px; }

    /* Keep "Read More" pinned to the bottom of every card, regardless of how much
       description text a given news item has, so buttons stay aligned across a row. */
    .page-blog .post-item { height: 100%; display: flex; flex-direction: column; }
    .page-blog .post-item-body { display: flex; flex-direction: column; flex: 1 1 auto; }
    .page-blog .post-item-content { flex: 1 1 auto; }
    .page-blog .post-item-btn { margin-top: auto; }

    /* Read More arrow — scoped to the news page so other pages keep the accent color.
       Icon is recolored to white (data URI) so it stays visible on the dark gradient. */
    .page-blog .readmore-btn::before {
        background-image: radial-gradient(120% 90% at 50% 0%, #1c4226 0%, #0e2414 55%, #091a0e 100%),
            url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"%3E%3Cpath d="M1.33608 8.66694L13.0601 8.66694L9.53141 12.1956C9.46774 12.2571 9.41695 12.3307 9.38201 12.412C9.34707 12.4933 9.32868 12.5808 9.32791 12.6693C9.32714 12.7579 9.34401 12.8456 9.37753 12.9276C9.41105 13.0095 9.46056 13.0839 9.52315 13.1465C9.58575 13.2091 9.66018 13.2586 9.74211 13.2922C9.82404 13.3257 9.91183 13.3425 10.0003 13.3418C10.0889 13.341 10.1763 13.3226 10.2577 13.2877C10.339 13.2527 10.4126 13.2019 10.4741 13.1383L15.1407 8.47161C15.2657 8.34659 15.3359 8.17705 15.3359 8.00027C15.3359 7.8235 15.2657 7.65396 15.1407 7.52894L10.4741 2.86227C10.3483 2.74083 10.1799 2.67364 10.0051 2.67516C9.83035 2.67667 9.66314 2.74679 9.53953 2.87039C9.41593 2.994 9.34582 3.16121 9.3443 3.336C9.34278 3.5108 9.40997 3.6792 9.53141 3.80494L13.0601 7.33361L1.33608 7.33361C1.15927 7.33361 0.989699 7.40384 0.864674 7.52887C0.73965 7.65389 0.669413 7.82346 0.669413 8.00027C0.669413 8.17708 0.73965 8.34665 0.864674 8.47168C0.989699 8.5967 1.15927 8.66694 1.33608 8.66694Z" fill="%23ffffff"/%3E%3C/svg%3E');
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover, 16px auto;
    }
</style>
@endpush
<!--begin::Content-->
<div class="main-container">
    <section class="banner-container ">
        <div class="banner-title ">
            <div style="line-height: 1.1;">
                <span style="background-color: #86A34D;font-weight: bold; margin-bottom: 8px;font-size: 64px;">{!! $page->title !!}</span>
            </div>
        </div>
        <div style="height: 400px;" class="banner-image">
            <img src="{{ Voyager::image($page->image) }}" decoding="async" loading="lazy" alt="" style="width: 100%; height: 100%; object-fit: cover; object-position: center;" rel="preload" as="image">
        </div>
    </section>

    <!-- Page Blog Start -->
    <div class="page-blog mt-3" style="padding-top:30px;">
        <div class="container">

            <!-- News / Insights Tabs Start -->
            <div class="news-tabs wow fadeInUp">
                @foreach($tabs as $value => $label)
                    <a href="{{ route('news', ['tab' => $value]) }}"
                        class="news-tab {{ $activeTab === $value ? 'active' : '' }}">
                        {{ $label }}
                    </a>
                @endforeach
            </div>
            <!-- News / Insights Tabs End -->

            <div class="row">

                @forelse($newsItems as $news)
                    <div class="col-xl-4 col-md-6">
                        <div class="post-item wow fadeInUp">

                            <div class="post-featured-image">
                                <a href="{{ $news->link }}" target="_blank" rel="noopener" data-cursor-text="View">
                                    <figure class="image-anime">
                                        <img src="{{ $news->category_image }}" alt="{{ $news->heading }}"
                                                loading="lazy" decoding="async"
                                                onerror="this.onerror=null;this.src='{{ asset('assets/images/post-1.jpg') }}';">
                                    </figure>
                                </a>

                                <div class="post-item-tags">
                                    <span>{{ $news->title }}</span>
                                </div>
                            </div>

                            <div class="post-item-body">
                                <div class="post-item-content">

                                    <p class="news-date">{{ $news->published_at?->format('d M Y') }}</p>

                                    <h2>
                                        <a href="{{ $news->link }}" target="_blank" rel="noopener">
                                            {{ $news->heading }}
                                        </a>
                                    </h2>

                                    <p class="news-desc">
                                        {{ \Illuminate\Support\Str::limit($news->description, 150) }}
                                    </p>

                                </div>

                                <div class="post-item-btn mb-3">
                                    <a href="{{ $news->link }}" target="_blank" rel="noopener" class="subscribe">
                                        Read More
                                    </a>
                                </div>
                            </div>

                        </div>
                    </div>
                @empty
                    <div class="col-lg-12">
                        <div class="section-title text-center">
                            <h2 class="wow fadeInUp">Nothing here yet</h2>
                            <p class="wow fadeInUp">There are no {{ strtolower($activeTab) }} items to show right now. Please check back soon.</p>
                        </div>
                    </div>
                @endforelse

                @if($newsItems->hasPages())
                    <div class="col-lg-12 mb-3">
                        <!-- Page Pagination Start -->
                        <div class="pagination-container">
                            {{ $newsItems->links('vendor.pagination.default') }}
                        </div>
                        <!-- Page Pagination End -->
                    </div>
                @endif
            </div>
        </div>
    </div>
    <!-- Page Blog End -->

</div>
<!--end::Content-->
@endsection