@include('htmlpage.frontent.layout.app')
<!-- blog details -->
<div class="page--header pt--60 pb--60 text-center bg--img" data-overlay="0.85"
    style="background-image: url(&quot;img/page-header-img/bg.jpg&quot;);" data-rjs="2">
    <div class="container">
        <div class="title">
            <h2 class="h1 text-white">{{ $blog->title }}</h2>
        </div>

        <ul class="breadcrumb text-gray ff--primary">
            <li><a href="home-1.html" class="btn-link">Home</a></li>
            <li class="active"><span class="text-primary">News</span></li>
            <li class="active"><span class="text-primary">News Details</span></li>
        </ul>
    </div>
</div>
<!-- Banner Section End -->
<!-- Page Wrapper Start -->
<section class="page--wrapper pt--80 pb--20 blogpost" style="transform: none;">
    <div class="container" style="transform: none;">
        <div class="row" style="transform: none;">
            <!-- Main Content Start -->
            <div class="main--content col-md-8 pb--30" data-trigger="stickyScroll"
                style="position: relative; overflow: visible; box-sizing: border-box; min-height: 1px;">

                <div class="theiaStickySidebar"
                    style="padding-top: 0px; padding-bottom: 1px; position: static; transform: none;">
                    <div class="main--content-inner">
                        <!-- Post Item Start -->
                        <div class="post--item post--single pb--30">
                            <!-- Post Image Start -->
                            <div class="post--img">
                                <img src="{{ asset('storage/' . $blog->image_path) }}" alt="">
                            </div>
                            <!-- Post Image End -->

                            <!-- Post Info Start -->
                            <div class="post--info">
                                <!-- Post Meta Start -->
                                <div class="post--meta">
                                    <ul class="nav">
                                        <li>
                                            <a href="#">
                                                <i class="mr--8 fa fa-calendar-o"></i>
                                                <span>{{ $blog->created_at->format('d M Y') }}</span>
                                            </a>
                                        </li>

                                    </ul>
                                </div>
                                <!-- Post Meta End -->

                                <!-- Post Title Start -->
                                <div class="post--title mt--10">
                                    <h3 class="h4">{{ $blog->title }}</h3>
                                </div>
                                <!-- Post Title End -->

                                <!-- Post Content Start -->
                                <div class="post--content text-darker mt--10">
                                    <p>{!! $blog->description !!}</p>
                                </div>
                                <!-- Post Content End -->

                            </div>
                            <!-- Post Info End -->
                        </div>
                        <!-- Post Item End -->

                        <!-- Related Posts Start -->
                        <div class="related--posts pt--40">
                            <h4 class="h4 pb--20">You May Also Like It</h4>
                        
                            <div class="row">
                               @foreach($allBlogs->sortByDesc('created_at')->take(2)->reverse() as $otherBlog)
                                @if($otherBlog->id !== $blog->id) <!-- Exclude the current blog from related posts --> <!-- Exclude the current blog from related posts -->
                                <div class="col-md-6 pb--30">
                                    <!-- Post Item Start -->
                                    <div class="post--item">
                                        <!-- Post Image Start -->
                                        <div class="post--img">
                                            <a href="{{ route('newsdetails', ['url' => str_replace([' ', '_'], '-', $otherBlog->url)]) }}">
                                                <img src="{{ asset('storage/' . $otherBlog->image_path) }}" alt="{{ $otherBlog->alt }}">
                                            </a>
                                        </div>
                                        <!-- Post Image End -->
                        
                                        <!-- Post Info Start -->
                                        <div class="post--info">
                                            <!-- Post Meta Start -->
                 
                                            <!-- Post Meta End -->
                        
                                            <!-- Post Title Start -->
                                            <div class="post--title mt--10">
                                                <h3 class="h6">
                                                    <a href="{{ route('newsdetails', ['url' => str_replace([' ', '_'], '-', $otherBlog->url)]) }}" class="btn-link">{{ $otherBlog->title }}</a>
                                                </h3>
                                            </div>
                                            <!-- Post Title End -->
                        
                                            <!-- Post Meta Start -->
                                            <div class="post--meta">
                                                <ul class="nav">
                                                    <!-- Add logic to display categories and tags -->
                                                </ul>
                                            </div>
                                            <!-- Post Meta End -->
                        
                                            <!-- Post Content Start -->
                                            <div class="post--content text-darker mt--10">
                                                <p> {{ implode(' ', array_slice(explode(' ', strip_tags($otherBlog['description'])), 0, 10)) }}</p>
                                                
                                            </div>
                                            <!-- Post Content End -->
                                      
                                            <!-- Post Action Start -->
                                            <div class="post--action text-darkest mt--8">
                                                <a href="{{ route('newsdetails', ['url' => str_replace([' ', '_'], '-', $otherBlog->url)]) }}" class="btn-link">Continue Reading<i class="ml--10 text-primary fa fa-caret-right"></i></a>
                                            </div>
                                            <!-- Post Action End -->
                                        </div>
                                        <!-- Post Info End -->
                                    </div>
                                    <!-- Post Item End -->
                                </div>
                                @endif
                                @endforeach
                            </div>
                        </div>
                        <!-- Related Posts End -->

                    </div>
                    <div class="resize-sensor"
                        style="position: absolute; inset: 0px; overflow: hidden; z-index: -1; visibility: hidden;">
                        <div class="resize-sensor-expand"
                            style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; z-index: -1; visibility: hidden;">
                            <div
                                style="position: absolute; left: 0px; top: 0px; transition: all 0s ease 0s; width: 790px; height: 3513px;">
                            </div>
                        </div>
                        <div class="resize-sensor-shrink"
                            style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; z-index: -1; visibility: hidden;">
                            <div style="position: absolute; left: 0; top: 0; transition: 0s; width: 200%; height: 200%">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Main Content End -->

            <!-- Main Sidebar Start -->
            <div class="main--sidebar col-md-4 pb--60" data-trigger="stickyScroll">
                <!-- Widget Start -->

                <!-- Widget End -->

                <!-- Widget Start -->


                <!-- Widget Start -->
                <div class="widget">
                    <h2 class="h4 fw--700 widget--title">Archives</h2>
                
                    <!-- Nav Widget Start -->
                    <div class="nav--widget">
                        <ul class="nav">
                            @foreach($archives as $archive => $blogs)
                                @php
                                    // Extract year and month from the archive key
                                    list($year, $month) = explode('-', $archive);
                                    $formattedMonth = date('M', strtotime("2024-$month-01"));
                                @endphp
                                <li>
                                    <a href="#">
                                        <i class="fa fa-calendar-o"></i>
                                        <span class="text">{{ $formattedMonth }} - {{ $year }}</span>
                                        <span class="count">({{ $blogs->count() }})</span>
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                    <!-- Nav Widget End -->
                </div>
                <!-- Widget End -->

                <!-- Widget Start -->
                <div class="widget">
                    <h2 class="h4 fw--700 widget--title">Advertisements</h2>
                
                    <!-- Ad Widget Start -->
                    <div class="ad--widget">
                        @if($listad)
                            <a href="#">
                                <img src="{{ asset('storage/' . $listad->image_path) }}" alt="{{ $listad->alt }}" class="center-block">
                            </a>
                        @else
                            <!-- If no advertisement is available, you can display a default image or any other content -->
                            <img src="images/default-ad.png" alt="Default Ad" class="center-block">
                        @endif
                    </div>
                    <!-- Ad Widget End -->
                </div>
                <!-- Widget End -->
            </div>
            <!-- Main Sidebar End -->
        </div>
    </div>
</section>
<!-- Page Wrapper End -->
<!-- blog details -->
@include('htmlpage.frontent.layout.footer')