@extends(config('mio.theme').'.app')
@section('content')

        <div class="holder breadcrumbs-wrap mt-0">
            <div class="container">
                <ol class="breadcrumbs" itemscope="" itemtype="http://schema.org/BreadcrumbList">
                    <li class="breadcrumb-item" itemprop="itemListElement" itemscope=""
                        itemtype="http://schema.org/ListItem">
                        <a href="/">{{__('general.home')}}</a>

                    </li>

                    @if(isset($data['meta_info']->parents) && $data['meta_info']->parents && count($data['meta_info']->parents) > 0)
                        @foreach($data['meta_info']->parents as $pc)
                            @if(isset($pc->parents))
                                @foreach($pc->parents as $pcc)
                                    @if(isset($pcc->parents))
                                        @foreach($pcc->parents as $pccc)
                                            <li class="breadcrumb-item" itemprop="itemListElement" itemscope=""
                                                itemtype="http://schema.org/ListItem">
                                                <a href="{{$pccc->uri->url}}" itemprop="item"><span
                                                        itemprop="name">{{$pccc->name}}</span></a>
                                            </li>
                                        @endforeach
                                    @endif
                                    <li class="breadcrumb-item" itemprop="itemListElement" itemscope=""
                                        itemtype="http://schema.org/ListItem">
                                        <a href="{{$pcc->uri->url}}" itemprop="item"><span
                                                itemprop="name">{{$pcc->name}}</span></a>
                                    </li>
                                @endforeach
                            @endif
                            <li class="breadcrumb-item" itemprop="itemListElement" itemscope=""
                                itemtype="http://schema.org/ListItem">
                                <a href="{{$pc->uri->url}}" itemprop="item"><span
                                        itemprop="name">{{$pc->name}}</span></a>
                            </li>
                        @endforeach
                    @endif

                    <li class="breadcrumb-item active" aria-current="page">{{@$data['meta_info']['name']}}</li>
                </ol>
            </div>
        </div>
        <div class="holder">
            <div class="container">
                <!-- Two columns -->
                <!-- Page Title -->
                <div class="page-title text-center">
                    <h1>{{@$data['meta_info']['name']}}</h1>
                </div>
                <!-- /Page Title -->
                <!-- Filter Row -->
                <div class="filter-row">
                    <div class="row">
                        <div class="items-count">{{$data['products']->total()}} {{__('general.product')}}</div>
                        <div class="select-wrap d-none d-md-flex">
                            <div class="select-wrapper select-wrapper-xxs">
                                <select class="form-control input-sm" onchange="window.location.replace(curi+parameters+'sort='+$(this).children('option:selected').val())">
                                    <option value="">{{__('general.default_sort')}}</option>
                                    <option value="price_desc"
                                            @if(isset($_GET['sort']) && $_GET['sort'] == 'price_desc') selected @endif>{{__('general.sort_by_price_up')}}</option>
                                    <option value="price_asc"
                                            @if(isset($_GET['sort']) && $_GET['sort'] == 'price_asc') selected @endif>{{__('general.sort_by_price_down')}}</option>
                                    <option value="name_desc"
                                            @if(isset($_GET['sort']) && $_GET['sort'] == 'name_desc') selected @endif>{{__('general.sort_by_name_up')}}</option>
                                    <option value="name_asc"
                                            @if(isset($_GET['sort']) && $_GET['sort'] == 'name_asc') selected @endif>{{__('general.sort_by_name_down')}}</option>
                                </select>
                            </div>
                        </div>
                        <div class="viewmode-wrap">
                            <div class="view-mode">
                                <span class="js-horview d-none d-lg-inline-flex"><i class="icon-grid"></i></span>
                                <span class="js-gridview"><i class="icon-grid"></i></span>
                                <span class="js-listview"><i class="icon-list"></i></span>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /Filter Row -->
                <div class="row">
                    <!-- Left column -->
                    <div class="col-lg-4 aside aside--left filter-col filter-mobile-col filter-col--sticky js-filter-col filter-col--opened-desktop" data-grid-tab-content>
                        <div class="filter-col-content filter-mobile-content">
                            @if(!empty($data['filters']['categories']))
                            <div class="sidebar-block filter-group-block open">
                                <div class="sidebar-block_title">
                                    <span>{{__('general.categories')}}</span>
                                    <span class="toggle-arrow"><span></span><span></span></span>
                                </div>
                                <div class="sidebar-block_content">
                                    <ul class="category-list">
                                        @foreach($data['filters']['categories'] as $category)
                                        <li @if($category->id == @$data['meta_info']->id || $category->id == @$data['meta_info']->top_id) class="active" @endif><a href="{{asset($category->uri->url)}}" title="{{$category->name}}"  @if($category->id == @$data['meta_info']->id || $category->id == @$data['meta_info']->top_id) class="open" @endif>{{$category->name}}&nbsp;</a>
                                            @if(!empty($category->subs) && count($category->subs))
                                            <div class="toggle-category js-toggle-category"><span><i class="icon-angle-down"></i></span></div>
                                            <ul class="category-list category-list" @if($category->id != @$data['meta_info']->id && $category->id != @$data['meta_info']->top_id)  style="display: none" @endif>
                                                @foreach($category->subs as $sub)
                                                <li @if($sub->id == @$data['meta_info']->id) class="active" @endif><a @if(strstr($_SERVER['REQUEST_URI'],$sub->uri->url)) href="{{asset($category->uri->url)}}" @else href="{{!empty($sub->uri->url) ? asset($sub->uri->url) : 'javascript:;'}}" @endif title="{{$sub->name}}">{{$sub->name}}</a>
                                                    @if(!empty($sub->subs) && count($sub->subs))
                                                        <div class="toggle-category js-toggle-category"><span><i class="icon-angle-down"></i></span></div>
                                                        <ul class="category-list category-list" @if($sub->id != @$data['meta_info']->id) style="display: none" @endif>
                                                            @foreach($sub->subs as $sub2)
                                                                <li @if($sub2->id == @$data['meta_info']->id) class="active" @endif><a @if(strstr($_SERVER['REQUEST_URI'],$sub2->uri->url)) href="{{asset($sub2->uri->url)}}" @else href="{{!empty($sub2->uri->url) ? asset($sub2->uri->url) : 'javascript:;'}}" @endif title="{{$sub2->name}}">{{$sub2->name}}</a></li>
                                                            @endforeach
                                                        </ul>
                                                    @endif
                                                </li>
                                                @endforeach
                                            </ul>
                                                @endif
                                        </li>
                                        @endforeach

                                    </ul>
                                </div>
                            </div>
                            @endif
                            <form id="filters-form">
                                @if(!empty($data['filters']['brands']))

                                    <div class="sidebar-block filter-group-block collapsed open">
                                        <div class="sidebar-block_title">
                                            <span>{{__('general.brand')}}</span>
                                            <span class="toggle-arrow"><span></span><span></span></span>
                                        </div>
                                        <div class="sidebar-block_content" @if(!empty($data['inputs']['filter']['brand'])) style="display: block" @endif>
                                            <ul class="category-list two-column size-list">
                                                @foreach($data['filters']['brands'] as $brand)

                                                <li  @if(!empty($data['inputs']['filter']['brand']) && in_array($brand['id'],$data['inputs']['filter']['brand'])) class="active" @endif ><a @if(strstr($_SERVER['REQUEST_URI'],$brand['url'])) href="{{route('seo-url',[@$data['meta_info']->uri->url])}}"  @else href="{{route('seo-url',[$brand['url'].'/'.@$data['meta_info']->uri->url])}}" @endif data-value="{{$brand['id']}}">{{$brand['name']}}</a></li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    </div>

                                @endif
                                @foreach($data['filters']['filter_value_id'] as $filter_values)

                                    <div class="sidebar-block filter-group-block collapsed @if(!empty($data['inputs']['filter']['filter_value_id'])) open @endif">
                                        <div class="sidebar-block_title">
                                            <span>{{$filter_values['filter_name']}}</span>
                                            <span class="toggle-arrow"><span></span><span></span></span>
                                        </div>
                                        <div class="sidebar-block_content" @if(!empty($data['inputs']['filter']['filter_value_id'])) style="display: block" @endif>
                                            <ul class="category-list two-column size-list">

                                                @foreach($filter_values['values'] as $values)
                                                    <input data-value="{{$values['id']}}" id="filter-{{$values['id']}}" class="input-check__input"
                                                           name="{{$values['input_name']}}"
                                                           value="{{!empty($data['inputs']['filter']['filter_value_id'][$values['id']]) ? $data['inputs']['filter']['filter_value_id'][$values['id']] : ''}}" type="checkbox" {{!empty($data['inputs']['filter']['filter_value_id'][$values['id']]) ? 'checked' : ''}}>
                                                <li  @if(!empty($data['inputs']['filter']['filter_value_id'][$values['id']]) && $data['inputs']['filter']['filter_value_id'][$values['id']] = $values['id']) class="active" @endif ><a href="javascript:;" data-value="{{$values['id']}}" onclick="selectFilterValue('{{$values['id']}}',$(this).data('value'))">{{$values['name']}}</a></li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    </div>

                                @endforeach


                            </form>

                        </div>
                    </div>
                    <!-- filter toggle -->
                    <div class="filter-toggle js-filter-toggle">
                        <div class="loader-horizontal js-loader-horizontal">
                            <div class="progress">
                                <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 100%"></div>
                            </div>
                        </div>
                        <span class="filter-toggle-icons js-filter-btn"><i class="icon-filter"></i><i class="icon-filter-close"></i></span>
                        <span class="filter-toggle-text"><a href="#" class="filter-btn-open js-filter-btn">Filtreler</a><a href="#" class="filter-btn-close js-filter-btn">Kapat</a><a href="#" class="filter-btn-apply js-filter-btn">Kapat</a></span>
                    </div>
                    <!-- /Left column -->
                    <!-- Center column -->
                    <div class="col-lg aside">
                        <div class="col-18">
                            {!! @$data['meta_info']->description !!}
                        </div>
                        <div class="prd-grid-wrap">
                            <!-- Products Grid -->
                            <div class="prd-grid product-listing data-to-show-5 data-to-show-md-4 data-to-show-sm-3 js-category-grid" data-grid-tab-content>
                                @foreach($data['products'] as $product)
                                    @php
                                        $checkDiscount = checkDiscount($product);
                                        if(!$checkDiscount){
                                            $checkDiscount = 0;
                                        }
                                    @endphp
                                <div class="prd prd--style2 prd-labels--max prd-labels-shadow @if(\Illuminate\Support\Facades\Auth::check() && \Illuminate\Support\Facades\Auth::user()->favorites->where('product_id',$product->id)->first()) prd--in-wishlist @endif  @if($product->stock <= 0) prd-outstock @endif">
                                    <div class="prd-inside">
                                        <div class="prd-img-area">
                                            <a href="{{asset(@$product->uri->url)}}" class="prd-img image-hover-scale image-container" style="padding-bottom: 128.48%">
                                                <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="{{isset($product->images[0]->image_dest) ? miomage($product->images[0]->image_dest) : '/resim_yok.png'}}" alt="{{$product->name}}" class="js-prd-img lazyload fade-up">
                                                <div class="foxic-loader"></div>
                                                <div class="prd-big-squared-labels">
                                                    @if($checkDiscount)
                                                        <div class="label-sale"><span>{{$checkDiscount}}% </span>
                                                        </div>
                                                    @endif
                                                </div>
                                                @if(!empty($product->gift))
                                                    <div class="label-sale" style="position: absolute;display: inline-block;right: 15px;top: 0;text-align: center">
                                                        <img src="{{@$product->gift->product->images[0]->image_dest}}" class="prd-img--noequal" style="width: 100px;height: auto;max-width: 70px;position: absolute;display: inline-block;right: 0;top: 0;left: -52px;">
                                                        <span style="position: absolute;display: inline-block;right: 0;top: 24px;font-size: 10px;color:#17c6aa!important;">Hediyeli</span>
                                                    </div>
                                                @endif
                                            </a>
                                            <div class="prd-circle-labels">
                                                <a href="#" class="circle-label-compare circle-label-wishlist--add js-add-wishlist mt-0" data-id="{{$product->id}}" title="{{__('general.add-wishlist')}}"><i class="icon-heart-stroke"></i></a><a data-id="{{$product->id}}" href="#" class="circle-label-compare circle-label-wishlist--off js-remove-wishlist mt-0" title="{{__('general.remove-wishlist')}}"><i class="icon-heart-hover"></i></a>
                                                <a href="#" class="circle-label-qview js-prd-quickview prd-hide-mobile" data-src="{{route('product-quickview',[@$product->uri->url])}}"><i class="icon-eye"></i><span>{{__('general.quickview')}}</span></a>
                                            </div>
                                        </div>
                                        <div class="prd-info">
                                            <div class="prd-info-wrap">
                                                <div class="prd-info-top">
                                                    @for($i = 0;$i<round($product->rate_avg);$i++)
                                                        <i class="icon-star-fill fill"></i>
                                                    @endfor
                                                    @for($i;$i<5;$i++)
                                                        <i class="icon-star"></i>
                                                    @endfor
                                                </div>
                                                <div class="prd-rating justify-content-center">     @for($i = 0;$i<round($product->rate_avg);$i++)
                                                        <i class="icon-star-fill fill"></i>
                                                    @endfor
                                                    @for($i;$i<5;$i++)
                                                        <i class="icon-star"></i>
                                                    @endfor</div>
                                                <div class="prd-tag"><a href="#">{{@$product->brand->name}}</a></div>
                                                <p class="prd-title"><a href="{{asset($product->uri->url)}}">{{$product->name}}</a></p>

                                                <div class="prd-description">
                                                    {{$product->meta_description}}
                                                </div>

                                            </div>
                                            <div class="prd-hovers">
                                                <div class="prd-circle-labels">
                                                    <div><a href="#" class="circle-label-compare circle-label-wishlist--add js-add-wishlist mt-0" title="{{__('general.add-wishlist')}}"><i class="icon-heart-stroke"></i></a><a href="#" class="circle-label-compare circle-label-wishlist--off js-remove-wishlist mt-0" title="{{__('general.remove-wishlist')}}"><i class="icon-heart-hover"></i></a></div>
                                                    <div class="prd-hide-mobile"><a href="#" class="circle-label-qview js-prd-quickview" data-src="{{route('product-quickview',[@$product->uri->url])}}"><i class="icon-eye"></i><span>{{__('general.quickview')}}</span></a></div>
                                                </div>
                                                <div class="prd-price">
                                                    @if($checkDiscount)
                                                        <div class="price-old">{{pricemio($product)['price']}}</div>
                                                        <div class="price-new">{{pricemio($product,1)['discountedPrice']}}</div>
                                                    @else
                                                        <div class="price-new">{{pricemio($product)['price']}}</div>
                                                    @endif
                                                </div>
                                                <div class="prd-action">
                                                    <div class="prd-action-left" >
                                                        <button id="product_{{$product->id}}" onclick="addCart('{{$product->id}}',1)" {{$product->stock <= 0 ? 'disabled' : ''}} class="btn js-prd-addtocart" data-product='{"name": "{{$product->name}}", "path":"{{asset(isset($product->images[0]->image_dest) ? $product->images[0]->image_dest : '')}}", "url":"{{asset($product->uri->url)}}", "aspect_ratio":0}'>
                                                            {{$product->stock > 0 ? __('general.add-to-cart') : __('general.out-stock')}}</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                            <div class="loader-horizontal-sm js-loader-horizontal-sm d-none" data-loader-horizontal style="opacity: 0;"><span></span></div>
                            @if(config('mio.infinity_scroll'))
                              @if($data['products']->total() > $data['products']->perPage())
                                <div class="circle-loader-wrap">
                                    <div class="circle-loader">
                                        <a href="{{route('get-products-json',$data['inputs'])}}" data-total="{{$data['products']->total()}}" data-loaded="{{$data['products']->count()}}" data-load="{{$data['products']->perPage()}}" class="lazyload js-circle-loader">
                                            <svg id="svg_d" version="1.1" xmlns="http://www.w3.org/2000/svg">
                                                <circle cx="50%" cy="50%" r="63" fill="transparent"></circle>
                                                <circle class="js-circle-bar" cx="50%" cy="50%" r="63" fill="transparent"></circle>
                                            </svg>
                                            <svg id="svg_m" version="1.1" xmlns="http://www.w3.org/2000/svg">
                                                <circle cx="50%" cy="50%" r="50" fill="transparent"></circle>
                                                <circle class="js-circle-bar" cx="50%" cy="50%" r="50" fill="transparent"></circle>
                                            </svg>
                                            <div class="circle-loader-text">{{__('general.loadmore')}}</div>
                                            <div class="circle-loader-text-alt"><span class="js-circle-loader-start"></span>&nbsp;/&nbsp;<span class="js-circle-loader-end"></span></div>
                                        </a>
                                    </div>
                                </div>
                                @endif
                                @else
                                {!! $data['products']->links() !!}
                            @endif
                            <div class="row" style="margin-top: 30px">
                                <div class="col-18">
                                    {!! @$data['meta_info']->description_top !!}
                                </div>
                            </div>
                            <!-- /Products Grid -->
                        </div>
                    </div>
                    <!-- /Center column -->
                </div>
                <!-- /Two columns -->
            </div>
        </div>


