@extends('layouts/app')

@section('title')
    Eventos
@endsection

@section('content')
    <section id="main-banner-page" class="position-relative page-header blog2-header parallax section-nav-smooth" style="background-image: url({{asset('images/bg-blog2-header.jpg')}}); background-size: cover; background-repeat: no-repeat; background-attachment: fixed; background-position: center -100.035px; margin-top: 83.7px;">
        <div class="overlay overlay-dark opacity-7 z-index-1"></div>
        <div class="container">
            <div class="row">
                <div class="col-lg-6 offset-lg-3">
                    <div class="page-titles whitecolor text-center padding_top padding_bottom">
                        <h2 class="font-xlight">Build Your</h2>
                        <h2 class="font-bold">Next Blogging Page</h2>
                        <h2 class="font-xlight">In Market</h2>
                        <h3 class="font-light pt-2">The Best Multipurpose Parallax Template</h3>
                    </div>
                </div>
            </div>
            <div class="gradient-bg title-wrap">
                <div class="row">
                    <div class="col-lg-12 col-md-12 whitecolor">
                        <h3 class="float-left">Eventos</h3>
                        <ul class="breadcrumb top10 bottom10 float-right">
                            <li class="breadcrumb-item hover-light"><a href="index.html">Início</a></li>
                            <li class="breadcrumb-item hover-light">Eventos</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="padding">
        <div class="container">
            @if (count($events) > 0)
                <div class="row">
                    <div id="blog" class="col-lg-8">
                        @foreach ($events as $event)
                            <article class="blog-item heading_space wow fadeIn text-center text-md-left" data-wow-delay="300ms" style="visibility: visible; animation-delay: 300ms; animation-name: fadeIn;">
                                <div class="image"><img src="images/blogfull1.jpg" alt="blog" class="border_radius"></div>
                                <h3 class="darkcolor font-light bottom10 top30"> <a href="/eventos/{{$event->id}}">{{$event->title}}</a></h3>
                                <ul class="commment">
                                    <li><a href="#."><i class="fas fa-calendar"></i> {{$event->event_time}}</a></li>
                                    <li><a href="#."><i class="fas fa-comments"></i> 19</a></li>
                                    <li><a href="/utilizadores/1"><i class="fas fa-user"></i> Utilizador 1</a></li>
                                </ul>
                                <div class="top15">
                                    {!!$event->body!!}
                                </div>
                                <a class=" button btn-primary top15" href="/eventos/{{$event->id}}">Ler Mais</a>
                            </article>
                        @endforeach
                        <div class="center">{{$events->links()}}</div>
                    </div>
                    <div class="col-lg-4">
                        <aside class="sidebar padding-bottom">
                            <div class="widget heading_space wow fadeIn text-center text-md-left" data-wow-delay="300ms" style="visibility: visible; animation-delay: 300ms; animation-name: fadeIn;">
                                <h4 class="text-capitalize darkcolor bottom20">Pesquisar eventos</h4>
                                <form class="widget_search">
                                    <div class="input-group">
                                        <label for="search" class="d-none"></label>
                                        <input type="search" class="form-control" placeholder="Pesquisa..." id="search" required="">
                                        <button type="submit" class="input-group-addon"><i class="fa fa-search"></i> </button>
                                    </div>
                                </form>
                            </div>
                            <div class="widget heading_space wow fadeIn" data-wow-delay="350ms" style="visibility: visible; animation-delay: 350ms; animation-name: fadeIn;">
                                <h4 class="text-capitalize darkcolor bottom20 text-center text-md-left">Próximos eventos</h4>
                                @foreach (App\Event::latest() as $event)
                                    <div class="single_post d-table bottom15">
                                        <a href="#." class="post"><img src="images/blog-recent-1.jpg" alt="post image"></a>
                                        <div class="text">
                                            <a href="/eventos/{{$event->id}}">{{$event->title}}</a>
                                            <span class="date">{{$event->event_time}}</span>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                            <div class="widget heading_space wow fadeIn text-center text-md-left" data-wow-delay="450ms" style="visibility: visible; animation-delay: 450ms; animation-name: fadeIn;">
                                <h4 class="text-capitalize darkcolor bottom20">Categorias</h4>
                                <ul class="webcats">
                                    <li><a href="#.">Festivais <span>23</span></a></li>
                                    <li><a href="#.">Apresentações <span>09</span></a></li>
                                    <li><a href="#.">Lançamentos <span>11</span></a></li>
                                    <li><a href="#.">Formações <span>13</span></a></li>
                                </ul>
                            </div>
                            <div class="widget  wow fadeIn">
                                <a class="button btn-primary" href="/eventos/novo">Novo Evento</a>
                            </div>
                        </aside>
                    </div>
                </div>
            @else
                <p>No events found :(</p>
                <a class="button btn-primary" href="/eventos/novo">Novo Evento</a>
            @endif
        </div>
    </section>
@endsection