@extends('layouts.front')
@section('page_title')
@parent
@if($cat->metatitle) {{$cat->metatitle}} @else {{$cat->title}} @endif
@endsection
@section('meta')
<!-- ===========================
     SEO Meta
=========================== -->
<meta name="description" content="@if($cat->metadescr) {{$cat->metadescr}} @else {{$cat->title}} @endif">

<!-- ===========================
     Canonical & Pagination
=========================== -->
@php
    $canonicalUrl = url('/shop/category/'.$cat->slug);
    $queryParams = request()->except('page');

    $validParams = collect(request()->all())
        ->filter(function($value, $key) {
            if(in_array($key,['available','off','soonexpire','filter','keyword','minprice','maxprice'])){
                return !empty($value);
            }
            if($key === 'brand' && is_array($value)){
                return count(array_filter($value)) > 0;
            }
            return false;
        })->toArray();

    if(count($validParams)){
        $canonicalUrl .= '?'.http_build_query($validParams);
    }

    $currentPage = $products->currentPage();
@endphp

@if($currentPage == 1)
    <link rel="canonical" href="{{ $canonicalUrl }}" />
    @if($products->lastPage() > 1)
        <link rel="next" href="{{ $canonicalUrl . (count($queryParams) ? '&' : '?') . http_build_query(array_merge($queryParams,['page'=>2])) }}" />
    @endif
@elseif($currentPage == $products->lastPage())
    <link rel="canonical" href="{{ $canonicalUrl }}" />
    <link rel="prev" href="{{ $canonicalUrl . (count($queryParams) ? '&' : '?') . http_build_query(array_merge($queryParams,['page'=>($currentPage-1)])) }}" />
@else
    <link rel="canonical" href="{{ $canonicalUrl }}" />
    <link rel="prev" href="{{ $canonicalUrl . (count($queryParams) ? '&' : '?') . http_build_query(array_merge($queryParams,['page'=>($currentPage-1)])) }}" />
    <link rel="next" href="{{ $canonicalUrl . (count($queryParams) ? '&' : '?') . http_build_query(array_merge($queryParams,['page'=>($currentPage+1)])) }}" />
@endif

<!-- ===========================
     Open Graph / Facebook
=========================== -->
<meta property="og:site_name" content="{{ $defaultset->metatitle }}">
<meta property="og:locale" content="fa_IR" />
<meta property="og:type" content="website">
<meta property="og:url" content="{{ $canonicalUrl }}">
<meta property="og:title" content="@if($cat->metatitle) {{$cat->metatitle}} @else {{$cat->title}} @endif">
<meta property="og:description" content="@if($cat->metadescr) {{$cat->metadescr}} @else {{$cat->title}} @endif">

<!-- ===========================
     Twitter Card
=========================== -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@{{ $defaultset->twitter ?? '' }}" />
<meta name="twitter:title" content="@if($cat->metatitle) {{$cat->metatitle}} @else {{$cat->title}} @endif" />
<meta name="twitter:description" content="@if($cat->metadescr) {{$cat->metadescr}} @else {{$cat->title}} @endif" />

<!-- ===========================
     JSON-LD Structured Data
