@extends('layouts.website')

@section('content')
    <main>
        <section class="bs-banner typ-blog">
            <div class="main">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="background-wrapper set-bg" data-img="{{ asset('assets/images/blog-bg.jpg') }}">
                            <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>

        <section class="lyt-section bs-blogs">
            <div class="container">
                <div class="row mb-4">
                    <div class="col-12">
                        <h2 class="bs-heading">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">
                                <img src="{{ $featuredBlog->image_url }}" class="img-fluid w-100"
                                    alt="{{ $featuredBlog->title }}">
                                <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">
                                <a href="{{ route('blogs.show', $featuredBlog->id) }}"
                                    class="text-decoration-none text-dark">
                                    {{ $featuredBlog->title }}
                                </a>
                            </h3>
                        @else
                            <h3 class="blog-title">No blogs available.</h3>
                        @endif
                    </div>

                    <div class="col-lg-4">
                        <form action="{{ route('blogs.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('blogs.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('blogs.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">
                                <h6>No recent blogs 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">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 mb-5" data-aos="fade" data-aos-delay="400">
                            Ideas, Insights, and Inspiration
                        </h2>
                    </div>
                </div>

                @if ($blogs->count() > 0)
                    <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
                        @foreach ($blogs as $blog)
                            <div class="col">
                                <article class="blog-card h-100">
                                    <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('blogs.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">
                            <ul class="pagination justify-content-center align-items-center">
                                @if ($blogs->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="{{ $blogs->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 ($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-2">
                                        <a class="page-link arrow-btn" href="{{ $blogs->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">
                                <h4>No blogs found</h4>
                                <p>No blogs 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 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 /blogs without search parameter
            window.location.href = '{{ route('blogs.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 /blogs without search parameter
            window.location.href = '{{ route('blogs.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>