@extends('landing.layout')

@section('title', $blog->title)

@section('content')
    <section class="relative table w-full bg-cover bg-center bg-no-repeat py-32 lg:py-44"
        style="background-image: url('{{ $blog->image ? asset('storage/' . $blog->image) : asset('landing/images/bg/3.jpg') }}')">
        <div class="absolute inset-0 bg-slate-900 opacity-80"></div>
        <div class="container relative">
            <div class="mt-10 grid grid-cols-1 text-center">
                <h1 class="mb-3 text-2xl font-medium leading-snug tracking-wide text-white md:text-3xl md:leading-snug">
                    {{ $blog->title }}
                </h1>

                <ul class="mt-6 list-none">
                    <li class="mx-5 inline-block text-white/50">
                        <span class="block text-white">Author:</span>
                        <span class="block">{{ $blog->user->name ?? 'Admin' }}</span>
                    </li>
                    <li class="mx-5 inline-block text-white/50">
                        <span class="block text-white">Date:</span>
                        <span class="block">{{ $blog->created_at->format('M d, Y') }}</span>
                    </li>
                    @if ($blog->category)
                        <li class="mx-5 inline-block text-white/50">
                            <span class="block text-white">Category:</span>
                            <span class="block">{{ $blog->category->name }}</span>
                        </li>
                    @endif
                    <li class="mx-5 inline-block text-white/50">
                        <span class="block text-white">Views:</span>
                        <span class="block">{{ $blog->views ?? 0 }}</span>
                    </li>
                </ul>
            </div>
        </div>
    </section>

    <div class="relative">
        <div class="shape z-1 overflow-hidden text-white dark:text-slate-900">
            <svg 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>

    <section class="relative py-16 md:py-24">
        <div class="container relative">
            <div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-12">
                <div class="order-2 md:order-1 lg:col-span-8">
                    <div class="relative overflow-hidden rounded-xl shadow-sm dark:shadow-gray-800">
                        @if ($blog->image)
                            <img class="h-64 w-full object-cover" src="{{ asset('storage/' . $blog->image) }}"
                                alt="{{ $blog->title }}">
                        @endif

                        <div class="p-6">
                            @if ($blog->short_description)
                                <div
                                    class="mb-6 rounded-lg border-l-4 border-violet-600 bg-violet-50 p-4 dark:bg-violet-900/20">
                                    <p class="italic text-slate-600 dark:text-slate-300">{{ $blog->short_description }}</p>
                                </div>
                            @endif

                            <div class="prose prose-slate dark:prose-invert max-w-none">
                                {!! $blog->long_description !!}
                            </div>

                            @if ($blog->seo_keyword)
                                <div class="mt-6 border-t border-slate-100 pt-6 dark:border-slate-700">
                                    <h6 class="mb-2 text-sm font-semibold text-slate-600 dark:text-slate-300">Tags:</h6>
                                    <div class="flex flex-wrap gap-2">
                                        @foreach (explode(',', $blog->seo_keyword) as $tag)
                                            <span
                                                class="inline-block rounded-full bg-slate-100 px-3 py-1 text-xs text-slate-600 dark:bg-slate-800 dark:text-slate-300">
                                                {{ trim($tag) }}
                                            </span>
                                        @endforeach
                                    </div>
                                </div>
                            @endif

                            <div class="mt-6 border-t border-slate-100 pt-6 dark:border-slate-700">
                                <h6 class="mb-3 text-sm font-semibold text-slate-600 dark:text-slate-300">Share this
                                    article:</h6>
                                <div class="flex gap-2">
                                    <div class="sharethis-inline-share-buttons mt-5"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    @if ($blog->allow_comment)
                        <div class="mt-6 rounded-md p-6 shadow-sm dark:shadow-gray-800">
                            <h5 class="mb-6 text-lg font-semibold">Leave A Comment:</h5>

                            <div id="disqus_thread"></div>
                            <script>
                                // CONFIGURATION VARIABLES - UNCOMMENT AND CONFIGURE
                                var disqus_config = function() {
                                    this.page.url = "{{ url()->current() }}"; // Canonical URL
                                    this.page.identifier = "{{ $blog->id }}"; // Unique identifier
                                    this.page.title = "{{ addslashes($blog->title) }}"; // Page title
                                };

                                (function() { // DON'T EDIT BELOW THIS LINE
                                    var d = document,
                                        s = d.createElement('script');
                                    s.src = 'https://simdiklat.disqus.com/embed.js';
                                    s.setAttribute('data-timestamp', +new Date());
                                    (d.head || d.body).appendChild(s);
                                })();
                            </script>
                            <noscript>
                                Please enable JavaScript to view the
                                <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a>
                            </noscript>
                        </div>
                    @endif
                </div>

                @include('landing.artikel.sidebar')
            </div>
        </div>

        @if ($relatedBlogs->count() > 0)
            <div class="container relative mt-16 md:mt-24">
                <div class="grid grid-cols-1 pb-6 text-center">
                    <h4 class="mb-6 text-2xl font-semibold leading-normal md:text-3xl md:leading-normal">Artikel Lainnya
                    </h4>
                    <p class="mx-auto max-w-xl text-slate-400">Baca artikel menarik lainnya yang masih berhubungan dengan
                        topik ini.</p>
                </div>

                <div class="mt-6 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
                    @foreach ($relatedBlogs as $related)
                        <div
                            class="group relative h-fit overflow-hidden rounded-md bg-white shadow-sm transition-all duration-500 hover:shadow-lg dark:bg-slate-900 dark:shadow-gray-700">
                            <div class="relative overflow-hidden">
                                @if ($related->image)
                                    <img class="w-full object-cover transition-transform duration-300 group-hover:scale-105"
                                        class="" src="{{ asset('storage/' . $related->image) }}"
                                        alt="{{ $related->title }}" style="height: 200px;" loading="lazy">
                                @else
                                    <div
                                        class="flex h-48 w-full items-center justify-center bg-slate-200 dark:bg-slate-700">
                                        <i class="text-2xl text-slate-400" data-feather="image"></i>
                                    </div>
                                @endif
                                @if ($related->category)
                                    <div class="absolute bottom-4 start-4">
                                        <span class="rounded-md bg-violet-600 px-2.5 py-1 text-xs text-white">
                                            {{ $related->category->name }}
                                        </span>
                                    </div>
                                @endif
                            </div>

                            <div class="relative p-6">
                                <div class="mb-4 flex justify-between text-sm text-slate-400">
                                    <span class="flex items-center">
                                        <i class="me-1 size-4" data-feather="calendar"></i>
                                        {{ $related->created_at->format('M d, Y') }}
                                    </span>
                                    <span class="flex items-center">
                                        <i class="me-1 size-4" data-feather="eye"></i>
                                        {{ $related->views }}
                                    </span>
                                </div>

                                <a class="line-clamp-2 text-lg font-medium transition-colors hover:text-violet-600"
                                    href="{{ route('landing.artikel.show', $related->slug) }}">
                                    {{ Str::limit($related->title, 50) }}
                                </a>

                                <div class="mt-4">
                                    <a class="inline-flex items-center text-violet-600 transition-colors hover:text-violet-700"
                                        href="{{ route('landing.artikel.show', $related->slug) }}">
                                        Lihat Selengkapnya
                                        <i class="ms-1 size-4" data-feather="arrow-right"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        @endif
    </section>
@endsection


@push('script')
    <script type="text/javascript"
        src="https://platform-api.sharethis.com/js/sharethis.js#property=648ff94f1118dc0012962058&product=inline-share-buttons&source=platform"
        async="async"></script>
@endpush