@extends('frontend.layouts.web.app')

@if (isset($category_id))
    @php
        $meta_title = \App\Models\Category::find($category_id)->meta_title;
        $meta_description = \App\Models\Category::find($category_id)->meta_description;
    @endphp
@elseif (isset($brand_id))
    @php
        $meta_title = \App\Models\Brand::find($brand_id)->meta_title;
        $meta_description = \App\Models\Brand::find($brand_id)->meta_description;
    @endphp
@else
    @php
        $meta_title         = get_setting('meta_title');
        $meta_description   = get_setting('meta_description');
    @endphp
@endif

@section('meta_title'){{ $meta_title }}@stop
@section('meta_description'){{ $meta_description }}@stop

@section('meta')
    <!-- Schema.org markup for Google+ -->
    <meta itemprop="name" content="{{ $meta_title }}">
    <meta itemprop="description" content="{{ $meta_description }}">

    <!-- Twitter Card data -->
    <meta name="twitter:title" content="{{ $meta_title }}">
    <meta name="twitter:description" content="{{ $meta_description }}">

    <!-- Open Graph data -->
    <meta property="og:title" content="{{ $meta_title }}" />
    <meta property="og:description" content="{{ $meta_description }}" />
@endsection

@section('content')

    <section class="mb-4 pt-3">
        <div class="container sm-px-0">
            <form class="" id="search-form" action="" method="GET">
                <div class="row">
                    <div class="col-xl-3">

                        <div class="sidebar  has-scrollbar" data-mobile-menu>

                            <a href="{{ route('search') }}" class="btn-web w-50">{{translate('clear filter')}}</a>
                            <div class="bg-white shadow-sm rounded mb-3">
                                <div class="fs-15 fw-600 p-3 border-bottom">
                                    {{ translate('Price range')}}
                                </div>
                                <div class="p-3">
                                    <div class="aiz-range-slider">
                                        <div
                                            id="input-slider-range"
                                            data-range-value-min="@if(\App\Models\Product::count() < 1) 0 @else {{ \App\Models\Product::min('unit_price') }} @endif"
                                            data-range-value-max="@if(\App\Models\Product::count() < 1) 0 @else {{ \App\Models\Product::max('unit_price') }} @endif"
                                        ></div>

                                        <div class="row mt-2">
                                            <div class="col-6">
{{--                                                <input type="number" min="0" placeholder="min">--}}
                                                    <span class="range-slider-value value-low fs-14 fw-600 opacity-70"
                                                          @if (isset($min_price))
                                                              data-range-value-low="{{ $min_price }}"
                                                          @elseif($products->min('unit_price') > 0)
                                                              data-range-value-low="{{ $products->min('unit_price') }}"
                                                          @else
                                                              data-range-value-low="0"
                                                          @endif
                                                          id="input-slider-range-value-low"
                                                    ></span>
                                            </div>
                                            <div class="col-6 text-right">
                                                    <span class="range-slider-value value-high fs-14 fw-600 opacity-70"
                                                          @if (isset($max_price))
                                                              data-range-value-high="{{ $max_price }}"
                                                          @elseif($products->max('unit_price') > 0)
                                                              data-range-value-high="{{ $products->max('unit_price') }}"
                                                          @else
                                                              data-range-value-high="0"
                                                          @endif
                                                          id="input-slider-range-value-high"
                                                    ></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                @foreach ($attributes as $attribute)

                                    <div class="sidebar-category">


                                        <div class="sidebar-top">
                                            <h2 class="sidebar-title"> {{ $attribute->getTranslation('name') }}</h2>

                                            <button class="sidebar-close-btn" data-mobile-menu-close-btn>
                                                <ion-icon name="close-outline"></ion-icon>
                                            </button>
                                        </div>

                                        <ul class="sidebar-menu-category-list">

                                            @foreach ($attribute->attribute_values as $attribute_value)
                                                <li class="sidebar-menu-category">

                                                    <button type="button" class="sidebar-accordion-menu" data-accordion-btn>

                                                        <div class="menu-title-flex">
                                                            <p class="menu-title">{{$attribute->getTranslation('name')}}</p>
                                                        </div>

                                                        <div>
                                                            <ion-icon name="add-outline" class="add-icon"></ion-icon>
                                                            <ion-icon name="remove-outline" class="remove-icon"></ion-icon>
                                                        </div>

                                                    </button>
                                                    <ul class="sidebar-submenu-category-list" data-accordion>
                                                        @foreach ($attribute->attribute_values as $attribute_value)
                                                            <li class="sidebar-submenu-category">
                                                                <label class="d-flex">
                                                                        <input
                                                                            type="checkbox"
                                                                            name="selected_attribute_values[]"
                                                                            value="{{ $attribute_value->value }}" @if (in_array($attribute_value->value, $selected_attribute_values))   checked @endif
                                                                            onchange="filter()" style="width: 5%"
                                                                        >
                                                                        <span class="aiz-square-check"></span>
                                                                        <span>{{ $attribute_value->value }}</span>
                                                                    </label>

                                                            </li>
                                                        @endforeach


                                                    </ul>

                                                </li>
                                            @endforeach
                                        </ul>

                                    </div>

                                @endforeach

                            </div>



                        </div>
{{--                        <div class="aiz-filter-sidebar collapse-sidebar-wrap sidebar-xl sidebar-right z-1035">--}}
{{--                            <div class="overlay overlay-fixed dark c-pointer" data-toggle="class-toggle" data-target=".aiz-filter-sidebar" data-same=".filter-sidebar-thumb"></div>--}}
{{--                            <div class="collapse-sidebar c-scrollbar-light text-left">--}}
{{--                                <div class="d-flex d-xl-none justify-content-between align-items-center pl-3 border-bottom">--}}
{{--                                    <h3 class="h6 mb-0 fw-600">{{ translate('Filters') }}</h3>--}}
{{--                                    <button type="button" class="btn btn-sm p-2 filter-sidebar-thumb" data-toggle="class-toggle" data-target=".aiz-filter-sidebar" >--}}
{{--                                        <i class="las la-times la-2x"></i>--}}
{{--                                    </button>--}}
{{--                                </div>--}}
{{--                                <div class="bg-white shadow-sm rounded mb-3">--}}
{{--                                    <div class="fs-15 fw-600 p-3 border-bottom">--}}
{{--                                        <a href="#collapse_1" class="dropdown-toggle filter-section text-dark" data-toggle="collapse">--}}
{{--                                            {{ translate('Categories')}}--}}
{{--                                        </a>--}}
{{--                                    </div>--}}
{{--                                    <div class="collapse show" id="collapse_1">--}}
{{--                                        <ul class="p-3 list-unstyled">--}}
{{--                                            @if (!isset($category_id))--}}
{{--                                                @foreach (\App\Models\Category::where('level', 0)->get() as $category)--}}
{{--                                                    <li class="mb-2 ml-2">--}}
{{--                                                        <a class="text-reset fs-14" href="{{ route('products.category', $category->slug) }}">{{ $category->getTranslation('name') }}</a>--}}
{{--                                                    </li>--}}
{{--                                                @endforeach--}}
{{--                                            @else--}}
{{--                                                <li class="mb-2">--}}
{{--                                                    <a class="text-reset fs-14 fw-600" href="{{ route('search') }}">--}}
{{--                                                        <i class="las la-angle-left"></i>--}}
{{--                                                        {{ translate('All Categories')}}--}}
{{--                                                    </a>--}}
{{--                                                </li>--}}
{{--                                                @if (\App\Models\Category::find($category_id)->parent_id != 0)--}}
{{--                                                    <li class="mb-2">--}}
{{--                                                        <a class="text-reset fs-14 fw-600" href="{{ route('products.category', \App\Models\Category::find(\App\Models\Category::find($category_id)->parent_id)->slug) }}">--}}
{{--                                                            <i class="las la-angle-left"></i>--}}
{{--                                                            {{ \App\Models\Category::find(\App\Models\Category::find($category_id)->parent_id)->getTranslation('name') }}--}}
{{--                                                        </a>--}}
{{--                                                    </li>--}}
{{--                                                @endif--}}
{{--                                                <li class="mb-2">--}}
{{--                                                    <a class="text-reset fs-14 fw-600" href="{{ route('products.category', \App\Models\Category::find($category_id)->slug) }}">--}}
{{--                                                        <i class="las la-angle-left"></i>--}}
{{--                                                        {{ \App\Models\Category::find($category_id)->getTranslation('name') }}--}}
{{--                                                    </a>--}}
{{--                                                </li>--}}
{{--                                                @foreach (\App\Utility\CategoryUtility::get_immediate_children_ids($category_id) as $key => $id)--}}
{{--                                                    <li class="ml-4 mb-2">--}}
{{--                                                        <a class="text-reset fs-14" href="{{ route('products.category', \App\Models\Category::find($id)->slug) }}">{{ \App\Models\Category::find($id)->getTranslation('name') }}</a>--}}
{{--                                                    </li>--}}
{{--                                                @endforeach--}}
{{--                                            @endif--}}
{{--                                        </ul>--}}
{{--                                    </div>--}}
{{--                                </div>--}}
{{--                                <div class="bg-white shadow-sm rounded mb-3">--}}
{{--                                    <div class="fs-15 fw-600 p-3 border-bottom">--}}
{{--                                        {{ translate('Price range')}}--}}
{{--                                    </div>--}}
{{--                                    <div class="p-3">--}}
{{--                                        <div class="aiz-range-slider">--}}
{{--                                            <div--}}
{{--                                                id="input-slider-range"--}}
{{--                                                data-range-value-min="@if(\App\Models\Product::count() < 1) 0 @else {{ \App\Models\Product::min('unit_price') }} @endif"--}}
{{--                                                data-range-value-max="@if(\App\Models\Product::count() < 1) 0 @else {{ \App\Models\Product::max('unit_price') }} @endif"--}}
{{--                                            ></div>--}}