=========================== -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "CollectionPage",
  "name": "@if($cat->metatitle) {{$cat->metatitle}} @else {{$cat->title}} @endif",
  "description": "@if($cat->metadescr) {{$cat->metadescr}} @else {{$cat->title}} @endif",
  "url": "{{ $canonicalUrl }}",
  "hasPart": [
    @foreach($products as $product)
    {
      "@type": "Product",
      "name": "{{ $product->title }}",
      "url": "{{ url('/shop/'.$product->slug) }}",
      "image": "{{ $product->thumbnails ? asset($product->thumbnails) : asset('/no-image-available.jpg') }}",
      "offers": {
        "@type": "Offer",
        "priceCurrency": "IRR",
        "price": "{{ $product->price * 10 ?? 0 }}",
        "availability": "@if($product->avacheck == 1) https://schema.org/InStock @else https://schema.org/OutOfStock @endif"
      }
    }@if(!$loop->last),@endif
    @endforeach
  ]
}
</script>
@stop
@section('main')
<!-- main -->
<main class="default">

  <section class="breadcrumb-section section-b-space">
      <div class="container">
          <div class="row">
              <div class="col-12">
                  <div class="page-title">
                      <h1>{{$cat->title}}</h1>
                  </div>
              </div>
              <div class="col-12">
                  <nav aria-label="breadcrumb" class="theme-breadcrumb">
                      <ol class="breadcrumb">
                          <li class="breadcrumb-item"><a href="{{url('/')}}">خانه</a></li>
                          <li class="breadcrumb-item"><a href="{{url('/'.env('Shop_Slug'))}}">فروشگاه</a></li>
                          <li class="breadcrumb-item active" aria-current="page">{{$cat->title}}</li>
                      </ol>
                  </nav>
              </div>
          </div>
      </div>
  </section>
  @if(count($childs) > 0 )
  <section class="category-image-breadcumb mb-3">
        <div class="container">
            <div class="row">
                <div class="categorybreadcumb owl-carousel owl-theme">
                    @foreach($childs as $ch)
                    <a href="{{asset('/shop/category/'.$ch->slug)}}">
                        <div class="catbread-wrapper">
                            <img src="{{asset($ch->icon)}}" class="img-fluid mb-2" width="100" onerror="this.src='/no-image-available.jpg';"  loading="lazy">
                            <h5>{{$ch->title}}</h5>                            
                        </div>
                    </a>
                    @endforeach
                </div>
            </div>
        </div>
  </section>
  @endif
  <section>
    <div class="container">
        <div class="row">
          <div class="col-12 width100">
            @include('frontends.errors')
          </div>              
        </div>        
      {!! Form::open(['url'=>'/shop/ajax-shop','id'=>'ajax-shop','method'=>'POST']) !!}
        <div class="row">
            <aside class="sidebar-page hidden-mirx col-12 col-sm-12 col-md-4 col-lg-3 order-1">
              @include('includes.shopsidebar')
            </aside>
            <div class="col-12 col-sm-12 col-md-8 col-lg-9 order-2">
                <div class="default">
                    <div class="default sorting-div shopping-sort-div">
                        <label>مرتب سازی:</label>
                        <select name="filter" class="form-control filterSelect" onchange="changefilter()">
                          <option value="highest-sales" @if(@$filter == 'highest-sales') selected @endif>پرفروش ترین</option>
                          <option value="popular-item" @if(@$filter == 'popular-item') selected @endif>پربازدیدترین</option>
                          <option value="newest" @if(@$filter == 'newest') selected @endif>جدیدترین</option>
                          <option value="lowest-price" @if(@$filter == 'lowest-price') selected @endif>ارزان ترین</option>
                          <option value="highest-price" @if(@$filter == 'highest-price') selected @endif>گران ترین</option>
                           <option value="highest-off" @if(@$filter == 'highest-off') selected @endif> پرتخفیف ترین</option>
                        </select>   
                         <input type="hidden" id="filterValue" name="filter" value="{{@$filter}}">
                    </div>
                    <div class="filter-mobile hidden-mird">
                        <span class="btn btn-primary btn-sm" data-toggle="modal" data-target="#shopFilter"> فیلترها</span>
                        <!--Cart Modal -->
                        <div class="modal right fade" id="shopFilter" tabindex="-1" role="dialog" aria-labelledby="shopFilterLabel">
                            <div class="modal-dialog cart-modal" role="document">
                                <div class="modal-content">
            
                                    <div class="modal-header modal-header-dralipor">
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><i class="icon-close"></i></span></button>
                                        <h4 class="modal-title">فیلترها</h4>
                                    </div>
            
                                    <div class="modal-body shopsidemobile">
                                        @include('includes.shopsidemobile')
                                    </div>
            
                                </div><!-- modal-content -->
                            </div><!-- modal-dialog -->
                        </div><!-- modal -->                        
                    </div>                    
                    <div class="default text-center">
                      <div class="container container-product shoploader">
                        <div class="lds-ellipsis"><div></div><div></div><div></div></div>
                      </div>
                      <div class="container-product no-padding-right" id="loadProducts">
                        @if(count($products) > 0)
                          <div class="row">
                            @foreach($products as $product)
                                                             
                                <div class="col-xl-3 col-lg-4 col-md-6 col-6 no-padding">
                                    <div class="product-box">
                                        <div class="product-box-img @if(!$product->avacheck) out-of-stock @endif" >
                                            <a href="{{url('/shop/'.$product->slug)}}">
                                                <img @if($product->thumbnails) src="{{asset($product->thumbnails)}}" @endif  alt="{{$product->title}}" onerror="this.src='/no-image-available.jpg';"  loading="lazy">
                                                  <div class="overlay"></div>
                                                  <div class="product-rate-hover">
                                                      <div class="rating-div">
                                                        <span class="fa fa-star @if(intval($product->rate) >= 1) checked @endif"></span>
                                                        <span class="fa fa-star @if(intval($product->rate) >= 2) checked @endif"></span>
                                                        <span class="fa fa-star @if(intval($product->rate) >= 3) checked @endif"></span>
                                                        <span class="fa fa-star @if(intval($product->rate) >= 4) checked @endif"></span>
                                                        <span class="fa fa-star @if(intval($product->rate) >= 5) checked @endif"></span>                                                          
                                                      </div>
                                                  </div>                                                
                                            </a>
                                            @if($product->avacheck)
                                              @if($product->salesprice)
                                                <div class="salestag"><span>{{round((1-($product->salesprice / $product->price))*100)}} %  </span></div>
                                              @endif
                                            @else
                                              <div class="out-of-stock-label">ناموجود</div>
                                            @endif
                                            <div class="vertical-product-hover">
                                                <div class="addtowishlist @if(@$sign == 1) active @endif" id="addtowishlist{{$product->id}}" onclick="AddtoWishtListFunction({{$product->id}})" title="افزودن به علاقه مندی ها"><i class="icon-heart"></i></div>
                                                <div class="addtoSalesAlert" id="addtoSalesAlert{{$product->id}}" onclick="addtoSalesAlertFunction({{$product->id}})" title="باخیر شدن از تخفیف"><i class="icon-bell"></i></div>
                                            </div>
                                            @if(@$chekcprice && $defaultset->minfreeshipping)
                                            @if(@$chekcprice>= $defaultset->minfreeshipping)
                                            <div class="freeshipping-productloop">
                                                <span>
                                                    <i class="flaticon-delivery"></i> ارسال رایگان
                                                </span>
                                            </div>
                                            @endif
                                            @endif                                              
                                        </div>
                                        <div class="product-box-content">
                                            <div class="product-box-content-row">
                                                <div class="product-box-title">
                                                    <a href="{{url('/shop/'.$product->slug)}}">
                                                        {{$product->title}}
                                                    </a>
                                                </div>
                                            </div>
                                              <div class="price-box">
                                                @if($product->price)
                                                  @if($product->salesprice)
                                                  <div class="price">
                                                          <del><span>{{number_format($product->price, 0)}}</span></del>
                                                          <ins><span>{{number_format($product->salesprice, 0)}}<span> تومان</span></span></ins>
                                                  </div>
                                                  @else
                                                  <div class="price">
                                                      <span>{{number_format($product->price, 0)}}<span> تومان</span></span>
                                                  </div>
                                                  @endif
                                                @endif
                                              </div>
                                        </div>
                                    </div>
                                </div>
                              @endforeach
                          </div>
                        @else
                          <div class="not-found-product">
                            <img src="{{url('/no-products.png')}}" class="img-fluid" alt="هیچ محصول یافت نشد">
                            <h3>هیچ محصولی یافت نشد</h3>
                          </div>
                        @endif
                      </div>
                    </div>
                    <div class="pager default text-center" id="pagination-shop">
                        {!! $products->links('includes.pagination') !!}
                    </div>
                </div>
            </div>
            {!! Form::close() !!}
        </div>

    </div>
        @if($cat->descr)
        <div class="container category-description-box">
            <div class="row">
                <div class="col-md-12">
                    <div class="cat-content hideContent">
                        {!! $cat->descr !!}
                    </div>
                    
                    <div class="show-more-trigger">نمایش بیشتر</div>
                </div>
            </div>
        </div>
        @endif    
  </section>
