@extends('layouts.public')

@section('title', $site['name'])

@section('content')
    @php
        $filledSections = $sections->filter(fn ($section) => $section->articles->isNotEmpty())->values();
        $leadItems = $latest->reject(fn ($item) => $lead && $item->id === $lead->id)->values();
        $topBoxes = $filledSections->take($homeSettings['box_count'] ?? 3);
        $featureSection = $filledSections->firstWhere('slug', $homeSettings['feature_category'] ?? 'country') ?? $filledSections->get($homeSettings['box_count'] ?? 3);
        $splitSection = $filledSections->firstWhere('slug', $homeSettings['split_category'] ?? 'crime') ?? $filledSections->get(($homeSettings['box_count'] ?? 3) + 1);
        $tileSections = $filledSections->reject(fn ($section) => $topBoxes->contains('id', $section->id))
            ->reject(fn ($section) => $featureSection && $section->id === $featureSection->id)
            ->reject(fn ($section) => $splitSection && $section->id === $splitSection->id)
            ->values();
    @endphp

    <section class="container home-wrap">
        @foreach($topBanners as $banner)
            <a class="banner banner-top" href="{{ $banner->link ?: '#' }}"><img src="{{ asset('storage/'.$banner->image_path) }}" alt="{{ $banner->title }}"></a>
        @endforeach

        @if($breaking->isNotEmpty())
            <div class="ticker"><strong>শিরোনাম</strong><marquee>{{ $breaking->pluck('title')->join('  |  ') }}</marquee></div>
        @endif

        <div class="section-one">
            <div class="lead-area">
                <div class="lead-left">
                    @if($lead)
                        <article class="led-news">
                            <a href="{{ route('article.show', $lead) }}">
                                @if($lead->image_path)<img src="{{ asset('storage/'.$lead->image_path) }}" alt="{{ $lead->title }}">@endif
                                <h1>{{ $lead->title }}</h1>
                            </a>
                        </article>
                    @endif

                    @foreach($leadItems->take(4) as $article)
                        <article class="small-image border">
                            <a href="{{ route('article.show', $article) }}">
                                @if($article->image_path)<img src="{{ asset('storage/'.$article->image_path) }}" alt="{{ $article->title }}">@endif
                                <h2>{{ $article->title }}</h2>
                            </a>
                        </article>
                    @endforeach
                </div>

                <div class="lead-right">
                    @foreach($leadItems->skip(4)->take(6) as $article)
                        <article class="headline-card">
                            <a href="{{ route('article.show', $article) }}">
                                @if($article->image_path)<img src="{{ asset('storage/'.$article->image_path) }}" alt="{{ $article->title }}">@endif
                                <h2>{{ $article->title }}</h2>
                            </a>
                        </article>
                    @endforeach
                </div>
            </div>

            <aside class="right-news">
                <div class="latest-title">
                    <button type="button" class="selected" data-tab="latest-news">সর্বশেষ খবর</button>
                    <button type="button" data-tab="main-news">সর্বাধিক পঠিত</button>
                </div>
                <div class="tab-content">
                    <div class="news-tab latest-news active">
                        @foreach($latest->take(8) as $article)
                            <a class="latest-news-con" href="{{ route('article.show', $article) }}">
                                @if($article->image_path)<img src="{{ asset('storage/'.$article->image_path) }}" alt="{{ $article->title }}">@endif
                                <span>{{ $article->title }}</span>
                            </a>
                        @endforeach
                    </div>
                    <div class="news-tab main-news">
                        @foreach($mostRead as $article)
                            <a class="latest-news-con" href="{{ route('article.show', $article) }}">
                                @if($article->image_path)<img src="{{ asset('storage/'.$article->image_path) }}" alt="{{ $article->title }}">@endif
                                <span>{{ $article->title }}</span>
                            </a>
                        @endforeach
                    </div>
                </div>

                @foreach($sidebarBanners->take(1) as $banner)
                    <a class="ad-box" href="{{ $banner->link ?: '#' }}"><img src="{{ asset('storage/'.$banner->image_path) }}" alt="{{ $banner->title }}"></a>
                @endforeach
            </aside>
        </div>

        @foreach($middleBanners as $banner)
            <a class="banner" href="{{ $banner->link ?: '#' }}"><img src="{{ asset('storage/'.$banner->image_path) }}" alt="{{ $banner->title }}"></a>
        @endforeach
    </section>

    @if($topBoxes->isNotEmpty())
        <section class="container category-box-row">
            @foreach($topBoxes as $section)
                @php $firstArticle = $section->articles->first(); @endphp
                <article class="category-box">
                    <h2 style="--cat-color: {{ $section->color }}"><a href="{{ route('category.show', $section) }}">{{ $section->name }}</a></h2>
                    @if($firstArticle?->image_path)
                        <a href="{{ route('article.show', $firstArticle) }}"><img src="{{ asset('storage/'.$firstArticle->image_path) }}" alt="{{ $firstArticle->title }}"></a>
                    @endif
                    <ul>
                        @foreach($section->articles->take(5) as $article)
                            <li><a href="{{ route('article.show', $article) }}">{{ $article->title }}</a></li>
                        @endforeach
                    </ul>
                </article>
            @endforeach
        </section>
    @endif

    @if($featureSection)
        <section class="container legacy-section">
            <a href="{{ route('category.show', $featureSection) }}"><h2 class="SectionName" style="--cat-color: {{ $featureSection->color }}">{{ $featureSection->name }}</h2></a>
            <div class="sports-grid">
                @php $featureLead = $featureSection->articles->first(); @endphp
                @if($featureLead)
                    <article class="DSportsTopNews">
                        <a href="{{ route('article.show', $featureLead) }}">
                            @if($featureLead->image_path)<img src="{{ asset('storage/'.$featureLead->image_path) }}" alt="{{ $featureLead->title }}">@endif
                            <h2>{{ $featureLead->title }}</h2>
                            @if($featureLead->excerpt)<p>{{ $featureLead->excerpt }}</p>@endif
                        </a>
                    </article>
                @endif
                <div class="sports-list-grid">
                    @foreach($featureSection->articles->skip(1)->take(6) as $article)
                        <article class="DSportsList">
                            <a href="{{ route('article.show', $article) }}">
                                @if($article->image_path)<img src="{{ asset('storage/'.$article->image_path) }}" alt="{{ $article->title }}">@endif
                                <h2>{{ $article->title }}</h2>
                            </a>
                        </article>
                    @endforeach
                </div>
            </div>
        </section>
    @endif

    @if($splitSection)
        <section class="container split-news">
            <div class="split-main">
                <a href="{{ route('category.show', $splitSection) }}"><h2 class="strip-title" style="--cat-color: {{ $splitSection->color }}">{{ $splitSection->name }}</h2></a>
                @php $splitLead = $splitSection->articles->first(); @endphp
                @if($splitLead)
                    <article class="split-lead">
                        <a href="{{ route('article.show', $splitLead) }}">
                            @if($splitLead->image_path)<img src="{{ asset('storage/'.$splitLead->image_path) }}" alt="{{ $splitLead->title }}">@endif
                            <h2>{{ $splitLead->title }}</h2>
                            @if($splitLead->excerpt)<p>{{ $splitLead->excerpt }}</p>@endif
                        </a>
                    </article>
                @endif
                <div class="split-list">
                    @foreach($splitSection->articles->skip(1)->take(4) as $article)
                        <article>
                            <a href="{{ route('article.show', $article) }}">
                                @if($article->image_path)<img src="{{ asset('storage/'.$article->image_path) }}" alt="{{ $article->title }}">@endif
                                <h3>{{ $article->title }}</h3>
                            </a>
                        </article>
                    @endforeach
                </div>
            </div>

            <aside class="epaper-widget">
                <h2>ই-পেপার</h2>
                @if($edition)
                    <a href="{{ route('epaper.show', $edition) }}">
                        @if($edition->cover_image)<img src="{{ asset('storage/'.$edition->cover_image) }}" alt="{{ $edition->title }}">@endif
                    </a>
                @endif
            </aside>
        </section>
    @endif

    @if($tileSections->isNotEmpty())
        <section class="container tile-section-grid">
            @foreach($tileSections->take($homeSettings['tile_count'] ?? 12) as $section)
                @php $article = $section->articles->first(); @endphp
                @if($article)
                    <article class="grid-item">
                        <h2 class="section-title" style="--cat-color: {{ $section->color }}"><a href="{{ route('category.show', $section) }}">{{ $section->name }}</a></h2>
                        <a href="{{ route('article.show', $article) }}">
                            @if($article->image_path)<img src="{{ asset('storage/'.$article->image_path) }}" alt="{{ $article->title }}">@endif
                            <h3>{{ $article->title }}</h3>
                        </a>
                    </article>
                @endif
            @endforeach
        </section>
    @endif

@endsection