@extends('layouts.master')

@section('content')
<!--begin::Content-->

@php
    // Resolve the post image: full URL as-is, public asset path via asset(),
    // otherwise a storage path. Always falls back to a real bundled image.
    $img = $blog->image;
    $blogImg = empty($img)
        ? asset('assets/images/post-1.jpg')
        : (\Illuminate\Support\Str::startsWith($img, ['http://', 'https://'])
            ? $img
            : (\Illuminate\Support\Str::startsWith($img, 'assets/')
                ? asset($img)
                : asset('storage/' . ltrim($img, '/'))));

    $readingMins = max(1, (int) ceil(str_word_count(strip_tags($blog->body ?? '')) / 200));
@endphp

<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;">Our Blog</span>
            </div>
        </div>
        <div style="height: 400px;" class="banner-image">
            <img src="{{ $blogImg }}" 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;">{{ $blog->title }}    </div>
                    </div>
                    <!-- Rigt column with text + image -->
                    <div class="col-md-12 d-flex">
                        <div class="mt-3">
                            <div class="container">
                                <div class="row">
                                    <div class="">
                                        <ol class="breadcrumb ">
                                            <li><i class="fa-regular fa-clock"></i> {{ \Carbon\Carbon::parse($blog->created_at)->format('d M, Y') }}</li>
                                            <li><i class="fa-regular fa-hourglass-half"></i> {{ $readingMins }} min read</li>
                                        </ol>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Right column with long text -->
                </div>
            </div>
        </div>
    </section>

    <!-- Page Single Post Start -->
    <div class="page-single-post blog-detail-page">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-10">

                    <!-- Post Featured Image Start -->
                    <div class="post-image">
                        <figure class="image-anime">
                            <img src="{{ $blogImg }}"
                                 alt="{{ $blog->title }}"
                                 loading="lazy" decoding="async"
                                 onerror="this.onerror=null;this.src='{{ asset('assets/images/post-1.jpg') }}';">
                        </figure>
                    </div>
                    <!-- Post Featured Image End -->

                    <!-- Post Single Content Start -->
                    <div class="post-content">

                        <!-- Post Entry Start -->
                        <div class="post-entry">
                            {!! $blog->body !!}
                        </div>
                        <!-- Post Entry End -->

                        <!-- Post Tag Links Start -->
                        <div class="post-tag-links">
                            <div class="row align-items-center">
                                <div class="col-lg-8">
                                    <div class="post-tags wow fadeInUp" data-wow-delay="0.3s">
                                        <span class="tag-links">
                                            Tags:
                                            <a href="{{ route('blogs') }}">{{ $blog->meta_keywords ?? 'Blog' }}</a>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Post Tag Links End -->

                        <!-- Back to blog -->
                        <div class="mb-3 mt-3">
                            <a href="{{ route('blogs') }}" class="subscribe">
                                <i class="fa-solid fa-arrow-left-long"></i> Back to Blogs
                            </a>
                        </div>

                    </div>
                    <!-- Post Single Content End -->

                </div>
            </div>
        </div>
    </div>
    <!-- Page Single Post End -->

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