@extends('front.layout')
@section('content')
    <script>
        $(document).ready(function () {
            $('.lable-block').hide();
        });
    </script>
<div class="breadcrumb-section">
    <div class="container">
        <div class="row">
            <div class="col-sm-6">
                <div class="page-title">
                    <h2>
                        @if($page=='liste')
                        {{$categorie->translate($locale)->name}}
                        @else
                        Promotions
                        @endif

                    </h2>
                </div>
            </div>
            <div class="col-sm-6">
                <nav aria-label="breadcrumb" class="theme-breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{url('/')}}">{!! Helper::traducteurs(9) !!}</a></li>
                            @if($page=='liste')
                        <li class="breadcrumb-item">
                            {{-- $categorie->ParentCategories->ParentCategories->translate($locale)->name --}}
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">
                            {{ $categorie->ParentCategories->translate($locale)->name}}
                        </li>
                                @else
                            <li class="breadcrumb-item active" aria-current="page">
                              Promotion
                            </li>
                                @endif
                    </ol>
                </nav>
            </div>
        </div>
    </div>
</div>

<section class="section-b-space ratio_asos">
    <div class="collection-wrapper">
        <div class="container-fluid">
            <div class="row">
@if(count($produits)>0)
                <div class="col-sm-3 collection-filter">
                    <form id="filter">
                        <input type="hidden" id="categorie_id" name="categorie_id" value="@if($page=='liste'){{$categorie_id}} @endif ">
                        <!-- side-bar colleps block stat -->
                    <div class="collection-filter-block">
                        <!-- brand filter start -->
                        <div class="collection-mobile-back"><span class="filter-back"><i class="fa fa-angle-left"
                                                                                         aria-hidden="true"></i> back</span></div>

                        <div class="collection_cat collection-collapse-block border-0 open">
                        @include('front.produits.categorie')
                        </div>
                            <div class="blocfilter">
                        <!-- color filter start here -->
                        @foreach($attributs as $attribut)
                            @if(count($attribut->AttributOptions)>0)
                                @if($attribut->type==2)
                        <div class="collection-collapse-block open">
                            <h3 class="collapse-block-titles opens">{{$attribut->translate($locale)->name}}</h3>
                            <div class="collection-collapse-block-content">
                                <div class="color-selector">
                                    <ul>
                                        @foreach($attribut->AttributOptions as $attributOption)
                                        <li title="{{$attributOption->translate($locale)->valeur}}"  data-rel="{{$attributOption->id}}" class=""><div style="background-color:{{$attributOption->couleur}};    height: 100%;border-radius: 100%; "></div></li>
                                        @endforeach
                                        <input type="hidden" value="" name="attribut_{{$attribut->id}}">
                                    </ul>
                                </div>

                            </div>
                        </div>
                                @else

                        <div class="collection-collapse-block border-0 open">
                            <h3 class="collapse-block-titles opens">{{$attribut->translate($locale)->name}}</h3>
                            <div class="collection-collapse-block-content">
                                <div class="collection-brand-filter">
                                    @foreach($attribut->AttributOptions as $attributOption)
                                    <div class="form-check collection-filter-checkbox">
                                        <input onclick="filter()" type="checkbox" class="form-check-input " name="attribut_{{$attribut->id}}[]" id="hundred" value="{{$attributOption->id}}">
                                        <label class="form-check-label" for="hundred">{{$attributOption->translate($locale)->valeur}}</label>
                                    </div>
                                        @endforeach

                                </div>
                            </div>
                        </div>
                                    @endif
                            @endif
                        @endforeach
                            </div>
                    </div>
                    <!-- silde-bar colleps block end here -->

                    </form>
                </div>

                <div class="collection-content col ">
                    <div class="page-main-content">
                        <div class="row">
                            <div class="col-sm-12">

                                <div class="collection-product-wrapper">
                                    <div class="product-top-filter">
                                        <div class="row">
                                            <div class="col-xl-12">
                                                <div class="filter-main-btn"><span
                                                            class="filter-btn btn btn-theme"><i class="fa fa-filter"
                                                                                                aria-hidden="true"></i> Filter</span></div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-12">
                                                <div class="product-filter-content">

                                                    <div class="collection-view">
                                                        <ul>
                                                            <li><i class="fa fa-th grid-layout-view"></i></li>
                                                            <li><i class="fa fa-list-ul list-layout-view"></i></li>
                                                        </ul>
                                                    </div>
                                                    <div class="collection-grid-view">
                                                        <ul>
                                                            <li><img src="{{asset('frontend/assets/images/icon/2.png')}}" alt=""
                                                                     class="product-2-layout-view"></li>
                                                            <li><img src="{{asset('frontend/assets/images/icon/3.png')}}" alt=""
                                                                     class="product-3-layout-view"></li>

                                                            <li><img src="{{asset('frontend/assets/images/icon/6.png')}}" alt=""
                                                                     class="product-6-layout-view"></li>
                                                        </ul>
                                                    </div>


                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="filterprod">
                                    <div class="product-wrapper-grid">

                                        <div class="row margin-res filterprod post-data">
                                            @include('front.produits.paginate')



                                                </div>
                                        <input type="hidden" id="countpage" value="{{ceil($produits->total()/3)}}">

                                            <div class="ajax-load"  style="display:none">

                                                <p>Loading More post</p>

                                            </div>

                                    </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
    @else

    <div style="    text-align: center;
    font-size: 22px;
    color: #ccc;">Aucun produit pour le moment. </div>
    @endif
            </div>
        </div>
    </div>
</section>

@endsection