@extends('front.front-app', ['new_url_canonical' => $new_url_canonical])

@include('front.header')
{{--@include('front.header-bottom-goods')
@include('front.header-bottom-rent')--}}

@if(isset($goods_objects))
    @section('google-tag-manager')
        <script>
            dataLayer.push({ecommerce: null});  // Clear the previous ecommerce object.
            dataLayer.push({
                event: "view_item_list",
                ecommerce: {
                    items: {!! json_encode($goods_objects, JSON_UNESCAPED_UNICODE) !!}
                }
            });
        </script>
    @stop
@endif

@section('container')
 
    <div class="main-content">
        <div class="container">
            <div class="breadcrumbs-wrapper">
                @include('front.templates.breadcrumbs')
            </div>

            @if(isset($new_h1_title))
                <h1 class="mt-2 change-h1-title">{{ $new_h1_title }}</h1>
            @endif

            <div class="sort-by">
                <button type="button" class="button button--blue sort-by-filter">
                    <img src="{{ asset('front-assets/img/icons/filter.svg') }}" alt="Filter">
                    <p>{{ ShowLabelById(31, $lang_id) }}</p>
                </button>
                <div class="sort-by-img">
                    <img src="{{ asset('front-assets/img/icons/sort-by.svg') }}" alt="Sorting">
                </div>
                <div class="sort-by-list">
                    <div class="sort-by-item">
                        <label for="sort_by">{{ ShowLabelById(25, $lang_id) }}</label>
                        <select name="sort_by" id="sort_by" class="sort_by">
                            <option value="default" {{ is_null($order_elements) ? 'selected' : '' }}> {!! ShowLabelById(49, $lang_id) !!}</option>
                            <option value="price_asc"{{ (!is_null($order_elements) && $order_elements == 'price_asc') ? 'selected' : '' }}>
                                {{ ShowLabelById(26, $lang_id) }}
                            </option>
                            <option value="price_desc"{{ (!is_null($order_elements) && $order_elements == 'price_desc') ? 'selected' : '' }}>
                                {{ ShowLabelById(27, $lang_id) }}
                            </option>
                            {{--<option value="name_asc"{{ (!is_null($order_elements) && $order_elements == 'name_asc') ? 'selected' : '' }}>
                                {{ ShowLabelById(28, $lang_id) }}
                            </option>
                            <option value="name_desc"{{ (!is_null($order_elements) && $order_elements == 'name_desc') ? 'selected' : '' }}>
                                {{ ShowLabelById(29, $lang_id) }}
                            </option>--}}
                        </select>
                    </div>
                    <div class="sort-by-item">
                        <label for="count_per_page">{!! ShowLabelById(30, $lang_id) !!}</label>
                        <select name="count_per_page" id="count_per_page" class="count_per_page">
                            <option value="12" {{ (!is_null($count_per_page) && $count_per_page == 12) ? 'selected' : '' }}>
                                12
                            </option>
                            <option value="24" {{ (!is_null($count_per_page) && $count_per_page == 24) ? 'selected' : '' }}>
                                24
                            </option>
                            <option value="36" {{ (!is_null($count_per_page) && $count_per_page == 36) ? 'selected' : '' }}>
                                36
                            </option>
                            <option value="48" {{ (!is_null($count_per_page) && $count_per_page == 48) ? 'selected' : '' }}>
                                48
                            </option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="product-list-page">
                <div class="filter">
                    <form action="{{ url($lang, ['goods-list', $goods_subject_id_category->alias, 'filter']) }}"
                          method="POST" id="filter-data"
                          data-parent="{{ $goods_subject_id_subCategory->alias or '' }}"
                          data-child="{{$goods_subject_id->alias or ''}}" data-form-id="filter-data">

                        <input type="hidden" name="_token" value="{{ csrf_token() }}">

                        <div class="filter-status">
                            <ul>
                                <li class=" filter-status--top">
                                    <input type="checkbox" id="top"
                                           name="top" {{ $filters_elements && @$filters_elements['top'] ? 'checked' : '' }}>
                                    <label for="top" class="product-item-status--top">TOP</label>
                                </li>
                                <li class=" filter-status--new">
                                    <input type="checkbox" id="new"
                                           name="new" {{ $filters_elements && @$filters_elements['new'] ? 'checked' : '' }}>
                                    <label for="new" class="product-item-status--new">NEW</label>
                                </li>
                                <li class=" filter-status--discount">
                                    <input type="checkbox" id="sale"
                                           name="sale" {{ $filters_elements && @$filters_elements['sale'] ? 'checked' : '' }}>
                                    <label for="sale" class="product-item-status--discount">SALE</label>
                                </li>
                            </ul>
                        </div>
                        <div class="filter-list">

                            @if(!is_null($goods_subject_id))
                                {!! parametersForFrontSite($lang_id, $default_lang_id, $goods_subject_id->id) !!}
                            @endif

                            @if(!empty($brand) && count($brand))
                                <div class="filter-item">
                                    <div class="filter-head">
                                        <p>{{ ShowLabelById(50, $lang_id) }}</p>
                                    </div>
                                    <div class="filter-item-list">
                                        <ul>
                                            @foreach($brand as $one_brand)
                                                <li>
                                                    <input name="brand[]" value="{{ $one_brand->id }}" type="checkbox"
                                                           id="brand_{{$one_brand->id}}"
                                                            {{!empty($filters_elements) && array_key_exists('brand', $filters_elements) && is_array($filters_elements['brand']) ? (in_array($one_brand->id, $filters_elements['brand']) ? 'checked' : '') : ''}}>
                                                    <label for="brand_{{ $one_brand->id }}">{{$lang_id == 2 ? $one_brand->name_ro : $one_brand->name }}</label>
                                                </li>
                                            @endforeach
                                        </ul>
                                    </div>
                                </div>
                            @endif

                            <div class="filter-item">
                                <div class="filter-head">
                                    <p>{{ ShowLabelById(46, $lang_id) }}</p>
                                </div>
                                <div class="filter-item-price">
                                    <div class="price-slider-container">
                                        <div class="filter-price-slider" id="priceSlider"></div>
                                    </div>
                                    <div class="filter-price-inpust">
                                        <input id="minPrice" type="text" name="min_price" aria-label="Input min price"
                                               value="{{ $filters_elements && @$filters_elements['min_price'] ? $filters_elements['min_price'] : getDefaultPriceFormat(intval($min_price))  }}">
                                        <div class="filter-price-line"></div>
                                        <input id="maxPrice" type="text" name="max_price" aria-label="Input max price"
                                               value="{{ $filters_elements && @$filters_elements['max_price'] ? $filters_elements['max_price'] : getDefaultPriceFormat(ceil($max_price)) }}"
                                               data-max-val="{{ getDefaultPriceFormat(ceil($max_price)) }}">
                                        <div class="filter-price-currency">
                                            <p>{{ ShowLabelById(6, $lang_id) }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>

                <div class="product-list render-products-list show-loader">
                    @if(!empty($goods_items_list) && count($goods_items_list))
                        @foreach($goods_items_list as $one_goods_item)
                            <div class="product-item" data-goods-id="{{ $one_goods_item->id or '' }}">
                                @include('front.templates.product-template', ['one_goods_item' => $one_goods_item])
                            </div>
                        @endforeach
                        <div class="pagination" data-curr-page="{{$goods_items_list->currentPage()}}">
                            @include('front.templates.pagination', ['paginator' => $goods_items_list, 'new_url' => $new_url])
                        </div>
                    @else
                        <div class="final-page-inner">
                            <div class="final-page-icon">
                                <img src="{{ asset('front-assets/img/icons/final-page-error.png') }}"
                                     alt="Empty list">
                            </div>
                            <h1>{{ ShowLabelById(291, $lang_id) }}</h1>
                            <div class="final-page-link">
                                <a href="{{ url('/', $lang) }}">{{ ShowLabelById(248, $lang_id) }}</a>
                            </div>
                        </div>
                    @endif
                </div>
            </div>

            <div class="product-list-text common-text pb-4" {{ (isset($new_category_brand_description) && $new_category_brand_description != '') || (!empty($curr_page_description) && empty(request()->all())) ? '' : 'style=display:none' }}>
                {!! $new_category_brand_description or '' !!}
                @if(!empty($curr_page_description) && empty(request()->all()))
                    {!! $curr_page_description or '' !!}
                @endif
            </div>
        </div>
    </div>
@stop

@section('scripts')
    <script>
        $(document).ready(function () {
            var stepsSlider = document.getElementById('priceSlider');
            var min_input = document.getElementById('minPrice');
            var max_input = document.getElementById('maxPrice');
            var inputs = [min_input, max_input];

            var min_price = $("#minPrice").val();
            var max_price = $("#maxPrice").val();
            var get_max_price = $("#maxPrice").data('max-val');

            noUiSlider.create(stepsSlider, {
                start: [min_price, max_price],
                connect: true,
                tooltips: [true, wNumb({decimals: 0})],
                range: {
                    'min': 0,
                    'max': parseInt(get_max_price)
                }
            });

            stepsSlider.noUiSlider.on('update', function (values, handle) {
                inputs[handle].value = Math.round(values[handle]);
            });

            stepsSlider.noUiSlider.on('change', function (values, handle) {
                inputs[handle].value = Math.round(values[handle]);
                var my_form_id = $('#filter-data').get(0);
                filterForm(my_form_id);
            });

            $('.noUi-handle-lower').attr('aria-label','Set minimum price range')
            $('.noUi-handle-upper').attr('aria-label','Set maximum price range')
        });
    </script>
@stop

@include('front.footer')