@extends('layouts.main')
@foreach($blogs as $blog)

    {{-- Dynamic Title --}}
    @section('title')
        <title>{{ $blog->blog_title }}</title>
    @endsection

    {{-- Dynamic Meta Description --}}
    @section('meta_description')
        <meta name="description" content="{{ $blog->blog_description }}">
    @endsection

    {{-- Dynamic Meta Keywords --}}
    @section('meta_keywords')
        <meta name="keywords" content="{{ $blog->blog_keyword }}">
    @endsection

    {{-- Dynamic OG Image --}}
    @section('og_image')
        <meta property="og:image" content="{{ $blog->og_image }}">
    @endsection

    {{-- Extra Open Graph / Twitter Tags --}}
    @push('meta')
        <meta property="og:type" content="blog">
        <meta property="og:title" content="{{ $blog->blog_title }}">
        <meta property="og:description" content="{{ $blog->blog_description }}">
        <meta property="og:url" content="{{ url()->current() }}">
        <meta property="og:site_name" content="Ecosattva">

        <meta name="twitter:card" content="summary_large_image">
        <meta name="twitter:title" content="{{ $blog->blog_title }}">
        <meta name="twitter:description" content="{{ $blog->blog_description }}">
        <meta name="twitter:image" content="{{ $blog->og_image }}">
    @endpush


@endforeach
@section('main-section')

{{-- @component('components.breadcrumbs')
    <a href="/" class="text-blue-600 hover:text-yellow-500">Home</a>
    <i class="fa fa-chevron-right breadcrumb-separator mx-2 text-gray-400"></i>
    <span><a href="{{ route('blog.index') }}" class="text-blue-600 hover:text-yellow-500">Blogs</a></span>
    <i class="fa fa-chevron-right breadcrumb-separator mx-2 text-gray-400"></i>
    <span class="text-gray-700">{{ $blog_details->blog_title }}</span>
@endcomponent --}}

<!-- Page Header -->
{{-- <div class="w-full bg-gradient-to-r from-blue-600 to-indigo-700 py-12">
    <h1 class="text-center text-white text-3xl md:text-4xl font-bold">Blogs</h1>
    <ol class="flex justify-center mt-2 space-x-2 text-sm text-white">
        <li><a href="/blogs" class="hover:text-yellow-300">Blogs</a></li>
        <li>|</li>
        <li class="font-semibold">{{ $blog_details->blog_title }}</li>
    </ol>
</div> --}}

<!-- Banner Image -->
<div class="w-full">
    <div class="relative">
        {{-- <img src="{{ env('IMAGE_URL_CONSTANT').$blog_details->blog_banner }}" 
             alt="{{ $blog_details->blog_title }}"
             class="w-full h-[300px] md:h-[450px] object-cover rounded-b-2xl shadow-md"> --}}
        <img src="{{ env('IMAGE_URL_CONSTANT').$blog_details->blog_banner }}" 
             alt="{{ $blog_details->blog_title }}"
             class="w-full">
    </div>
</div>

<!-- Blog Content -->
<section id="blog-single" class="py-12">
    <div class="container mx-auto px-4 max-w-4xl">
        <!-- Meta -->
        <div class="mb-4 flex items-center text-sm text-gray-500">
            <i class="fa fa-calendar text-yellow-500 mr-2"></i>
            <span>{{ Carbon\Carbon::parse($blog_details->created_at)->format('M d, Y') }}</span>
        </div>

        <!-- Title -->
        <div class="mb-6">
            <h1 class="text-2xl md:text-3xl font-bold text-gray-900">{{ $blog_details->blog_title }}</h1>
            <div class="w-16 h-1 bg-yellow-500 mt-2 rounded"></div>
        </div>

        <!-- Description -->
        <div class="prose prose-sm md:prose-lg max-w-none text-gray-700 leading-relaxed">
            {!! nl2br(e($blog_details->blog_description)) !!}
        </div>
        <div class="prose prose-sm md:prose-lg max-w-none text-gray-700 leading-relaxed">
            {!! $blog_details->blog_body !!}
        </div>
    </div>
</section>

<!-- Back to Blogs -->
<section class="py-6 bg-gray-50">
    <div class="container mx-auto px-4 text-center">
        <hr class="border-gray-300 mb-4">
        <a href="/blogs" class="text-lg font-semibold text-blue-700 hover:text-yellow-500 transition">
            <i class="fa fa-angle-double-left mr-2"></i> Go to Blogs Page
        </a>
        <hr class="border-gray-300 mt-4">
    </div>
</section>

@endsection