@extends('front.layouts.app')

@section('seo')
    {{-- Meta Description --}}
    <meta name="description" content="{{ $post->meta['description'] ?? ($post->excerpt ?? '') }}">

    {{-- Meta Keywords --}}
    @if (!empty($post->meta['keywords']))
        <meta name="keywords" content="{{ $post->meta['keywords'] }}">
    @endif

    {{-- Canonical URL --}}
    <link rel="canonical" href="{{ url()->current() }}">

    {{-- Open Graph (WhatsApp / Facebook / LinkedIn previews) --}}
    <meta property="og:type" content="article">
    <meta property="og:title" content="{{ $post->meta['title'] ?? $post->title }}">
    <meta property="og:description" content="{{ $post->meta['description'] ?? ($post->excerpt ?? '') }}">
    <meta property="og:url" content="{{ url()->current() }}">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">
    <meta property="og:site_name" content="University of Rawalpindi">
    @if ($post->featured_image)
        <meta property="og:image" content="{{ asset('storage/blog-images/featured/' . $post->featured_image) }}">
    @endif

    {{-- Twitter Card --}}
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="{{ $post->meta['title'] ?? $post->title }}">
    <meta name="twitter:description" content="{{ $post->meta['description'] ?? ($post->excerpt ?? '') }}">
    @if ($post->featured_image)
        <meta name="twitter:image" content="{{ asset('storage/blog-images/featured/' . $post->featured_image) }}">
    @endif
@endsection

@section('content')
    <style>
        /* Custom Breadcrumb Styling */
        .custom-breadcrumb {
            font-family: Arial, sans-serif;
            font-size: 14px;
            color: #333;
        }

        .custom-breadcrumb .breadcrumb-item {
            display: inline;
        }

        .custom-breadcrumb .breadcrumb-item.active {
            font-weight: bold;
            color: #000;
        }

        .custom-breadcrumb .breadcrumb-separator {
            margin: 0 5px;
            color: #666;
        }

        #h1MainTitle {
            font-size: 40px;
        }

        html {
            scroll-behavior: smooth;
        }

        #toc a {
            color: #0d6efd;
            text-decoration: none;
            display: block;
            margin-bottom: 5px;
            font-size: 17px;
            font-weight: bold;
        }

        #toc a:hover {
            text-decoration: underline;
        }

        /* share icon style */
        .share-icon {
            font-size: 22px;
            /* increased from 18px */
            color: #666;
            transition: all 0.2s ease;
        }

        .share-icon:hover {
            color: #0d6efd;
        }

        /*Solving the problem of contents hiding through navbar */
        #blog-content h1,
        #blog-content h2,
        #blog-content h3 {
            scroll-margin-top: 100px;
        }

        /* ── Image Caption Wrapper ───────────────────── */
        /* .cv-image-wrap {
            position: relative;
            display: inline-block;
            line-height: 0;
            max-width: 100%;
            border-radius: 6px;
            overflow: hidden;
        } */

        /* Image fills wrapper */
        /* .cv-image-wrap img {
            display: block;
            max-width: 100%;
            height: auto;
        } */

        /* Caption gradient overlay */
        /* .cv-image-wrap .cv-img-caption {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 32px 14px 12px;
            background: linear-gradient(
                to top,
                rgba(0, 0, 0, 0.78) 0%,
                rgba(0, 0, 0, 0.45) 50%,
                transparent         100%
            );
            color: #ffffff;
            font-size: 13px;
            line-height: 1.5;
            text-align: center;
            box-sizing: border-box;
            font-family: inherit;
        } */

        /* Mobile responsive */
        /* @media (max-width: 576px) {
            .cv-image-wrap .cv-img-caption {
                font-size: 11px;
                padding: 20px 10px 8px;
            } */
/* } */

/* ── Image Caption Wrapper ───────────────────── */
.cv-image-wrap {
    position: relative;
    display: inline-block;
    line-height: 0;
    max-width: 100%;
    border-radius: 6px;
    overflow: hidden;
}

/* Image fills wrapper */
.cv-image-wrap img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Caption - Blackish transparent stripe */
.cv-image-wrap .cv-img-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 14px 16px;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #ffffff;
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
    box-sizing: border-box;
    font-family: inherit;
    letter-spacing: 0.02em;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Optional: Subtle gradient version (uncomment if preferred) */

/* .cv-image-wrap .cv-img-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px 16px 14px;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0.65) 100%
    );
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #ffffff;
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
    box-sizing: border-box;
    font-family: inherit;
} */


