@extends($_lib . 'layout')
@section('body')
    <!--[if lte IE 9]>
                                <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
                                <![endif]-->

    {{-- @if ($general->show_preloader) --}}
    @include($_template . 'preloader')
    {{-- @endif --}}

    @include($_template . 'offcanvas')
    @include($_template . 'panels')
    @include($_template . 'header')

    <!-- Body main wrapper start -->
    <main>
        @php
            $show_breadcrumb = $__env->yieldContent('breadcrumb.show', $__env->yieldContent('show_breadcrumb', true));
            if ($show_breadcrumb && $show_breadcrumb != false && $show_breadcrumb != 'false' && $show_breadcrumb != 'no') {
                $show_breadcrumb = true;
            } else {
                $show_breadcrumb = false;
            }
            $breadcrumb_title = $__env->yieldContent('breadcrumb.title', $__env->yieldContent('breadcrumb_title'));
            $sidebar = $__env->yieldContent('sidebar');
            if (!in_array($sidebar, ['post', 'product', 'default'])) {
                $sidebar = 'default';
            }
        @endphp

        @if ($show_breadcrumb)
            @include($_template . 'breadcrumb', ['title' => $breadcrumb_title])
        @endif

        <!-- Shop-area-start -->
        <section class="bd-shop__area pt-110 pb-85">
            <div class="container">
                <div class="row">
                    <div class="col-xxl-3 col-xl-4 col-lg-4 col-md-8">
                        <div class="bd-sidebar__widget-warpper mb-60 shop-sidebar">
                            <div class="bd-product__filters">
                                <form action="{{ route('web.products') }}" method="GET" id="product-filter-form">
                                    <div class="bd-filter__widget child-content-hidden">
                                        <h4 class="bd-filter__widget-title drop-btn">Danh mục</h4>
                                        <div class="bd-filter__content submit-on-change">
                                            <div class="bd-product__check">
                                                @if ($cates = get_product_categories(['@countproduct' => true]))
                                                    @php
                                                        $cc = array_map('trim', explode(',', $request->categories));
                                                    @endphp
                                                    <ul>
                                                        @foreach ($cates as $cate)
                                                            <li>
                                                                <input class="check-input" type="checkbox" name="categories[]" id="s-0{{ $cate->id }}" value="{{ $cate->id }}" @checked(in_array($cate->id, $cc))>
                                                                <label class="check-label" for="s-0{{ $cate->id }}">{{ $cate->name }} ({{ $cate->product_count }})</label>
                                                            </li>
                                                        @endforeach

                                                    </ul>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    <div class="bd-filter__widget child-content-hidden mt-4">
                                        <h4 class="bd-filter__widget-title drop-btn">Giá</h4>
                                        <div class="bd-filter__price">
                                            <div class="slider-range price-range-filter" data-min="{{ $min = ($p = get_product(['@sorttype' => 4])) ? $p->final_price : 0 }}" data-max="{{ $max = ($p = get_product(['@sorttype' => 5])) ? $p->final_price : 99999999 }}">
                                                <div class="slider-range-bar"></div>
                                                <input type="hidden" name="min_price" class="min-price" value="{{ $min }}">
                                                <input type="hidden" name="max_price" class="max-price" value="{{ $max }}">
                                                <p>
                                                    <label for="s-amount">Giá :</label>
                                                    <input type="text" id="s-amount" name="prices" class="amount" readonly>
                                                    <span>Lọc</span>
                                                </p>
                                            </div>
                                        </div>

                                        <div class="mt-4">
                                            <button type="submit">Lọc</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="col-xxl-9 col-xl-8 col-lg-8">
                        <form class="pd-search-form" action="{{ route('web.products') }}">
                            <div class="row">
                                <div class="col-xl-4">
                                    <div class="bd-top__filter-search p-relative mb-30">
                                        <div class="bd-top__filter-input">
                                            <input type="text" name="search" placeholder="Nhập từ khoá" value="{{ request()->search }}">
                                            <button><i class="fa-regular fa-magnifying-glass"></i></button>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl-8">
                                    <div class="bd-filter__tab-inner mb-30">
                                        <div class="bd-top__filter">
                                            <div class="bd-Product__tab pl-5">
                                                <ul class="nav nav-tabs" id="myTab" role="tablist">
                                                    <li class="nav-item" role="presentation">
                                                        <button class="nav-link {{ $request->tab != 'list' ? 'active' : '' }}" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15.001" viewBox="0 0 15 15.001">
                                                                <path id="Path_12058" data-name="Path 12058"
                                                                    d="M-1362.125-3804a.626.626,0,0,1-.625-.625v-2.5a.626.626,0,0,1,.625-.625h2.5a.625.625,0,0,1,.625.625v2.5a.625.625,0,0,1-.625.625Zm-5.624,0a.626.626,0,0,1-.626-.625v-2.5a.626.626,0,0,1,.626-.625h2.5a.625.625,0,0,1,.625.625v2.5a.625.625,0,0,1-.625.625Zm-5.625,0a.625.625,0,0,1-.625-.625v-2.5a.625.625,0,0,1,.625-.625h2.5a.625.625,0,0,1,.625.625v2.5a.625.625,0,0,1-.625.625Zm11.249-5.625a.626.626,0,0,1-.625-.625v-2.5a.626.626,0,0,1,.625-.625h2.5a.626.626,0,0,1,.625.625v2.5a.625.625,0,0,1-.625.625Zm-5.624,0a.626.626,0,0,1-.626-.625v-2.5a.626.626,0,0,1,.626-.625h2.5a.626.626,0,0,1,.625.625v2.5a.625.625,0,0,1-.625.625Zm-5.625,0a.625.625,0,0,1-.625-.625v-2.5a.626.626,0,0,1,.625-.625h2.5a.626.626,0,0,1,.625.625v2.5a.625.625,0,0,1-.625.625Zm11.249-5.625a.626.626,0,0,1-.625-.625v-2.5a.626.626,0,0,1,.625-.626h2.5a.626.626,0,0,1,.625.626v2.5a.625.625,0,0,1-.625.625Zm-5.624,0a.626.626,0,0,1-.626-.625v-2.5a.627.627,0,0,1,.626-.626h2.5a.626.626,0,0,1,.625.626v2.5a.625.625,0,0,1-.625.625Zm-5.625,0a.625.625,0,0,1-.625-.625v-2.5a.626.626,0,0,1,.625-.626h2.5a.626.626,0,0,1,.625.626v2.5a.625.625,0,0,1-.625.625Z"
                                                                    transform="translate(1374 3819)" fill="#777" />
                                                            </svg>

                                                        </button>
                                                    </li>
                                                    <li class="nav-item" role="presentation">
                                                        <button class="nav-link {{ $request->tab == 'list' ? 'active' : '' }}" id="shop-filter-bar" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="17.3" height="15" viewBox="0 0 17.3 15">
                                                                <path id="Path_12057" data-name="Path 12057"
                                                                    d="M-2514-4232a1.5,1.5,0,0,1,1.5-1.5,1.5,1.5,0,0,1,1.5,1.5,1.5,1.5,0,0,1-1.5,1.5A1.5,1.5,0,0,1-2514-4232Zm6.179,1.328a1.236,1.236,0,0,1-1.236-1.235,1.236,1.236,0,0,1,1.236-1.236h9.885a1.235,1.235,0,0,1,1.236,1.236,1.235,1.235,0,0,1-1.236,1.235ZM-2514-4238a1.5,1.5,0,0,1,1.5-1.5,1.5,1.5,0,0,1,1.5,1.5,1.5,1.5,0,0,1-1.5,1.5A1.5,1.5,0,0,1-2514-4238Zm6.179,1.15a1.236,1.236,0,0,1-1.236-1.235,1.236,1.236,0,0,1,1.236-1.236h9.885a1.235,1.235,0,0,1,1.236,1.236,1.235,1.235,0,0,1-1.236,1.235ZM-2514-4244a1.5,1.5,0,0,1,1.5-1.5,1.5,1.5,0,0,1,1.5,1.5,1.5,1.5,0,0,1-1.5,1.5A1.5,1.5,0,0,1-2514-4244Zm6.179.971a1.236,1.236,0,0,1-1.236-1.235,1.236,1.236,0,0,1,1.236-1.236h9.885a1.235,1.235,0,0,1,1.236,1.236,1.235,1.235,0,0,1-1.236,1.235Z"
                                                                    transform="translate(2514 4245.5)" fill="#777" />
                                                            </svg>

                                                        </button>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="bd-sort__type-filter">
                                            @php
                                                $sorttype = request()->sorttype;
                                            @endphp
                                            <select class="sorting-list" name="sorttype" id="sorting-list">
                                                @if ($sortData = get_product_sortby_options())
                                                    @foreach ($sortData as $key => $text)
                                                        <option value="{{ $key }}" @if ($sorttype == $key) selected @endif>{{ $text }}</option>
                                                    @endforeach
                                                @endif
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <input type="hidden" name="tab" value="{{request()->tab}}">
                        </form>
                        @yield('content')
                    </div>
                </div>
            </div>
        </section>
        <!-- Shop-area-ende -->


    </main>
    <!-- Body main wrapper ebd -->

    @include($_template . 'footer')

    @include($_template . 'js')
@endsection