@extends('gallery.layouts.app')

@section('content')

    <section id="primary" class="content-full-width">
        <div class="fullwidth-section">


            <div class="dt-sc-one-column column first">
                <div class="recent-gallery-container">
                    <div class="bx-wrapper" style="max-width: 100%;">
                        <div class="bx-viewport"
                             style="width: 100%; overflow: hidden; position: relative; height: 240px;">
                            <ul class="recent-gallery" style="width: 860%; position: relative; left: -1200px;">
                                <li style="float: left; list-style: none; position: relative; width: 1200px;"
                                    class="bx-clone"><img src="{{asset('images/service-carousel/img-4.jpg')}}"
                                                          alt="image"></li>
                                <li style="float: left; list-style: none; position: relative; width: 1200px;"><img
                                        src="{{asset('images/service-carousel/img-1.jpg')}}" alt="image"></li>
                                <li style="float: left; list-style: none; position: relative; width: 1200px;"><img
                                        src="{{asset('images/service-carousel/img-2.jpg')}}" alt="image"></li>
                                <li style="float: left; list-style: none; position: relative; width: 1200px;"><img
                                        src="{{asset('images/service-carousel/img-3.jpg')}}" alt="image"></li>
                                <li style="float: left; list-style: none; position: relative; width: 1200px;"><img
                                        src="{{asset('images/service-carousel/img-4.jpg')}}" alt="image"></li>
                                <li style="float: left; list-style: none; position: relative; width: 1200px;"
                                    class="bx-clone"><img src="{{asset('images/service-carousel/img-1.jpg')}}"
                                                          alt="image"></li>
                            </ul>
                        </div>

                        {{--<div class="bx-controls bx-has-controls-direction">
                            <div class="bx-controls-direction"><a class="bx-prev" href="">Prev</a><a class="bx-next"
                                                                                                     href="">Next</a></div>
                        </div>--}}
                    </div>
                    <div class="search_photo">
                        <form method="post" class="mailchimp-form" name="frmnewsletter" action=""
                              novalidate="novalidate">
                            <p class="input-text">
                                <input class="input-field" type="email" name="mc_email" value="" required=""
                                       style="border: 0.2px solid #1c1c1c;background-color: rgba(0,0,0,0.51)">
                                <label class="input-label">
                                    <i class="fa fa-search icon"></i>
                                    <span class="input-label-content">Search Photos...</span>
                                </label>
                                <button type="submit" style="font-size: 17px" name="submit" class="submit"
                                        value="Subscribe"><i class="fa fa-search"></i></button>
                            </p>
                        </form>
                    </div>
                    <div id="bx-pager">

                    </div>
                </div>
            </div>


            <div class="portfolio-fullwidth">
                <div style="margin-bottom: 1px;" class="dt-sc-sorting-container">
                    <a data-filter="*" href="#" title="09"
                       class="dt-sc-tooltip-top active-sort type1 dt-sc-button">All</a>
                    @foreach(\App\Category::all() as $category)
                        <a data-filter=".{{$category->name}}" href="#"
                           title="{{\App\Gallery::where('category_id',$category->id)->where('status','Approved')->count()}}"
                           class="dt-sc-tooltip-top type1 dt-sc-button">{{$category->name}}</a>
                    @endforeach
                </div>

                <div class="portfolio-grid" style="padding-top: 10px">
                    <div class="dt-sc-portfolio-container isotope">
                        @foreach(\App\Gallery::where('status','Approved')->get() as $gallery)
                            <div class="portfolio {{$gallery->category->name}} dt-sc-one-fourth">
                                <figure>
                                    <img
                                        src="{{Storage::disk('public')->url(Storage::disk('public')->files($gallery->slug)[0])}}"
                                        alt="" title="">
                                    <figcaption>
                                        <div class="portfolio-detail">
                                            <div class="views">
                                                <a class="fa fa-camera-retro" data-gal="prettyPhoto[gallery]"
                                                   href="{{Storage::disk('public')->url(Storage::disk('public')->files($gallery->slug)[0])}}"></a>
                                                <span>{{sizeof(Storage::disk('public')->files($gallery->slug))}}</span>
                                            </div>
                                            <div class="portfolio-title">
                                                <h5>
                                                    <a href="{{route('gallery.single',['slug'=>$gallery->slug])}}">{{$gallery->title}}</a>
                                                </h5>
                                                <p>{{$gallery->photographer->name}}</p>
                                            </div>
                                        </div>
                                    </figcaption>
                                </figure>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
            <div class="aligncenter">
                <a href="#" class="loadmore dt-sc-button medium type3 with-icon"><i class="fa fa-picture-o"></i>
                    <span> load more </span> </a>
            </div>
            <div class="dt-sc-hr-invisible-small"></div>
        </div>
    </section>



@endsection
@section('style')
    <style>
        .search_photo {
            display: inline;
            float: left;
            margin: 0;
            padding: 3px 95px;
            text-align: center;
            width: 100%;
            position: absolute;
            bottom: 35%;
        }
    </style>
@endsection