</main>
@stop
@section('js')
<script>
function searchBrand() {
    // Declare variables
    var input, filter, ul, li, a, i;
    input = document.getElementById('brandsearch');
    filter = input.value.toUpperCase();
    ul = document.getElementById("shop-brands");
    li = ul.getElementsByClassName("brand-card");

    // Loop through all list items, and hide those who don't match the search query
    for (i = 0; i < li.length; i++) {
        value = li[i].getAttribute("data-search");

        if (value.toUpperCase().indexOf(filter) > -1) {
          li[i].style.display = "";
        } else {
          li[i].style.display = "none";
        }
    }


}
function searchBrandi() {
    // Declare variables
    var input, filter, ul, li, a, i;
    input = document.getElementById('brandsearchi');
    filter = input.value.toUpperCase();
    ul = document.getElementById("shop-brandsi");
    li = ul.getElementsByClassName("brand-cardi");

    // Loop through all list items, and hide those who don't match the search query
    for (i = 0; i < li.length; i++) {
        value = li[i].getAttribute("data-search");

        if (value.toUpperCase().indexOf(filter) > -1) {
          li[i].style.display = "";
        } else {
          li[i].style.display = "none";
        }
    }


}

$("#ajax-shop").submit(function(e){
      var postData = $(this).serializeArray();
      var formURL = $(this).attr("action");

      $('#loadProducts').html('');
      $('#pagination-shop').html('');
      $('.shoploader').show();

      $.ajax({
        url: formURL,
        type: 'POST',
        data: postData,
        success: function(data){
          if(data.totalcount != 0){
            $('.shoploader').delay( 1000 ).fadeOut( 0 );
            $('#totalcount').html(data.totalcount);
            $('#loadProducts').html(data.display);
            window.history.pushState("", "", data.url);
            $('#pagination-shop').delay( 800 ).html(data.paginate);
            getpersiannumber();
          }else{
            window.history.pushState("", "", data.url);
            $('.shoploader').delay( 1000 ).fadeOut( 0 );
            $('#loadProducts').html('<div class="not-found-product"><img src="{{url('/no-products.png')}}" class="img-fluid" alt="هیچ محصول یافت نشد"><h3>هیچ محصولی یافت نشد</h3></div>');
          }

        },
        error: function(result){
          alert('خطایی رخ داده است مجددا تلاش نمائید');
          $('.shoploader').fadeOut( 400 );
        }
      });
  e.preventDefault();
  });
  $('.avacheck').on('change', function(){
    $('#ajax-shop').submit();
  });
  $('.offcheck').on('change', function(){
    $('#ajax-shop').submit();
  });
  $('.brand-select').on('change', function(){
    $('#ajax-shop').submit();
  });
   $('.soonexpire').on('change', function(){
    $('#ajax-shop').submit();
  });
  $('.sortbyshop').on('change', function(){
    $('#ajax-shop').submit();
  });
  function changefilter(filter){
    select = $('.filterSelect option:selected').val();
    $('#filterValue').val(select);
    $('#ajax-shop').submit();
  }

  $('.searchinshop').keypress(function (e) {
  if (e.which == 13) {
    $('#ajax-shop').submit();
    return false;    //<---- Add this line
  }
  });
</script>
@stop