@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>Galeria de fotos</h1>
        <h2>Procure a sua foto, selecione o ano</h2>
        <div class="row">
          <div class="col col-md-10">
            <form action="{{ route('showYear') }}" method="post">
              @method('post')
              @csrf
            <select class="form-control" name="years">
              @foreach ($years ?? '' as $year)
                  <option value="{{ $year->id }}">{{ $year->name }}</option>
              @endforeach
            </select>
          </div>
          <div class="col col-md-2">
            <button type="submit" class="form-control">Procurar</button>
          </div>
        </form>  
        </div>
      </div>
  </section>

  <section id="bodyPage" class="align-items-center">
    <div class="container">
      <h2 class="secondTitle">Eventos recentes</h2>
      @forelse ($recently as $group)
          <div>
            <h4><a href="{{ route('grouppage',$group->link) }}">{{ $group->name }}</a></h4>
            <p>{{ $group->created_at }}</p>
              <hr />
          </div>
          <div>
            @for ($i = 0; $i< 5; $i++)
            <img width="200px" src="{{ asset('/images/galeria/'.$group->link.'/'.Str::slug($group->name).$i.'.jpg') }}" class="img-thumbnail" />    
            @endfor
            
          </div>
      @empty  
          <div>
            <p> Sem eventos para apresentar </p>
          </div>
      @endforelse
    </div>
  </section>

  <section id="bodyPage" class="align-items-center">
    <div class="container">
      <h2 class="secondTitle">Videos</h2>
    </div>

    @include('layouts.videos')

  </section>

@endsection