@extends('frontend.layouts.master')

@section('title', $blog->meta_title ?? $blog->title)
@section('meta_description', $blog->meta_description ?? $blog->short_description)

@section('content')
<!-- Page Header -->
<section class="py-5 bg-light-custom">
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('home') }}" class="text-decoration-none">{{ __('ui.home') }}</a></li>
                <li class="breadcrumb-item"><a href="{{ route('blog') }}" class="text-decoration-none">{{ __('ui.blog') }}</a></li>
                @if($blog->category)
                <li class="breadcrumb-item"><a href="{{ route('blog.category', $blog->category->slug) }}" class="text-decoration-none">{{ $blog->category->name }}</a></li>
                @endif
                <li class="breadcrumb-item active" aria-current="page">{{ $blog->title }}</li>
            </ol>
        </nav>
    </div>
</section>

<!-- Article Detail -->
<section class="section-padding">
    <div class="container">
        <div class="row g-5">
            <div class="col-lg-8" data-aos="fade-up">
                <img src="{{ $blog->thumbnail ? Storage::url($blog->thumbnail) : 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=1200&h=800&fit=crop' }}" alt="{{ $blog->title }}" class="img-fluid rounded-4 mb-4">
                
                <div class="mb-4">
                    <span class="badge bg-primary-custom me-2">{{ $blog->category->name ?? __('front.common.uncategorized') }}</span>
                    <span class="text-muted"><i class="fa-regular fa-calendar me-1"></i> {{ optional($blog->published_at ?? $blog->created_at)->format('d M Y') }}</span>
                    <span class="text-muted ms-3"><i class="fa-regular fa-eye me-1"></i> {{ $blog->views }} {{ __('front.blog_detail.views') }}</span>
                </div>
                
                <h1 class="mb-4">{{ $blog->title }}</h1>
                
                <div class="article-content" style="color: var(--gray-600);">
                    {!! $blog->content !!}
                </div>
                
                <!-- Share -->
                <div class="mt-5 pt-4 border-top">
                    <h5 class="mb-3">{{ __('front.blog_detail.share') }}</h5>
                    <div class="d-flex gap-2">
                        <a href="https://www.facebook.com/sharer/sharer.php?u={{ url()->current() }}" target="_blank" class="btn btn-primary-custom btn-sm">
                            <i class="fa-brands fa-facebook me-1"></i> Facebook
                        </a>
                        <a href="https://twitter.com/intent/tweet?url={{ url()->current() }}" target="_blank" class="btn btn-primary-custom btn-sm">
                            <i class="fa-brands fa-twitter me-1"></i> Twitter
                        </a>
                        <a href="https://www.linkedin.com/sharing/share-offsite/?url={{ url()->current() }}" target="_blank" class="btn btn-primary-custom btn-sm">
                            <i class="fa-brands fa-linkedin me-1"></i> LinkedIn
                        </a>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-4" data-aos="fade-up" data-aos-delay="100">
                <div class="card-custom p-4 mb-4">
                    <h5 class="mb-4">{{ __('front.blog_detail.latest_articles') }}</h5>
                    @php
                    $recentBlogs = \App\Models\Blog::published()->where('id', '!=', $blog->id)->orderByDesc('published_at')->take(5)->get();
                    @endphp
                    @foreach($recentBlogs as $recent)
                    <a href="{{ route('blog.detail', $recent->slug) }}" class="d-flex align-items-center mb-3 text-decoration-none">
                        <div style="width: 60px; height: 60px; background: var(--gray-100); border-radius: 8px; flex-shrink: 0; overflow: hidden;">
                            <img src="{{ $recent->thumbnail ? Storage::url($recent->thumbnail) : 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=120&h=120&fit=crop' }}" alt="{{ $recent->title }}" style="width: 100%; height: 100%; object-fit: cover;">
                        </div>
                        <div class="ms-3">
                            <h6 class="mb-0 text-dark" style="font-size: 0.9rem;">{{ $recent->title }}</h6>
                            <small class="text-muted">{{ optional($recent->published_at ?? $recent->created_at)->format('d M Y') }}</small>
                        </div>
                    </a>
                    @endforeach
                </div>
                
                @if(count($categories) > 0)
                <div class="card-custom p-4 mb-4">
                    <h5 class="mb-4">{{ __('front.blog_detail.categories') }}</h5>
                    <div class="d-flex flex-wrap gap-2">
                        @foreach($categories as $cat)
                        <a href="{{ route('blog.category', $cat->slug) }}" class="badge bg-light text-dark p-2 text-decoration-none">
                            {{ $cat->name }}
                        </a>
                        @endforeach
                    </div>
                </div>
                @endif
            </div>
        </div>
    </div>
</section>

<!-- Related Articles -->
@if(count($relatedBlogs) > 0)
<section class="section-padding bg-light-custom">
    <div class="container">
        <h2 class="mb-4">{{ __('front.blog_detail.related_articles') }}</h2>
        <div class="row g-4">
            @foreach($relatedBlogs as $related)
            <div class="col-md-4">
                <div class="blog-card">
                    <div class="blog-image">
                        <img src="{{ $related->thumbnail ? Storage::url($related->thumbnail) : 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=800&h=600&fit=crop' }}" alt="{{ $related->title }}">
                    </div>
                    <div class="blog-content">
                        <span class="blog-category">{{ $related->category->name ?? __('front.common.uncategorized') }}</span>
                        <h3 class="blog-title">
                            <a href="{{ route('blog.detail', $related->slug) }}">{{ $related->title }}</a>
                        </h3>
                        <div class="blog-meta">
                            <span><i class="fa-regular fa-calendar"></i> {{ optional($related->published_at ?? $related->created_at)->format('d M Y') }}</span>
                            <span><i class="fa-regular fa-eye"></i> {{ $related->views }}</span>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endif
@endsection