@extends('page.layouts.main')
@push('styles')
    <style>
        .image img {
            width: 100%;
            height: auto;
        }
    </style>
@endpush

@section('content')
<section class="py-16 sm:py-24">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">

        {{-- Back to blog --}}
        <a href="{{ route('blogs') }}" class="inline-flex items-center gap-1.5 text-sm font-medium text-gray-500 hover:text-gray-800 transition-colors">
            <span aria-hidden="true">&larr;</span>
            Back to Blog
        </a>

        @php
            $title = $blog->translate[$locale]['title'] ?? $blog->slug;
            $desc = $blog->translate[$locale]['description'] ?? null;
            $content = $blog->translate[$locale]['content'] ?? null;
            $img = asset('media/blog/' . $blog->image);

            // Tags
            $tags = $blog->tags ?? [];

            // Blog Category
            $category = $blog->blogCategory;
            $categoryName = null;
            if ($category && is_array($category->translate)) {
                $categoryName = $category->translate[$locale]['name']
                    ?? $category->translate['en']['name']
                    ?? $category->translate[array_key_first($category->translate)]['name']
                    ?? null;
            }
        @endphp

        {{-- Title --}}
        <h1 class="mt-8 text-4xl font-bold tracking-tight text-gray-800 sm:text-5xl">{{ $title }}</h1>

        {{-- Category --}}
        @if ($categoryName)
            <span class="inline-block mt-3 mb-2 bg-green-50 text-green-700 text-xs font-semibold px-2.5 py-1 rounded-full border border-green-100 truncate max-w-[140px]" title="{{ $categoryName }}">
                {{ $categoryName }}
            </span>
        @endif

        {{-- Description --}}
        @if($desc)
            <p class="mt-2 text-xl text-gray-500">{{ $desc }}</p>
        @endif

        {{-- Blog Image --}}
        <div class="mt-10">
            <img src="{{ $img }}" alt="{{ $title }}" class="w-full h-auto aspect-video object-cover rounded-xl shadow-md ring-1 ring-gray-900/5">
        </div>

        {{-- Tags --}}
        @if(!empty($tags) && count($tags) > 0)
            <div class="mt-5 flex flex-wrap gap-2">
                @foreach($tags as $tag)
                    @php
                        $tagName = $tag->translate[$locale]['name']
                            ?? $tag->translate['en']['name']
                            ?? $tag->translate[array_key_first($tag->translate)]['name']
                            ?? null;
                    @endphp
                    @if($tagName)
                        <span class="inline-block bg-blue-50 text-blue-700 text-xs font-medium px-3 py-1 rounded-full shadow-sm border border-blue-100 truncate max-w-[160px]" title="{{ $tagName }}">
                            {{ $tagName }}
                        </span>
                    @endif
                @endforeach
            </div>
        @endif

        {{-- Content --}}
        <div class="w-full bg-white rounded-xl shadow-lg border border-gray-100 p-8 mt-4">
            <article class="prose prose-lg prose-gray max-w-none">
                {!! $content !!}
            </article>
        </div>

        {{-- Disqus Comment Section --}}
        <div id="disqus_thread" class="mt-12"></div>
        <script>
            /*
            var disqus_config = function () {
                this.page.url = "{{ url()->current() }}";
                this.page.identifier = "{{ $blog->id }}";
            };
            */
            (function() {
                var d = document, s = d.createElement('script');
                s.src = 'https://imros2026-com.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>
</section>
@endsection