@extends('layouts.app')

@section('title', 'Detalhes de eventos')

@section('content')

    <x-banner title="Eventos" />

    <section>
        <div class="gap">
            <div class="container">
                <div class="event-detail-wrp">
                    <div class="row">
                        <div class="col-md-9 col-sm-12 col-lg-9">
                            <div class="event-detail">
                                <div class="event-detail-img brd-rd5">
                                    <img src="{{ asset('storage/' . $event->image) }}" alt="event-detail-img.jpg" itemprop="image">
                                </div>

                                <div class="event-detail-inf-inr">
                                    <ul class="pst-mta">
                                        <li><i class="far fa-calendar-alt theme-clr"></i>{{ $event->event_date->format('M d, Y') }}</li>
                                    </ul>
                                </div>

                                <div class="event-detail-desc">
                                    {!! $event->description !!}

                                    <div class="pst-shr-tgs">
                                        <div class="scl4 float-left">
                                            <span>Partilhar esta notícia em:</span>
                                            <a href="#" title="Twitter" itemprop="url" target="_blank"><i class="fab fa-twitter"></i></a>
                                            <a href="#" title="Facebook" itemprop="url" target="_blank"><i class="fab fa-facebook-f"></i></a>
                                            <a href="#" title="Linkedin" itemprop="url" target="_blank"><i class="fab fa-linkedin-in"></i></a>
                                            <a href="#" title="Google Plus" itemprop="url" target="_blank"><i class="fab fa-google-plus-g"></i></a>
                                        </div>
                                    </div>
                                </div>

                                <div class="rltd-wrp">
                                    <h4 itemprop="headline">Galeria</h4>
                                    <div class="remove-ext5">
                                        <div class="row">
                                            @foreach($event->gallery as $item)
                                                <div class="col-md-4 col-sm-6 col-lg-4">
                                                    <div class="blg-bx">
                                                        <div class="blg-thmb">
                                                            <a href="{{ asset('storage/' . $item) }}" data-lightbox="new-{{$event->id}}">
                                                                <img src="{{ asset('storage/' . $item) }}" alt="blg-img1-1.jpg" itemprop="image">
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-3 col-sm-6 col-lg-3">
                            <div class="sidebar-wrp remove-ext7">
                                <div class="wdgt-bx">
                                    <h5 itemprop="headline">Pesquisar</h5>
                                    <form action="{{ route('events') }}" method="get" class="srch-frm brd-rd5">
                                        <input type="text" name="search" placeholder="Pesquisar">
                                        <button type="submit" class="theme-clr"><i class="fa fa-search"></i></button>
                                    </form>
                                </div>

                                <div class="wdgt-bx">
                                    <h5 itemprop="headline">Resumo</h5>
                                    <p itemprop="description">{{ $event->excerpt }}</p>
                                </div>

                                <div class="wdgt-bx">
                                    <h5 itemprop="headline">Últimos Eventos</h5>
                                    <div class="ltst-wrp">
                                        @foreach($events as $item)
                                            <div class="ltst-nws-bx">
                                                <a href="{{ route('event.details', $item->id) }}" title="" itemprop="url" class="col-3">
                                                    <img src="{{ asset('storage/' . $item->image) }}" alt="ltst-nws-img2-1.jpg" itemprop="image">
                                                </a>

                                                <div class="ltst-nws-inf">
                                                    <h6 itemprop="headline">
                                                        <a href="{{ route('event.details', $item->id) }}" title="" itemprop="url">{{ $item->title }}</a>
                                                    </h6>

                                                    <span>
                                                        <a href="#" title="" itemprop="url">
                                                            <i class="far fa-calendar-alt theme-clr"></i>
                                                            {{ $item->created_at->format('M d, Y') }}
                                                        </a>
                                                    </span>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>

                                <div class="wdgt-bx">
                                    <h5 itemprop="headline">Siga-nos</h5>
                                    <div class="scl4">
                                        <a class="twitter" href="#" title="Twitter" itemprop="url" target="_blank"><i class="fab fa-twitter"></i></a>
                                        <a class="facebook" href="#" title="Facebook" itemprop="url" target="_blank"><i class="fab fa-facebook-f"></i></a>
                                        <a class="linkedin" href="#" title="Linkedin" itemprop="url" target="_blank"><i class="fab fa-linkedin-in"></i></a>
                                        <a class="google" href="#" title="Google Plus" itemprop="url" target="_blank"><i class="fab fa-google-plus-g"></i></a>
                                    </div>
                                </div>
                            </div><!-- Sidebar Wrap -->
                        </div>
                    </div>
                </div><!-- Event Detail Wrap -->
            </div>
        </div>
    </section>

@endsection