@extends('layouts.frontend')

@section('meta_seo')
    @if($blog->meta_description)
        <meta name="description" content="{{ $blog->meta_description }}">
    @endif
    @if($blog->meta_keywords)
        <meta name="keywords" content="{{ $blog->meta_keywords }}">
    @endif

    <!-- Open Graph -->
    <meta property="og:title" content="{{ $blog->title }}">
    <meta property="og:description" content="{{ $blog->meta_description ?? $blog->excerpt }}">
    <meta property="og:type" content="article">
    <meta property="og:url" content="{{ url()->current() }}">
    @if($blog->image)
        <meta property="og:image" content="{{ asset('storage/' . $blog->image) }}">
    @endif
@endsection

@section('title', $blog->title . ' | Webiancy')

@section('content')
    <!-- ===== Breadcrumb Start ===== -->
    <section class="relative z-10 pt-36 pb-14 lg:pt-44 lg:pb-20">
        <div class="px-4 xl:container">
            <div class="text-center">
                <ul class="flex items-center justify-center gap-2 mb-6">
                    <li>
                        <a href="{{ route('home') }}" class="font-heading text-dark-text hover:text-primary text-base dark:hover:text-white">
                            Home
                        </a>
                    </li>
                    <li class="text-dark-text">/</li>
                    <li>
                        <a href="{{ route('frontend.blogs.index') }}" class="font-heading text-dark-text hover:text-primary text-base dark:hover:text-white">
                            Blog
                        </a>
                    </li>
                    @if($blog->category)
                        <li class="text-dark-text">/</li>
                        <li>
                            <a href="{{ route('frontend.blogs.index', ['category' => $blog->category->slug]) }}"
                               class="font-heading text-dark-text hover:text-primary text-base dark:hover:text-white">
                                {{ $blog->category->name }}
                            </a>
                        </li>
                    @endif
                    <li class="text-dark-text">/</li>
                    <li>
                        <span class="font-heading text-primary text-base">{{ Str::limit($blog->title, 40) }}</span>
                    </li>
                </ul>
                <h1 class="font-heading text-dark mb-5 text-2xl font-bold sm:text-3xl md:text-4xl lg:text-[44px] lg:leading-[54px] dark:text-white max-w-[800px] mx-auto">
                    {{ $blog->title }}
                </h1>
                <div class="flex items-center justify-center gap-6 mt-6">
                    @if($blog->author)
                        <p class="font-heading text-dark-text flex items-center text-base">
                            <span class="pr-2">
                                <svg width="18" height="18" viewBox="0 0 18 18" class="fill-current">
                                    <path d="M15 16.5H13.5V15C13.5 14.4033 13.2629 13.831 12.841 13.409C12.419 12.9871 11.8467 12.75 11.25 12.75H6.75C6.15326 12.75 5.58097 12.9871 5.15901 13.409C4.73705 13.831 4.5 14.4033 4.5 15V16.5H3V15C3 14.0054 3.39509 13.0516 4.09835 12.3484C4.80161 11.6451 5.75544 11.25 6.75 11.25H11.25C12.2446 11.25 13.1984 11.6451 13.9016 12.3484C14.6049 13.0516 15 14.0054 15 15V16.5ZM9 9.75C8.40905 9.75 7.82389 9.63361 7.27792 9.40746C6.73196 9.18131 6.23588 8.84984 5.81802 8.43198C5.40015 8.01412 5.06869 7.51804 4.84254 6.97208C4.6164 6.42611 4.5 5.84095 4.5 5.25C4.5 4.65905 4.6164 4.07389 4.84254 3.52793C5.06869 2.98196 5.40015 2.48588 5.81802 2.06802C6.23588 1.65016 6.73196 1.31869 7.27792 1.09254C7.82389 0.866396 8.40905 0.75 9 0.75C10.1935 0.75 11.3381 1.22411 12.182 2.06802C13.0259 2.91193 13.5 4.05653 13.5 5.25C13.5 6.44348 13.0259 7.58807 12.182 8.43198C11.3381 9.2759 10.1935 9.75 9 9.75ZM9 8.25C9.79565 8.25 10.5587 7.93393 11.1213 7.37132C11.6839 6.80871 12 6.04565 12 5.25C12 4.45435 11.6839 3.69129 11.1213 3.12868C10.5587 2.56607 9.79565 2.25 9 2.25C8.20435 2.25 7.44129 2.56607 6.87868 3.12868C6.31607 3.69129 6 4.45435 6 5.25C6 6.04565 6.31607 6.80871 6.87868 7.37132C7.44129 7.93393 8.20435 8.25 9 8.25Z" />
                                </svg>
                            </span>
                            {{ $blog->author }}
                        </p>
                    @endif
                    <p class="font-heading text-dark-text flex items-center text-base">
                        <span class="pr-2">
                            <svg width="18" height="18" viewBox="0 0 18 18" class="fill-current">
                                <path d="M12.75 2.25H15.75C15.9489 2.25 16.1397 2.32902 16.2803 2.46967C16.421 2.61032 16.5 2.80109 16.5 3V15C16.5 15.1989 16.421 15.3897 16.2803 15.5303C16.1397 15.671 15.9489 15.75 15.75 15.75H2.25C2.05109 15.75 1.86032 15.671 1.71967 15.5303C1.57902 15.3897 1.5 15.1989 1.5 15V3C1.5 2.80109 1.57902 2.61032 1.71967 2.46967C1.86032 2.32902 2.05109 2.25 2.25 2.25H5.25V0.75H6.75V2.25H11.25V0.75H12.75V2.25ZM11.25 3.75H6.75V5.25H5.25V3.75H3V6.75H15V3.75H12.75V5.25H11.25V3.75ZM15 8.25H3V14.25H15V8.25Z" />
                            </svg>
                        </span>
                        {{ $blog->created_at->format('d M, Y') }}
                    </p>
                    @if($blog->read_time)
                        <p class="font-heading text-dark-text flex items-center text-base">
                            <span class="pr-2">
                                <svg width="18" height="18" viewBox="0 0 18 18" class="fill-current">
                                    <path d="M9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9C16.5 13.1421 13.1421 16.5 9 16.5ZM9 15C10.5913 15 12.1174 14.3679 13.2426 13.2426C14.3679 12.1174 15 10.5913 15 9C15 7.4087 14.3679 5.88258 13.2426 4.75736C12.1174 3.63214 10.5913 3 9 3C7.4087 3 5.88258 3.63214 4.75736 4.75736C3.63214 5.88258 3 7.4087 3 9C3 10.5913 3.63214 12.1174 4.75736 13.2426C5.88258 14.3679 7.4087 15 9 15ZM9.75 9H12.75V10.5H8.25V5.25H9.75V9Z" />
                                </svg>
                            </span>
                            {{ $blog->read_time }}
                        </p>
                    @endif
                    @if($blog->category)
                        <a href="{{ route('frontend.blogs.index', ['category' => $blog->category->slug]) }}"
                           class="bg-primary/10 text-primary font-heading rounded-sm px-3 py-1 text-sm font-medium hover:bg-primary hover:text-white transition">
                            {{ $blog->category->name }}
                        </a>
                    @endif
                </div>
            </div>
        </div>
    </section>
    <!-- ===== Breadcrumb End ===== -->

    <!-- ===== Blog Detail Start ===== -->
    <section class="pb-14 sm:pb-20 lg:pb-[130px]">
        <div class="px-4 xl:container">
            <div class="mx-auto max-w-[850px]">
                <!-- Featured Image -->
                @if($blog->image)
                    <div class="mb-10 overflow-hidden rounded-sm">
                        <img src="{{ asset('storage/' . $blog->image) }}" alt="{{ $blog->title }}" class="w-full h-auto object-cover rounded-sm" />
                    </div>
                @endif

                <!-- Blog Content -->
                <div class="blog-content prose prose-lg max-w-none dark:prose-invert
                            prose-headings:font-heading prose-headings:text-dark dark:prose-headings:text-white
                            prose-p:text-dark-text prose-p:text-base prose-p:leading-relaxed
                            prose-a:text-primary hover:prose-a:text-primary/80
                            prose-img:rounded-sm prose-img:w-full
                            prose-strong:text-dark dark:prose-strong:text-white
                            prose-blockquote:border-primary prose-blockquote:text-dark-text
                            prose-code:text-primary prose-code:bg-gray-100 dark:prose-code:bg-gray-800 prose-code:px-1 prose-code:py-0.5 prose-code:rounded
                            prose-pre:bg-gray-900 prose-pre:text-gray-100">
                    {!! $blog->content !!}
                </div>

                <!-- Tags / Meta Keywords -->
                @if($blog->meta_keywords)
                    <div class="mt-10 border-t border-b py-6 dark:border-gray-700">
                        <div class="flex flex-wrap items-center gap-3">
                            <span class="font-heading text-dark text-base font-medium dark:text-white">Tags:</span>
                            @foreach(explode(',', $blog->meta_keywords) as $tag)
                                <span class="bg-gray-100 text-dark-text font-heading rounded-sm px-3 py-1 text-sm dark:bg-gray-800 dark:text-gray-300">
                                    {{ trim($tag) }}
                                </span>
                            @endforeach
                        </div>
                    </div>
                @endif

                <!-- Share Links -->
                <div class="mt-6 flex items-center gap-4">
                    <span class="font-heading text-dark text-base font-medium dark:text-white">Share:</span>
                    <a href="https://twitter.com/intent/tweet?url={{ urlencode(url()->current()) }}&text={{ urlencode($blog->title) }}"
                       target="_blank" rel="noopener"
                       class="text-dark-text hover:text-primary text-lg transition dark:text-gray-400">
                        <svg width="20" height="20" viewBox="0 0 24 24" class="fill-current">
                            <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
                        </svg>
                    </a>
                    <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(url()->current()) }}"
                       target="_blank" rel="noopener"
                       class="text-dark-text hover:text-primary text-lg transition dark:text-gray-400">
                        <svg width="20" height="20" viewBox="0 0 24 24" class="fill-current">
                            <path d="M14 13.5H16.5L17.5 9.5H14V7.5C14 6.47 14 5.5 16 5.5H17.5V2.14C17.174 2.097 15.943 2 14.643 2C11.928 2 10 3.657 10 6.7V9.5H7V13.5H10V22H14V13.5Z"/>
                        </svg>
                    </a>
                    <a href="https://www.linkedin.com/shareArticle?mini=true&url={{ urlencode(url()->current()) }}&title={{ urlencode($blog->title) }}"
                       target="_blank" rel="noopener"
                       class="text-dark-text hover:text-primary text-lg transition dark:text-gray-400">
                        <svg width="20" height="20" viewBox="0 0 24 24" class="fill-current">
                            <path d="M6.94 5C6.94 5.53043 6.72929 6.03914 6.35421 6.41421C5.97914 6.78929 5.47043 7 4.94 7C4.40957 7 3.90086 6.78929 3.52579 6.41421C3.15071 6.03914 2.94 5.53043 2.94 5C2.94 4.46957 3.15071 3.96086 3.52579 3.58579C3.90086 3.21071 4.40957 3 4.94 3C5.47043 3 5.97914 3.21071 6.35421 3.58579C6.72929 3.96086 6.94 4.46957 6.94 5ZM7 8.48H3V21H7V8.48ZM13.32 8.48H9.34V21H13.28V14.43C13.28 10.77 18.05 10.43 18.05 14.43V21H22V13.07C22 6.9 14.94 7.13 13.28 10.16L13.32 8.48Z"/>
                        </svg>
                    </a>
                    <a href="https://wa.me/?text={{ urlencode($blog->title . ' ' . url()->current()) }}"
                       target="_blank" rel="noopener"
                       class="text-dark-text hover:text-primary text-lg transition dark:text-gray-400">
                        <svg width="20" height="20" viewBox="0 0 24 24" class="fill-current">
                            <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
                        </svg>
                    </a>
                </div>

                <!-- Prev / Next Navigation -->
                <div class="mt-12 flex flex-col sm:flex-row items-stretch gap-4 border-t pt-10 dark:border-gray-700">
                    @if($previousBlog)
                        <a href="{{ route('frontend.blogs.show', $previousBlog->slug) }}"
                           class="flex-1 group rounded-sm border p-5 transition hover:border-primary dark:border-gray-700 dark:hover:border-primary">
                            <span class="font-heading text-dark-text text-sm">← Previous</span>
                            <h4 class="font-heading text-dark group-hover:text-primary mt-2 text-base font-medium dark:text-white">
                                {{ Str::limit($previousBlog->title, 60) }}
                            </h4>
                        </a>
                    @else
                        <div class="flex-1"></div>
                    @endif
                    @if($nextBlog)
                        <a href="{{ route('frontend.blogs.show', $nextBlog->slug) }}"
                           class="flex-1 group rounded-sm border p-5 text-right transition hover:border-primary dark:border-gray-700 dark:hover:border-primary">
                            <span class="font-heading text-dark-text text-sm">Next →</span>
                            <h4 class="font-heading text-dark group-hover:text-primary mt-2 text-base font-medium dark:text-white">
                                {{ Str::limit($nextBlog->title, 60) }}
                            </h4>
                        </a>
                    @else
                        <div class="flex-1"></div>
                    @endif
                </div>
            </div>

            <!-- Related Blogs -->
            @if($relatedBlogs->count() > 0)
                <div class="mt-20">
                    <h2 class="font-heading text-dark mb-10 text-center text-2xl font-semibold sm:text-3xl dark:text-white">
                        Related Articles
                    </h2>
                    <div class="-mx-4 flex flex-wrap">
                        @foreach($relatedBlogs as $index => $related)
                            <div class="w-full px-4 md:w-1/2 lg:w-1/3">
                                <div class="wow fadeInUp mb-10" data-wow-delay=".{{ $index + 2 }}s">
                                    <div class="relative mb-8 overflow-hidden rounded-sm">
                                        <a href="{{ route('frontend.blogs.show', $related->slug) }}" class="block">
                                            @if($related->image)
                                                <img src="{{ asset('storage/' . $related->image) }}" alt="{{ $related->title }}" class="w-full h-[250px] object-cover" />
                                            @else
                                                <img src="{{ asset('images/blog/image-1.jpg') }}" alt="{{ $related->title }}" class="w-full h-[250px] object-cover" />
                                            @endif
                                        </a>
                                        @if($related->category)
                                            <span class="bg-primary font-heading absolute top-5 left-5 rounded-sm px-4 py-[6px] text-sm font-medium text-white">
                                                {{ $related->category->name }}
                                            </span>
                                        @endif
                                    </div>
                                    <div>
                                        <div class="mb-4 flex items-center">
                                            @if($related->author)
                                                <p class="font-heading text-dark-text flex items-center pr-5 text-base">
                                                    <span class="pr-2">
                                                        <svg width="18" height="18" viewBox="0 0 18 18" class="fill-current">
                                                            <path d="M15 16.5H13.5V15C13.5 14.4033 13.2629 13.831 12.841 13.409C12.419 12.9871 11.8467 12.75 11.25 12.75H6.75C6.15326 12.75 5.58097 12.9871 5.15901 13.409C4.73705 13.831 4.5 14.4033 4.5 15V16.5H3V15C3 14.0054 3.39509 13.0516 4.09835 12.3484C4.80161 11.6451 5.75544 11.25 6.75 11.25H11.25C12.2446 11.25 13.1984 11.6451 13.9016 12.3484C14.6049 13.0516 15 14.0054 15 15V16.5ZM9 9.75C8.40905 9.75 7.82389 9.63361 7.27792 9.40746C6.73196 9.18131 6.23588 8.84984 5.81802 8.43198C5.40015 8.01412 5.06869 7.51804 4.84254 6.97208C4.6164 6.42611 4.5 5.84095 4.5 5.25C4.5 4.65905 4.6164 4.07389 4.84254 3.52793C5.06869 2.98196 5.40015 2.48588 5.81802 2.06802C6.23588 1.65016 6.73196 1.31869 7.27792 1.09254C7.82389 0.866396 8.40905 0.75 9 0.75C10.1935 0.75 11.3381 1.22411 12.182 2.06802C13.0259 2.91193 13.5 4.05653 13.5 5.25C13.5 6.44348 13.0259 7.58807 12.182 8.43198C11.3381 9.2759 10.1935 9.75 9 9.75ZM9 8.25C9.79565 8.25 10.5587 7.93393 11.1213 7.37132C11.6839 6.80871 12 6.04565 12 5.25C12 4.45435 11.6839 3.69129 11.1213 3.12868C10.5587 2.56607 9.79565 2.25 9 2.25C8.20435 2.25 7.44129 2.56607 6.87868 3.12868C6.31607 3.69129 6 4.45435 6 5.25C6 6.04565 6.31607 6.80871 6.87868 7.37132C7.44129 7.93393 8.20435 8.25 9 8.25Z" />
                                                        </svg>
                                                    </span>
                                                    {{ $related->author }}
                                                </p>
                                            @endif
                                            <p class="font-heading text-dark-text flex items-center text-base">
                                                <span class="pr-2">
                                                    <svg width="18" height="18" viewBox="0 0 18 18" class="fill-current">
                                                        <path d="M12.75 2.25H15.75C15.9489 2.25 16.1397 2.32902 16.2803 2.46967C16.421 2.61032 16.5 2.80109 16.5 3V15C16.5 15.1989 16.421 15.3897 16.2803 15.5303C16.1397 15.671 15.9489 15.75 15.75 15.75H2.25C2.05109 15.75 1.86032 15.671 1.71967 15.5303C1.57902 15.3897 1.5 15.1989 1.5 15V3C1.5 2.80109 1.57902 2.61032 1.71967 2.46967C1.86032 2.32902 2.05109 2.25 2.25 2.25H5.25V0.75H6.75V2.25H11.25V0.75H12.75V2.25ZM11.25 3.75H6.75V5.25H5.25V3.75H3V6.75H15V3.75H12.75V5.25H11.25V3.75ZM15 8.25H3V14.25H15V8.25Z" />
                                                    </svg>
                                                </span>
                                                {{ $related->created_at->format('d M, Y') }}
                                            </p>
                                        </div>
                                        <h3>
                                            <a href="{{ route('frontend.blogs.show', $related->slug) }}"
                                               class="font-heading text-dark hover:text-primary dark:hover:text-primary text-xl font-medium md:text-2xl lg:text-xl xl:text-2xl dark:text-white">
                                                {{ $related->title }}
                                            </a>
                                        </h3>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif
        </div>
    </section>
    <!-- ===== Blog Detail End ===== -->
@endsection