@extends('frontend.layouts.main3')

<title>{{ translate('Humsafar - Blog') }}</title>
@php
$generalSetting = App\Models\GeneralSetting::first();
@endphp

@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">{{ translate('Blogs') }}</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


                    </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>
                    </a>
                        <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}} - {{ formatDate( $blog->created_at) }}
                                </h5>
                            </div>
                        </div>
                        <p class="text-lg font-medium mb-5 leading-[21px] mr-4">{{ $blog->title }}</p>
                    </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">
                    {{-- @php
                        dd($banner)
                    @endphp --}}
                    @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

@section('scripts')
<script src="{{asset('admin/assets/libs/choices.js/public/assets/scripts/choices.min.js')}}"></script>
<script src="{{asset('admin/assets/libs/@popperjs/core/umd/popper.min.js')}}"></script>
<script src="{{asset('admin/assets/libs/tippy.js/tippy-bundle.umd.min.js')}}"></script>
<script src="{{asset('admin/assets/libs/simplebar/simplebar.min.js')}}"></script>
<script src="{{asset('admin/assets/libs/prismjs/prism.js')}}"></script>
<script src="{{asset('admin/assets/libs/lucide/umd/lucide.js')}}"></script>
<script src="{{asset('admin/assets/js/tailwick.bundle.js')}}"></script>
<!-- product overview init js-->
<script src="{{asset('admin/assets/js/pages/apps-ecommerce-product-overview.init.js')}}"></script>
<!-- App js -->
<script src="{{asset('admin/assets/js/app.js')}}"></script>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    @if(session('success'))
        Swal.fire({
            title: 'Success!',
            text: '{{ session('success') }}',
            icon: 'success',
            confirmButtonColor: '#3085d6',
            confirmButtonText: 'OK'
        });
    @endif
</script>

@endsection