@extends('layouts.app')
@section('js')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js"></script>
<script>
    $(document).ready(function(){
  $('.portfolio-item').isotope(function(){
      itemSelector:'.item'
    });



  $('.portfolio-menu ul li').click(function(){
    $('.portfolio-menu ul li').removeClass('active');
    $(this).addClass('active');


    var selector = $(this).attr('data-filter');
      $('.portfolio-item ').isotope({
        filter: selector
      })
      return false;
  });
});
</script>
@endsection
@section('css')
<style>
    .breadcrumbSer {
        width: auto;
        height: 206px;
        background-image: url({{$cat->cover_img}});
        mask-image: linear-gradient(to right, #000000 -32%, rgba(63, 63, 63, 0.24) 81%, rgba(84, 84, 84, 0) 149%);
        background-size: cover;
    }

    .subcatBG-img {
        background-image: url("/img/SubCatBG.jpg");
        height: 100%;
        width: 100%;
        background-blend-mode: normal;
        background-position: center center;
        background-repeat: no-repeat;
    }
</style>
@endsection
@section('content')
<section class="Rectangle-111">
    <div class="breadcrumbSer"></div>
</section>
<section class="contact py-5 subcatBG-img">
    <div class="container">
        <div class="text-center my-5">
            <h1>{{$cat->title}}</h1>
            <h2>Discover our traditional product</h2>
        </div>
        <p class="cat-text">
            {!!$cat->body!!}
        </p>
    </div>
</section>
<section class="py-5">
    <div class="text-center my-5">
        <div class="container">
            <h1>Our Products</h1>
            <h2>Discover our traditional product</h2>
            <div class=" text-center">
                <div class="portfolio-menu">
                    <ul>
                        <li class="active" data-filter="*">All</li>
                        @foreach (helper::CatGallery($cat->id) as $subcat)
                        <li class="gallery-sepa" data-filter=".{{$subcat->id}}">{{$subcat->title}}</li>
                        @endforeach

                    </ul>
                </div>
            </div>
            <div class="portfolio-item ">
                @php
                $allProd =[];
                @endphp
                @foreach (helper::CatGallery($cat->id) as $categorie)
                @foreach (helper::OneProduct($categorie->id) as $prod)
                @php
                $allProd[]= $prod;
                @endphp
                @endforeach
                @endforeach
                @foreach ($allProd as $item)
                @isset($item)
                <div class="item {{$item->sub_category_id}}"> 
                    <div class="product-content imageCat">
                        @php
                        $prod=helper::OneProduct($categorie->id);
                        @endphp
                        @isset(helper::prod_img_default($item->id)->img)
                         <img src="{{ asset(helper::prod_img_default($item->id)->img) }}" alt="" class="product-imgs">   
                        @endisset
                        
                        <div class="spec-icon">
                            <img src="{{asset('img\svg\eye.svg')}}" alt="">
                            <img src="{{asset('img\svg\heart.svg')}}" alt="">
                        </div>

                    </div>
                    <span class="spec-title">
                    {{$item->title}}
                    </span>
                    <p>
                        <a href="{{route('product.show', $item->id)}}">Détail produit
                        </a>
                    </p>
                </div>
                @endisset
                @endforeach
            </div>




        </div>
    </div>

    </div>
</section>
@endsection