@extends('gallery.layouts.app')

@section('content')


    <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: 500px;">
                    <ul class="recent-gallery" style="width: 860%; position: relative; left: -1200px;">

                        <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>

                    </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">
                <a href="#" data-slide-index="0" class="active"><img
                        src="{{asset('images/service-carousel/img-1.jpg')}}"
                        alt="image"></a>
                <a href="#" data-slide-index="1" class=""><img src="{{asset('images/service-carousel/img-2.jpg')}}"
                                                               alt="image"></a>
                <a href="#" data-slide-index="2" class=""><img src="{{asset('images/service-carousel/img-3.jpg')}}"
                                                               alt="image"></a>
                <a href="#" data-slide-index="3" class=""><img src="{{asset('images/service-carousel/img-4.jpg')}}"
                                                               alt="image"></a>
            </div>
        </div>
    </div>

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

        <div class="fullwidth-section">


            <div class="portfolio-fullwidth">
                <div class="portfolio-grid">
                    <div class="container">
                        <div class="main-title animate" data-animation="pullDown" data-delay="100">
                            <h4 class="aligncenter"> Top Photos </h4>
                            <p></p>
                        </div>
                    </div>
                    <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>
                    <a class="type1 dt-sc-button small" href="{{route('gallery.explore')}}">View More<i
                            class="fa fa-angle-right"></i></a>
                </div>
            </div>
        </div>
        <div class="clear"></div>
        <div class="container">
            <div class="main-title animate" data-animation="pullDown" data-delay="100">
                <h3 class="aligncenter"> Top Photographers
                </h3>
                <p></p>
            </div>
        </div>
        <div class="fullwidth-section">
            @foreach(\App\User::whereHas('role', function (\Illuminate\Database\Eloquent\Builder $query) {
                               $query->where('name', '=', 'photographer');
                           })->get()->take(6) as $index=>$photographer)
                @if(\App\Gallery::where('user_id',$photographer->id)->where('status','Approved')->count() >0)
                    @if($index % 2 == 0)
                        <div class="blog-section">
                            <article class="blog-entry">
                                <div class="entry-thumb">
                                    <ul class="blog-slider">
                                        @foreach($photographer->gallery->where('status','Approved') as $gallery)
                                            <li><img style="height: 400px"
                                                     src="{{Storage::disk('public')->url(Storage::disk('public')->files($gallery->slug)[0])}}"
                                                     alt="" title=""></li>
                                        @endforeach
                                    </ul>
                                </div>
                                <div class="entry-details">
                                    <div class="entry-title">
                                        <h3 style="margin-bottom: 1px">
                                            <img src="{{Storage::disk('public')->url($photographer->avatar)}}"
                                                 class="img img-rounded"
                                                 style="border-radius: 100%; width: 90px"><br><a
                                                href="blog-detail.html">{{$photographer->name}}</a></h3>

                                    </div>
                                    <div class="entry-body" style="margin-bottom: 5px">
                                        <p></p>
                                    </div>
                                    <a class="type1 dt-sc-button small"
                                       href="{{route('gallery.photographer',['user'=>$photographer])}}">View Portfolio<i
                                            class="fa fa-angle-right"></i></a>
                                    <a class="type1 dt-sc-button small" href="{{route('gallery.book')}}">Book For
                                        Event<i
                                            class="fa fa-angle-right"></i></a>
                                </div>
                            </article>
                        </div>
                    @else
                        <div class="blog-section">
                            <article class="blog-entry type2">
                                <div class="entry-details">
                                    <div class="entry-title">
                                        <h3 style="margin-bottom: 1px">
                                            <img src="{{Storage::disk('public')->url($photographer->avatar)}}"
                                                 class="img img-rounded"
                                                 style="border-radius: 100%; width: 90px"><br><a
                                                href="blog-detail.html">{{$photographer->name}}</a></h3>

                                    </div>
                                    <div class="entry-body" style="margin-bottom: 5px">
                                        <p></p>
                                    </div>
                                    <a class="type1 dt-sc-button small"
                                       href="{{route('gallery.photographer',['user'=>$photographer])}}">View Portfolio<i
                                            class="fa fa-angle-right"></i></a>
                                    <a class="type1 dt-sc-button small" href="{{route('gallery.book')}}">Book For
                                        Event<i
                                            class="fa fa-angle-right"></i></a>
                                </div>
                                <div class="entry-thumb">
                                    <ul class="blog-slider">
                                        @foreach($photographer->gallery->where('status','Approved') as $gallery)
                                            <li><img style="height: 400px"
                                                     src="{{Storage::disk('public')->url(Storage::disk('public')->files($gallery->slug)[0])}}"
                                                     alt="" title=""></li>
                                        @endforeach
                                    </ul>
                                </div>
                            </article>
                        </div>
                    @endif
                @endif
            @endforeach


            <div class="dt-sc-hr-invisible-small"></div>
            <a class="type1 dt-sc-button small" style="left: 50%; margin-top: 30px "
               href="{{route('gallery.photographers')}}">All Photographers</a>

        </div>
        <div class="clear"></div>


        <div class="dt-sc-hr-invisible-small"></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