@extends('pages_landing.index')

@section('content')
    <!-- === 1. HEADER SECTION: Title & Meta === -->
    <section class="wrapper bg-soft-primary">
        <div class="container pt-10 pb-19 pt-md-14 pb-md-20 text-center">
            <div class="row">
                <div class="col-md-10 col-xl-8 mx-auto">
                    <div class="post-header">
                        <div class="post-category text-line">
                            <a href="#" class="hover text-primary" rel="category">{{ $blog['category'] }}</a>
                        </div>
                        <h1 class="display-1 mb-4">{{ $blog['title'] }}</h1>
                        <ul class="post-meta list-unstyled d-flex justify-content-center flex-wrap mb-5 gap-3">
                            <li class="post-date text-dark"><i
                                    class="fa fa-calendar-alt me-1 text-primary"></i><span>{{ $blog['date'] }}</span></li>
                            <li class="post-author text-dark"><a href="#" class="text-dark"><i
                                        class="fa fa-user me-1 text-primary"></i><span>By
                                        {{ $blog['author'] }}</span></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- === 2. BLOG CONTENT & SIDEBAR LAYOUT === -->
    <section class="wrapper bg-light">
        <div class="container pb-14 pb-md-16">
            <div class="row gx-lg-8 gx-xl-12">
                <div class="col-lg-8">
                    <div class="blog single mt-n17">
                        <div class="card shadow-lg border-0 rounded-4">
                            <figure class="card-img-top rounded-top-4 overflow-hidden">
                                <img src="{{ asset($blog['image']['src']) }}" alt="{{ $blog['image']['alt'] }}"
                                    class="w-100 object-cover" style="height: 400px; {{ $blog['image']['style'] }}">
                            </figure>

                            <div class="card-body p-4 p-md-6">
                                <article class="post">
                                    <div class="post-content">
                                        {!! $blog['content'] !!}
                                        {{-- @if (!empty($blog['gallery']))
                                            <div class="row g-4 mt-5 mb-10">
                                                <h3 class="h4 mb-3">Gallery</h3>
                                                @foreach ($blog['gallery'] as $img)
                                                    <div class="col-md-6">
                                                        <figure class="rounded-3 shadow-sm overflow-hidden">
                                                            <a href="{{ asset($img) }}" data-glightbox
                                                                data-gallery="post">
                                                                <img src="{{ asset($img) }}" alt="Gallery Image"
                                                                    class="w-100">
                                                            </a>
                                                        </figure>
                                                    </div>
                                                @endforeach
                                            </div>
                                        @endif --}}
                                    </div>

                                    <!-- Article Footer: Tags -->
                                    <hr class="my-5">
                                    <div class="post-footer">
                                        <h4 class="h5 mb-3">Tagged Under:</h4>
                                        <ul class="list-unstyled tag-list d-flex flex-wrap gap-2">
                                            @foreach ($blog['tags'] as $tag)
                                                <li>
                                                    <a href="#"
                                                        class="btn btn-soft-primary btn-sm rounded-pill mb-0 text-uppercase">{{ $tag }}</a>
                                                </li>
                                            @endforeach
                                        </ul>
                                    </div>
                                </article>
                            </div>
                        </div>

                        <!-- NEXT / PREVIOUS NAVIGATION -->
                        <div class="d-flex justify-content-between p-4 my-5 bg-white rounded-3 shadow-sm">
                            {{-- Previous Post Button --}}
                            @if (!empty($previous))
                                <a href="{{ route('blog-details', $previous) }}"
                                    class="btn btn-outline-primary rounded-pill btn-icon btn-icon-start transition-all duration-300 hover:scale-105">
                                    <i class="fa fa-angle-left"></i> &nbsp; Next Blog
                                </a>
                            @else
                                <button class="btn btn-outline-secondary rounded-pill btn-icon btn-icon-start disabled"
                                    disabled>
                                    <i class="fa fa-angle-left"></i> &nbsp; Next Blog
                                </button>
                            @endif

                            {{-- Next Post Button --}}
                            @if (!empty($next))
                                <a href="{{ route('blog-details', $next) }}"
                                    class="btn btn-outline-primary rounded-pill btn-icon btn-icon-end ms-auto transition-all duration-300 hover:scale-105">
                                    Previous Blog &nbsp; <i class="fa fa-angle-right"></i>
                                </a>
                            @else
                                <button
                                    class="btn btn-outline-secondary rounded-pill btn-icon btn-icon-end ms-auto disabled"
                                    disabled>
                                    Previous Blog &nbsp; <i class="fa fa-angle-right"></i>
                                </button>
                            @endif

                        </div>
                    </div>
                </div>

                <!-- SIDEBAR COLUMN (Secondary Content - Takes 4/12 space on large screens) -->
                <aside class="col-lg-4 sidebar mt-12 mt-lg-0">

                    {{-- Popular Blogs Widget Card --}}
                    <div class="widget card p-4 mb-5 shadow-sm rounded-4">
                        <h4 class="widget-title mb-4 text-primary border-bottom border-primary pb-2">Popular Blogs</h4>

                        <ul class="list-unstyled">
                            @foreach ($popularBlogs as $pBlog)
                                <li class="d-flex align-items-start mb-3 border-bottom pb-3">
                                    <div class="flex-shrink-0 me-3">
                                        @if (!empty($pBlog['image']['src']))
                                            <img src="{{ asset($pBlog['image']['src']) }}"
                                                alt="{{ $pBlog['image']['alt'] ?? $pBlog['title'] }}"
                                                class="rounded-circle object-cover"
                                                style="width:50px; height:50px; object-fit:cover;">
                                        @else
                                            <div class="rounded-circle bg-soft-primary text-primary d-flex align-items-center justify-content-center fw-bold"
                                                style="width: 50px; height: 50px; font-size: 1.2rem;">
                                                {{ strtoupper(substr($pBlog['title'], 0, 1)) }}
                                            </div>
                                        @endif
                                    </div>
                                    <div class="flex-grow-1">
                                        <h6 class="mb-1">
                                            <a class="link-dark text-decoration-none hover:text-primary transition-colors duration-200"
                                                href="{{ route('blog-details', $pBlog['slug']) }}">
                                                {{ $pBlog['title'] }}
                                            </a>
                                        </h6>
                                        <div class="fs-sm text-muted">
                                            <i class="fa fa-calendar-alt me-1"></i>
                                            {{ \Carbon\Carbon::parse($pBlog['date'])->format('d M Y') }}
                                            @if (!empty($pBlog['author']))
                                                <span class="ms-2"><i
                                                        class="fa fa-user me-1"></i>{{ $pBlog['author'] }}</span>
                                            @endif
                                        </div>
                                    </div>
                                </li>
                            @endforeach
                        </ul>
                    </div>

                    {{-- Tags Widget Card --}}
                    <div class="widget card p-4 shadow-sm rounded-4">
                        <h4 class="widget-title mb-4 text-primary border-bottom border-primary pb-2">Explore Topics</h4>
                        @php
                            $mockTags = [
                                'NABL',
                                'ISO 17025',
                                'Metrology',
                                'SaaS',
                                'Digital Lab',
                                'Quality',
                                'Automation',
                            ];
                            $tags = $blog['tags'] ?? $mockTags;
                        @endphp
                        <div class="d-flex flex-wrap gap-2">
                            @foreach ($tags as $tag)
                                <a href="#"
                                    class="btn btn-soft-blue btn-sm rounded-pill text-uppercase">{{ $tag }}</a>
                            @endforeach
                        </div>
                    </div>

                    {{-- NOTE: To make the sidebar sticky on desktop, you would add a JavaScript listener. --}}
                    {{-- Example CSS Class (requires custom styling): `position: sticky; top: 100px;` on the <aside> tag. --}}
                </aside>

            </div>
        </div>
    </section>
@endsection