@extends('layouts.frontend')
@section('headerMeta')
<title>{{ $metaTitle }}</title>

<meta name="title" content="{{ $metaTitle }}">
<meta name="description" content="{{ $metaDescription }}">
<meta name="keywords" content="{{ $metaKeywords }}">

<meta name='og:title' content="{{ $metaTitle }}">
<meta name='og:image' content="{{ asset($metaImage) }}">
<meta name='og:site_name' content="{{ $metaTitle }}">
<meta name='og:description' content="{{ $metaDescription }}">
@endsection

@section('content')
@include('layouts.frontend-partial.breadcrumb')
<section class="sectionGap">
    <div class="container">
        <div class="grid lg:grid-cols-[8fr_4fr] items-start gap-10">
            <div class="grid gap-8">
                <div data-aos="fade-up" data-aos-duration="1000"
                    class="aspect-video  block rounded-xl md:rounded-2xl lg:rounded-[20px] overflow-hidden">
                    <img class="w-full h-full object-cover" src="{{ asset($info->featured_image) }}" width="370"
                        height="251" alt="{{ $info->title }}">
                </div>
                <div class="space-y-4 ">
                    <div class="flex gap-5 text-sm pb-5 border-b">
                        <div data-aos="fade-up" data-aos-duration="1000" class="flex items-center gap-2">
                            <span class="text-primary">
                                {!! config('icons.user') !!}
                            </span>

                            <span class="font-medium">By Admin</span>
                        </div>
                        <div data-aos="fade-up" data-aos-duration="1000" class="flex items-center gap-2">
                            <span class="text-primary">
                                {!! config('icons.calendar') !!}
                            </span>

                            <span class="font-medium">
                                {{ !empty($info->created) ? date('M d, Y',strtotime($info->created)) : date('M d, Y') }}
                            </span>
                        </div>

                        <div data-aos="fade-up" data-aos-duration="1000" class="flex items-center gap-2">
                            <span class="text-primary">
                                {!! config('icons.clock') !!}
                            </span>

                            <span class="font-medium">{{ $info->read_time }} min read</span>
                        </div>
                    </div>
                    <h1 data-aos="fade-up" data-aos-duration="1000" class="sectionTitle lg:text-4xl">
                        {{ $info->title }}
                    </h1>
                    <div data-aos="fade-up" data-aos-duration="1000"
                        class="prose prose-h3:text-2xl prose-h3:text-darkblue prose-h3:font-semibold prose-h4:mt-4 prose-h4:text-xl prose-h4:font-medium prose-h4:mb-2 prose-h4:text-darkblue prose-p:text-[#504E4E] prose-p:font-medium prose-blockquote:bg-[#f6f3fe] prose-blockquote:rounded-lg   prose-blockquote:p-5 md:prose-blockquote:p-7 lg:prose-blockquote:px-10  lg:prose-blockquote:py-8 prose-blockquote:border-l-2 lg:prose-blockquote:border-l-4 prose-blockquote:border-[#6a47ed]  prose-blockquote:text-base prose-blockquote:text-[#17012c] prose-blockquote:font-normal prose-blockquote:leading-[26px] ">
                        {!! $info->description !!}
                    </div>
                </div>
            </div>

            <div class="bg-[#f6f3fe] p-5 rounded lg:sticky lg:top-20">
                <h4 class="text-2xl text-darkblue font-semibold mb-5">
                    Recent Posts
                </h4>

                <ul class=" divide-y">
                    @foreach ($recentBlog as $blog)
                    <div class="flex items-center gap-2.5 py-4 group">
                        @if (!empty($blog->featured_image))
                        <a href="{{ url('blog-details/' . $blog->page_url) }}"
                            class="block shrink-0 size-20 overflow-hidden rounded">
                            <img src="{{asset($blog->featured_image)}}"
                                class="group-hover:scale-105  duration-300 object-cover size-full" alt="Blog image">
                        </a>
                        @endif

                        <div class="grid gap-1.5">
                            <div class="flex items-center gap-2 text-sm">
                                <span class="text-primary">
                                    {!! config('icons.calendar')!!}
                                </span>

                                <span class="font-medium">
                                    {{ !empty($blog->created) ? date(
                                    'M d, Y',
                                    strtotime($blog->created)
                                    ) :
                                    date('M d, Y')}}
                                </span>
                            </div>
                            <h6>
                                <a href="{{ url('blog-details/' . $blog->page_url) }}"
                                    class="text-base font-semibold text-darkblue duration-300 group-hover:text-primary block"
                                    style="overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;">
                                    {{ $blog->title }}
                                </a>
                            </h6>
                        </div>
                    </div>
                    @endforeach
                </ul>
            </div>
        </div>
    </div>
</section>
@endsection