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

@section('content')

   
    @if($photos != null)
      <section id="hero" class="d-flex align-items-center" style="height: 190px; background: url({{ asset('images/galeria/'.$link.'/'.$photos[0]->getBaseName()) }}) no-repeat; background-size: cover;">
        <div class="container position-relative" data-aos="fade-up" data-aos-delay="500">
        <h1>{{ $group->name }}</h1>
        <h2>{{ $group->created_at }}</h2>
        </div>
      </section>
    @else 
      <section id="hero" class="d-flex align-items-center">
        <div class="container position-relative" data-aos="fade-up" data-aos-delay="500">
        <h1>{{ $group->name }}</h1>
        <h2>{{ date('d-m-Y' , strtotime($group->created_at)) }}</h2>
        </div>
      </section>
    @endif

    <div class="row">
      <div class="col-lg-2">
         @if($files != null)
            <div id="resultados" class="results">
                <h1>Resultados</h1>
                <ul id="resultList">
                  @foreach($files as $file)
                  <li class="ico"><a href="{{ asset('/images/galeria/'.$link.'/resultados/'.$file->getfilename())}}">{{ ucfirst($file->getfilename()) }}</a></li>
                  @endforeach
                </ul>
              </div>
          @endif
      </div>
      <div class="col-lg-10">
        <div id="portfolio">
          <div class="container-fluid p-0">
            <div class="row no-gutters">
              @forelse($photos as $key => $photo)
                <div class="col-lg-4 col-sm-6">
                  <a class="portfolio-box" href="#" onclick="openModal();currentSlide({{ $key+1 }})">
                      <img 
                        class="img-fluid" 
                        src="{{ asset('/images/galeria/'.$link.'/'.$photo->getBaseName()) }}" 
                        alt="{{ $group->name.$key }}" 
                        />
                  </a>
                </div>
              @empty
                <div class="col-lg-12 col-sm-12" align="center">
                  <h5 style="margin-top: 2em;">Sem fotos para apresentar</h5>
                </div>
              @endforelse
            </div>
          </div>
          <div align="center">
            <a href="{{ route('returnYear',$years) }}"><button class="button-news">Voltar</button></a>
          </div>
        </div>
    </div>

    
   

    
     
    

      

    </div>

    <!-- MODAL/LIGHTBOX -->
    <div id="boxModal" class="modal">
      <span class="close cursor" onclick="closeModal()">&times;</span>
      <div class="modal-content">
        @foreach($photos as $key => $photo)
          <div class="mySlides">
            <div class="numbertext">{{ $key+1 }} / {{ count($photos)}}</div>
            <img src="{{ asset('/images/galeria/'.$link.'/'.$photo->getBaseName()) }}" style="width:100%">
          </div>
        @endforeach

         <!-- Next/previous controls -->
        <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
        <a class="next" onclick="plusSlides(1)">&#10095;</a>
        
      </div>
    </div>

    <script>
      // Open the Modal
      function openModal() {
        document.getElementById("boxModal").style.display = "block";
      }
      // Close the Modal
      function closeModal() {
        document.getElementById("boxModal").style.display = "none";
      }

      var slideIndex = 1;
      showSlides(slideIndex);

      // Next/previous controls
      function plusSlides(n) {
        showSlides(slideIndex += n);
      }

      // Thumbnail image controls
      function currentSlide(n) {
        showSlides(slideIndex = n);
      }

      function showSlides(n) {
        var i;
        var slides = document.getElementsByClassName("mySlides");
        var dots = document.getElementsByClassName("demo");
        var captionText = document.getElementById("caption");
        if (n > slides.length) {slideIndex = 1}
        if (n < 1) {slideIndex = slides.length}
        for (i = 0; i < slides.length; i++) {
          slides[i].style.display = "none";
        }
        for (i = 0; i < dots.length; i++) {
          dots[i].className = dots[i].className.replace(" active", "");
        }
        slides[slideIndex-1].style.display = "block";
        dots[slideIndex-1].className += " active";
        captionText.innerHTML = dots[slideIndex-1].alt;
      }

    </script>
@endsection