@extends('layouts.main')
@include('site.meta.og_content')
@section('content')
<section class="page-content-start">
	<hr style="margin-top: 0px; margin-bottom: 0px">
</section>

<section>
	<div class="container">
		<div class="row">
			<div class="col-12 gmf-breadcrub-sec">
				<nav aria-label="breadcrumb">
					<ol class="breadcrumb">
						<li class="breadcrumb-item">
							<a href="/" class="">Home</a>
						</li> 
						<li aria-current="page" class="breadcrumb-item active">
                            Blogs
                        </li>
                    </ol>
                </nav>
			</div>
		</div>
	</div>
</section>


<section class="blog-block">
	<div class="container">
        <div class="row filter-row">
            <div class="col-md-4 feed-box feed-blog category-dropdown">
                <div class="dropdownbox">
                    <p>Sort by category <span class="ddn-indicator"></span>
                    </p>
                </div>
                <input type="hidden" name="category" id="category" value="">
                <ul class="menu main_category">
                    <li class="active">All Categories</li>
                    @foreach($categories as $key => $category)
                        <li class="" data-url="{{ $category->category }}">{{$category->category}}</li>
                     @endforeach
                </ul>
            </div>
            <div class="col-md-4 feed-box feed-blog">
                <!-- <form> -->
                    <div class="form-row">
                        <div class="form-group col-md-12">
                            <input type="text" id="search_" placeholder="Search by title" class="form-control">
                            <span class="icon-search">
                                <i class="fa fa-search"></i>
                            </span>
                        </div>
                    </div>
                <!-- </form> -->
            </div>
        </div>
        <div class="row blogs_content">
        @foreach($blogs->take(1) as $key => $blog)
            <div class="col-md-4 feed-box feed-blog">
                <div class="feed-content">
                    <div class="sec-image">
                        <a href="/blogs/{{$blog->url}}">
                            <img src="{{url('').'/assets/blog/'.$blog->display_image}}" alt="blog" class="img-fluid">
                            <span class="img-indicator">
                                <span class="img blog-icon"></span>
                            </span>
                        </a>
                    </div>
                    <div class="box-description">
                        <div class="sec-title">
                            <a href="/blogs/{{$blog->url}}">
                                <h3>{{$blog->headline}}
                                    <!---->
                                </h3>
                            </a>
                        </div>
                        <div class="sec-footer white">
                            <ul>
                                <li>
                                    <a href="/blogs">Blog</a>
                                </li>
                                <!-- <li>
                                    <a href="/search?category=Hiring Management">Hiring Management</a>
                                </li> -->
                                <li>{{date_formt_to_html($blog->publish_date)}}</li>
                            </ul>
                        </div>
                        <div class="social-action"></div>
                    </div>
                </div>
            </div>
        @endforeach
        </div>
        <div class="row">
            <a id="view_more" style="{{ count($blogs) <= 1 ? 'display:none;' : ''}}">View More</a>
        </div>
	</div>
</section>

@stop
@push('style')
<link rel="stylesheet" href="{{ asset('/css/blogs.css')}}">
<link rel="stylesheet" href="{{ asset('/css/profile.css')}}">
<link rel="stylesheet" href="{{ asset('/css/featured-carousel.css')}}">
@endpush
@push('script')
<!-- <script src="{{ asset('js/app.js') }}"></script> -->
<script src="{{ asset('js/site/custom_owl.js') }}"></script>
<script src="{{ asset('js/site/custom.js') }}"></script>
<script type="text/javascript">
	$(function(){
		$(".gmf-nav-secondary .nav-item").removeClass('active')
        $(".gmf-nav-secondary .nav-item.blogs").addClass('active')
	})
    $(document).ready(function() {
        let currentCount = 0;
        $('#search_').on('keyup', function() {
            currentCount = 0; 
            var searchValue = $(this).val();
            var category =  $('#category').val();
            if (searchValue.length > 3) {
                loadResources(category, searchValue, currentCount);
            }
        });
        $('.menu.main_category li').on('click', function() {
            currentCount = 0; // Reset the count when a new category is selected
            var category =  $(this).data('url'); 
            var search =  $('#search_').val(); 
             $('#category').val(category); 
            loadResources(category, search, currentCount);
        });
        $('#view_more').on('click', function() {
            var search =  $('#search_').val(); 
            var category =  $('#category').val();
            currentCount += 1; // Increment the count by the number of records to fetch
            loadResources(category, search, currentCount);
        });

        function loadResources(category, search, offset) {
            $.ajax({
                url: '{{ route('blog.filter') }}', // Replace with your AJAX endpoint
                method: 'POST', // Use POST method
                data: {
                    search: search,
                    category: category,
                    offset: offset, // Pass the offset to the server
                    _token: '{{ csrf_token() }}' // Add CSRF token for Laravel
                },
                success: function(response) {
                    if (response.html) {
                        if (offset === 0) {
                            $('.blogs_content').html(response.html);
                        } else {
                            $('.blogs_content').append(response.html);
                        }
                        if (response.hasMore) {
                            $('#view_more').show();
                        } else {
                            $('#view_more').hide();
                        }
                    } else {
                        console.error('No HTML content in response.');
                    }
                },
                error: function(xhr, status, error) {
                    console.error('AJAX Error:', status, error);
                }
            });
        }
    });
</script>
@endpush