@include('htmlpage.frontent.layout.app')

<main class="main">
    <section class="section-box">
        <div><img src="{{ asset('images/blog/blog-details-banner.png') }}" class="img-fluid"></div>
    </section>

    <section class="section-box">
        <div class="archive-header pt-50 text-center">
            <div class="container">
                <div class="box-white">
                    <div class="max-width-single">
                        @if($blog->categoryModel)
                        <a class="btn btn-tag" href="{{ route('blog.category', ['categorySlug' => $blog->categoryModel->slug]) }}">
                            {{ $blog->categoryModel->category }}
                        </a>
                        @endif
                        <h2 class="mb-30 mt-20 text-center">{{ $blog->page_title }}</h2>
                        <div class="post-meta text-muted d-flex align-items-center mx-auto justify-content-center">
                            <div class="author d-flex align-items-center mr-30">
                                <img alt="{{ $blog->author }}" src="{{ asset('images/logo-single.png') }}">
                                <span>{{ $blog->author }}</span>
                            </div>
                            <div class="date">
                                <span class="font-xs color-text-paragraph-2 mr-20 d-inline-block">
                                    <i class="fi fi-rr-calendar"></i>
                                    {{ \Carbon\Carbon::parse($blog->created_at)->format('d M Y') }}
                                </span>
                                <span class="font-xs color-text-paragraph-2 d-inline-block">
                                    <img class="img-middle mr-5" src="{{ asset('images/svg-time.svg') }}"> 8 mins to read
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div class="post-loop-grid">
        <div class="container">
            <div class="row">
                <!-- Left Column: Blog Content -->
                <div class="col-md-8">
                    <figure><img src="{{ asset('storage/' . $blog->image_path) }}" alt="Blog Image" class="img-fluid"></figure>
                    <div class="single-body">
                        <h1 class="mb-30 mt-20">{{ $blog->title }}</h1>

                        <div>
                            <div class="content-single">
                              {!! preg_replace('/<p>(?:&nbsp;|\s)*<\/p>/', '', $blog->content) !!}

                            </div>
                        </div>

                        <!-- Tags & Social Share -->
                        <div class="single-apply-jobs mt-20">
                            <div class="row">
                                <div class="col-lg-7">
                                    <a class="btn btn-border-3 mr-10 hover-up" href="#"># Industry Insights</a>
                                    <a class="btn btn-border-3 mr-10 hover-up" href="#"># How - To Guide</a>
                                    <a class="btn btn-border-3 hover-up" href="#"># Trends & Tips</a>
                                </div>
                                <div class="col-lg-5 text-lg-end social-share">
                                    <h6 class="color-text-paragraph-2 d-inline-block d-baseline mr-20 mt-10">Share</h6>
                                    <a class="mr-20 d-inline-block d-middle hover-up" href="#">
                                        <img alt="zillion" src="{{ asset('img/share-fb.svg') }}">
                                    </a>
                                    <a class="mr-20 d-inline-block d-middle hover-up" href="#">
                                        <img alt="zillion" src="{{ asset('img/share-whatsapp.svg') }}">
                                    </a>
                                </div>
                            </div>
                        </div>

                        <!-- Previous / Next Blog -->
                        <div class="blog-navigation mt-50 mb-50 d-flex justify-content-between align-items-center flex-wrap">
                            @if($previousBlog)
                            <div class="previous-blog d-flex flex-column" style="flex: 1; max-width: 45%;">
                                <span class="text-muted mb-1">Previous Blog</span>
                                <a href="{{ route('blogdetails', ['url' => $previousBlog->url]) }}" class="text-decoration-none fw-bold">
                                    &laquo; {{ $previousBlog->title }}
                                </a>
                            </div>
                            @else
                            <div style="flex: 1; max-width: 45%;"></div>
                            @endif

                            @if($nextBlog)
                            <div class="next-blog d-flex flex-column align-items-end" style="flex: 1; max-width: 45%;">
                                <span class="text-muted mb-1">Next Blog</span>
                                <a href="{{ route('blogdetails', ['url' => $nextBlog->url]) }}" class="text-decoration-none fw-bold text-end">
                                    {{ $nextBlog->title }} &raquo;
                                </a>
                            </div>
                            @else
                            <div style="flex: 1; max-width: 45%;"></div>
                            @endif
                        </div>
                    </div>
                </div>

                <!-- Right Column: Sidebar -->
                <div class="col-md-4">
                    <div class="widget_search mb-40">
                        <div class="search-form">
                            <form action="{{ route('blog') }}" method="GET">
                                <input type="text" name="search" placeholder="Search…" value="{{ request('search') }}">
                                <button type="submit"><i class="fi-rr-search"></i></button>
                            </form>
                        </div>
                    </div>

                    <!-- Categories -->
                    <div class="sidebar-news-small mb-40">
                        <h5 class="sidebar-title">Categories</h5>
                        @foreach($blogCategories as $category)
                        @if($category->slug)
                        <div class="megaMenuInsights--row2-item heading6 mb-10">
                            <a href="{{ route('blog.category', ['categorySlug' => $category->slug]) }}" class="brand-02">
                                {{ $category->category }}
                            </a>
                        </div>
                        @endif
                        @endforeach
                    </div>

                    <!-- Recent Posts -->
                    <div class="sidebar-news-small">
                        <h5 class="sidebar-title">Recent Posts</h5>
                        @foreach($recentblogs as $recent)
                        <div class="post-list-small-item d-flex align-items-center mb-15">
                            <figure class="thumb mr-15">
                                <img src="{{ asset('storage/' . $recent->image_path) }}" alt="{{ $recent->alt }}" class="img-fluid">
                            </figure>
                            <div class="content">
                                <h6>
                                    <a href="{{ route('blogdetails', ['url' => $recent->url]) }}">
                                        {{ $recent->title }}
                                    </a>
                                </h6>
                                <div class="post-meta text-muted d-flex align-items-center">
                                    <div class="date">
                                        <span class="font-xs color-text-paragraph-2 mr-20 d-inline-block">
                                            <i class="fi fi-rr-calendar"></i>
                                            {{ \Carbon\Carbon::parse($recent->created_at)->format('d M Y') }}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforeach

                        <!-- View All Blogs Link -->
                        <div class="mt-20 mb-20 text-center">
                            <a href="/blog"
                                class="actionWithArrow">View
                                All Blogs</a>
                        </div>
                    </div>

                    <div class="sidebar-border-bg bg-right mt-20"><span class="text-grey">WE ARE</span><span
                            class="text-hiring">HIRING</span>
                        <p class="font-xxs color-text-paragraph mt-5">Lorem ipsum dolor sit amet, consectetur
                            adipisicing elit. Recusandae architecto</p>
                        <div class="mt-15"><a class="btn btn-paragraph-2" href="#">Know More</a></div>
                    </div>
                </div>

            </div>
        </div>

    </div>

    <!-- Newsletter -->
    <section class="section-box mt-50 mb-20">
        <div class="container">
            <div class="box-newsletter">
                <div class="row">
                    <div class="col-xl-3 col-12 text-center d-none d-xl-block"><img
                            src="{{ asset('img/newsletter-left.png') }}" alt="zillion"></div>
                    <div class="col-lg-12 col-xl-6 col-12">
                        <h2 class="text-md-newsletter text-center">New Things Will Always<br> Update Regularly</h2>
                        <div class="box-form-newsletter mt-40">
                            <form class="form-newsletter">
    <input class="input-newsletter" type="email" placeholder="Enter your email here" required>

    <button type="submit" class="btn btn-default icon-send-letter" aria-label="Subscribe">
        <!-- Send Icon SVG -->
        <svg width="30" height="30" viewBox="0 0 24 24" fill="none"
            xmlns="http://www.w3.org/2000/svg">
            <path d="M22 2L11 13" stroke="currentColor" stroke-width="2"
                stroke-linecap="round" stroke-linejoin="round" />
            <path d="M22 2L15 22L11 13L2 9L22 2Z" stroke="currentColor"
                stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
        </svg>
    </button>
</form>
                        </div>
                    </div>
                    <div class="col-xl-3 col-12 text-center d-none d-xl-block"><img
                            src="{{ asset('img/newsletter-right.png') }}" alt="zillion"></div>
                </div>
            </div>
        </div>
    </section>
</main>
@include('htmlpage.frontent.layout.footer')