@extends('portal.layouts.app', ['activePage' => 'gallery', 'titlePage' => __('Gallery')])

@section('content')
    <div class="content">
        <div class="container">
            <div class="row">
                <div class="gallery col-lg-12 col-md-12 col-sm-12 col-xs-12 mb-5">
                    <div align="center">
                        <button class="btn btn-default filter-button" data-filter="all">All</button>
                        <button class="btn btn-default filter-button"
                                data-filter="Approved">Approved</button>
                        <button class="btn btn-default filter-button"
                                data-filter="Pending">Pending</button>
                        @foreach(\App\Category::all() as $category)
                            <button class="btn btn-default filter-button"
                                    data-filter="{{$category->name}}">{{$category->name}}</button>
                        @endforeach

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

            </div>
        </div>
        <div class="row">
            @foreach(\App\Gallery::all() as $gallery)
                <div class="gallery_product col-lg-3 col-md-3 col-sm-3 col-xs-6 filter {{$gallery->status}} {{$gallery->category->name}}">
                    <div class="card card-product" data-count="2">
                        <div class="card-header card-header-image" data-header-animation="true">
                            <a href="{{route('gallery.show',['gallery'=>$gallery])}}">
                                <img style="height: 200px" class="img"
                                     src="{{Storage::disk('public')->url(Storage::disk('public')->files($gallery->slug)[0])}}">
                            </a>
                        </div>
                        <div class="card-body">
                            <div class="card-actions text-center">
                                <button type="button" class="btn btn-danger btn-link fix-broken-card">
                                    <i class="material-icons">build</i> Fix Header!
                                </button>
                                <a href="{{route('gallery.show',['gallery'=>$gallery])}}" type="button"
                                   class="btn btn-default btn-link" rel="tooltip"
                                   data-placement="bottom" title="" data-original-title="View">
                                    <i class="material-icons">art_track</i>
                                </a>

                                {{--<button type="button" class="btn btn-success btn-link" rel="tooltip"
                                        data-placement="bottom" title="" data-original-title="Edit">
                                    <i class="material-icons">edit</i>
                                </button>--}}

                                @if(Auth::user()->role->name == 'admin')
                                    @if ($gallery->status !== 'Approved')
                                        <a href="{{route('gallery.approve',['gallery'=>$gallery])}}"
                                           class="btn btn-success btn-link" rel="tooltip"
                                           data-placement="bottom" title="" data-original-title="Approve">
                                            <i class="material-icons">check</i>
                                        </a>
                                    @endif
                                    @if ($gallery->status === 'Approved')
                                        <a href="{{route('gallery.hide',['gallery'=>$gallery])}}"
                                           class="btn btn-danger btn-link" rel="tooltip"
                                           data-placement="bottom" title="" data-original-title="Hide">
                                            <i class="material-icons">close</i>
                                        </a>
                                    @endif
                                @endif
                            </div>
                            <h4 class="card-title">
                                <a href="{{route('gallery.show',['gallery'=>$gallery])}}">{{$gallery->title}}</a>
                            </h4>
                            <h6 class="mb-0">{{$gallery->photographer->name}}</h6>
                        </div>
                        <div class="card-footer">

                            <div class="price">
                                <p class="card-category">
                                    Status: <strong>{{$gallery->status}}</strong>
                                    {{--<a class="btn btn-primary">Approve </a>
                                    <a class="btn btn-danger">Hide </a>--}}
                                </p>
                                <p class="card-category"><i class="material-icons">category</i>
                                    {{$gallery->category->name}}
                                </p>

                            </div>
                            <div class="stats">
                                <p class="card-category"><i class="material-icons">local_offer</i>
                                    @foreach(explode(',', $gallery->tags) as $tag)
                                        <span class="badge badge-pill badge-primary">{{$tag}}</span>
                                    @endforeach
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
@endsection
@section('script')
    <script>
        $(document).ready(function () {

            $(".filter-button").click(function () {
                var value = $(this).attr('data-filter');

                if (value == "all") {
                    //$('.filter').removeClass('hidden');
                    $('.filter').show('1000');
                } else {
                    //            $('.filter[filter-item="'+value+'"]').removeClass('hidden');
                    //            $(".filter").not('.filter[filter-item="'+value+'"]').addClass('hidden');
                    $(".filter").not('.' + value).hide('3000');
                    $('.filter').filter('.' + value).show('3000');

                }
            });

            if ($(".filter-button").removeClass("active")) {
                $(this).removeClass("active");
            }
            $(this).addClass("active");

        });
    </script>
@endsection
@section('style')
    <style>


        .filter-button:hover {
            font-size: 18px;
            border: 1px solid #42B32F;
            border-radius: 5px;
            text-align: center;
            color: #ffffff;
            background-color: #42B32F;

        }

        .filter-button:active {
            background-color: #42B32F;
            color: white;
        }

    </style>
@endsection