/* Mobile responsive */
@media (max-width: 576px) {
    .cv-image-wrap .cv-img-caption {
        font-size: 11px;
        padding: 10px 12px;
        letter-spacing: 0.01em;
    }
}
    </style>
    <!-- blog-details.blade.php -->
    <div class="container-fluid p-0">
        <!-- Featured Image -->
        <div class="position-relative">
            <img src="{{ asset('storage/blog-images/featured/' . ($post->featured_image ?? 'default.jpg')) }}"
                alt="{{ $post->title }}" class="img-fluid w-100" style="max-height:500px; object-fit:cover;">
        </div>
    </div>

    <div class="container mt-4">
        <div class="row">

            <div class="col-md-8">
                <!-- Breadcrumb -->
                <nav class="custom-breadcrumb">
                    <span class="breadcrumb-item">
                        <a href="{{ route('front.home') }}">Home</a>
                    </span>
                    <span class="breadcrumb-separator">></span>
                    <span class="breadcrumb-item">
                        <a href="{{ route('front.blogs') }}">Blogs</a>
                    </span>
                    <span class="breadcrumb-separator">></span>
                    <span class="breadcrumb-item">{{ $post->category->name ?? 'Uncategorized' }}</span>
                    <span class="breadcrumb-separator">></span>
                    <span class="breadcrumb-item active">{{ $post->title }}</span>
                </nav>

                <!-- Categories -->
                <div class="mb-2">
                    @foreach ($post->categories ?? [$post->category] as $category)
                        <span class="badge bg-dark text-white me-1">{{ $category->name ?? 'Uncategorized' }}</span>
                    @endforeach
                </div>

                {{-- <hr> --}}

                <!-- Blog Title -->
                <h1 class="fw-bold" id="h1MainTitle">{{ $post->title }}</h1>

                <hr>

                <!-- Meta -->
                {{-- <div class="mb-4 text-muted" style="font-size: 0.9rem;">
                    <span>{{ $post->published_at?->format('F j, Y') }}</span> |
                    <span><i class="bi bi-eye"></i> {{ $post->views ?? 0 }}</span>
                </div> --}}
                <div class="mb-4 text-muted small d-flex flex-wrap align-items-center gap-3">

                    <!-- Published Date -->
                    <span>
                        <i class="bi bi-calendar3"></i>
                        Published: {{ $post->published_at?->format('M d, Y') }}
                    </span>

                    <!-- Last Updated -->
                    <span>
                        <i class="bi bi-arrow-repeat"></i>
                        Updated: {{ $post->updated_at?->format('M d, Y') }}
                    </span>

                    <!-- Views -->
                    <span>
                        <i class="bi bi-eye"></i>
                        {{ number_format($post->views ?? 0) }} views
                    </span>

                </div>

                <!-- Blog Content -->
                <div class="blog-content" id="blog-content">
                    {!! $post->content !!}
                </div>

                {{-- Showing tags of the current  blog --}}
                <div class="mt-4">
                    @if ($post->tags && $post->tags->count() > 0)
                        <div class="d-flex align-items-center flex-wrap gap-2">
                            @foreach ($post->tags as $tag)
                                <span class="px-2 py-1 border"
                                    style="background: #f1f3f5;
                                            color: #495057;
                                            font-size: 13px;
                                            font-weight: 500;
                                            border-radius: 4px;
                                            border: 1px solid #dee2e6;
                                            display: inline-flex;
                                            align-items: center;
                                            gap: 4px;">
                                    
                                    {{ $tag->name }}
                                </span>
                            @endforeach
                        </div>
                    @endif
                </div>

                <!-- SHARE SECTION -->
                <div class="mt-5 pt-4" style="border-top: 1px solid #eee;">
                    <!-- Label -->
                    <p class="text-muted mb-2" style="font-size: 14px;">
                        Share this article
                    </p>
                    <!-- Icons (next line) -->
                    <div class="d-flex gap-3">
                        <!-- X (Twitter rebranded) -->
                        <a href="#" id="share-x" class="share-icon">
                            <i class="bi bi-twitter-x"></i>
                        </a>
                        <!-- Facebook -->
                        <a href="#" id="share-fb" class="share-icon">
                            <i class="bi bi-facebook"></i>
                        </a>
                        <!-- LinkedIn -->
                        <a href="#" id="share-ln" class="share-icon">
                            <i class="bi bi-linkedin"></i>
                        </a>
                        <!-- Instagram -->
                        <a href="#" id="share-ig" class="share-icon">
                            <i class="bi bi-instagram"></i>
                        </a>
                    </div>
                </div>

            </div>


            <div class="col-md-4" style="margin-top: 70px">
                {{-- don't remove this code as this is for authors which will be added later and this ready code --}}
                {{-- <div>
                    <p class="text-uppercase mb-1" style="font-size: 12px; font-weight: bold;">
                        Author
                    </p>
                    @if ($post->author)
                        <a href="{{ route('author.profile.show', $post->author->slug) }}">
                            {{ $post->author->name }}
                        </a>
                        <p class="text-muted mb-0">
                            {{ $post->author->designation }}
                        </p>
                    @else
                        <span class="text-muted">Unknown Author</span>
                    @endif
                </div>

                <hr> --}}

                <!-- TABLE OF CONTENTS -->
                <div style="margin-top: 40px">
                    <p class="mb-2" style="font-size: 20px; color: black; font-weight: bold;">
                        Contents
                    </p>
                    <div id="toc">
                        <!-- JS will inject links here -->
                    </div>
                </div>

            </div>
        </div>
    </div>

    {{-- Recent Posts Section (Below, Horizontal) --}}
    <div class="container mt-4">
        <div class="row">
            <div class="col-md-8">
                <!-- Horizontal Rule aligned with 8 columns -->
                <hr style="border: none; border-top: 2px solid #ddd; margin: 30px 0;">

                <div class="recent-posts-section" style="margin-top: 60px;">
                    <!-- Heading -->
                    <div style="margin-bottom: 30px;">
                        <h3 style="font-size: 28px; font-weight: 500; color: #1a1a1a; margin-bottom: 10px;">
                            {{-- Relevant Posts --}}
                            More {{ $post->category->name }} stories
                        </h3>
                    </div>
                    <!-- Posts -->
                    <div class="row">
                        @forelse($relatedPosts as $related)
                            <div class="col-md-4 mb-4">
                                <div class="recent-post-card"
                                    style="background: white; border-radius: 0px; overflow: hidden;
                                    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
                                    transition: transform 0.3s, box-shadow 0.3s; height: 100%;">
                                    <!-- IMAGE -->
                                    <div style="position: relative; overflow: hidden; height: 180px;">
                                        @if ($related->featured_image)
                                            <img src="{{ asset('storage/blog-images/featured/' . $related->featured_image) }}"
                                                alt="{{ $related->title }}"
                                                style="width: 100%; height: 100%; object-fit: cover;">
                                        @else
                                            <img src="https://via.placeholder.com/600x400"
                                                style="width: 100%; height: 100%; object-fit: cover;">
                                        @endif
                                        <!-- CATEGORY -->
                                        @if ($related->category)
                                            <div style="position: absolute; top: 10px; right: 10px;">
                                                <span
                                                    style="
                                                    background: rgba(255,255,255,0.95);
                                                    padding: 4px 10px;
                                                    border-radius: 12px;
                                                    font-size: 10px;
                                                    font-weight: 600;
                                                    color: {{ $related->category->color ?? '#0d6efd' }};">
                                                    {{ strtoupper($related->category->name) }}
                                                </span>
                                            </div>
                                        @endif
                                    </div>
                                    <!-- CONTENT -->
                                    <div style="padding: 15px;">
                                        <h6 style="font-size: 14px; font-weight: 700; color: #1a1a1a; margin-bottom: 8px;">
                                            <a href="{{ route('blog.details-show', $related->slug) }}"
                                                style="color: #1a1a1a; text-decoration: none;">
                                                {{ $related->title }}
                                            </a>
                                        </h6>
                                        <!-- READ MORE -->
                                        <a href="{{ route('blog.details-show', $related->slug) }}"
                                            style="color: #0d6efd; font-weight: 600; text-decoration: none; font-size: 12px;">
                                            Read More →
                                        </a>
                                    </div>
                                </div>
                            </div>
                        @empty
                            <div class="col-12 text-center">
                                <p>No related posts found</p>
                            </div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    <!-- Blog Detail Area End Here -->

    <script>
        document.addEventListener("DOMContentLoaded", function() {

            const content = document.getElementById("blog-content");
            const toc = document.getElementById("toc");

            if (!content || !toc) return;

            const headings = content.querySelectorAll("h1, h2, h3");

            headings.forEach((heading, index) => {

                // 🔹 Create unique ID
                const id = "section-" + index;
                heading.setAttribute("id", id);

                // 🔹 Create TOC link
                const link = document.createElement("a");
                link.href = "#" + id;
                link.innerText = heading.innerText;

                link.style.display = "block";
                link.style.marginBottom = "5px";
                link.style.textDecoration = "none";

                toc.appendChild(link);
            });

        });
    </script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {

            const url = encodeURIComponent(window.location.href);
            const title = encodeURIComponent(document.title);

            const shareX = document.getElementById("share-x");
            const shareFB = document.getElementById("share-fb");
            const shareLN = document.getElementById("share-ln");
            const shareIG = document.getElementById("share-ig");

            // X (still uses twitter intent API)
            if (shareX) {
                shareX.href = `https://twitter.com/intent/tweet?url=${url}&text=${title}`;
                shareX.target = "_blank";
            }

            // Facebook
            if (shareFB) {
                shareFB.href = `https://www.facebook.com/sharer/sharer.php?u=${url}`;
                shareFB.target = "_blank";
            }

            // LinkedIn
            if (shareLN) {
                shareLN.href = `https://www.linkedin.com/sharing/share-offsite/?url=${url}`;
                shareLN.target = "_blank";
            }

            // Instagram (no direct sharing support)
            if (shareIG) {
                shareIG.href = "https://www.instagram.com/";
                shareIG.target = "_blank";
            }

        });
    </script>
@endsection