@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">
                           Resources
                        </li>
                    </ol>
                </nav>
			</div>
		</div>
	</div>
</section>
<section class="resources-block">
	<div class="container">
        <div class="row filter-row">
            <!-- <div class="col-md-4 feed-box latest-dropdown feed-blog">
                <div class="dropdownbox">
                    <p>Latest <span class="ddn-indicator"></span>
                    </p>
                </div>
                <ul class="menu">
                    <li class="active">Latest</li>
                    <li>Oldest</li>
                </ul>
            </div> -->
            <div class="col-md-4 feed-box feed-blog category-dropdown">
                <div class="dropdownbox">
                    <p>{{ucfirst($slug)}} <span class="ddn-indicator"></span>
                    </p>
                </div>
                <input type="hidden" name="category_name" value="{{ucfirst($slug)}}" id="category_name"> 
                <ul class="menu main_category">
                    @foreach($categories as $key => $category)
                        <li class="@if($category->category_name == ucfirst($slug)) active @endif" data-url="{{ url('resource/' . strtolower($category->category_name)) }}">{{$category->category_name}}</li>
                     @endforeach
                </ul>
            </div>
        </div>
        
        @if($slug != 'news' && $slug != 'events')
            <div class="row">
                <div class="col-md-12 feed-box latest-dropdown feed-blog">
                    <ul class="list-inline sub_category">
                        @foreach($subcategories as $key => $subcategory)
                        <li class="{{ $subcategory == 'Articles' ? 'active' : '' }}">
                            <a href="javascript:void(0)" data-val="{{ $subcategory }}">{{ $subcategory }}</a>
                        </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        @endif
        
        <div class="row resource_content">
            @foreach($resources->take(1) as $key => $resource)
            <div class="col-md-4 feed-box feed-blog">
                <div class="feed-content">
                    <div class="sec-image">
                        <a href="/resource/{{$slug}}/{{$resource->url}}">
                            <img src="{{url('').'/assets/resources/'.$resource->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="/resource/{{$slug}}/{{$resource->url}}">
                                <h3>{{$resource->headline}}
                                    <!---->
                                </h3>
                            </a>
                        </div>
                        <div class="sec-footer white">
                            <ul>
                                <li>
                                    <a href="/resource/{{$slug}}">{{ucfirst($slug)}}</a>
                                </li>
                                @if($slug != 'news' && $slug != 'events')
                                <li>
                                    <a href="javascript:void(0)">{{$resource->sub_category}}</a>
                                </li>
                                @endif
                                @if($slug == 'events')
                                    <li>
                                        <a href="javascript:void(0)">{{$resource->city}}</a>
                                    </li>
                                @endif
                                <li>{{date_formt_to_html($resource->publish_date)}}</li>
                            </ul>
                        </div>
                        <div class="social-action"></div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        <div class="row">
            <a id="view_more" style="{{ count($resources) <= 1 ? 'display:none;' : ''}}">View More</a>
        </div>
	</div>
</section>

@stop
@push('style')
<link rel="stylesheet" href="{{ asset('/css/resource.css')}}">
<link rel="stylesheet" href="{{ asset('/css/profile.css')}}">
<link rel="stylesheet" href="{{ asset('/css/featured-carousel.css')}}">
<style>
    .sub_category li { 
        color: #2BC000;
        font-size: 14px;
        font-family: 'montserrat_mediumregular';
    }
    .sub_category li.active {
    color: #2BC000; 
    font-weight: bold; 
}
</style>
@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.resources").addClass('active')
	})
    $(document).ready(function() {
        $('.menu.main_category li').on('click', function() {
            var url = $(this).data('url'); // Get the URL from the data attribute
            if (url) {
                window.location.href = url; // Redirect to the URL
            }
        });
    });
 
    $(document).ready(function() {
    let currentCount = 0; // To keep track of how many records are loaded

    $('.sub_category a').on('click', function() {
        currentCount = 0; // Reset the count when a new category is selected
        $('.sub_category li').removeClass('active');
        $(this).closest('li').addClass('active');
        var subCategory = $(this).data('val'); 
        var category = $('#category_name').val(); 

        loadResources(category, subCategory, currentCount);
    });

    $('#view_more').on('click', function() {
        var subCategory = $('.sub_category li.active a').data('val');
        var category = $('#category_name').val();
        // alert(category);
        if(category =='Events' || category =='News' ){
            subCategory = category;
        }
        currentCount += 1; // Increment the count by the number of records to fetch
        loadResources(category, subCategory, currentCount);
    });

    function loadResources(category, subCategory, offset) {
        $.ajax({
            url: '{{ route('resource.filter') }}', // Replace with your AJAX endpoint
            method: 'POST', // Use POST method
            data: {
                sub_category: subCategory,
                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) {
                        $('.resource_content').html(response.html);
                    } else {
                        $('.resource_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