@extends('LandingPage.Layouts.master')



@section('content')




<div class='blog blog-detail detail1'>
    <div class="bg-img md:mt-[74px] mt-14">
        <img src='{{ asset($blogs->banner) }}' alt='img' class='blog-img w-full min-[1600px]:h-[800px] xl:h-[640px] lg:h-[520px] sm:h-[380px] h-[260px] object-cover' />
    </div>
    <div class="container md:pt-20 pt-10">
        <div class="blog-content flex items-center justify-center">
            <div class="main md:w-5/6 w-full">
                <div class="blog-tag bg-green py-1 px-2.5 rounded-full text-button-uppercase inline-block">
                    {{ $blogs->category->getTranslation('name') ?? 'No Translation' }}</div>

                <div class="heading3 blog-title mt-3">{{ $blogs->getTranslation('title') ?? 'No Translation' }}</div>
                {{-- <div class="author flex items-center gap-4 mt-4">
                    <div class="avatar w-10 h-10 rounded-full overflow-hidden flex-shrink-0">
                        <img src='{{asset('landinassets/images/avatar/1.png')}}' alt='avatar' class='w-full h-full object-cover' />
            </div>
            <div class='flex items-center gap-2'>
                <div class="blog-author caption1 text-secondary">by blogMain.author</div>
                <div class="line w-5 h-px bg-secondary"></div>
                <div class="blog-date caption1 text-secondary">blogMain.date</div>
            </div>
        </div> --}}
        <div class="content md:mt-8 mt-5">
            <div class="blog-description body1">{{translate('Blog Description')}} :</div>
            <div class="body1 mt-3">
                {!! $blogs->getTranslation('description') ?? 'No Translation' !!}

            </div>
            <div class="list-img grid sm:grid-cols-2 gap-[30px] md:mt-8 mt-5">
            </div>


        </div>
        <div class="action flex items-center justify-between flex-wrap gap-5 md:mt-8 mt-5">
{{--
                @foreach ($blogs as $blog)
                @if (is_object($blog))
                    <div class="list flex items-center gap-3 flex-wrap">
                        @foreach (explode(',', $blog->getTranslation('meta_keywords') ?? '') as $tag)
                            <a href="#" class='tags bg-surface py-1.5 px-4 rounded-full text-button-uppercase
                                        cursor-pointer duration-300 hover:bg-black hover:text-white'>
                                {{ trim($tag) }}
                            </a>
                        @endforeach
                    </div>
                @endif
            @endforeach --}}




            <div class="left flex items-center gap-3 flex-wrap">
                <p>{{ translate('Tag') }}:</p>
                <div class="list flex items-center gap-3 flex-wrap">
                    @php
                        $keywords = json_decode($blogs->getTranslation('meta_keywords'), true);
                    @endphp

                    @if (!empty($keywords))
                        @foreach ($keywords as $keyword)
                            <a href="#" class="tags bg-surface py-1.5 px-4 rounded-full text-button-uppercase cursor-pointer duration-300 hover:bg-black hover:text-white">
                                {{ $keyword['value'] }}
                            </a>
                        @endforeach
                    @else
                        <span class="text-gray-500">{{ translate('No keywords') }}</span>
                    @endif
                </div>
            </div>





            <div class="right flex items-center gap-3 flex-wrap">
                <p>{{translate('Share')}}:</p>
                <div class="list flex items-center gap-3 flex-wrap">
                    <a href='https://www.facebook.com/' target='_blank' class='bg-surface w-10 h-10 flex items-center justify-center rounded-full duration-300 hover:bg-black hover:text-white'>
                        <div class="icon-facebook duration-100"></div>
                    </a>
                    <a href='https://www.instagram.com/' target='_blank' class='bg-surface w-10 h-10 flex items-center justify-center rounded-full duration-300 hover:bg-black hover:text-white'>
                        <div class="icon-instagram duration-100"></div>
                    </a>
                    <a href='https://www.twitter.com/' target='_blank' class='bg-surface w-10 h-10 flex items-center justify-center rounded-full duration-300 hover:bg-black hover:text-white'>
                        <div class="icon-twitter duration-100"></div>
                    </a>
                    <a href='https://www.youtube.com/' target='_blank' class='bg-surface w-10 h-10 flex items-center justify-center rounded-full duration-300 hover:bg-black hover:text-white'>
                        <div class="icon-youtube duration-100"></div>
                    </a>
                    <a href='https://www.pinterest.com/' target='_blank' class='bg-surface w-10 h-10 flex items-center justify-center rounded-full duration-300 hover:bg-black hover:text-white'>
                        <div class="icon-pinterest duration-100"></div>
                    </a>
                </div>
            </div>
        </div>

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

<div class='md:pb-20 pb-10'>
    <div class="news-block md:pt-20 pt-10">
        <div class="container">
            <div class="heading3 text-center">{{translate('News Blogs')}}</div>
            <div class="list grid lg:grid-cols-3 sm:grid-cols-2 md:gap-[30px] gap-4 md:mt-10 mt-6">

                @if ($relatedBlogs->isNotEmpty())
                @foreach ($relatedBlogs as $related)
                <div class="blog-item style-one h-full cursor-pointer">
                    <a href="{{ route('landing.blogs.viewblogdetails', $related->getTranslation('slug')) }}">

                        <div class="blog-main h-full block">
                            <div class="blog-thumb rounded-[20px] overflow-hidden">
                                <img src="{{ asset($related->banner) }}" alt='blog-img' class='w-full duration-500' />
                            </div>
                            <div class="blog-infor mt-7">
                                @if($related->category)
                                <div class="blog-tag bg-green py-1 px-2.5 rounded-full text-button-uppercase inline-block">
                                    {{ $related->category->getTranslation('name') }}
                                </div>
                                @endif
                                <div class="heading6 blog-title mt-3 duration-300"> {{ $related->getTranslation('title') }}</div>
                                <div class="flex items-center gap-2 mt-2">
                                    {{-- <div class="blog-author caption1 text-secondary">by Chris Evans</div> --}}
                                    {{-- <span class='w-[20px] h-[1px] bg-black'></span> --}}
                                    <div class="blog-date caption1 text-secondary"> {{ $related->created_at->format('M d, Y') }}</div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>

                @endforeach

                @endif

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



@endsection