@php
    $title = ___($blog, 'title');
    $author = 'EpoxyArt';
    if ($blog->author) {
        $author = trim($blog->author->localizedName()) ?: 'EpoxyArt';
    }
    $image = $blog->imageUrl();
    $shareUrl = schema_absolute_url('/blog/' . $blog->id);
    $keywords = array_filter(array_map('trim', explode(',', ___($blog, 'meta_keywords') ?: '')));
@endphp
@extends('layouts.public')
@section('meta')
    <meta name="description" content="{{ ___($blog, 'meta_description') }}">
    <meta name="keywords" content="{{ ___($blog, 'meta_keywords') ?: 'blog, articles, news' }}">
    <title>{{ $title }} - {{ config('app.name') }}</title>
    <meta property="og:title" content="{{ $title }}" />
    <meta property="og:url" content="{{ $shareUrl }}" />
    @if($image)
        <meta property="og:image" content="{{ $image }}">
    @endif
    @push('json_ld')
        @include('includes.json-ld-graphs', [
            'graphs' => [
                schema_breadcrumb([
                    ['name' => __('public.breadcrumb.home'), 'url' => schema_absolute_url('/')],
                    ['name' => __('public.blog.title'), 'url' => schema_absolute_url('/blog')],
                    ['name' => $title, 'url' => schema_absolute_url('/blog/' . $blog->id)],
                ]),
            ],
        ])
    @endpush
@endsection
@section('content')
    @include('includes.corano-breadcrumb', [
        'crumbs' => [
            ['label' => __('public.blog.title'), 'url' => __url('/blog')],
            ['label' => $title],
        ],
    ])

    <div class="blog-details-wrapper section-padding">
        <div class="container">
            <div class="row">
                <div class="col-lg-3 order-2 order-lg-1">
                    @include('pages.blog.partials.sidebar', [
                        'recentPosts' => $recentPosts ?? [],
                        'popularPosts' => $popularPosts ?? [],
                        'showPopular' => true,
                    ])
                </div>
                <div class="col-lg-9 order-1 order-lg-2">
                    <article class="blog-details-inner">
                        @if($image)
                            <figure class="blog-details-thumb">
                                <img src="{{ $image }}" alt="{{ $title }}">
                            </figure>
                        @endif
                        <div class="blog-details-content">
                            <h1 class="blog-details-title">{{ $title }}</h1>
                            <div class="blog-details-meta">
                                <ul>
                                    <li><i class="fa fa-user"></i> {{ $author }}</li>
                                    <li><i class="fa fa-calendar"></i> {{ $blog->created_at?->format('d/m/Y') }}</li>
                                </ul>
                            </div>
                            <div class="blog-details-body rich-content">
                                {!! rich_html(___($blog, 'description')) !!}
                            </div>

                            <div class="blog-details-footer">
                                @if(count($keywords))
                                    <div class="tag-line">
                                        <h5>{{ __('public.blog.tags') }}:</h5>
                                        @foreach(array_slice($keywords, 0, 5) as $keyword)
                                            <span>{{ $keyword }}</span>
                                        @endforeach
                                    </div>
                                @endif
                                <div class="blog-share-link">
                                    <h5>{{ __('public.share') }}:</h5>
                                    <div class="blog-social-icon">
                                        <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode($shareUrl) }}" target="_blank" rel="noopener" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
                                        <a href="https://twitter.com/intent/tweet?url={{ urlencode($shareUrl) }}&text={{ urlencode($title) }}" target="_blank" rel="noopener" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
                                        <a href="#" class="js-copy-blog-link" data-url="{{ $shareUrl }}" data-copied="{{ __('public.blog.link_copied') }}" aria-label="{{ __('public.share') }}"><i class="fa fa-link"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </article>
                </div>
            </div>
        </div>
    </div>

    @if(isset($relatedPosts) && $relatedPosts->count())
        <section class="related-blog-area section-padding pt-0">
            <div class="container">
                <div class="section-title text-center">
                    <h2 class="title">{{ __('public.blog.related') }}</h2>
                </div>
                <div class="row">
                    @foreach($relatedPosts as $post)
                        <div class="col-md-6 col-lg-3 d-flex">
                            @include('pages.blog.partials.post-card', ['post' => $post, 'showExcerpt' => false])
                        </div>
                    @endforeach
                </div>
            </div>
        </section>
    @endif
@endsection
@push('scripts')
    <script>
        document.addEventListener('click', function (e) {
            var link = e.target.closest('.js-copy-blog-link');
            if (!link) return;
            e.preventDefault();
            var url = link.getAttribute('data-url');
            var message = link.getAttribute('data-copied') || '';
            if (navigator.clipboard && navigator.clipboard.writeText) {
                navigator.clipboard.writeText(url).then(function () {
                    if (window.Swal) {
                        Swal.fire({ toast: true, position: 'top-end', icon: 'success', title: message, showConfirmButton: false, timer: 2000 });
                    }
                });
            }
        });
    </script>
@endpush