@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">
                            <!-- <div class="container">
                                                <div class="hero-wrapper">
                                                    <h1 class="title">Blog & <span>Insights</span></h1>
                                                    <p class="subtitle marB42">Stay informed with the latest industry insights, certification
                                                        updates, and expert guidance.</p>
                                                </div>
                                            </div> -->
                        </div>
                    </div>
                </div>
            </div>
        </section>

        @if ($hasBlogsInDb && $hasNoResults)
        {{-- Show only "No Results Found" message when search returns no results (no title, no full section) --}}
        <section class="lyt-section bs-blogs">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="text-center py-5">
                            <div class="mb-4">
                                <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="color: #6c757d; opacity: 0.5;">
                                    <circle cx="11" cy="11" r="8"></circle>
                                    <path d="m21 21-4.35-4.35"></path>
                                </svg>
                            </div>
                            <h3 class="mb-3" style="color: #495057;">No Results Found</h3>
                            <p class="text-muted mb-4" style="font-size: 16px;">
                                We couldn't find any blog posts matching "<strong>{{ request('search') }}</strong>".
                            </p>
                            <p class="text-muted mb-4" style="font-size: 14px;">
                                Try adjusting your search terms or <a href="{{ route('blog.index') }}" class="text-primary text-decoration-none">browse all blogs</a>.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        @elseif ($hasBlogsInDb && ($featuredBlog || $blogs->count() > 0 || $recentBlogs->count() > 0))
        <section class="lyt-section bs-blogs">
            <div class="container">
                <div class="row mb-4">
                    <div class="col-12">
                        <h2 class="bs-heading bs-heading-blog" data-aos="fade" data-aos-delay="500">Stay Informed with <br><span>Our Blog</span></h2>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-8 mb-4">
                        @if ($featuredBlog)
                            <div class="position-relative blog-image parent-blog-height img-width">
                                <img src="{{ $featuredBlog->image_url }}" class="img-fluid w-100"
                                    alt="{{ $featuredBlog->title }}" data-aos="fade" data-aos-delay="500">
                                <span class="category-tag">{{ $featuredBlog->category->name ?? 'Uncategorized' }}</span>
                            </div>

                            <p class="blog-meta mt-3">{{ $featuredBlog->created_at->format('F j, Y') }}</p>
                            <h3 class="blog-title" data-aos="fade" data-aos-delay="500">
                                <a href="{{ route('blog.show', $featuredBlog->id) }}" class="text-decoration-none text-dark">
                                    {{ $featuredBlog->title }}
                                </a>
                            </h3>
                        @endif
                    </div>

                    <div class="col-lg-4">
                        <div class="parent-blog-height" data-aos="fade" data-aos-delay="500">
                            <form action="{{ route('blog.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'))
                                <div class="mb-3">
                                    <small class="text-muted">Search results for: "{{ request('search') }}"</small>
                                    <a href="{{ route('blog.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($recentBlogs as $recentBlog)
                                <a href="{{ route('blog.show', $recentBlog->id) }}"
                                    class="featured-post text-decoration-none text-dark">
                                    <img src="{{ $recentBlog->image_url }}" alt="{{ $recentBlog->title }}" class="thumb">
                                    <h6>{{ $recentBlog->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 blogs at the moment. Check back soon for updates.</p>
                                </div>
                            @endforelse
                        </div>


                        <!-- Social Icons -->
                        <h6 class="featured follow-featured" data-aos="fade" data-aos-delay="500">Follow Us On</h6>
                        <div class="social-icons mt-2">
                            <div class="featured-arr" data-aos="fade" data-aos-delay="500">
                                <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 ($blogs->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 text-uppercase">Insights &<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 blog-heading-space" data-aos="fade" data-aos-delay="400">
                            Ideas, Insights, and Inspiration
                        </h2>
                    </div>
                </div>

                <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
                    @foreach ($blogs as $blog)
                        <div class="col mt-0">
                            <article class="blog-card h-100" data-aos="fade" data-aos-delay="500">
                                <div class="blog-media">
                                    <img src="{{ $blog->image_url }}" alt="{{ $blog->title }}" />
                                    <span class="topic-badge">{{ $blog->category->name ?? 'Uncategorized' }}</span>
                                </div>
                                <div class="blog-body">
                                    <div class="post-date">{{ $blog->created_at->format('F j, Y') }}</div>
                                    <h5 class="post-title">
                                        <a href="{{ route('blog.show', $blog->id) }}" class="text-decoration-none text-white">
                                            {{ $blog->title }}
                                        </a>
                                    </h5>
                                </div>
                            </article>
                        </div>
                    @endforeach
                </div>





                @if ($blogs->hasPages())
                    <nav aria-label="Posts pagination" class="mt-5" data-aos="fade" data-aos-delay="500">
                        <ul class="pagination justify-content-center align-items-center">
                            @if ($blogs->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="{{ $blogs->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 ($blogs->getUrlRange(1, $blogs->lastPage()) as $page => $url)
                                @if ($page == $blogs->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 ($blogs->hasMorePages())
                                <li class="page-item ms-1 ms-md-4">
                                    <a class="page-link arrow-btn" href="{{ $blogs->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="blogs">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')
    </main>

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

@endsection

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

        if (searchValue === '') {
            // If search is empty, redirect to /blog without search parameter
            window.location.href = '{{ route('blog.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 /blog without search parameter
            window.location.href = '{{ route('blog.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>