@extends('web.layouts.app')
@section('title') The Best Widex Hearing Center  @endsection
@section('meta_description')@endsection

@section('css')
@endsection

@section('content')

    <!--=============== Portfolio ==================-->
    <section class="py-5 overflow-hidden mb-5">
        <div class="px-4 mb-4">
            <ul class="filtering-list list-unstyled d-flex flex-wrap justify-content-center">
                <li class="filtering-list-item mr-3 mb-3 active  btn btn-warning" data-filter="all">View All</li>

                @foreach(services() as $service)
                    <li class="filtering-list-item mr-3 mb-3 btn btn-warning" data-filter="{{$service->id}}">{{$service->title}}</li>
                @endforeach
            </ul>
        </div>
        <div class="paru-gallery">
            <div class="row no-gutters filtr-container">
                @foreach($portfolios as $portfolio)
                    <div class="col-sm-6 col-md-4 col-lg-3 filtr-item" data-category="all, {{$portfolio->service_id}}" data-sort="value">
                        <div class="portfolio-item paru-triggerable" style="height: 150px">
                            <div class="paru-item">
                                <div class="box-ratio ratio-4x3">
                                    <div class="paru-stage">
                                        <img src="{{$portfolio->image_lg}}" alt="{{$portfolio->caption}}" class="" style="width: 100%">
                                    </div>
                                </div>
                            </div>
                            <div class="overlay-portfolio paru-trigger">
                                <div class="overlay-portfolio-content">
                                    <div class="center text-center text-white w-100 px-4">{{$portfolio->caption}}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
    <!--============= End Portfolio ================-->


@endsection

@section('js')

    <script>
        var options = {
            animationDuration: 0.5,
            filter: 'all',
            callbacks: {
                onFilteringStart: function () {
                },
                onFilteringEnd: function () {
                },
                onShufflingStart: function () {
                },
                onShufflingEnd: function () {
                },
                onSortingStart: function () {
                },
                onSortingEnd: function () {
                }
            },
            controlsSelector: '',
            delay: 0,
            delayMode: 'progressive',
            easing: 'ease-out',
            filterOutCss: {
                opacity: 0,
                transform: 'scale(0.5)'
            },
            filterInCss: {
                opacity: 0,
                transform: 'scale(1)'
            },
            layout: 'sameSize',
            multifilterLogicalOperator: 'or',
            selector: '.filtr-container',
            setupControls: true
        }
        var filterizd = $('.filtr-container').filterizr(options);
        filterizd.filterizr('setOptions', options);


        $('.filtering-list-item').on('click', function () {
            $('.filtering-list-item').not(this).removeClass('active');
            $(this).addClass('active');
        });

    </script>
@endsection