@extends('layouts.app')
@include('layouts.footer')

@section('content')
<section id="hero" class="gallery d-flex align-items-center">
    <div class="container position-relative" data-aos="fade-up" data-aos-delay="500">
    <h1>{{ $items->name}}</h1>
    <h2>Grupos particulares e Eventos</h2>
    </div>
</section>

<div class="container">
    <div class="galleryTree">
        <ul id="myUL">
            
            @foreach($items->Events()->get() as $event)
                <li><span class="caret"><a href="{{ '../galeria/'.$event->link}}">{{ $event->name}}</a></span></li>
            @endforeach

            @foreach ($items->Files()->get() as $file)
                <li><span class="caret">{{ $file->name }}</span>
                    <ul class="nested">
                    
                    @forelse($file->Events()->get() as $i)
                        <li><a href="{{ '../galeria/'.$i->link }}">{{ $i->name }}</a></li>
                    @empty 
                    @endforelse

                    
                    @forelse ($file->Files()->get() as $item)
                        <li><span class="caret">{{ $item->name }}</span>
                            <ul class="nested">
                            @forelse($item->Events()->get() as $group)
                                <li><a href="{{ '../galeria/'.$group->link }}">{{ $group->name }}</a></li>
                            @empty
                            @endforelse
                            </ul>
                        </li>
                    @empty  
                    @endforelse
                    </ul> 
                </li>   
            @endforeach
        </ul>
    </div>
    <div align="center">
        <a href="{{ url()->previous() }}"><button class="button-news">Voltar</button></a>
    </div>
<div>

<script>
    var toggler = document.getElementsByClassName("caret");
    var i;

    for (i = 0; i < toggler.length; i++) {
        toggler[i].addEventListener("click", function() {
            this.parentElement.querySelector(".nested").classList.toggle("active");
            this.classList.toggle("caret-down");
        });
    }
</script>

@endsection