@extends("frontend.layout.main")

@section("content")


    <section class="legal-news-wrapper">
        <div class="container">
            <div class="row align-items-center mb-4">
                <div class="col-8">
                    <h2 style="color: #fff; font-size: 24px; font-weight: 800; border-left: 4px solid #d4af37; padding-left: 15px; margin:0;">
                        Latest Legal Briefings
                    </h2>
                </div>
                
                <div class="col-4 text-end">
                    <a href="{{route('legalnews')}}"
                        style="color: #d4af37; font-size: 12px; text-transform: uppercase; font-weight: 700; text-decoration: none;">
                        View All →
                    </a>
                </div>
            </div> 
            <p class="legal-sub">
                Stay informed with the latest legal developments, landmark judgments, and important court updates from across the country.
            </p> 
             
            <div class="news-main-grid">

                @if(isset($news) && $news->count() > 0)
            
                    @php
                        $chunks = $news->chunk(7); // 7-7 news ke blocks
                    @endphp
            
                    @foreach($chunks as $index => $chunk)
                        {{-- Agar odd block hai (0, 2, 4...) to normal layout, agar even block hai (1, 3...) to reverse layout --}}
                        
                        @if($index % 2 == 0)
                            {{-- Normal Layout: Featured left, side columns right --}}
                            <div class="main-column">
                                @php $featured = $chunk->first(); @endphp
                                <a href="{{route('news.detail', $featured->slug )}}" class="main-news-card">
                                    <img src="{{ asset($featured->image) }}" alt="{{ $featured->title }}">
                                    <div class="main-overlay">
                                        <span style="color:var(--gold); font-size:12px; font-weight:800;">
                                            {{ $featured->category->title ?? 'Category' }}
                                        </span>
                                        <h3>{{ $featured->title }}</h3>
                                    </div>
                                </a>
                            </div>
            
                            <div class="side-news-col">
                                @foreach($chunk->skip(1)->take(3) as $item)
                                    <a href="{{route('news.detail', $item->slug )}}" class="compact-news-link">
                                        <img src="{{ asset($item->image) }}" alt="{{ $item->title }}">
                                        <div class="compact-content">
                                            <span>{{ $item->category->title ?? 'Category' }}</span>
                                            <h4>{{ $item->title }}</h4>
                                        </div>
                                    </a>
                                @endforeach
                            </div>
            
                            <div class="side-news-col">
                                @foreach($chunk->skip(4)->take(3) as $item)
                                    <a href="{{route('news.detail', $item->slug )}}" class="compact-news-link">
                                        <img src="{{ asset($item->image) }}" alt="{{ $item->title }}">
                                        <div class="compact-content">
                                            <span>{{ $item->category->title ?? 'Category' }}</span>
                                            <h4>{{ $item->title }}</h4>
                                        </div>
                                    </a>
                                @endforeach
                            </div>
            
                        @else
                            {{-- Reverse Layout: Featured right, side columns left --}}
                            <div class="side-news-col">
                                @foreach($chunk->skip(1)->take(3) as $item)
                                    <a href="{{route('news.detail', $item->slug )}}" class="compact-news-link">
                                        <img src="{{ asset($item->image) }}" alt="{{ $item->title }}">
                                        <div class="compact-content">
                                            <span>{{ $item->category->title ?? 'Category' }}</span>
                                            <h4>{{ $item->title }}</h4>
                                        </div>
                                    </a>
                                @endforeach
                            </div>
            
                            <div class="side-news-col">
                                @foreach($chunk->skip(4)->take(3) as $item)
                                    <a href="{{route('news.detail', $item->slug )}}" class="compact-news-link">
                                        <img src="{{ asset($item->image) }}" alt="{{ $item->title }}">
                                        <div class="compact-content">
                                            <span>{{ $item->category->title ?? 'Category' }}</span>
                                            <h4>{{ $item->title }}</h4>
                                        </div>
                                    </a>
                                @endforeach
                            </div>
            
                            <div class="main-column">
                                @php $featured = $chunk->first(); @endphp
                                <a href="{{route('news.detail', $item->slug )}}" class="main-news-card">
                                    <img src="{{ asset($featured->image) }}" alt="{{ $featured->title }}">
                                    <div class="main-overlay">
                                        <span style="color:var(--gold); font-size:12px; font-weight:800;">
                                            {{ $featured->category->title ?? 'Category' }}
                                        </span>
                                        <h3>{{ $featured->title }}</h3>
                                    </div>
                                </a>
                            </div>
                        @endif
            
                    @endforeach
            
                @endif

            </div>
            {{-- Pagination UI --}}
            <div class="d-flex justify-content-center mt-5">
                {{ $news->links() }}
            </div>
        </div>
    </section>
    
 

@endsection