@extends('frontend.layouts.main3')

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

@php
$generalSetting = App\Models\GeneralSetting::first();
@endphp

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


    <!-- ==blog-section== -->
    <section class="bg-[#f7f8fb] py-[50px] xl:pt-20 xl:pb-[150px]">
        <div class="small_container">

                <div class="flex items-center justify-between mt-5 mb-[30px] flex-wrap">
                    <h3 class="text-[22px] lg:text-[26px] font-semibold">Blogs | @if($category!=null) {{$category->category_name}} @endif</h3>
                    <div class="flex flex-wrap gap-2 mt-2">

                    @foreach($blog_categories as $category)
                    <a href="{{ route('blog.category', $category->id) }}"
                        style="background-color: white; color: #6b7280; border: 1px solid #6b7280; padding: 9px 9px; border-radius: 5px; cursor: pointer; transition: background-color 0.3s, color 0.3s, border-color 0.3s;"
                                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

                    <a href="{{ route('blog.category', '0') }}"
                        style="background-color: white; color: #6b7280; border: 1px solid #6b7280; padding: 9px 9px; border-radius: 5px; cursor: pointer; transition: background-color 0.3s, color 0.3s, border-color 0.3s;"
                                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';">
                        All
                    </a>

                    </div>
                </div>

              <!-- == Blog Items == -->
                <div class="grid grid-cols-1 sm:grid-cols-3 gap-[27px]">

                @foreach($blogs as $blog)

                    <!-- Blog Item 1 -->
                    <div class="flex flex-col group mb-5">
                        <a href="{{ route('blog.detail', ['slug' => $blog->slug]) }}">
                        <figure class="w-full h-[212px] overflow-hidden rounded-[5px]">
                            <img src="{{ asset('admin/BlogsBanners/' . $blog->banner ) }}" alt="slider image" class="w-full h-full duration-300 group-hover:scale-105" loading="lazy">
                        </figure>
                        
                        <div class="flex items-center mb-3 mt-4 justify-between">
                            <span class="text-sm font-normal capitalize mr-4">{{ $blog->category->category_name }}</span>
                            <div class="flex items-center">
                                <img src="{{ asset('admin/Image/AppSettings/Logo/' . $generalSetting->system_logo) }}"
                                alt="system_logo" class="w-6 h-6 mr-3 rounded-full">
                                <h5 class="text-sm font-medium capitalize">{{$AutherName}} - {{ $blog->created_at->format('F j, Y') }}
                                </h5>
                            </div>
                        </div>
                 
                        <p class="text-lg font-medium mb-5 leading-[21px] mr-4">{{ $blog->title }}</p>
                    </a>
                    </div>

                @endforeach

                </div>

                <!-- Pagination -->
                <div class="flex justify-center mt-8">
                    <ul class="flex flex-wrap items-center gap-2">
                        @foreach($blogs->links()->elements[0] as $page => $link)
                        <li>
                            <a href="{{ $link }}"
                                class="inline-flex items-center justify-center w-10 h-10 bg-white dark:bg-zinc-700 transition-all duration-150 ease-linear border border-slate-200 dark:border-zinc-500 rounded-full text-slate-500 dark:text-zinc-200 hover:text-custom-500 dark:hover:text-custom-500 hover:bg-custom-50 dark:hover:bg-custom-500/10 focus:bg-custom-50 dark:focus:bg-custom-500/10 focus:text-custom-500 dark:focus:text-custom-500 [&.active]:text-custom-50 dark:[&.active]:text-custom-50 [&.active]:bg-custom-500 dark:[&.active]:bg-custom-500 [&.active]:border-custom-500 dark:[&.active]:border-custom-500 [&.disabled]:text-slate-400 dark:[&.disabled]:text-zinc-300 [&.disabled]:bg-slate-100 dark:[&.disabled]:bg-zinc-600/20 [&.disabled]:border-transparent hover:bg-red-color">
                                {{ $page }}
                            </a>
                        </li>
                        @endforeach
                    </ul>
                </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>


        </div>
    </section>

</main>

@endsection