@extends('layout.main')

@section('hero-content')
<!-- Start hero content -->
    @if(isset($HERO_IS_AD) && $HERO_IS_AD === 1)
        <!-- Hero Ad -->
        {!! $HERO_AD_SCRIPT !!}
    @else
        <!-- Hero Image -->
        @include('layout.hero')
    @endif
<!-- End hero content -->
@endsection

@section('main-container')
    
    <!-- Start Card Section -->
    <section class="pt-1 mt-5">
        <div class="container" id="toolsContainer">
            @if ($categoryTools)
                @foreach ($categoryTools as $category)
                    @if ($category->NavItem->isNotEmpty())
                        <div class="row tools mb-5 category-row" data-category-name="{{ strtolower($category->name) }}">
                            <div class="category-container mb-2 {{ $loop->first ? 'm-0' : '' }}">
                                <h1 class="category-heading">
                                    {{ __t($category->name) }}
                                    <hr>
                                </h1>
                                <p class="category-description">
                                    {{ __t($category->description) }}
                                </p>
                            </div>
                            @foreach ($category->NavItem as $key => $item)
                                <!-- Tool Card -->
                                <a href="{{url($item->url)}}" class="tool-a-wrap">
                                    <div data-name="{{ mb_strtolower(__t($item->card_heading) ?: __t($item->name), 'UTF-8') }}" class="tool-card {{ getColorByIndex($key) }} mb-3">
                                        <div class="text-content">
                                            <h3 class="card-title">{{ __t($item->card_heading) ?: __t($item->name) }}</h3>
                                            <p>{{ Illuminate\Support\Str::limit(__t($item->card_content) ?: __t($item->meta_description), 50, '...') }}</p>
                                        </div>
                                        <img src="{{ $item->icon_image ? Storage::url($item->icon_image) : asset('assets/icon/' . getColorByIndex($key) . '.svg') }}" alt="{{ __t($item->card_heading) ?: __t($item->name) }}">
                                    </div>
                                </a>
                            @endforeach
                        </div>
                    @endif
                @endforeach
            @endif
        </div>
    </section>
    <!-- Start Card Section -->
@endsection

@section('script')
<script>

 // Filter function to hide and show tool cards and categories based on search input
 function filterTools() {
        var input = document.getElementById('searchInput');
        var filter = input.value.toLowerCase();
        var toolCards = document.querySelectorAll('.tool-card');
        var categories = document.querySelectorAll('.category-container');
        var button = document.getElementById('scrollButton');

        // If the input is empty, show all categories and tool cards
        if (filter === "") {
            button.style.display = "none";
            toolCards.forEach(function(card) {
                card.style.display = ""; // Show all tool cards
            });
            categories.forEach(function(category) {
                category.style.display = ""; // Show all categories
            });
        } else {
            button.style.display = "block";
            // Loop through all tool cards and check if the tool name matches the search input
            toolCards.forEach(function(card) {
                var cardName = card.getAttribute('data-name');
                
                if (cardName.indexOf(filter) > -1) {
                    card.style.display = ""; // Show card
                } else {
                    card.style.display = "none"; // Hide card
                }
            });

            // Loop through each category and check if it has any visible tool cards
            categories.forEach(function(category) {
                var visibleCards = category.querySelectorAll('.tool-card[style="display: none;"]').length;
                
                if (visibleCards === category.querySelectorAll('.tool-card').length) {
                    category.style.display = "none"; // Hide category if all tool cards are hidden
                } else {
                    category.style.display = ""; // Show category if any card is visible
                }
            });
        }
    }

    // Scroll to the tools container when the button is clicked
document.getElementById('scrollButton').addEventListener('click', function() {
    var toolsSection = document.getElementById('toolsContainer');
    toolsSection.scrollIntoView({
        behavior: 'smooth', // Smooth scroll
        block: 'start' // Scroll to the top of the section
    });
});
</script>
@endsection