@extends('layouts.master')

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

@section('content')

@push('custom-css')
<style>
    /* Keep "Read More" pinned to the bottom of every card, regardless of how much
       excerpt text a given blog post has, so buttons stay aligned across a row. */
    .blog-grid .post-item { height: 100%; display: flex; flex-direction: column; }
    .blog-grid .post-item-body { display: flex; flex-direction: column; flex: 1 1 auto; }
    .blog-grid .post-item-content { flex: 1 1 auto; }
    .blog-grid .post-item-btn { margin-top: auto; }
</style>
@endpush
<!--begin::Content-->

<div class="main-container">
    <!-- Page Blog Start -->
    <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>

    <section class="container-fluid" style="background-color: #F0F9DC;padding-top: 50px">
        <div class="row">
            <div class="col-md-10 m-auto ">
                <div class="row align-items-stretch">
                    <div class="col-md-12 d-flex flex-column justify-content-center text-center">
                        <div style="color: #BA744A;font-size: 34px;text-align: center;font-weight: bold;">{{ $page->excerpt }}</div>
                    </div>
                    <!-- Rigt column with text + image -->
                    <div class="col-md-12">
                        <div class="mt-3">
                            <div class="container">
                                <div class="row blog-grid">

                                    @foreach($blogs as $blog)
                                        @php
                                            // Resolve the post image: full URL as-is, a public/images
                                            // filename via asset(), otherwise a storage path. Always
                                            // falls back to a real bundled image.
                                            $img = $blog->image;
                                            $blogImg = empty($img)
                                                ? asset('images/default.png')
                                                : (\Illuminate\Support\Str::startsWith($img, ['http://', 'https://'])
                                                    ? $img
                                                    : (\Illuminate\Support\Str::startsWith($img, 'images/')
                                                        ? asset($img)
                                                        : (\Illuminate\Support\Str::contains($img, '/')
                                                            ? asset('storage/' . ltrim($img, '/'))
                                                            : asset('images/' . $img))));
                                        @endphp
                                        <div class="col-xl-4 col-md-6">
                                            <!-- Post Item Start -->
                                            <div class="post-item wow fadeInUp">

                                                <!-- Post Featured Image Start-->
                                                <div class="post-featured-image">
                                                    <a href="{{ route('blogs.show', $blog->slug) }}" data-cursor-text="View">
                                                        <figure class="image-anime">
                                                            <img src="{{ $blogImg }}"
                                                                alt="{{ $blog->title }}"
                                                                loading="lazy" decoding="async"
                                                                onerror="this.onerror=null;this.src='{{ asset('images/default.png') }}';">
                                                        </figure>
                                                    </a>

                                                    <div class="">
                                                        <a href="{{ route('blogs.show', $blog->slug) }}">
                                                            {{ $blog->meta_keywords ?? 'Blog' }}
                                                        </a>
                                                    </div>
                                                </div>
                                                <!-- Post Featured Image End -->

                                                <!-- Post Item Body Start -->
                                                <div class="post-item-body">
                                                    <div class="post-item-content">
                                                        @if(!empty($blog->created_at))
                                                            <p class="blog-date">{{ \Illuminate\Support\Carbon::parse($blog->created_at)->format('d M Y') }}</p>
                                                        @endif

                                                        <h2>
                                                            <a href="{{ route('blogs.show', $blog->slug) }}">
                                                                {{ $blog->title }}
                                                            </a>
                                                        </h2>

                                                        @if(!empty($blog->excerpt))
                                                            <p class="blog-excerpt">{{ \Illuminate\Support\Str::limit($blog->excerpt, 110) }}</p>
                                                        @endif
                                                    </div>

                                                    <div class="post-item-btn mb-3 mt-3">
                                                        <a href="{{ route('blogs.show', $blog->slug) }}" class="subscribe">
                                                            Read More
                                                        </a>
                                                    </div>
                                                </div>
                                                <!-- Post Item Body End -->

                                            </div>
                                            <!-- Post Item End -->
                                        </div>
                                    @endforeach

                                </div>

                                @if($blogs->hasPages())
                                    <div class="pagination-container mb-3 mt-3">
                                        {{ $blogs->links('vendor.pagination.default') }}
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                    <!-- Right column with long text -->
                </div>
            </div>
        </div>
    </section>

    <!-- Page Blog End -->
</div>
<!--end::Content-->
@endsection