@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="mb-3 text-3xl leading-normal font-medium text-white">
                    {{ $blog->title }}
                </h3>

                <ul class="list-none mt-6">
                    <li class="inline-block font-semibold text-white/50 mx-5"> <span class="text-white block">{{ __('landing.about.published_on') }} :</span> <span class="block">{{ App\Helpers\Methods::reformatDate($blog->published_at) }}</span></li>
                </ul>
            </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/50 hover:text-white"><a href="{{ route('landing.blogs') }}">{{ __('landing.information.slug') }}</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">{{ $blog->title }}</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 md:grid-cols-12 grid-cols-1 gap-[30px]">
                <div class="lg:col-span-8 md:col-span-6">
                    <div class="p-6 rounded-md shadow dark:shadow-gray-800">

                        <img src="{{ $blog->media()?->first()?->original_url }}" class="w-full h-96 object-cover rounded-md" alt="">

                        <div class="mt-6">
                            {!! App\Helpers\Methods::convertMarkdownToHtml($blog->content) !!}
                        </div>
                    </div>
                </div>

                <div class="lg:col-span-4 md:col-span-6">
                    <div class="sticky top-20">
                        <h5 class="text-lg font-semibold bg-gray-50 dark:bg-slate-800 shadow dark:shadow-gray-800 rounded-md p-2 text-center">Recent post</h5>
                        @foreach($related as $item)
                            @if($loop->first)
                                <div class="flex items-center mt-8">
                                    <img src="{{ $item->media()?->first()?->original_url }}" class="h-16 rounded-md shadow dark:shadow-gray-800" alt="">

                                    <div class="ms-3">
                                        <a href="{{ route('landing.blog.detail', ['slug' => $item->slug]) }}" class="font-semibold hover:text-primary-600">{{ $item->title }}</a>
                                        <p class="text-sm text-slate-400">{{ App\Helpers\Methods::reformatDate($item->published_at) }}</p>
                                    </div>
                                </div>
                            @else
                                <div class="flex items-center mt-4">
                                    <img src="{{ $item->media()?->first()?->original_url }}" class="h-16 rounded-md shadow dark:shadow-gray-800" alt="">

                                    <div class="ms-3">
                                        <a href="{{ route('landing.blog.detail', ['slug' => $item->slug]) }}" class="font-semibold hover:text-primary-600">{{ $item->title }}</a>
                                        <p class="text-sm text-slate-400">{{ App\Helpers\Methods::reformatDate($item->published_at) }}</p>
                                    </div>
                                </div>
                            @endif
                        @endforeach

                        <h5 class="text-lg font-semibold bg-gray-50 dark:bg-slate-800 shadow dark:shadow-gray-800 rounded-md p-2 text-center mt-8">Social sites</h5>
                        <ul class="list-none text-center mt-8">
                            @if($generalSettings->social_linkedin != '')
                                <li class="inline"><a href="{{ $generalSettings->social_linkedin }}" class="size-8 inline-flex items-center justify-center tracking-wide align-middle duration-500 text-base text-center border border-gray-100 dark:border-gray-800 rounded-md text-slate-400 hover:border-primary-600 hover:text-white hover:bg-primary-600"><i data-feather="linkedin" class="size-4"></i></a></li>
                            @endif
                            @if($generalSettings->social_facebook != '')
                                <li class="inline"><a href="{{ $generalSettings->social_facebook }}" class="size-8 inline-flex items-center justify-center tracking-wide align-middle duration-500 text-base text-center border border-gray-100 dark:border-gray-800 rounded-md text-slate-400 hover:border-primary-600 hover:text-white hover:bg-primary-600"><i data-feather="facebook" class="size-4"></i></a></li>
                            @endif
                            @if($generalSettings->social_instagram != '')
                                <li class="inline"><a href="{{ $generalSettings->social_instagram }}" class="size-8 inline-flex items-center justify-center tracking-wide align-middle duration-500 text-base text-center border border-gray-100 dark:border-gray-800 rounded-md text-slate-400 hover:border-primary-600 hover:text-white hover:bg-primary-600"><i data-feather="instagram" class="size-4"></i></a></li>
                            @endif
                            @if($generalSettings->social_twitter != '')
                                <li class="inline"><a href="{{ $generalSettings->social_twitter }}" class="size-8 inline-flex items-center justify-center tracking-wide align-middle duration-500 text-base text-center border border-gray-100 dark:border-gray-800 rounded-md text-slate-400 hover:border-primary-600 hover:text-white hover:bg-primary-600"><i data-feather="twitter" class="size-4"></i></a></li>
                            @endif
                            @if($generalSettings->social_email != '')
                                <li class="inline"><a href="mailto:{{ $generalSettings->social_email }}" class="size-8 inline-flex items-center justify-center tracking-wide align-middle duration-500 text-base text-center border border-gray-100 dark:border-gray-800 rounded-md text-slate-400 hover:border-primary-600 hover:text-white hover:bg-primary-600"><i data-feather="mail" class="size-4"></i></a></li>
                            @endif
                        </ul><!--end icon-->

                        <h5 class="text-lg font-semibold bg-gray-50 dark:bg-slate-800 shadow dark:shadow-gray-800 rounded-md p-2 text-center mt-8">Tags</h5>
                        <ul class="list-none text-center mt-8">
                            @foreach($blog->tags as $tag)
                                <li class="inline-block m-2"><a href="" class="px-3 py-1 text-slate-400 hover:text-white dark:hover:text-white bg-gray-50 dark:bg-slate-800 text-sm hover:bg-primary-600 dark:hover:bg-primary-600 rounded-md shadow dark:shadow-gray-800 duration-500">{{ $tag->getTranslation('name', 'en') }}</a></li>
                            @endforeach
                        </ul>
                    </div>
                </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