@extends('frontend.layouts.main3')

<title>{{ translate('Humsafar - Blog Details') }}</title>



@section('content')
<!-- =====main-section======= -->
<main
        class="bg-[#fafafb] mt-[70px] lg:mt-[100px] xl:mt-[110px] pb-20 xs:pb-0">
    <!-- ==banner-section== -->
    <section class="pt-5 md:pt-6 pb-9 md:pb-20">

        <div class="small_container">
            <!-- =upper-part= -->
            <div class="mt-10 mb-10 flex flex-col items-center text-center">
                <h3
                    class="mb-[10px] lg:mb-[30px] text-black text-[22px] lg:text-[26px] font-semibold">{{$category->category_name}}: {{$blogs->title}}
                </h3>
                <p
                    class="text-[#676770] text-sm font-light lg:text-black xl:text-lg">{{$blogs->short_description}}
                </p>
            </div>

            <div
                class="flex justify-between flex-col gap-10 lg:gap-14 xl:gap-[80px] sm:flex-row sm:items-center">
                <!-- =left-content= -->

                <div class="w-full md:w-1/4">
                    <h5
                        class="text-[#011026] text-base font-medium xl:text-xl xl:leading-[31px] my-[15px]">
                        <a href="{{ route('index') }}">Home</a> &gt;
                        <a href="{{ route('blog') }}">Blog</a> &gt;
                        <span>{{ $blogs->title }}</span>
                         {{-- Home > Blog > {{$blogs->title}} --}}
                    </h5>
                    <figure class="w-full h-[300px] overflow-hidden rounded-[5px]">
                        <picture><img
                                src="{{ asset('admin/BlogsBanners/' . $blogs->banner ) }}"
                                alt="banner image"
                                class="w-full h-auto"
                                loading="lazy"></picture>
                    </figure>
                </div>
                <!-- =right-part= -->
                <div class="w-full md:w-1/2">
                    <div class="max-w-[582px]">
                        <h2 class="text-[22px] font-semibold lg:text-[34px]  pb-2.5 md:pb-4">Explore Categories</h2>
                        @foreach($blog_categories as $category)
                        <a href="{{ route('blog.category', $category) }}"
                            style="background-color: white; color: #6b7280; border: 1px solid #6b7280; padding: 6px 8px; border-radius: 4px; cursor: pointer; font-size: 14px; transition: background-color 0.3s, color 0.3s, border-color 0.3s; margin-right: 8px;"
                            onmouseover="this.style.backgroundColor='#4b5563'; this.style.color='white'; this.style.borderColor='#4b5563';"
                            onmouseout="this.style.backgroundColor='white'; this.style.color='#6b7280'; this.style.borderColor='#6b7280';">
                            {{$category->category_name}}
                        </a>
                        @endforeach
                    </div>

                    <div
                        class="mt-[26px] md:mt-[30px] flex items-center gap-4 flex-wrap sm:flex-nowrap justify-center sm:justify-start">
                        <figure class="relative w-full max-h-[467px] overflow-hidden rounded-[5px]">
                            <h4 class="absolute bottom-0 left-5 text-base font-bold lg:text-2xl text-white">
                                It Seeks To Inspire And Motivate Individuals
                            </h4>
                            <picture><img
                                src="{{ asset('admin/BlogsBanners/' . $blogs->banner ) }}"
                                alt="banner image"
                                class="w-full h-auto"
                                loading="lazy">
                            </picture>

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

            <!-- =bottom-part= -->
            <div
                class="flex items-center justify-between gap-[42px] flex-col sm:flex-row">
                <!-- =left-content= -->
                <div class="w-full md:w-1/4">
                    <div class="max-w-[600px]">
                       {!! $blogs->description !!}
                    </div>
                </div>
                <!-- =right-content= -->
                <div style="    margin-right: -23px; margin-top: 20px;" class="w-full md:w-1/2">
                    <div class="max-w-[576px]">
                        <h4 class="text-base mb-3 font-bold lg:text-2xl text-black leading-[23px]">Featured Posts</h4>
                        @foreach ($featuredBlogs as $featured)
                            <div class="mt-[16px] md:mt-[20px] flex items-center gap-4 flex-wrap sm:flex-nowrap justify-center sm:justify-start">
                                <a href="{{ route('blog.detail', ['slug' => $featured->slug]) }}">
                                <figure style="padding:5px;" class="w-full max-h-[467px] overflow-hidden rounded-[5px] ">
                                    <img src="{{ asset('admin/BlogsBanners/' . $featured->banner) }}" alt="banner image" class="w-full h-auto" loading="lazy">
                                </figure>
                                  </a>
                                <div class="flex flex-col items-start">
                                    <h4 class="text-base font-bold text-black text-[18px] sm:text-[22px] font-semibold">
                                        {{ $featured->title }}
                                    </h4>
                                    <span class="text-base text-[14px]">
                                        {{ formatDate( $featured->created_at) }}

                                    </span>
                                </div>
                          
                            </div>
                        @endforeach


                        {{-- <div
                            class="mt-[16px] md:mt-[20px] flex items-center gap-4 flex-wrap sm:flex-nowrap justify-center sm:justify-start">
                            <figure class="w-full max-h-[467px] overflow-hidden rounded-[5px]">
                                <picture><img
                                    src="{{ asset('frontend/src/images/banner-image-alt.png') }}"
                                    alt="banner image"
                                    class="w-full h-auto"
                                    loading="lazy">
                                </picture>
                            </figure>
                            <div class="flex flex-col items-start">
                            <h4
                                class="text-base font-bold text-black text-[18px] sm:text-[22px] font-semibold">Canvas and Keyboard: An Art - Tech Affair
                            </h4>
                            <span class="text-base text-[14px]">
                                12 Mins Read - June 8, 2024
                            </span>
                            </div>
                        </div> --}}

                    </div>
                </div>

        </div>

        <!-- Banner Space -->
        <div class="mt-20 bg-gray-300 flex items-center justify-center h-40">
            @if($banner != NULL)
                <img src="{{ asset('admin/Banners/' . $banner->banner_image) }}" alt="Banner" class="object-cover w-full h-full" style="height: 190px;" loading="lazy">
            @endif
        </div>

    </section>

</main>

@endsection