@extends('layouts.website')

@section('content')
    <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>

    @if ($featuredNews || $news->count() > 0 || $recentNews->count() > 0)
    <section class="lyt-section bs-blogs">
        <div class="container">
            <div class="row mb-4">
                <div class="col-md-5">
                    <h2 class="bs-heading">Stay Updated with 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 parent-blog-height img-width">
                            <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>
                    @endif
                </div>

                <div class="col-lg-4">
                    <div class="parent-blog-height">
                        <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'));" class="no-aos">
                            <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'))
                            <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">
                                <p class="text-muted mb-0" style="font-size: 14px; font-style: italic;">No featured news at the moment. Check back soon for updates.</p>
                            </div>
                        @endforelse
                    </div>


                    <!-- Social Icons -->
                    <h6 class="featured follow-featured">Follow Us On</h6>
                    <div class="social-icons mt-2">
                        <div class="featured-arr">
                            <a href="https://www.facebook.com/irqsglobal/" target="_blank" rel="noopener noreferrer" title="Follow on Facebook">
                                <img src="{{ asset('assets/images/blogs/facebook.svg') }}" class="arrow" alt="Facebook" style="width:18px; height:18px; display:inline-block;">
                            </a>
                            <a href="https://x.com/irqsglobal" target="_blank" rel="noopener noreferrer" title="Follow on Twitter/X">
                                <img src="{{ asset('assets/images/blogs/x.svg') }}" class="arrow" alt="Twitter/X" style="width:18px; height:18px; display:inline-block;">
                            </a>
                            <a href="https://www.instagram.com/irqs_global/?hl=en" target="_blank" rel="noopener noreferrer" title="Follow on Instagram">
                                <img src="{{ asset('assets/images/blogs/instagram.svg') }}" class="arrow" alt="Instagram" style="width:18px; height:18px; display:inline-block;">
                            </a>
                            <a href="https://www.linkedin.com/company/irqsglobal" target="_blank" rel="noopener noreferrer" title="Follow on LinkedIn">
                                <img src="{{ asset('assets/images/blogs/linkedin.svg') }}" class="arrow" alt="LinkedIn" style="width:18px; height:18px; display:inline-block;">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    @endif

    @if ($news->count() > 0)
    <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>

            <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
                @foreach ($news as $newsItem)
                    <div class="col mt-0">
                        <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-1 me-md-4 disabled">
                                <span 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 me-1 me-md-4">
                                <a class="page-link arrow-btn" href="{{ $news->previousPageUrl() }}" aria-label="Previous">
                                    <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

                        @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-1 ms-md-4">
                                <a class="page-link arrow-btn" href="{{ $news->nextPageUrl() }}" aria-label="Next">
                                    <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 ms-1 ms-md-4 disabled">
                                <span 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" width="20" height="20">
                                        <polyline points="9 18 15 12 9 6" />
                                    </svg>
                                </span>
                            </li>
                        @endif
                    </ul>
                </nav>
            @endif
        </div>
    </section>
    @endif

    <!-- <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> -->
    <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="news">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>
    @include('components.request-quote-button')

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

@section('scripts')
    <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