@endsection
@section('structured')
    <script>
        gtag('event', 'view_item_list', {
            "items": [
                    @if($data['products'])
                    @foreach($data['products'] as $lp => $p)
                {
                    "id": "{{$p->id}}",
                    "name": "{{$p->name}}",
                    "list_name": "{{$ptype}}",
                    "brand": "{{isset($p->brands->brand_name) ? $p->brands->brand_name : ''}}",
                    @if($ptype == 'category')
                    "category": "{{@$data['meta_info']['name']}}",
                    @endif
                    "list_position": {{$lp+1}},
                    @if(checkDiscount($p))
                    "price": {{pricemio($p,checkDiscount($p),false)['discountedPrice']}}
                        @else
                    "price"
                        :{{pricemio($p,0,false)['price']}}
                        @endif
                } @if($lp+1 < count($data['products'])) , @endif
                @endforeach
                @endif
            ]
        })
        ;
    </script>
    <script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "ItemList",
    "url": "{{'https://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']}}",
    "numberOfItems": "{{$data['products']->total()}}",
    "itemListElement": [
    @foreach($data['products'] as $k => $product)
            {
            "@type": "ListItem",
            "position": "{{$k+1}}",
            "item": {
                "@type": "Product",
                "image": "{{!empty($product->images[0]->image_dest) ? $product->images[0]->image_dest : '/resim_yok.png'}}",
                "url": "{{asset(@$product->uri->url)}}",
                "name": "{{$product->name}}",
                "sku": "{{$product->stock_code}}",
                "gtin8": "{{!empty($product->ean) ? $product->ean : $product->stock_code.'0001'}}",
                "brand": {
                    "@type": "Brand",
                    "name": "{{isset($p->brands->brand_name) ? $p->brands->brand_name : 'marka'}}"
                },
                "description": "{{isset($p->meta_description) ? $p->meta_description : 'Güzel Ürün'}}",
                "aggregateRating": {
                  "@type": "AggregateRating",
                  "ratingValue": "{{$product->rate_avg > 0 ? $product->rate_avg : 5}}",
                  "reviewCount": "{{count($product->reviews) > 0 ? $product->reviews : 1}}"
                 },
                "offers": {
                    "@type": "Offer",
                    "price": "{{$product->price * (($product->tax_id + 100)/100)}}",
                    "priceValidUntil": "{{date('Y-m-d',strtotime('+1 year'))}}",
                    "itemCondition": "http://schema.org/NewCondition",
                    "priceCurrency": "TRY",
                    "url": "{{asset(@$product->uri->url)}}",
                    "availability": "{{$product->stock > 0 ? 'https://schema.org/InStock' : 'https://schema.org/OutOfStock'}}"
                }
                @if(count($product->reviews) > 0)
                @foreach($product->reviews as $prw)
                    ,
        "review": {
          "@type": "Review",
          "author": "{{$prw->user->name}}",
  "datePublished": "{{$prw->created_at}}",
  "description": "{{$prw->content}}",
  "name": "Yorum!",
 "reviewRating": {
  "@type": "Rating",
  "bestRating": "5",
  "ratingValue": "{{$prw->stars}}",
  "worstRating": "1"
  }
 }
 @endforeach
            @else
                ,
    "review": {
    "@type": "Review",
    "author": "SanatsalDünya",
      "datePublished": "{{$product->created_at}}",
  "description": "{{'Sanatsal Dünya'}}",
  "name": "Yorum!",
 "reviewRating": {
  "@type": "Rating",
  "bestRating": "5",
  "ratingValue": "5",
  "worstRating": "1"
  }
 }
        @endif
            }
        }@if(count($data['products'])-1 != $k),@endif
        @endforeach
        ]
    }
</script>
@endsection
@section('js')
<script>
    function selectFilterValue(filter,value){
        if($('#filter-'+filter).val() == value){
            $('#filter-'+filter).val('');
            $('#filter-'+filter).removeAttr('checked');
        }else{
            $('#filter-'+filter).val(value);
            $('#filter-'+filter).attr('checked','checked');
        }
        $('#filters-form').submit();
    }
    $(window).scroll(function() {
        var top_of_element = $('.js-circle-loader').offset().top + 160;
        var bottom_of_element = $('.js-circle-loader').offset().top + $('.js-circle-loader').outerHeight();
        var bottom_of_screen = $(window).scrollTop() + $(window).innerHeight();
        var top_of_screen = $(window).scrollTop();

        if ((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){
            $('.js-circle-loader').trigger('click');

        }
    });
</script>
@endsection
@section('meta')
    @if(count($data['products']) < 5)
        <meta name="robots" content="noindex, nofollow" />
    @endif
    {!! @$data['meta'] !!}

@endsection