@extends('frontend.layouts.app')
@section('meta_title', $news->meta_title ?? $news->title)
@section('meta_description', $news->meta_description ?? Str::limit(strip_tags($news->description), 160))
@section('meta_keywords', $news->keywords)
@section('og_type', 'article')
@section('og_image')<meta property="og:image" content="{{ $news->image_url }}">@endsection
@section('content')
<div class="container">
    <div class="row g-4">
        <div class="col-lg-8">
            <!-- Breadcrumb -->
            <nav class="mb-3"><ol class="breadcrumb small">
                <li class="breadcrumb-item"><a href="{{ route('home') }}">???</a></li>
                <li class="breadcrumb-item"><a href="{{ route('category', $news->category?->slug) }}">{{ $news->category?->name }}</a></li>
                <li class="breadcrumb-item active">{{ Str::limit($news->title, 40) }}</li>
            </ol></nav>

            <article>
                <h1 class="fw-bold mb-2">{{ $news->title }}</h1>
                <div class="d-flex flex-wrap gap-3 text-muted small mb-3 pb-3 border-bottom">
                    <span><i class="bi bi-folder"></i> <a href="{{ route('category', $news->category?->slug) }}" class="text-decoration-none">{{ $news->category?->name }}</a></span>
                    <span><i class="bi bi-clock"></i> {{ bangla_date($news->publish_date, 'd F Y, h:i A') }}</span>
                    <span><i class="bi bi-eye"></i> {{ bangla_date($news->view_count . '', 'd') ? $news->view_count . ' ??? ????' : '' }}</span>
                    @if($news->reporter)<span><i class="bi bi-person"></i> <a href="{{ route('author', $news->reporter->slug) }}" class="text-decoration-none">{{ $news->reporter->name }}</a></span>@endif
                </div>

                @if($news->featured_image)
                <figure class="mb-3">
                    <img src="{{ $news->image_url }}" alt="{{ $news->title }}" class="w-100 rounded" loading="lazy">
                </figure>
                @endif

                @if($news->short_description)
                <p class="lead fw-medium">{{ $news->short_description }}</p>
                @endif

                <div class="news-content fs-6 lh-lg">{!! $news->description !!}</div>

                <!-- Tags -->
                @if($news->tags->count())
                <div class="mt-4 pt-3 border-top">
                    <strong>?????:</strong>
                    @foreach($news->tags as $tag)
                        <a href="{{ route('tag', $tag->slug) }}" class="badge bg-secondary text-decoration-none me-1">{{ $tag->name }}</a>
                    @endforeach
                </div>
                @endif

                <!-- Share -->
                <div class="mt-3 pt-3 border-top d-flex gap-2 align-items-center">
                    <strong>??????:</strong>
                    <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(url()->current()) }}" target="_blank" class="btn btn-sm btn-primary"><i class="bi bi-facebook"></i></a>
                    <a href="https://twitter.com/intent/tweet?url={{ urlencode(url()->current()) }}&text={{ urlencode($news->title) }}" target="_blank" class="btn btn-sm btn-info"><i class="bi bi-twitter-x"></i></a>
                    <a href="https://wa.me/?text={{ urlencode($news->title . ' ' . url()->current()) }}" target="_blank" class="btn btn-sm btn-success"><i class="bi bi-whatsapp"></i></a>
                </div>
            </article>

            <!-- Reporter Info -->
            @if($news->reporter)
            <div class="card border-0 shadow-sm mt-4">
                <div class="card-body d-flex gap-3">
                    <img src="{{ $news->reporter->photo_url }}" alt="{{ $news->reporter->name }}" class="rounded-circle" style="width:70px;height:70px;object-fit:cover;">
                    <div>
                        <h5 class="mb-1"><a href="{{ route('author', $news->reporter->slug) }}" class="text-dark text-decoration-none">{{ $news->reporter->name }}</a></h5>
                        <p class="text-muted small mb-0">{{ $news->reporter->designation }}</p>
                        @if($news->reporter->bio)<p class="small mt-1">{{ Str::limit($news->reporter->bio, 100) }}</p>@endif
                    </div>
                </div>
            </div>
            @endif

            <!-- Related News -->
            @if($related->count())
            <div class="mt-5">
                <h3 class="fw-bold border-start border-danger border-4 ps-2 mb-3">????????? ?????</h3>
                <div class="row g-3">
                    @foreach($related as $r)
                    <div class="col-md-4">
                        <a href="{{ route('news.details', $r->slug) }}" class="text-decoration-none">
                            <img src="{{ $r->image_url }}" alt="{{ $r->title }}" class="w-100 rounded mb-2" style="height:130px;object-fit:cover;" loading="lazy">
                            <h6 class="text-dark">{{ Str::limit($r->title, 50) }}</h6>
                        </a>
                    </div>
                    @endforeach
                </div>
            </div>
            @endif
        </div>

        <!-- Sidebar -->
        <div class="col-lg-4">
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-danger text-white fw-bold"><i class="bi bi-fire"></i> ????????</div>
                <div class="card-body p-0">
                    @foreach(latest_news(8) as $i => $pop)
                    <div class="d-flex gap-3 p-3 border-bottom">
                        <img src="{{ $pop->image_url }}" alt="{{ $pop->title }}" class="rounded" style="width:80px;height:60px;object-fit:cover;" loading="lazy">
                        <div><h6 class="mb-1 small"><a href="{{ route('news.details', $pop->slug) }}" class="text-dark text-decoration-none">{{ Str::limit($pop->title, 45) }}</a></h6><small class="text-muted">{{ time_ago($pop->publish_date) }}</small></div>
                    </div>
                    @endforeach
                </div>
            </div>
            @foreach(get_ads('sidebar') as $ad)
                <div class="mb-4 text-center">
                    @if($ad->type==='image' && $ad->image_url)<a href="{{ $ad->url }}" target="_blank"><img src="{{ $ad->image_url }}" class="img-fluid rounded" alt="ad"></a>@else{!! $ad->code !!}@endif
                </div>
            @endforeach
        </div>
    </div>
</div>
@endsection
@section('scripts')
<script type="application/ld+json">
{
    "@@context": "https://schema.org",
    "@@type": "NewsArticle",
    "headline": "{{ $news->title }}",
    "image": ["{{ $news->image_url }}"],
    "datePublished": "{{ $news->publish_date?->toIso8601String() }}",
    "author": { "@@type": "Person", "name": "{{ $news->reporter?->name ?? site_name() }}" },
    "publisher": { "@@type": "Organization", "name": "{{ site_name() }}" }
}
</script>
@endsection