@extends('layouts.website')

@section('content')
    <main>
        <section class="bs-banner type-overview typ-glob-accre typ-evt-banner typ-cert-banner typ-public-i">
            <div class="swiper main">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="background-wrapper set-bg"
                            data-img="{{ asset('assets/images/training-list/public-information.webp') }}">
                            <div class="container">
                                <div class="hero-wrapper">
                                    <h1 class="title"><span>Public Information </span> Hub for Policies & Compliance
                                    </h1>
                                    <p class="subtitle marB42">Discover key updates, policies, and documents for
                                        complete transparency.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        @if($knowledgeBureauItems->count() > 0)
        <section class="lyt-section bs-ayush bs-blogs typBlack typ-pdf-sec typ-ideas">
            <div class="container typ-faq">
                <div class="row g-5 align-items-start">

                    <div class="col-lg-5">
                        <div class="common-heading" data-aos="fade" data-aos-delay="300">
                            <div class="line">
                                <img src="{{ asset('assets/images/blue-bg-line.svg') }}" class="img-fluid" alt="line-img">
                            </div>
                            <div class="bs-sub-heading typWhite text-uppercase">Knowledge <span class="ms-1">Bureau</span>
                            </div>
                        </div>
                        <h2 class="bs-heading typWhite" data-aos="fade" data-aos-delay="400">
                            Industry Insights & Expert Resources
                        </h2>
                    </div>


                    <div class="col-lg-7">

                        <div class="doc-box">
                            @foreach($knowledgeBureauItems as $item)
                                <div class="doc-item">
                                    <div class="doc-left">
                                        <img src="{{ asset('assets/images/public/pdf-white.svg') }}" alt="PDF"
                                            class="img-fluid">
                                        <span class="doc-title">{{ $item->name }}</span>
                                    </div>
                                    <div class="doc-right">
                                        <a href="{{ asset('storage/' . $item->pdf) }}" target="_blank">
                                            <img src="{{ asset('assets/images/public/arrow-white.svg') }}" alt="Arrow"
                                                class="img-fluid">
                                        </a>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        @if($knowledgeBureauItems->total() > 4)
                        <nav aria-label="Posts pagination" class="mt-5">
                            <noscript>
                                <div class="alert alert-info">
                                    <i class="fas fa-info-circle me-2"></i>
                                    JavaScript is disabled. Pagination will reload the page.
                                </div>
                            </noscript>
                            <ul class="pagination justify-content-center align-items-center">

                                @if($knowledgeBureauItems->onFirstPage())
                                    <li class="page-item pe-1 pe-md-4 disabled" aria-disabled="true">
                                        <span aria-hidden="true" class="page-link arrow-btn">
                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
                                                stroke="#cfe5ea" stroke-width="2" stroke-linecap="round"
                                                stroke-linejoin="round">
                                                <polyline points="15 18 9 12 15 6" />
                                            </svg>
                                        </span>
                                    </li>
                                @else
                                    <li class="page-item pe-1 pe-md-4">
                                        <a class="ajax-pagination-link page-link arrow-btn" href="{{ $knowledgeBureauItems->previousPageUrl() }}"
                                            aria-label="Previous" data-page="{{ $knowledgeBureauItems->currentPage() - 1 }}">
                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
                                                stroke="#cfe5ea" stroke-width="2" stroke-linecap="round"
                                                stroke-linejoin="round">
                                                <polyline points="15 18 9 12 15 6" />
                                            </svg>
                                        </a>
                                    </li>
                                @endif

                                @php
                                    $currentPage = $knowledgeBureauItems->currentPage();
                                    $lastPage = $knowledgeBureauItems->lastPage();

                                    // Smart pagination logic - show max 5 pages with current page context
                                    if ($lastPage <= 5) {
                                        $startPage = 1;
                                        $endPage = $lastPage;
                                    } elseif ($currentPage <= 3) {
                                        $startPage = 1;
                                        $endPage = 5;
                                    } elseif ($currentPage >= $lastPage - 2) {
                                        $startPage = $lastPage - 4;
                                        $endPage = $lastPage;
                                    } else {
                                        $startPage = $currentPage - 2;
                                        $endPage = $currentPage + 2;
                                    }
                                @endphp

                                @for($i = $startPage; $i <= $endPage; $i++)
                                    <li class="page-item">
                                        @if($i == $currentPage)
                                            <span class="page-link1" style="color: #fff;">{{ $i }}</span>
                                        @else
                                            <a class="page-link1 ajax-pagination-link" href="{{ $knowledgeBureauItems->url($i) }}"
                                                data-page="{{ $i }}">{{ $i }}</a>
                                        @endif
                                    </li>
                                @endfor

                                @if($lastPage > 5)
                                    <li class="page-itemq"><a class="page-link1 ajax-pagination-link"
                                            href="{{ $knowledgeBureauItems->url($lastPage) }}" data-page="{{ $lastPage }}"
                                            style="color: #fff;">…</a></li>
                                @endif

                                @if($knowledgeBureauItems->hasMorePages())
                                    <li class="page-item ps-1 ps-md-4">
                                        <a class="bs-btn-hover ajax-pagination-link page-link arrow-btn"
                                            href="{{ $knowledgeBureauItems->nextPageUrl() }}" aria-label="Next"
                                            data-page="{{ $knowledgeBureauItems->currentPage() + 1 }}">
                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
                                                stroke="#cfe5ea" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                                width="20" height="20">
                                                <polyline points="9 18 15 12 9 6" />
                                            </svg>
                                        </a>
                                    </li>
                                @else
                                    <li class="page-item ps-1 ps-md-4 disabled" aria-disabled="true">
                                        <span class="bs-btn-hover page-link arrow-btn" aria-hidden="true">
                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
                                                stroke="#cfe5ea" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                                width="20" height="20">
                                                <polyline points="9 18 15 12 9 6" />
                                            </svg>
                                        </span>
                                    </li>
                                @endif
                            </ul>
                        </nav>
                        @endif
                    </div>
                </div>
            </div>
        </section>
        @endif

        <!-- CTA Section -->
        <!-- <section class="lyt-section typ-certified p-0">
                    <div class="container-padding-left-create">
                        <div class="certified-wrapper">
                            <div class="leftBox lyt-section">
                                <div class="maxw400">
                                    <h2 class="bs-heading mb-4" data-aos="fade" data-aos-delay="200">
                                        Let's get you certified-Start your journey <span>today!</span>
                                    </h2>
                                    <p class="bs-para mb-4" data-aos="fade" data-aos-delay="300">
                                        Connect with our experts for a seamless and hassle-free certification process.
                                    </p>
                                    <a href="javascript:void(0)" class="bs-btn typ-yellow" data-aos="fade" data-aos-delay="400" onclick="openPopupTC()" data-page-source="public-information">Get Certified</a>
                                </div>
                            </div>
                            <div class="rightBox">
                                <div class="box-img" data-aos="fade" data-aos-delay="300">
                                    <img src="{{ asset('assets/images/certified-bg.jpg') }}" class="img-fluid" alt="background-img">
                                </div>
                                <div class="middle-img" data-aos="fade" data-aos-delay="500">
                                    <img src="{{ asset('assets/images/certified-img.png') }}" class="img-fluid" alt="man-img">
                                </div>
                            </div>
                        </div>
                    </div>
                </section> -->

        <section class="lyt-section typ-certified p-0">
            <div class="container-padding-left-create">
                <div class="certified-wrapper">
                    <div class="leftBox lyt-section">
                        <div class="maxw500o">
                            <h2 class="bs-heading mb-4" data-aos="fade" data-aos-delay="200">
                                Let's get you certified-Start your journey <span>today!</span>
                            </h2>
                            <p class="bs-para mb-4" data-aos="fade" data-aos-delay="300">
                                Connect with our experts for a seamless and hassle-free certification process.
                            </p>
                            <a href="javascript:void(0)" class="bs-btn typ-yellow" data-aos="fade" data-aos-delay="400"
                                onclick="openPopupTC()" data-page-source="public-information">Get Certified</a>
                        </div>
                    </div>
                    <div class="rightBox">
                        <div class="box-img" data-aos="fade" data-aos-delay="300">
                            <img src="{{ asset('assets/images/certified-bg.jpg') }}" class="img-fluid" alt="background-img">
                        </div>

                        <div class="middle-img" data-aos="fade" data-aos-delay="500">
                            <img src="{{ asset('assets/images/certified-img.png') }}" class="img-fluid" alt="man-img">
                        </div>
                    </div>
                </div>
            </div>
        </section>

    </main>

    @include('components.enquiry-form-wrapper', ['pageSource' => 'public-information', 'formType' => 'enquiry'])

@endsection

@section('scripts')
    <script src="{{ asset('js/knowledge-bureau-pagination.js') }}"></script>
@endsection