@extends('channels.layouts.master')

@section('content')
    @php $setting = setting(); @endphp
    <br><br>
    <div class="xs-paddingL20 xs-paddingR20 xs-paddingT70">

        {{-- 🔍 SEARCH BOX — Pure HTML Form --}}
        <div class="row marginB25">
            <div class="col-md-12">
                <form action="{{ route('search_ai') }}" method="GET" id="search-form">

                    {{-- date থাকলে hidden field এ রাখো --}}
                    @if(request('date'))
                        <input type="hidden" name="date" value="{{ request('date') }}">
                    @endif

                    <div class="search-wrapper">
                        <div class="search-input-group">
                            <i class="fa fa-search search-icon"></i>
                            <input
                                type="text"
                                name="q"
                                id="search-input"
                                class="form-control search-input"
                                placeholder="খবর খুঁজুন... যেমন: রাজনীতি, খেলাধুলা, ব্যবসা"
                                value="{{ request('q', '') }}"
                                autocomplete="off"
                            >
                            {{-- Submit Button --}}
                            <button type="submit" class="search-submit-btn" title="সার্চ করুন">
                                <i class="fa fa-arrow-right"></i>
                            </button>

                            {{-- Clear Button --}}
                            @if(request('q') || request('date'))
                                <a href="{{ route('search_ai') }}" class="search-clear">
                                    <i class="fa fa-times"></i>
                                </a>
                            @endif
                        </div>
                    </div>
                </form>
            </div>

            {{-- Active Date Filter Badge --}}
            @if(request('date'))
                <div class="col-md-12 marginB10">
                    <div class="active-filter-badge">
                        <i class="fa fa-calendar"></i>
                        <span>{{ \Carbon\Carbon::parse(request('date'))->format('d M, Y') }} তারিখের সংবাদ</span>
                        <a href="{{ route('search_ai', request('q') ? ['q' => request('q')] : []) }}"
                           class="filter-remove" title="ফিল্টার সরান">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
            @endif
        </div>

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

        {{-- MAIN CONTENT --}}
        <div class="row">

            {{-- LEFT - NEWS LIST --}}
            <div class="col-md-8">

                {{-- Result Info --}}
                @if(request('date') || request('q'))
                    <div class="title3 marginB15">
                        <i class="fa fa-list-ul"></i>
                        মোট <strong class="text-success">{{ $news->total() }} </strong>টি সংবাদ পাওয়া গেছে
                        @if(request('q'))
                            — "<strong>{{ request('q') }}</strong>" এর জন্য
                        @endif
                        <span class="pull-right">
                            পৃষ্ঠা {{ $news->currentPage() }} / {{ $news->lastPage() }}
                        </span>
                    </div>
                @endif

                <div id="news-results" class="news-list-wrapper">
                    @forelse ($news as $info)
                        <div class="col-md-12 flex-col marginB15 xs-marginB15">
                            <div class="bgWhite mediaItemDiv height100P borderAshB1 paddingB15">
                                <div class="media positionRelative hoverOrange marginT0">
                                    <div class="media-left">
                                        <div class="positionRelative">
                                            @include('global.image', [
                                                'picture' => $info->path_link ?? null,
                                                'w' => '270px',
                                            ])
                                        </div>
                                    </div>
                                    <div class="media-body paddingL8 paddingR8">
                                        <div class="paddingB0 xs-marginB10">
                                            <h2 class="title3 xs-title3 margin0 colorBlack two-line">
                                                {{ $info->title }}
                                            </h2>
                                            <p class="summary3 xs-summary3 paddingT10 colorDarkAsh textJustify hidden-xs three-line">
                                                {{ strip_tags($info->details) }}
                                            </p>
                                        </div>
                                        <p class="colorDarkAsh time positionAbsolute xs-positionRelative bottom0"
                                            style="margin-bottom: -5px !important">
                                            <i class="fa fa-clock-o fontSize14 icon"></i>
                                            {{ date_time_format($info->created_at) }}
                                        </p>
                                    </div>
                                    <a href="{{ news_url($info) }}" class="linkOverlay"></a>
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="no-results">
                            <div class="no-results-content">
                                <i class="fa fa-search"></i>
                                <p>কোনো খবর পাওয়া যায়নি</p>
                                <small>
                                    @if(request('date'))
                                        {{ \Carbon\Carbon::parse(request('date'))->format('d M, Y') }} তারিখে কোনো সংবাদ নেই
                                    @else
                                        অন্য কোন শব্দ দিয়ে চেষ্টা করুন
                                    @endif
                                </small>
                            </div>
                        </div>
                    @endforelse
                </div>

                {{-- PAGINATION --}}
                @if($news->lastPage() > 1)
                    <div class="pagination-wrapper">
                        <div class="pagination-info">
                            {{ $news->firstItem() }}–{{ $news->lastItem() }} / মোট {{ $news->total() }}টি সংবাদ
                        </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

                            @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>

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

        </div>

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

    </div>

    <style>
        /* ===== SEARCH ===== */
        .search-wrapper {
            position: relative;
            max-width: 100%;
            margin-bottom: 25px;
        }

        .search-input-group {
            position: relative;
            display: flex;
            align-items: center;
            background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
            border: 2px solid #e0e0e0;
            border-radius: 50px;
            transition: all .3s cubic-bezier(.4, 0, .2, 1);
            padding: 0 20px;
            box-shadow: 0 4px 15px rgba(0,0,0,.05);
        }

        .search-input-group:focus-within {
            border-color: #b30000;
            box-shadow: 0 8px 25px rgba(179,0,0,.15);
            transform: translateY(-2px);
        }

        .search-icon {
            font-size: 18px;
            color: #999;
            margin-right: 12px;
            transition: color .3s;
        }

        .search-input-group:focus-within .search-icon { color: #b30000; }

        .search-input {
            border: none !important;
            outline: none !important;
            background: transparent !important;
            padding: 15px 0 !important;
            font-size: 16px !important;
            font-weight: 500;
            color: #333;
            width: 100%;
            box-shadow: none !important;
        }

        .search-input::placeholder { color: #999; font-weight: 400; }

        /* Submit Button */
        .search-submit-btn {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 38px !important;
            height: 38px !important;
            border-radius: 8px !important;
            border: none !important;
            background: #b30000 !important;
            color: #fff !important;
            font-size: 14px !important;
            cursor: pointer !important;
            margin-left: 8px !important;
            flex-shrink: 0 !important;
            transition: all .25s ease !important;
            outline: none !important;
        }

        .search-submit-btn:hover {
            background: #8b0000 !important;
            transform: translateY(-2px) !important;
            box-shadow: 0 4px 10px rgba(179,0,0,.25) !important;
        }

        /* Clear Button */
        .search-clear {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: #f0f0f0;
            color: #999;
            text-decoration: none;
            margin-left: 8px;
            flex-shrink: 0;
            transition: all .3s;
        }

        .search-clear:hover { background: #e0e0e0; color: #333; }

        /* ===== FILTER BADGE ===== */
        .active-filter-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: #fff3f3;
            border: 1px solid #ffcdd2;
            color: #b30000;
            padding: 6px 14px;
            border-radius: 50px;
            font-size: 13px;
            font-weight: 600;
        }

        .active-filter-badge .filter-remove {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            background: #ffcdd2;
            border-radius: 50%;
            color: #b30000;
            text-decoration: none;
            font-size: 11px;
            transition: all .2s;
        }

        .active-filter-badge .filter-remove:hover { background: #b30000; color: white; }

        /* ===== RESULT INFO ===== */
        .result-info {
            background: #f8f9fa;
            border-left: 3px solid #b30000;
            padding: 8px 12px;
            font-size: 13px;
            color: #555;
            border-radius: 0 4px 4px 0;
        }

        /* ===== NEWS ===== */
        .news-list-wrapper { animation: fadeIn .5s ease; }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        .no-results { padding: 60px 20px; text-align: center; }
        .no-results-content { display: flex; flex-direction: column; align-items: center; gap: 15px; }
        .no-results-content i  { font-size: 48px; color: #ddd; }
        .no-results-content p  { font-size: 18px; font-weight: 600; color: #666; margin: 0; }
        .no-results-content small { color: #999; font-size: 14px; }

        /* ===== 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;
            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;
        }

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

@endsection