@extends('frontend.layouts.master')
@section('meta')
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name='copyright' content=''>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta name="keywords" content="">
	<meta name="description" content="{{$event->objective}}">
	{{-- <meta property="og:url" content="{{route('event-detail',$event->slug)}}"> --}}
	<meta property="og:type" content="article">
	<meta property="og:title" content="{{$event->title}}">
	<meta property="og:image" content="{{$event->photo}}">
	<meta property="og:description" content="{{$event->description}}">
@endsection
@section('title') {{$event->title}} @endsection
@section('main-content')
@include('frontend.layouts.notification')


<!-- Start Page Title Area -->
<div class="page-title-area">
    <div class="d-table">
        <div class="d-table-cell">
            <div class="container">
                <div class="page-title-content">
                    <h2>{{$event->title}} </h2>
                    <ul>
                        <li><a href="{{route('home')}}">Home</a></li>
                        <li>Event</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End Page Title Area -->

<!-- Start Events Details Area -->
<section class="events-details-area ptb-100">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-md-12">
                <div class="events-details-desc">
                    <div class="causes-details-image">
                        <img src="{{ Storage::url($event->photo) }}" alt="image">
                    </div>

                    <div class="events-details-content">
                        <div class="entry-meta">
                            <ul>
                                <li>
                                    <span>Posted On:</span> 
                                    <a>{{$event->created_at->format('d M , Y. D')}}</a>
                                </li>
                            </ul>
                        </div>

                        <h3>Introduction</h3>

                        {{-- <h3>Event description</h3> --}}

                        <p>{!! ($event->description) !!}</p>

                        <h3>Event objective</h3>

                        <p>{!! ($event->objective) !!}</p>
                    </div>

                    <h3>Event Location</h3>

                    <p class="event-text">{{$event->location}}</p>

                    <h3>Event Map</h3>

                    <iframe src="{{$event->map}}" width="1200" height="450" style="border:0;" allowfullscreen="" 
                    loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                </div>
            </div>
            <div class="col-lg-4 col-md-12">
                <aside class="widget-area" id="secondary">
                    <div class="widget widget_search">
                        <form class="search-form">
                            <label>
                                <span class="screen-reader-text">Search for:</span>
                                <input type="search" class="search-field" placeholder="Search...">
                            </label>
                            
                            <button type="submit">
                                <i class="flaticon-search"></i>
                            </button>
                        </form>
                    </div>

                    <section class="widget widget_huruma_posts_thumb">
                        <h3 class="widget-title">Popular Posts</h3>

                        @if($recent_posts)
                            @foreach($recent_posts as $post)
                                <article class="item">
                                    <a href="{{route('blog.detail',$post->slug)}}" class="thumb">
                                        <img src="{{ Storage::url($post->photo) }}" alt="{{ Storage::url($post->photo) }}">
                                    </a>
                                    <div class="info">
                                        <time datetime="2019-06-30">{{$post->created_at->format('d M , Y. D')}}</time>
                                        <h4 class="title usmall">
                                            <a href="{{route('blog.detail',$post->slug)}}">{{$post->title}}</a>
                                        </h4>
                                    </div>

                                    <div class="clear"></div>
                                </article>
                            @endforeach
                        @endif
                    </section>
                    
                    <section class="widget widget_categories">
                        <h3 class="widget-title">Categories</h3>

                        <ul>
                            @foreach($categories as $cat)
                                <li>
                                    <a href="{{route('event.category',$cat['slug'])}}">{{$cat['title']}} ({{$cat['event_count']}})</a>
                                </li>
                            @endforeach
                    </ul>
                    </section>

                    <section class="widget widget_tag_cloud">
                        <h3 class="widget-title">Tags</h3>

                        <div class="tagcloud">
                                @foreach($dtags as $tag)
                                    <a href="{{route('event.tag',$tag)}}">{{$tag}}</a>
                                @endforeach
                        </div>
                    </section>
                </aside>
            </div>
        </div>
    </div>
</section>
<!-- End Events Details Area -->

@endsection

@push('styles')
<!-- Custom Main StyleSheet CSS -->
<link href="{{ asset('frontend/css/sidebar-widget.css') }}" rel="stylesheet">
@endpush

@push('scripts')
<!--Image Filterable JavaScript-->
<script src="{{ asset('frontend/js/jquery-filterable.js') }}"></script>

<!--Map-->
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
@endpush