@extends('layouts.website')

@section('content')

    <main>
        <section class="bs-banner typ-certification">
            <div class="main">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="background-wrapper">
                            <!-- Ignore This Section -->
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="lyt-section bs-blogs">
            <div class="container">
                <div class="row mb-4">
                    <div class="col-12">
                        <h2 class="bs-heading">Stay Updated with <br> Our<span> Latest News</span></h2>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-8 mb-4">
                        @if ($featuredNews)
                            <div class="position-relative blog-image">
                                <img src="{{ $featuredNews->image_url }}" class="img-fluid w-100"
                                    alt="{{ $featuredNews->title }}">
                                <span class="category-tag">{{ $featuredNews->category->name ?? 'Uncategorized' }}</span>
                            </div>

                            <p class="blog-meta mt-3">{{ $featuredNews->created_at->format('F j, Y') }}</p>
                            <h3 class="blog-title">
                                <a href="{{ route('news.show', $featuredNews->id) }}"
                                    class="text-decoration-none text-dark">
                                    {{ $featuredNews->title }}
                                </a>
                            </h3>
                        @else
                            <h3 class="blog-title">No news available.</h3>
                        @endif
                    </div>

                    <div class="col-lg-4">
                        <form action="{{ route('news.index') }}" method="GET" class="search-box mb-4"
                            onsubmit="return validateSearchForm(this);">
                            <img src="https://www.svgrepo.com/show/7109/search.svg" alt="search icon"
                                style="cursor: pointer;" onclick="submitSearchForm(this.closest('form'));">
                            <input type="text" name="search" placeholder="Search" value="{{ request('search') }}"
                                onkeypress="handleSearchKeyPress(event, this);">
                            <button type="submit" style="display: none;"></button>
                        </form>
                        @if (request('search') && trim(request('search')) !== '')
                            <div class="mb-3">
                                <small class="text-muted">Search results for: "{{ request('search') }}"</small>
                                <a href="{{ route('news.index') }}" class="ms-2 text-decoration-none">
                                    <small class="text-primary">Clear search</small>
                                </a>
                            </div>
                        @endif
                        <h5 class="mb-3 featured">Featured</h5>

                        @forelse($recentNews as $recentNewsItem)
                            <a href="{{ route('news.show', $recentNewsItem->id) }}"
                                class="featured-post text-decoration-none text-dark">
                                <img src="{{ $recentNewsItem->image_url }}" alt="{{ $recentNewsItem->title }}"
                                    class="thumb">
                                <h6>{{ $recentNewsItem->title }}</h6>
                                <div class="featured-arr">
                                    <img src="{{ asset('assets/images/blogs/line-arrow.svg') }}" class="arrow"
                                        alt="arrow">
                                </div>
                            </a>
                        @empty
                            <div class="featured-post">
                                <h6>No recent news available</h6>
                            </div>
                        @endforelse

                        <!-- Social Icons -->
                        <h6 class="mt-4 featured">Follow Us On</h6>
                        <div class="social-icons mt-2">
                            <div class="featured-arr">
                                <img src="{{ asset('assets/images/blogs/facebook.svg') }}" class="arrow"
                                    alt="arrow">
                                <img src="{{ asset('assets/images/blogs/x.svg') }}" class="arrow" alt="arrow">
                                <img src="{{ asset('assets/images/blogs/instagram.svg') }}" class="arrow"
                                    alt="arrow">
                                <img src="{{ asset('assets/images/blogs/linkedin.svg') }}" class="arrow"
                                    alt="arrow">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="lyt-section bs-blogs typBlack typ-ideas">
            <div class="container">
                <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">Latest News & <span class="ms-1">Updates</span></div>
                </div>
                <div class="row mb-4 align-items-end">
                    <div class="col-lg-6 col-12">
                        <h2 class="bs-heading typWhite mb-5" data-aos="fade" data-aos-delay="400">
                            Industry News & IRQS Updates
                        </h2>
                    </div>
                </div>

                @if ($news->count() > 0)
                    <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
                        @foreach ($news as $newsItem)
                            <div class="col">
                                <article class="blog-card h-100">
                                    <div class="blog-media">
                                        <img src="{{ $newsItem->image_url }}" alt="{{ $newsItem->title }}" />
                                    </div>
                                    <div class="blog-body">
                                        <div class="post-date">{{ $newsItem->created_at->format('F j, Y') }}</div>
                                        <h5 class="post-title">
                                            <a href="{{ route('news.show', $newsItem->id) }}"
                                                class="text-decoration-none text-white">
                                                {{ $newsItem->title }}
                                            </a>
                                        </h5>
                                    </div>
                                </article>
                            </div>
                        @endforeach
                    </div>

                    @if ($news->hasPages())
                        <nav aria-label="Posts pagination" class="mt-5">
                            <ul class="pagination justify-content-center align-items-center">
                                @if ($news->onFirstPage())
                                    <li class="page-item me-2 disabled">
                                        <span class="page-link arrow-btn">
                                            <img alt="Prev"
                                                src='data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23cfe5ea" 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 me-2">
                                        <a class="page-link arrow-btn" href="{{ $news->previousPageUrl() }}"
                                            aria-label="Previous">
                                            <img alt="Prev"
                                                src='data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23cfe5ea" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>' />
                                        </a>
                                    </li>
                                @endif

                                @foreach ($news->getUrlRange(1, $news->lastPage()) as $page => $url)
                                    @if ($page == $news->currentPage())
                                        <li class="page-item active" aria-current="page">
                                            <span class="page-link">{{ $page }}</span>
                                        </li>
                                    @else
                                        <li class="page-item">
                                            <a class="page-link1" href="{{ $url }}">{{ $page }}</a>
                                        </li>
                                    @endif
                                @endforeach

                                @if ($news->hasMorePages())
                                    <li class="page-item ms-2">
                                        <a class="page-link arrow-btn" href="{{ $news->nextPageUrl() }}"
                                            aria-label="Next">
                                            <img alt="Next"
                                                src='data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23cfe5ea" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>' />
                                        </a>
                                    </li>
                                @else
                                    <li class="page-item ms-2 disabled">
                                        <span class="page-link arrow-btn">
                                            <img alt="Next"
                                                src='data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23cfe5ea" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>' />
                                        </span>
                                    </li>
                                @endif
                            </ul>
                        </nav>
                    @endif
                @else
                    <div class="row">
                        <div class="col-12 text-center">
                            <div class="alert alert-info">
                                <p>No news available at the moment.</p>
                            </div>
                        </div>
                    </div>
                @endif
            </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="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()">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>

        <!-- back to top  -->
        <a href="#" class="back-to-top">
            <span class="icon icon-drop-icon"></span>
        </a>
        <div class="sticky-btn">
            <a href="">
                <img src="{{ asset('assets/images/btn.svg') }}" class="img-fluid" alt="button">
            </a>
        </div>
    </main>

    {{-- Include enquiry form modal for News page --}}
    @include('components.enquiry-form-wrapper', ['pageSource' => 'news', 'formType' => 'enquiry'])

    @include('website.partials.footer')
    @include('website.partials.include_js')
</body>

</html>

<script>
    function validateSearchForm(form) {
        const searchInput = form.querySelector('input[name="search"]');
        const searchValue = searchInput.value.trim();

        if (searchValue === '') {
            // If search is empty, redirect to /news without search parameter
            window.location.href = '{{ route('news.index') }}';
            return false;
        }

        return true;
    }

    function submitSearchForm(form) {
        const searchInput = form.querySelector('input[name="search"]');
        const searchValue = searchInput.value.trim();

        if (searchValue === '') {
            // If search is empty, redirect to /news without search parameter
            window.location.href = '{{ route('news.index') }}';
            return false;
        }

        form.submit();
        return true;
    }

    function handleSearchKeyPress(event, input) {
        if (event.key === 'Enter') {
            event.preventDefault();
            const form = input.closest('form');
            submitSearchForm(form);
        }
    }
</script>

@endsection