{{--                                            <div class="row mt-2">--}}
{{--                                                <div class="col-6">--}}
{{--                                                    <span class="range-slider-value value-low fs-14 fw-600 opacity-70"--}}
{{--                                                        @if (isset($min_price))--}}
{{--                                                            data-range-value-low="{{ $min_price }}"--}}
{{--                                                        @elseif($products->min('unit_price') > 0)--}}
{{--                                                            data-range-value-low="{{ $products->min('unit_price') }}"--}}
{{--                                                        @else--}}
{{--                                                            data-range-value-low="0"--}}
{{--                                                        @endif--}}
{{--                                                        id="input-slider-range-value-low"--}}
{{--                                                    ></span>--}}
{{--                                                </div>--}}
{{--                                                <div class="col-6 text-right">--}}
{{--                                                    <span class="range-slider-value value-high fs-14 fw-600 opacity-70"--}}
{{--                                                        @if (isset($max_price))--}}
{{--                                                            data-range-value-high="{{ $max_price }}"--}}
{{--                                                        @elseif($products->max('unit_price') > 0)--}}
{{--                                                            data-range-value-high="{{ $products->max('unit_price') }}"--}}
{{--                                                        @else--}}
{{--                                                            data-range-value-high="0"--}}
{{--                                                        @endif--}}
{{--                                                        id="input-slider-range-value-high"--}}
{{--                                                    ></span>--}}
{{--                                                </div>--}}
{{--                                            </div>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}
{{--                                </div>--}}

{{--                                @foreach ($attributes as $attribute)--}}
{{--                                    <div class="bg-white shadow-sm rounded mb-3">--}}
{{--                                        <div class="fs-15 fw-600 p-3 border-bottom">--}}
{{--                                            <a href="#" class="dropdown-toggle text-dark filter-section collapsed" data-toggle="collapse" data-target="#collapse_{{ str_replace(' ', '_', $attribute->name) }}">--}}
{{--                                                {{ translate('Filter by') }} {{ $attribute->getTranslation('name') }}--}}
{{--                                            </a>--}}
{{--                                        </div>--}}
{{--                                        <div class="collapse" id="collapse_{{ str_replace(' ', '_', $attribute->name) }}">--}}
{{--                                            <div class="p-3  aiz-checkbox-list">--}}
{{--                                                @foreach ($attribute->attribute_values as $attribute_value)--}}
{{--                                                    <label class="aiz-checkbox">--}}
{{--                                                        <input--}}
{{--                                                            type="checkbox"--}}
{{--                                                            name="selected_attribute_values[]"--}}
{{--                                                            value="{{ $attribute_value->value }}" @if (in_array($attribute_value->value, $selected_attribute_values)) checked @endif--}}
{{--                                                            onchange="filter()"--}}
{{--                                                        >--}}
{{--                                                        <span class="aiz-square-check"></span>--}}
{{--                                                        <span>{{ $attribute_value->value }}</span>--}}
{{--                                                    </label>--}}
{{--                                                @endforeach--}}
{{--                                            </div>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}
{{--                                @endforeach--}}

{{--                                @if (get_setting('color_filter_activation'))--}}
{{--                                    <div class="bg-white shadow-sm rounded mb-3">--}}
{{--                                        <div class="fs-15 fw-600 p-3 border-bottom">--}}
{{--                                            <a href="#" class="dropdown-toggle text-dark filter-section collapsed" data-toggle="collapse" data-target="#collapse_color">--}}
{{--                                                {{ translate('Filter by color')}}--}}
{{--                                            </a>--}}
{{--                                        </div>--}}
{{--                                        <div class="collapse" id="collapse_color">--}}
{{--                                            <div class="p-3 aiz-radio-inline">--}}
{{--                                                @foreach ($colors as $key => $color)--}}
{{--                                                <label class="aiz-megabox pl-0 mr-2" data-toggle="tooltip" data-title="{{ $color->name }}">--}}
{{--                                                    <input--}}
{{--                                                        type="radio"--}}
{{--                                                        name="color"--}}
{{--                                                        value="{{ $color->code }}"--}}
{{--                                                        onchange="filter()"--}}
{{--                                                        @if(isset($selected_color) && $selected_color == $color->code) checked @endif--}}
{{--                                                    >--}}
{{--                                                    <span class="aiz-megabox-elem rounded d-flex align-items-center justify-content-center p-1 mb-2">--}}
{{--                                                        <span class="size-30px d-inline-block rounded" style="background: {{ $color->code }};"></span>--}}
{{--                                                    </span>--}}
{{--                                                </label>--}}
{{--                                                @endforeach--}}
{{--                                            </div>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}
{{--                                @endif--}}

{{--                                --}}{{-- <button type="submit" class="btn btn-styled btn-block btn-base-4">Apply filter</button> --}}
{{--                            </div>--}}
{{--                        </div>--}}
                    </div>
                    <div class="col-xl-9">

                        <ul class="breadcrumb bg-transparent p-0">
                            @if(isset($category_id))
                                <li class="text-dark fw-600 breadcrumb-item">
                                    <a class="text-reset" href="{{ route('products.category', \App\Models\Category::find($category_id)->slug) }}">"{{ \App\Models\Category::find($category_id)->getTranslation('name') }}"</a>
                                </li>
                            @endif
                        </ul>

                        <div class="text-left">
                            <div class="row gutters-5 flex-wrap align-items-center">
                                <div class="col-lg col-10">
                                    <h1 class="h6 fw-600 text-body">
                                        @if(isset($category_id))
                                            {{ \App\Models\Category::find($category_id)->getTranslation('name') }}
                                        @elseif(isset($query))
                                            {{ translate('Search result for ') }}"{{ $query }}"
                                        @else
                                            {{ translate('All Products') }}
                                        @endif
                                    </h1>
                                    <input type="hidden" name="keyword" value="{{ $query }}">
                                </div>
                                <div class="col-2 col-lg-auto d-xl-none mb-lg-3 text-right">
                                    <button type="button" class="btn btn-icon p-0" data-toggle="class-toggle" data-target=".aiz-filter-sidebar">
                                        <i class="la la-filter la-2x"></i>
                                    </button>
                                </div>
                                <div class="col-6 col-lg-auto mb-3 w-lg-200px">
                                    @if (Route::currentRouteName() != 'products.brand')
                                        <label class="mb-0 opacity-50">{{ translate('Brands')}}</label>
                                        <select class="form-control form-control-sm aiz-selectpicker" data-live-search="true" name="brand" onchange="filter()">
                                            <option value="">{{ translate('All Brands')}}</option>
                                            @foreach ($brands as $brand)
                                                <option value="{{ $brand->slug }}" @isset($brand_id) @if ($brand_id == $brand->id) selected @endif @endisset>{{ $brand->getTranslation('name') }}</option>
                                            @endforeach
                                        </select>
                                    @endif
                                </div>
                                <div class="col-6 col-lg-auto mb-3 w-lg-200px">
                                    <label class="mb-0 opacity-50">{{ translate('Sort by')}}</label>
                                    <select class="form-control form-control-sm aiz-selectpicker" name="sort_by" onchange="filter()">
                                        <option value="newest" @isset($sort_by) @if ($sort_by == 'newest') selected @endif @endisset>{{ translate('Newest')}}</option>
                                        <option value="oldest" @isset($sort_by) @if ($sort_by == 'oldest') selected @endif @endisset>{{ translate('Oldest')}}</option>
                                        <option value="price-asc" @isset($sort_by) @if ($sort_by == 'price-asc') selected @endif @endisset>{{ translate('Price low to high')}}</option>
                                        <option value="price-desc" @isset($sort_by) @if ($sort_by == 'price-desc') selected @endif @endisset>{{ translate('Price high to low')}}</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <input type="hidden" name="min_price" value="">
                        <input type="hidden" name="max_price" value="">
                        <div class="product-grid">
                            @foreach($products as $key=>$product)
                                <x-product-card :product="$product"></x-product-card>
                            @endforeach
                        </div>
                        <div class="aiz-pagination aiz-pagination-center mt-4">
                            {{ $products->appends(request()->input())->links() }}
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </section>

@endsection

@section('script')
    <script type="text/javascript">
        function filter(){
            $('#search-form').submit();
        }
        function rangefilter(arg){
            $('input[name=min_price]').val(arg[0]);
            $('input[name=max_price]').val(arg[1]);
            filter();
        }
    </script>
@endsection