@extends('layouts.site')
@section('content')


    <!-- Product -->
    <div class="bg0 m-t-23 p-b-140" style="padding-top: 100px">
        <div class="container">
            <div class="flex-w flex-sb-m p-b-52">
                <div class="flex-w flex-l-m filter-tope-group m-tb-10">
                    <button class="stext-106 cl6 hov1 bor3 trans-04 m-r-32 m-tb-5 how-active1" data-filter="*">
                        All Products
                    </button>

                    <button class="stext-106 cl6 hov1 bor3 trans-04 m-r-32 m-tb-5" data-filter=".Senior">
                        Senior
                    </button>

                    <button class="stext-106 cl6 hov1 bor3 trans-04 m-r-32 m-tb-5" data-filter=".Junior">
                        Junior
                    </button>
                </div>

                <div class="flex-w flex-c-m m-tb-10">
                    <div class="flex-c-m stext-106 cl6 size-104 bor4 pointer hov-btn3 trans-04 m-r-8 m-tb-4 js-show-filter">
                        <i class="icon-filter cl2 m-r-6 fs-15 trans-04 zmdi zmdi-filter-list"></i>
                        <i class="icon-close-filter cl2 m-r-6 fs-15 trans-04 zmdi zmdi-close dis-none"></i>
                        Filter
                    </div>

                    <div class="flex-c-m stext-106 cl6 size-105 bor4 pointer hov-btn3 trans-04 m-tb-4 js-show-search">
                        <i class="icon-search cl2 m-r-6 fs-15 trans-04 zmdi zmdi-search"></i>
                        <i class="icon-close-search cl2 m-r-6 fs-15 trans-04 zmdi zmdi-close dis-none"></i>
                        Search
                    </div>
                </div>

                <!-- Search product -->
                <div class="dis-none panel-search w-full p-t-10 p-b-15">
                    <div class="bor8 dis-flex p-l-15">
                        <button class="size-113 flex-c-m fs-16 cl2 hov-cl1 trans-04">
                            <i class="zmdi zmdi-search"></i>
                        </button>

                        <input class="mtext-107 cl2 size-114 plh2 p-r-15" type="text" id="search" name="search-product" placeholder="Search">
                    </div>
                    <div id="search-results" class="list-group mt-2"></div>
                </div>

                <!-- Filter -->
                <div class="dis-none panel-filter w-full p-t-10">
                    <div class="wrap-filter flex-w bg6 w-full p-lr-40 p-t-27 p-lr-15-sm">

                        @foreach ($productsCats as $brand)
                            @foreach ($brand->categories as $category)
                                <div class="filter-col5 p-b-27">
                                    <div class="mtext-102 cl2 p-b-15">
                                        {{ $category->name }}
                                        <div class="flex-w p-t-4 m-r--5">
                                            <div class="flex-w flex-l-m filter-tope-group m-tb-10">
                                                @foreach ($category->products as $product)
                                                    <button class="flex-c-m stext-107 cl6 size-301 bor7 p-lr-15 hov-tag1 trans-04 m-r-5 m-b-5" data-filter=".{{ str_replace([' ','(',')'], '_', $product->name) }}_{{$category->name}}">
                                                        {{ $product->name }}
                                                    </button>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        @endforeach

                        {{--<div class="filter-col4 p-b-27">
                            <div class="mtext-102 cl2 p-b-15">
                                Tags
                            </div>

                            <div class="flex-w p-t-4 m-r--5">
                                <a href="#" class="flex-c-m stext-107 cl6 size-301 bor7 p-lr-15 hov-tag1 trans-04 m-r-5 m-b-5">
                                    Fashion
                                </a>

                                <a href="#" class="flex-c-m stext-107 cl6 size-301 bor7 p-lr-15 hov-tag1 trans-04 m-r-5 m-b-5">
                                    Lifestyle
                                </a>

                                <a href="#" class="flex-c-m stext-107 cl6 size-301 bor7 p-lr-15 hov-tag1 trans-04 m-r-5 m-b-5">
                                    Denim
                                </a>

                                <a href="#" class="flex-c-m stext-107 cl6 size-301 bor7 p-lr-15 hov-tag1 trans-04 m-r-5 m-b-5">
                                    Streetstyle
                                </a>

                                <a href="#" class="flex-c-m stext-107 cl6 size-301 bor7 p-lr-15 hov-tag1 trans-04 m-r-5 m-b-5">
                                    Crafts
                                </a>
                            </div>
                        </div>--}}
                    </div>
                </div>
            </div>

            <div class="row isotope-grid" id="product-list">
                @foreach($productsItems as $items)
                    @foreach($items['products'] as $products)
                        @if(array_key_exists('limited_product_items',$products))
                            @foreach($products['limited_product_items'] as $product_item)
                                <div class="col-sm-6 col-md-4 col-lg-3 p-b-35 isotope-item {{$items['name']}} {{str_replace([' ','(',')'], '_', $products['name'])}}_{{$items['name']}}">
                                    <!-- Block2 -->
                                    <div class="block2">
                                        <div class="block2-pic hov-img0">
                                            @if(array_key_exists(0,$product_item['product_item_image']))
                                                {{--<img src="{{asset('site/images/items/'.$products['name'].'/'.$product_item['product_item_image'][0]['image'])}}" alt="IMG-PRODUCT">--}}
                                                <img src="{{ url('/hb-shared-images/'.$product_item['product_id'].'/' . $product_item['product_item_image'][0]['image']) }}" alt="IMG-PRODUCT">
                                            @endif

                                            <a href="#" class="block2-btn flex-c-m stext-103 cl2 size-102 bg0 bor2 hov-btn1 p-lr-15 trans-04 js-show-modal1"
                                               data-id="{{ $product_item['id'] }}"
                                               data-cat-name="{{ $products['name'] }}"
                                               data-name="{{ $product_item['item_name'] }}"
                                               data-price="{{ $product_item['price'] }}"
                                               data-description="{{ $product_item['short_description'] }}"
                                               {{--data-asset-path="{{ asset('site/images/items') }}"--}}
                                               data-asset-path="{{ url('/hb-shared-images/'.$product_item['product_id']) }}"
                                               data-images='@json($product_item['product_item_image'])'>Quick View
                                            </a>
                                        </div>

                                        <div class="block2-txt flex-w flex-t p-t-14">
                                            <div class="block2-txt-child1 flex-col-l ">
                                                <a href="{{url('product_detail/' . $product_item['product_id'] . '/' . $product_item['id'])}}" class="stext-104 cl4 hov-cl1 trans-04 js-name-b2 p-b-6">
                                                    {{$product_item['item_name']}}
                                                </a>

                                                <span class="stext-105 cl3">
                                                    {{$product_item['price']}}
                                                </span>
                                            </div>

                                            <div class="block2-txt-child2 flex-r p-t-3">
                                                <a href="#" class="btn-addwish-b2 dis-block pos-relative js-addwish-b2">
                                                    <img class="icon-heart1 dis-block trans-04" src="{{asset('site/images/icons/icon-heart-01.png')}}" alt="ICON">
                                                    <img class="icon-heart2 dis-block trans-04 ab-t-l" src="{{asset('site/images/icons/icon-heart-02.png')}}" alt="ICON">
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        @endif
                    @endforeach
                @endforeach
            </div>
        </div>

        <div class="row flex-c-m flex-w w-full p-t-45">
            <a href="#" class="flex-c-m stext-101 cl5 size-103 bg2 bor1 hov-btn1 p-lr-15 trans-04" id="load-more" data-page="2">
                Load More
            </a>
        </div>
    </div>

@endsection