@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() }}">
    @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;
}
</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">
        <!-- Breadcrumbs -->
        <!-- Custom 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>

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

        <!-- Date, Views, Comments -->
        <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> |
            <span><i class="bi bi-chat"></i> {{ $post->comments_count ?? 0 }}</span>
        </div>

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

    <div class="container mt-5">
    <h5 class="mb-3">RELATED ARTICLES</h5>
    <div class="row">
        @foreach($relatedPosts as $related)
            <div class="col-md-4 mb-4">
                <div class="card h-100 border-0">
                    <a href="{{ route('blog.details-show', $related->id) }}">
                        <img src="{{ asset('storage/blog-images/featured/' . ($related->featured_image ?? 'default.jpg')) }}" class="card-img-top" alt="{{ $related->title }}">
                    </a>
                    <div class="card-body p-2">
                        <h6 class="card-title">
                            <a href="{{ route('blog.details-show', $related->id) }}" class="text-dark text-decoration-none">
                                {{ $related->title }}
                            </a>
                        </h6>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
    <!-- Inner Page Banner Area Start Here -->
    {{-- <div class="inner-page-banner-area">
        <div class="container">
            <div class="pagination-area">
                <h1>Blog Details</h1>
                <ul>
                    <li><a href="{{ route('front.home') }}">Home</a> -</li>
                    <li><a href="{{ route('front.blogs') }}">Blogs</a> -</li>
                    <li>{{ $post->title }}</li>
                </ul>
            </div>
        </div>
    </div> --}}
    <!-- Inner Page Banner Area End Here -->

    <!-- Blog Detail Area Start Here -->
    {{-- <div class="blog-detail-area" style="padding: 60px 0; background: #f8f9fa;">
        <div class="container">
            <div class="row">

                <!-- Main Content -->
                <div class="col-lg-12">

                    <!-- Blog Post Card -->
                    <article class="blog-detail-card"
                        style="background: white; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); overflow: hidden; margin-bottom: 40px;">

                        <!-- Featured Image -->
                        @if ($post->featured_image)
                            <div style="position: relative; overflow: hidden; height: 450px;">
                                <img src="{{ asset('storage/blog-images/featured/' . $post->featured_image) }}"
                                    alt="{{ $post->title }}" style="width: 100%; height: 100%; object-fit: cover;">

                                <!-- Category Badge -->
                                @if ($post->category)
                                    <div style="position: absolute; top: 20px; left: 20px;">
                                        <span
                                            style="background: {{ $post->category->color }}; padding: 8px 20px; border-radius: 20px; font-size: 12px; font-weight: 600; color: white; text-transform: uppercase; letter-spacing: 1px;">
                                            {{ $post->category->name }}
                                        </span>
                                    </div>
                                @endif
                            </div>
                        @endif

                        <!-- Post Content -->
                        <div style="padding: 40px;">

                            <!-- Post Meta -->
                            <div
                                style="display: flex; align-items: center; flex-wrap: wrap; gap: 20px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 2px solid #f0f0f0;">
                                <!-- Author -->
                                {{-- <div style="display: flex; align-items: center;">
                                    <img src="https://ui-avatars.com/api/?name=username&background=0d6efd&color=fff&size=40" 
                                         alt="alternaate taext" 
                                         style="width: 40px; height: 40px; border-radius: 50%; margin-right: 12px; border: 2px solid #0d6efd;">
                                    <div>
                                        <p style="margin: 0; color: #1a1a1a; font-weight: 600; font-size: 14px;">author name</p>
                                        <p style="margin: 0; color: #999; font-size: 12px;">Author</p>
                                    </div>
                                </div> --}}

    <!-- Date -->
    {{-- <div style="display: flex; align-items: center;">
        <svg style="width: 16px; height: 16px; margin-right: 6px; color: #0d6efd;" fill="none" stroke="currentColor"
            viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
        </svg>
        <span style="color: #666; font-size: 14px;">{{ $post->published_at->format('M d, Y') }}</span>
    </div> --}}

    <!-- Reading Time -->
    {{-- <div style="display: flex; align-items: center;">
        <svg style="width: 16px; height: 16px; margin-right: 6px; color: #d6001c;" fill="none" stroke="currentColor"
            viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
        <span style="color: #666; font-size: 14px;">{{ $post->reading_time }} min read</span>
    </div> --}}

    <!-- Views -->
    {{-- <div style="display: flex; align-items: center;">
        <svg style="width: 16px; height: 16px; margin-right: 6px; color: #0d6efd;" fill="none" stroke="currentColor"
            viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
        </svg>
        <span style="color: #666; font-size: 14px;">{{ number_format($post->views) }}
            views</span>
    </div>
    </div> --}}

    <!-- Post Title -->
    {{-- <h1 style="font-size: 36px; font-weight: 700; color: #1a1a1a; margin-bottom: 20px; line-height: 1.3;">
                                {{ $post->title }}
                            </h1> --}}

    <!-- Post Excerpt -->
    {{-- @if ($post->excerpt)
                            <p style="font-size: 18px; color: #666; line-height: 1.8; margin-bottom: 30px; padding: 20px; background: #f8f9fa; border-left: 4px solid #0d6efd; border-radius: 8px;">
                                {{ $post->excerpt }}
                            </p>
                            @endif --}}

    <!-- Post Content -->
    {{-- <div style="font-size: 16px; line-height: 1.9; color: #333;">
        {!! $post->content !!}
    </div> --}}

    <!-- Tags -->
    {{-- @if ($post->tags->count() > 0)
                            <div style="margin-top: 40px; padding-top: 30px; border-top: 2px solid #f0f0f0;">
                                <h6 style="color: #1a1a1a; font-weight: 600; margin-bottom: 15px; font-size: 14px; text-transform: uppercase; letter-spacing: 1px;">Tags</h6>
                                <div style="display: flex; flex-wrap: wrap; gap: 10px;">
                                    @foreach ($post->tags as $tag)
                                    <a href="{{ route('front.blog.tag', $tag->slug) }}" 
                                       style="display: inline-block; padding: 8px 16px; background: #f0f0f0; color: #666; border-radius: 20px; font-size: 13px; font-weight: 500; text-decoration: none; transition: all 0.3s;"
                                       onmouseover="this.style.background='#0d6efd'; this.style.color='white';"
                                       onmouseout="this.style.background='#f0f0f0'; this.style.color='#666';">
                                        #{{ $tag->name }}
                                    </a>
                                    @endforeach
                                </div>
                            </div>
                            @endif --}}



    {{-- </div>
    </article>
    </div> --}}

    <!-- Sidebar -->
    {{-- <div class="col-lg-4">
                    
                    <!-- Categories Widget -->
                    <div class="card"
                        style="border: none; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); margin-bottom: 30px;">

                        <div style="padding: 25px 25px 15px 25px; border-bottom: 2px solid #f0f0f0;">
                            <h5 style="color: #1a1a1a; font-weight: 700; margin: 0; font-size: 18px;">
                                Categories
                            </h5>
                        </div>

                        <div style="padding: 20px 25px;">

                            @forelse($categories as $category)
                                <a href="#"
                                    style="display: flex; align-items: center; justify-content: space-between;
                                    padding: 12px 0; text-decoration: none;
                                    border-bottom: {{ !$loop->last ? '1px solid #f0f0f0' : 'none' }};
                                    transition: all 0.3s;"
                                    class="category-link">

                                    <div style="display: flex; align-items: center;">

                                        <!-- Color Dot From DB -->
                                        <div
                                            style="
                                                    width: 8px;
                                                    height: 8px;
                                                    background: {{ $category->color ?? '#0d6efd' }};
                                                    border-radius: 50%;
                                                    margin-right: 12px;">
                                        </div>

                                        <!-- Category Name -->
                                        <span style="color: #333; font-weight: 500; font-size: 14px;">
                                            {{ $category->name }}
                                        </span>

                                    </div>

                                    <!-- If you have blog count -->
                                    <span style="color: #999; font-size: 13px; font-weight: 600;">
                                        {{ $category->blogs_count ?? '' }}
                                    </span>

                                </a>

                            @empty
                                <p class="text-muted">No categories found</p>
                            @endforelse

                        </div>
                    </div>

                    <!-- Recent Posts Widget -->
                    <div class="card" style="border: none; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.08);">
                        <div style="padding: 25px 25px 15px 25px; border-bottom: 2px solid #f0f0f0;">
                            <h5 style="color: #1a1a1a; font-weight: 700; margin: 0; font-size: 18px;">Recent Posts</h5>
                        </div>
                        <div style="padding: 20px 25px;">
                            <a href="#" style="display: flex; margin-bottom: 20px; text-decoration: none; transition: all 0.3s;" onmouseover="this.querySelector('h6').style.color='#0d6efd'" onmouseout="this.querySelector('h6').style.color='#1a1a1a'">
                                <img src="https://images.unsplash.com/photo-1541339907198-e08756dedf3f?w=200" 
                                     alt="Post" 
                                     style="width: 70px; height: 70px; object-fit: cover; border-radius: 8px; margin-right: 15px;">
                                <div style="flex: 1;">
                                    <h6 style="color: #1a1a1a; font-size: 14px; font-weight: 600; margin: 0 0 5px 0; line-height: 1.4;">Campus Life Guide 2024</h6>
                                    <p style="color: #999; font-size: 11px; margin: 0;">
                                        <svg style="width: 11px; height: 11px; display: inline; margin-right: 4px;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                                        </svg>
                                        May 15, 2024
                                    </p>
                                </div>
                            </a>
                            <a href="#" style="display: flex; margin-bottom: 20px; text-decoration: none; transition: all 0.3s;" onmouseover="this.querySelector('h6').style.color='#0d6efd'" onmouseout="this.querySelector('h6').style.color='#1a1a1a'">
                                <img src="https://images.unsplash.com/photo-1573164713714-d95e436ab8d6?w=200" 
                                     alt="Post" 
                                     style="width: 70px; height: 70px; object-fit: cover; border-radius: 8px; margin-right: 15px;">
                                <div style="flex: 1;">
                                    <h6 style="color: #1a1a1a; font-size: 14px; font-weight: 600; margin: 0 0 5px 0; line-height: 1.4;">Student Wellness Tips</h6>
                                    <p style="color: #999; font-size: 11px; margin: 0;">
                                        <svg style="width: 11px; height: 11px; display: inline; margin-right: 4px;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                                        </svg>
                                        May 12, 2024
                                    </p>
                                </div>
                            </a>
                            <a href="#" style="display: flex; text-decoration: none; transition: all 0.3s;" onmouseover="this.querySelector('h6').style.color='#0d6efd'" onmouseout="this.querySelector('h6').style.color='#1a1a1a'">
                                <img src="https://images.unsplash.com/photo-1529156069898-49953e39b3ac?w=200" 
                                     alt="Post" 
                                     style="width: 70px; height: 70px; object-fit: cover; border-radius: 8px; margin-right: 15px;">
                                <div style="flex: 1;">
                                    <h6 style="color: #1a1a1a; font-size: 14px; font-weight: 600; margin: 0 0 5px 0; line-height: 1.4;">Join Our Clubs</h6>
                                    <p style="color: #999; font-size: 11px; margin: 0;">
                                        <svg style="width: 11px; height: 11px; display: inline; margin-right: 4px;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                                        </svg>
                                        May 10, 2024
                                    </p>
                                </div>
                            </a>
                        </div>
                    </div>

                </div> --}}

    {{-- </div> --}}

    {{-- <!-- Recent Posts Section (Below, Horizontal) --}}
     <div class="recent-posts-section" style="margin-top: 60px;">
        <div style="margin-bottom: 30px; text-align: center;">
            <h3 style="font-size: 28px; font-weight: 700; color: #1a1a1a; margin-bottom: 10px;">
                Relevant Posts
            </h3>
            <p style="color: #666; font-size: 15px;">
                Explore these relevant articles and updates as well
            </p>
        </div>
        <div class="row">
            @forelse($relatedPosts as $related)
                <div class="col-md-4 mb-4">
                    <div class="recent-post-card"
                        style="background: white; border-radius: 12px; 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: 200px;">

                            @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: 12px; right: 12px;">
                                    <span
                                        style="
                                                background: rgba(255,255,255,0.95);
                                                padding: 4px 12px;
                                                border-radius: 16px;
                                                font-size: 10px;
                                                font-weight: 600;
                                                color: {{ $related->category->color ?? '#0d6efd' }};
                                                ">
                                        {{ strtoupper($related->category->name) }}
                                    </span>
                                </div>
                            @endif

                        </div>

                        {{-- CONTENT --}}
                        <div style="padding: 20px;">

                            {{-- DATE --}}
                            <div style="margin-bottom: 10px;">
                                <span style="color: #999; font-size: 12px;">
                                    📅 {{ optional($related->published_at)->format('M d, Y') }}
                                </span>
                            </div>

                            {{-- TITLE --}}
                            <h5 style="font-size: 16px; font-weight: 700; color: #1a1a1a; margin-bottom: 10px;">
                                <a href="{{ route('blog.details-show', $related->id) }}"
                                    style="color: #1a1a1a; text-decoration: none;">
                                    {{ $related->title }}
                                </a>
                            </h5> 

                            {{-- EXCERPT --}}
                            <p style="color: #666; font-size: 13px; line-height: 1.6; margin-bottom: 15px;">
                                {{ Str::limit(strip_tags($related->excerpt ?? $related->content), 100) }}
                            </p> 

                            {{-- READ MORE --}}
                            <a href="{{ route('blog.details-show', $related->id) }}"
                                style="color: #0d6efd; font-weight: 600; text-decoration: none; font-size: 13px;">
                                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> 
    <!-- Blog Detail Area End Here -->
@endsection