@extends('landing.layouts.app')

@section('content')
    @include('landing.includes.navbar')

    <!-- Start Hero -->
    <section class="relative table w-full py-32 lg:py-36 bg-center bg-no-repeat bg-cover" style="background-image: url('{{ asset('assets/images/background.png') }}');">
        <div class="absolute inset-0 bg-black opacity-80"></div>
        <div class="container relative">
            <div class="grid grid-cols-1 pb-8 text-center mt-10">
                <h3 class="md:text-4xl text-3xl md:leading-normal leading-normal font-medium text-white">{!! $category != null ? $category->name : __('landing.information.title') !!}</h3>
            </div><!--end grid-->
        </div><!--end container-->

        <div class="absolute text-center z-10 bottom-5 start-0 end-0 mx-3">
            <ul class="tracking-[0.5px] mb-0 inline-block">
                <li class="inline-block uppercase text-[13px] font-bold duration-500 ease-in-out text-white/50 hover:text-white"><a href="{{ route('landing.index') }}">{{ __('landing.nav.home') }}</a></li>
                <li class="inline-block text-base text-white/50 mx-0.5 ltr:rotate-0 rtl:rotate-180"><i class="uil uil-angle-right-b"></i></li>
                <li class="inline-block uppercase text-[13px] font-bold duration-500 ease-in-out text-white" aria-current="page">{{ __('landing.information.slug') }}</li>
            </ul>
        </div>
    </section><!--end section-->
    <div class="relative">
        <div class="shape absolute sm:-bottom-px -bottom-[2px] start-0 end-0 overflow-hidden z-1 text-white dark:text-slate-900">
            <svg class="w-full h-auto scale-[2.0] origin-top" viewBox="0 0 2880 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M0 48H1437.5H2880V0H2160C1442.5 52 720 0 720 0H0V48Z" fill="currentColor"></path>
            </svg>
        </div>
    </div>
    <!-- End Hero -->

    <!-- Start Section-->
    <section class="relative md:py-24 py-16">
        <div class="container relative">
            <div class="grid grid-cols-1 lg:grid-cols-3 md:grid-cols-2 gap-[30px]">
                @foreach($blogs as $blog)
                    <div class="blog relative rounded-md shadow dark:shadow-gray-800 overflow-hidden">
                        <img src="{{ $blog->media()?->first()?->original_url }}" alt="">

                        <div class="content p-6">
                            <a href="{{ route('landing.blog.detail', ['slug' => $blog->slug]) }}" class="title h5 text-lg font-medium hover:text-primary-600 duration-500 ease-in-out">
                                {{ $blog->title }}
                            </a>
                            <p class="text-slate-400 mt-3">
                                {{ $blog->content_overview }}
                            </p>

                            <div class="mt-4">
                                <a href="{{ route('landing.blog.detail', ['slug' => $blog->slug]) }}" class="relative inline-block tracking-wide align-middle text-base text-center border-none after:content-[''] after:absolute after:h-px after:w-0 hover:after:w-full after:end-0 hover:after:end-auto after:bottom-0 after:start-0 after:duration-500 font-normal hover:text-primary-600 after:bg-primary-600 duration-500 ease-in-out">
                                    {{ __('landing.information.read_more') }} <i class="uil uil-arrow-right"></i>
                                </a>
                            </div>
                        </div>
                    </div><!--blog end-->
                @endforeach
            </div><!--end grid-->

            <div class="grid md:grid-cols-12 grid-cols-1 mt-8">
                <div class="md:col-span-12 text-center">
                    {{ $blogs->onEachSide(0)->links('pagination::custom-tailwind') }}
                </div>
            </div><!--end grid-->
        </div><!--end container-->
    </section><!--end section-->
    <!-- End -->

    @include('landing.includes.footer')
    @include('landing.includes.back_to_top')
    @include('landing.includes.switcher')
@endsection

@push('prepend-script')
    <script src="{{ asset('assets/libs/feather-icons/feather.min.js') }}"></script>
@endpush