@extends('layouts.app')
@section('title', $blog->title . ' — JobPortal')
@section('content')
<div style="background:#ffffff;min-height:100vh;">
    <div class="container py-5" style="max-width:800px;">
        @if($blog->blogCategory)<a href="{{ route('blog.index', ['category'=> $blog->blog_category_id]) }}" class="badge mb-3" style="background:rgba(79,70,229,0.15);color:#818cf8;border-radius:20px;text-decoration:none;">{{ $blog->blogCategory->name }}</a>@endif
        <h1 class="text-dark fw-800 mb-3" style="font-size:2rem;">{{ $blog->title }}</h1>
        <div class="d-flex align-items-center gap-3 mb-4 text-muted small">
            @if($blog->user)<span><i class="fas fa-user me-1"></i>{{ $blog->user->name }}</span>@endif
            <span><i class="far fa-calendar me-1"></i>{{ optional($blog->published_at)->format('d M Y') }}</span>
            <span><i class="fas fa-eye me-1"></i>{{ number_format($blog->views) }} views</span>
        </div>
        @if($blog->thumbnail)<img src="{{ asset('storage/'.$blog->thumbnail) }}" alt="{{ $blog->title }}" class="w-100 rounded-3 mb-4" style="max-height:400px;object-fit:cover;">@endif
        <div class="card-glass p-4 p-lg-5">
            <div class="text-muted" style="line-height:1.9;font-size:1.05rem;">{!! nl2br(e($blog->content)) !!}</div>
        </div>
        @if($related->count())
        <div class="mt-5">
            <h5 class="text-white fw-700 mb-3">Related Articles</h5>
            <div class="row g-3">
                @foreach($related as $r)
                <div class="col-md-4">
                    <a href="{{ route('blog.show',$r->slug) }}" class="card-glass d-block p-3 text-decoration-none">
                        <h6 class="text-white small fw-600 mb-1">{{ Str::limit($r->title,50) }}</h6>
                        <span class="text-muted" style="font-size:0.75rem;">{{ optional($r->published_at)->format('d M Y') }}</span>
                    </a>
                </div>
                @endforeach
            </div>
        </div>
        @endif
    </div>
</div>
@endsection