@extends('frontend.layouts.app')
@section('content')
<div class="container">
    <!-- Featured Section -->
    @if($featured->count())
    <section class="featured-section mb-5">
        <div class="row g-3">
            <div class="col-lg-7">
                @if($featured->first())
                <div class="position-relative rounded overflow-hidden h-100">
                    <img src="{{ $featured->first()->image_url }}" alt="{{ $featured->first()->title }}" class="w-100" style="height:400px;object-fit:cover;" loading="lazy">
                    <div class="position-absolute bottom-0 start-0 end-0 p-4" style="background:linear-gradient(transparent,rgba(0,0,0,.8))">
                        <span class="badge bg-danger mb-2">{{ $featured->first()->category?->name }}</span>
                        <h2 class="text-white mb-1"><a href="{{ route('news.details', $featured->first()->slug) }}" class="text-white text-decoration-none">{{ $featured->first()->title }}</a></h2>
                        <small class="text-white-50"><i class="bi bi-clock"></i> {{ time_ago($featured->first()->publish_date) }}</small>
                    </div>
                </div>
                @endif
            </div>
            <div class="col-lg-5">
                @foreach($featured->skip(1)->take(4) as $f)
                <div class="d-flex gap-3 mb-3 pb-3 border-bottom">
                    <img src="{{ $f->image_url }}" alt="{{ $f->title }}" class="rounded" style="width:120px;height:80px;object-fit:cover;" loading="lazy">
                    <div>
                        <span class="badge bg-danger bg-opacity-10 text-danger small mb-1">{{ $f->category?->name }}</span>
                        <h6 class="mb-1"><a href="{{ route('news.details', $f->slug) }}" class="text-dark text-decoration-none">{{ $f->title }}</a></h6>
                        <small class="text-muted"><i class="bi bi-clock"></i> {{ time_ago($f->publish_date) }}</small>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </section>
    @endif

    <!-- Ad Block -->
    @foreach(get_ads('between_news') as $ad)
        <div class="text-center my-4">
            @if($ad->type==='image' && $ad->image_url)<a href="{{ $ad->url }}" target="_blank"><img src="{{ $ad->image_url }}" class="img-fluid" alt="ad"></a>@else{!! $ad->code !!}@endif
        </div>
    @endforeach

    <div class="row g-4">
        <!-- Main Content -->
        <div class="col-lg-8">
            <!-- Latest News -->
            <section class="mb-5">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h3 class="section-title fw-bold border-start border-danger border-4 ps-2 mb-0">???????</h3>
                    <a href="{{ route('archive') }}" class="btn btn-sm btn-outline-danger">?? ?????</a>
                </div>
                <div class="row g-3">
                    @foreach($latest as $n)
                    <div class="col-md-6">
                        <div class="card border-0 shadow-sm h-100">
                            <a href="{{ route('news.details', $n->slug) }}">
                                <img src="{{ $n->image_url }}" alt="{{ $n->title }}" class="card-img-top" style="height:180px;object-fit:cover;" loading="lazy">
                            </a>
                            <div class="card-body p-3">
                                <span class="badge bg-danger bg-opacity-10 text-danger small mb-2">{{ $n->category?->name }}</span>
                                <h5 class="card-title mb-2"><a href="{{ route('news.details', $n->slug) }}" class="text-dark text-decoration-none">{{ Str::limit($n->title, 60) }}</a></h5>
                                <p class="text-muted small mb-2">{{ Str::limit(strip_tags($n->short_description), 80) }}</p>
                                <small class="text-muted"><i class="bi bi-clock"></i> {{ time_ago($n->publish_date) }} @if($n->reporter) | {{ $n->reporter->name }}@endif</small>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </section>

            <!-- Category Sections -->
            @foreach($categories->take(4) as $cat)
            @if($cat->published_news_count > 0)
            <section class="mb-5">
                <h3 class="section-title fw-bold border-start border-danger border-4 ps-2 mb-3">
                    <a href="{{ route('category', $cat->slug) }}" class="text-dark text-decoration-none">{{ $cat->name }}</a>
                </h3>
                @php $catNews = $cat->publishedNews()->with('reporter')->latest('publish_date')->take(4)->get(); @endphp
                <div class="row g-3">
                    @foreach($catNews as $cn)
                    <div class="col-6 col-md-3">
                        <a href="{{ route('news.details', $cn->slug) }}" class="text-decoration-none">
                            <img src="{{ $cn->image_url }}" alt="{{ $cn->title }}" class="w-100 rounded mb-2" style="height:120px;object-fit:cover;" loading="lazy">
                            <h6 class="text-dark">{{ Str::limit($cn->title, 50) }}</h6>
                        </a>
                    </div>
                    @endforeach
                </div>
            </section>
            @endif
            @endforeach
        </div>

        <!-- Sidebar -->
        <div class="col-lg-4">
            <!-- Trending -->
            <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($trending->take(6) as $i => $t)
                    <div class="d-flex gap-3 p-3 border-bottom align-items-start">
                        <span class="badge bg-danger rounded-circle flex-shrink-0" style="width:28px;height:28px;line-height:20px;">{{ $i+1 }}</span>
                        <div>
                            <h6 class="mb-0"><a href="{{ route('news.details', $t->slug) }}" class="text-dark text-decoration-none">{{ Str::limit($t->title, 50) }}</a></h6>
                            <small class="text-muted">{{ time_ago($t->publish_date) }}</small>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>

            <!-- Sidebar Ads -->
            @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

            <!-- Photo Gallery -->
            @if($photos->count())
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-dark text-white fw-bold"><i class="bi bi-camera"></i> ??? ????????</div>
                <div class="card-body">
                    <div class="row g-2">
                        @foreach($photos->take(6) as $p)
                        <div class="col-4">
                            <img src="{{ $p->image_url }}" alt="{{ $p->title }}" class="w-100 rounded" style="height:80px;object-fit:cover;" loading="lazy">
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
            @endif

            <!-- Video Section -->
            @if($videos->count())
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-danger text-white fw-bold"><i class="bi bi-play-circle"></i> ?????</div>
                <div class="card-body p-0">
                    @foreach($videos->take(3) as $v)
                    <div class="p-3 border-bottom">
                        <div class="ratio ratio-16x9 mb-2">
                            <iframe src="{{ $v->embed_url }}" allowfullscreen loading="lazy"></iframe>
                        </div>
                        <h6 class="mb-0">{{ $v->title }}</h6>
                    </div>
                    @endforeach
                </div>
            </div>
            @endif
        </div>
    </div>
</div>
@endsection