{{-- div banner tela inicial --}}
<div class="carousel carousel-slider">
    @foreach($banner as $banners)
    <a class="carousel-item" href="#one!"><img src="/{{$banners->path}}"></a>
    @endforeach
</div>

<br>
<!-- links uteis -->
<div class="row container">
    <div class="col s12 m12">
        <!-- Tabs -->
        <ul id="tabs-swipe-demo" class="tabs">
            @foreach ($acessibilidade->groupBy('category_id') as $categoryId => $items)
                <li class="tab col s3">
                    @if ($items->first()->categories)
                        <a href="#category-{{ $categoryId }}">{{ $items->first()->categories->name }}</a>
                    @else
                        <a href="#category-{{ $categoryId }}">Categoria não encontrada!</a>
                    @endif
                </li>
            @endforeach
        </ul>
        <!-- Conteúdo das categorias -->
        @foreach ($acessibilidade->groupBy('category_id') as $categoryId => $items)
            <div id="category-{{ $categoryId }}" class="col s12">
                <h5 class="category-title">
                    {{ $items->first()->categories ? $items->first()->categories->name : 'Categoria Desconhecida' }}
                </h5>
                <div class="row">
                    @foreach ($items as $acessibility)
                        <div class="col s12 m6 l3">
                            <div class="card">
                                <div class="card-content">
                                    <a href="{{ $acessibility->url }}" class="nav-link-card">

                                        <i class="material-icons">{{ $acessibility->icon }}</i>

                                        <p class="card-item">{{ $acessibility->description }}</p>
                                    </a>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        @endforeach
    </div>
</div>
<script src="{{ asset('js/acessibility.js') }}"></script>
<!-- fim links uteis -->

{{-- corousel --}}
<script>
document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.carousel');
    var instances = M.Carousel.init(elems, {
        duration: 200,
        fullWidth: true,
        indicators: true
    });
    setInterval(() => {
        instances[0].next(); // Avança para o próximo slide
    }, 5000); //05 segundos
}); 

</script>