@extends('channels.layouts.master')

@section('content')
    <div class="news-page-wrapper bg-white">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    @if ($page->hasTopContent())
                        <div class="content-segment">{!! $page->renderTopContent() !!}</div>
                    @endif
                </div>
                {{-- Main Content: News Reader Column --}}
                <div class="col-lg-{{ $page->hasSidebar() ? '8' : '10 offset-lg-1' }}">
                    <article class="news-article">

                        {{-- News Header --}}
                        <header class="article-header mb-5">
                            <h1 class="article-title font-weight-bold mb-3">{{ $page->title }}</h1>
                            @if ($page->subtitle)
                                <p class="article-subtitle text-muted mb-4">{{ $page->subtitle }}</p>
                            @endif

                            <div
                                class="d-flex align-items-center justify-content-between border-top border-bottom py-3 mt-4">
                                <div class="author-meta d-flex align-items-center">
                                    <div class="meta-info">
                                        <span class="d-block font-weight-bold text-dark">Editorial Desk</span>
                                        <small class="text-muted">
                                            <i class="far fa-clock mr-1"></i> Updated:
                                            {{ $page->updated_at->format('M d, Y') }}
                                            <span class="mx-2">|</span>
                                            <i class="far fa-eye mr-1"></i> {{ number_format($page->view_count) }} views
                                        </small>
                                    </div>
                                </div>
                                <div class="share-buttons">
                                    <span class="small text-muted mr-2 d-none d-md-inline">Share:</span>
                                    <a href="#" class="btn btn-sm btn-light border-circle"><i
                                            class="fab fa-facebook-f text-primary"></i></a>
                                    <a href="#" class="btn btn-sm btn-light border-circle"><i
                                            class="fab fa-twitter text-info"></i></a>
                                </div>
                            </div>
                        </header>

                        {{-- Feature Image (If exists) --}}
                        @if ($page->banner_image)
                            <figure class="article-figure mb-5">
                                <img src="{{ asset($page->banner_image) }}" alt="{{ $page->title }}"
                                    class="img-fluid rounded w-100 shadow-sm">
                            </figure>
                        @endif

                        {{-- Table of Contents (News Style) --}}
                        @if ($page->getTotalParagraphs() > 5)
                            <div class="news-toc p-4 mb-5 rounded border">
                                <h5 class="font-weight-bold mb-3">Highlights Inside:</h5>
                                <div id="tableOfContents" class="toc-list"></div>
                            </div>
                        @endif

                        {{-- Article Body --}}
                        <div class="article-body">
                            @if ($page->hasContent())
                                <div class="content-segment">{!! $page->renderContent() !!}</div>
                            @endif

                            @if ($page->hasBottomContent())
                                <div class="content-segment">{!! $page->renderBottomContent() !!}</div>
                            @endif
                        </div>
                    </article>
                </div>

                {{-- Sidebar (Popular/Related News Style) --}}
                @if ($page->hasSidebar())
                    <div class="col-lg-4">
                        <aside class="news-sidebar sticky-top" style="top: 20px;">
                            <div class="sidebar-widget p-3 mb-4 bg-light rounded border-top border-primary border-width-3">
                                <div class="sidebar-content">
                                    {!! $page->renderSidebar() !!}
                                </div>
                            </div>
                        </aside>
                    </div>
                @endif
            </div>
        </div>
    </div>

    <style>
        /* Premium News Typography */
        @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=Lora:ital,wght@0,400;0,600;1,400&family=Inter:wght@400;600;700&display=swap');

        .news-page-wrapper {
            font-family: 'Inter', sans-serif;
            color: #1a1a1a;
        }

        /* News Headlines */
        .article-title {
            font-family: 'Playfair Display', serif;
            font-size: 3.5rem;
            /* Shundor Boro Font */
            line-height: 1.2;
            color: #000;
            letter-spacing: -1px;
        }

        .article-subtitle {
            font-size: 2rem;
            line-height: 1.5;
            font-family: 'Lora', serif;
        }

        /* Article Body Font - Readability Optimized */
        .article-body {
            font-family: 'Lora', serif;
            font-size: 1.35rem;
            /* Reading Font Boro kora hoyeche */
            line-height: 1.8;
            color: #333;
        }

        .article-body p {
            margin-bottom: 2rem;
        }

        .article-body h2,
        .article-body h3 {
            font-family: 'Playfair Display', serif;
            font-weight: 700;
            margin-top: 3rem;
            color: #000;
        }

        /* News TOC Styling */
        .news-toc {
            background-color: #f9f9f9;
            border-left: 5px solid #007bff !important;
        }

        .toc-list a {
            color: #007bff;
            font-weight: 600;
            text-decoration: none;
            display: block;
            margin-bottom: 8px;
        }

        .border-width-3 {
            border-top-width: 3px !important;
        }

        .border-circle {
            border-radius: 50%;
            width: 35px;
            height: 35px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        /* Mobile Responsive */
        @media (max-width: 768px) {
            .article-title {
                font-size: 2.2rem;
            }

            .article-body {
                font-size: 1.15rem;
            }
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const toc = document.getElementById('tableOfContents');
            const headings = document.querySelectorAll('.article-body h2, .article-body h3');

            if (headings.length > 0 && toc) {
                const list = document.createElement('ul');
                list.className = 'list-unstyled mb-0';
                headings.forEach((h, i) => {
                    h.id = 'news-sec-' + i;
                    const li = document.createElement('li');
                    li.innerHTML =
                        `<a href="#news-sec-${i}"><i class="fas fa-chevron-right mr-2 small"></i> ${h.textContent}</a>`;
                    list.appendChild(li);
                });
                toc.appendChild(list);
            }
        });
    </script>
@endsection