@extends('front-end.inc.layout')

@section('css')
<style>
    .photo-gallery {
  color:#313437;
  background-color:#fff;
}

.photo-gallery p {
  color:#7d8285;
}

.photo-gallery h2 {
  font-weight:bold;
  margin-bottom:40px;
  padding-top:40px;
  color:inherit;
}

@media (max-width:767px) {
  .photo-gallery h2 {
    margin-bottom:25px;
    padding-top:25px;
    font-size:24px;
  }
}

.photo-gallery .intro {
  font-size:16px;
  max-width:500px;
  margin:0 auto 40px;
}

.photo-gallery .intro p {
  margin-bottom:0;
}

.photo-gallery .photos {
  padding-bottom:20px;
}

.photo-gallery .item {
  padding-bottom:30px;
}

</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.2/css/lightbox.min.css">
@endsection
@section('content')

<!-- Page Title #4
============================================= -->
<section id="page-title" class="page-title bg-overlay bg-parallax bg-overlay-gradient">
    <div class="bg-section">
        <img src="{{asset('images/background/mybg.jpeg')}}" alt="Background" />
    </div>
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="title title-4 text-center">
                    <div class="title--content">
                        <div class="title--heading">
                            <h1>{{$activity->title}}</h1>
                        </div>
                    </div>
                    <div class="divider--shape-1down divider--shape-gray"></div>
                </div>
                <!-- .title end -->
            </div>
            <!-- .col-md-12 end -->
        </div>
        <!-- .row end -->
    </div>
    <!-- .container end -->
</section>
<!-- #page-title end -->



<!-- Blog Single Right Sidebar
============================================= -->
<section id="blog" class="blog blog-single bg-gray pb-90">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-8 col-md-offset-2">
                <!-- Blog Entry -->
                <div class="blog-entry">
                    <div class="entry--img">
                        <a href="#">
							<img style="width:100%" src="{{asset('storage/'.$activity->banner)}}" alt="entry image"/>
						</a>
                    </div>
                    <div class="entry--content">
                        <div class="entry--meta">
                            <span>{{date('Y-m-d',strtotime($activity->created_at))}}</span>
                        </div>
                        <div class="entry--title">
                            <h4><a href="#">{{$activity->title}}</a></h4>
                        </div>
                        <div class="entry--bio">
                            {!! $activity->description !!}

                            <div id="portfolio-all" class="row">
                                <!-- Portfolio #1 -->
                                @foreach (json_decode($activity->gallery) as $images)
                                <div class="col-xs-6 col-sm-4 col-md-4 portfolio-item filter-clients">
                                    <div class="portfolio--img">
                                        <img src="{{asset('storage/'.$images)}}" alt="Dish Image">
                                        <div class="portfolio--hover">
                                            <div class="portfolio--action">
                                                <div class="pos-vertical-center">
                                                    <div class="portfolio--zoom">
                                                        <a class="img-gallery-item" href="{{asset('storage/'.$images)}}" title="Dish Image"></a>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- .Portfolio-action end -->
                                        </div>
                                        <!-- .Portfolio-hover end -->
                                    </div>
                                    <!-- .Portfolio-img end -->
                                </div>
                                @endforeach
                            </div>
                        </div>
                        <!-- .entry-share end -->
                    </div>
                </div>
                <!-- .blog-entry end -->
            </div>
            <!-- .col-md-8 end -->
        </div>
        <!-- .row end -->
    </div>
    <!-- .container end -->
</section>
<!-- #blog end -->


@endsection

@section('js')
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.2/js/lightbox.min.js"></script>
@endsection