@extends('layouts.app')

@section('content')
    <div class="container mt-4">
        <h2 class="mb-4 text-center custom-text-color">{{ $title }}</h2>
        <div class="list-group">
            <input type="text" id="searchCategoryInput" class="form-control mb-3" placeholder="Buscar categoría...">
            <ul id="categoryList" class="user-select-none">
                @foreach ($categories as $category)
                    <li class="mt-1 category-item">
                        <a href="{{ route('searchServiceByCategory', $category->slug) }}" class="list-group-item list-group-item-action">
                            {{ $category->display_name }} <span>({{ $category->services->where('draft', false)->count() }})</span>
                        </a>
                    </li>
                @endforeach
            </ul>
        </div>
    </div>
@endsection

@section('custom_script')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const searchInput = document.getElementById('searchCategoryInput');
        const items = document.querySelectorAll('.category-item');

        searchInput.addEventListener('input', function () {
            const searchTerm = this.value.toLowerCase();

            items.forEach(item => {
                const text = item.textContent.toLowerCase();
                item.style.display = text.includes(searchTerm) ? 'list-item' : 'none';
            });
        });
    });
</script>
@endsection