@extends('channels.layouts.master')
@section('content')
    @php
        $setting     = setting();
        $currentPage = $news->currentPage();
        $isFirstPage = $currentPage === 1;
        // প্রথম পেজে প্রথম ৪টা grid এ, বাকি list এ
        // ২য় পেজ থেকে সব list এ
        $gridItems   = $isFirstPage ? $news->take(4) : collect([]);
        $listItems   = $isFirstPage ? collect($news->items())->slice(4) : collect($news->items());
    @endphp

    <div class="container mainDiv xs-paddingL20 xs-paddingR20 xs-paddingT70">
        <div class="text-center advDiv visible-xs marginT10 gadDiv"></div>

        <div class="col-md-12">
            @if ($page->hasTopContent())
                <div class="content-segment">{!! $page->renderTopContent() !!}</div>
            @endif
        </div>

        {{-- PAGE TITLE --}}
        <div class="row">
            <div class="col-md-12">
                <div class="pageTitle">
                    <h1><a href="{{ route('news', $title) }}">{{ $title ?? '' }}</a></h1>
                    <p class="catBottomBorder"><span></span></p>
                </div>
            </div>
        </div>

        {{-- TOP GRID — শুধু প্রথম পেজে --}}
        @if($isFirstPage && $gridItems->count() > 0)
            <div class="row marginT10">
                <div class="col-md-12">
                    <div class="row flex-row itemMainDiv">
                        @foreach($gridItems as $info)
                            <div class="col-md-3 flex-col paddingL15 paddingR15 borderR1LCN itemsCol">
                                <div class="itemDiv bgWhite hoverOrange">
                                    <div class="thumbnail borderNone padding0 xs-marginB0">
                                        <div class="positionRelative">
                                            @include('global.image')
                                        </div>
                                        <div class="caption paddingL0 paddingR0 xs-paddingB0">
                                            <div class="paddingB15 xs-paddingB0 xs-paddingT5 five-line">
                                                <h2 class="title3 margin0 three-line">
                                                    @if(isset($info->sub_title))
                                                        <span class="shoulder">{{ $info->sub_title }}<span></span></span>
                                                    @endif
                                                    {{ $info->title }}
                                                </h2><br>
                                                <p class="summary3 xs-summary3 colorDarkAsh marginB0 paddingB0 xs-paddingB0 borderTNone marginT0">
                                                    <span class="two-line">{{ strip_tags($info->details) }}</span>
                                                </p>
                                            </div>
                                            <p class="colorDarkAsh time positionAbsolute xs-positionRelative bottom0 marginB5 xs-marginT10">
                                                <i class="fa fa-clock-o fontSize14 icon"></i>
                                                {{ timeAgo($info->created_at) }}
                                            </p>
                                        </div>
                                    </div>
                                    <a href="{{ news_url($info) }}" class="linkOverlay"></a>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
                <div class="col-md-12 marginT15">
                    <p class="dividerDivTag margin0"></p>
                </div>
            </div>
        @endif

        {{-- NEWS LIST + SIDEBAR --}}
        <div class="row marginT20">
            <div class="col-md-8">
                <div class="row flex-row" id="data-wrapper">
                    <div class="col-md-12 flex-col marginB15 xs-marginB15 visible-xs"></div>
                    <div class="col-md-12 flex-col marginB15 xs-marginB15 visible-xs"></div>
                    <div class="col-md-12 flex-col marginB15 xs-marginB15 visible-xs"></div>

                    {!! loopWidgets(
                        'channels.partial.news-list',
                        collect($listItems),
                        $page->content_widgets ?? [],
                        ['category' => $category ?? null, 'featured' => true]
                    ) !!}
                </div>

                {{-- ✅ PAGINATION --}}
                @if($news->lastPage() > 1)
                    <div class="pagination-wrapper">
                        <div class="pagination-info">
                            {{ $news->firstItem() }}–{{ $news->lastItem() }} / মোট {{ $news->total() }}টি সংবাদ
                            &nbsp;|&nbsp; পৃষ্ঠা {{ $news->currentPage() }} / {{ $news->lastPage() }}
                        </div>

                        <ul class="custom-pagination">

                            {{-- Previous --}}
                            @if($news->onFirstPage())
                                <li class="disabled">
                                    <span class="page-nav"><i class="fa fa-chevron-left"></i></span>
                                </li>
                            @else
                                <li>
                                    <a class="page-nav" href="{{ $news->appends(request()->except('page'))->previousPageUrl() }}">
                                        <i class="fa fa-chevron-left"></i>
                                    </a>
                                </li>
                            @endif

                            {{-- Page Numbers --}}
                            @php
                                $current = $news->currentPage();
                                $last    = $news->lastPage();
                                $start   = max(1, $current - 2);
                                $end     = min($last, $current + 2);
                            @endphp

                            @if($start > 1)
                                <li>
                                    <a href="{{ $news->appends(request()->except('page'))->url(1) }}">১</a>
                                </li>
                                @if($start > 2)
                                    <li class="disabled"><span class="page-dots">...</span></li>
                                @endif
                            @endif

                            @for($i = $start; $i <= $end; $i++)
                                <li class="{{ $i == $current ? 'active' : '' }}">
                                    <a href="{{ $news->appends(request()->except('page'))->url($i) }}">{{ $i }}</a>
                                </li>
                            @endfor

                            @if($end < $last)
                                @if($end < $last - 1)
                                    <li class="disabled"><span class="page-dots">...</span></li>
                                @endif
                                <li>
                                    <a href="{{ $news->appends(request()->except('page'))->url($last) }}">{{ $last }}</a>
                                </li>
                            @endif

                            {{-- Next --}}
                            @if($news->hasMorePages())
                                <li>
                                    <a class="page-nav" href="{{ $news->appends(request()->except('page'))->nextPageUrl() }}">
                                        <i class="fa fa-chevron-right"></i>
                                    </a>
                                </li>
                            @else
                                <li class="disabled">
                                    <span class="page-nav"><i class="fa fa-chevron-right"></i></span>
                                </li>
                            @endif

                        </ul>
                    </div>
                @endif
                {{-- END PAGINATION --}}

            </div>

            <div class="col-md-4">
                <aside class="sidebar-wrapper">
                    {!! $page->renderSidebar() !!}
                </aside>
            </div>

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

    <style>
        /* ===== PAGINATION ===== */
        .pagination-wrapper {
            margin-top: 30px;
            margin-bottom: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 14px;
            clear: both;
            width: 100%;
        }

        .pagination-info {
            font-size: 13px;
            color: #888;
            font-weight: 500;
        }

        .custom-pagination {
            display: flex !important;
            align-items: center !important;
            gap: 5px !important;
            list-style: none !important;
            padding: 0 !important;
            margin: 0 !important;
            flex-wrap: wrap !important;
            justify-content: center !important;
        }

        .custom-pagination li {
            display: inline-block !important;
            margin: 0 !important;
            padding: 0 !important;
            float: none !important;
        }

        .custom-pagination li a,
        .custom-pagination li span {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 38px !important;
            height: 38px !important;
            border-radius: 8px !important;
            border: 2px solid #e0e0e0 !important;
            background: #fff !important;
            color: #444 !important;
            font-size: 13px !important;
            font-weight: 600 !important;
            text-decoration: none !important;
            transition: all .25s ease !important;
            box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
            line-height: 1 !important;
            padding: 0 !important;
            float: none !important;
        }

        .custom-pagination li a:hover {
            border-color: #b30000 !important;
            color: #b30000 !important;
            background: #fff5f5 !important;
            transform: translateY(-2px) !important;
            box-shadow: 0 4px 10px rgba(179,0,0,.15) !important;
        }

        .custom-pagination li.active a,
        .custom-pagination li.active span {
            background: #b30000 !important;
            border-color: #b30000 !important;
            color: #fff !important;
            box-shadow: 0 4px 12px rgba(179,0,0,.35) !important;
            transform: scale(1.08) !important;
        }

        .custom-pagination li.disabled a,
        .custom-pagination li.disabled span {
            background: #f5f5f5 !important;
            border-color: #eee !important;
            color: #ccc !important;
            cursor: not-allowed !important;
            box-shadow: none !important;
            transform: none !important;
            pointer-events: none !important;
        }

        .custom-pagination li a.page-nav,
        .custom-pagination li span.page-nav {
            background: #b30000 !important;
            border-color: #b30000 !important;
            color: #fff !important;
        }

        .custom-pagination li a.page-nav:hover {
            background: #8b0000 !important;
            border-color: #8b0000 !important;
            color: #fff !important;
            transform: translateY(-2px) !important;
        }

        .custom-pagination li.disabled a.page-nav,
        .custom-pagination li.disabled span.page-nav {
            background: #f0f0f0 !important;
            border-color: #e0e0e0 !important;
            color: #bbb !important;
        }

        .custom-pagination li span.page-dots {
            border: none !important;
            background: transparent !important;
            box-shadow: none !important;
            color: #aaa !important;
            font-size: 18px !important;
            cursor: default !important;
            pointer-events: none !important;
        }

        .custom-pagination li span.page-dots:hover {
            transform: none !important;
            background: transparent !important;
        }

        @media (max-width: 768px) {
            .custom-pagination li a,
            .custom-pagination li span {
                width: 30px !important;
                height: 30px !important;
                font-size: 11px !important;
                border-radius: 6px !important;
            }
        }
    </style>

@endsection