@extends('front.app')
@section('meta')
    <x-meta :meta="$meta"/>
@stop

@section('container')

    <div class="page-content">

        <div class="breadcrumbs-wrapper">
            <div class="container">
                {{ Breadcrumbs::render('goods-subject', $goods_subject) }}
            </div>
        </div>

        <div class="catalog{{ !count($goods_items_list) ? ' basket-emptyt' : '' }}">
            <div class="container">
                @if($goods_subject->itemByLang->img_top_banner)
                    <div class="catalog-top-banner">
                        <a href="{{$goods_subject->link_top_banner ?? ''}}">
                            <img src="{{asset('upfiles/goods-subject/' . $goods_subject->itemByLang->img_top_banner)}}" alt="{{$goods_subject->itemByLang->name ?? ''}}">
                        </a>
                    </div>
                @endif
                <div class="catalog-inner">
                    <form action="{{ url(LANG, ['catalog','filter']) }}" class="catalog-filter" data-form-id="filter-data"
                          method="post" data-parent="{{ $goods_subject->alias ?? '' }}" id="filter-data">
                        @csrf

                        <div class="catalog-filter-head">
                            <div class="catalog-filter-head-icon">
                                <img src="{{asset('front-assets/img/icons/filter.svg')}}" alt="Filter">
                            </div>
                            <div class="catalog-filter-head-title">{{ShowLabelById(122)}}</div>
                            <button type="button" class="catalog-filter-close">
                                <svg>
                                    <use xlink:href="{{asset('front-assets/svg/sprite.svg#close')}}"></use>
                                </svg>
                            </button>
                        </div>
                        <a href="{{ url()->current() }}" class="filter-clear">
                            <img src="{{ asset('front-assets/img/icons/clear.svg') }}" alt="Clear">
                            <span>{{ ShowLabelById(115) }}</span>
                        </a>
                        <div class="filter-list">
                            <div class="filter-item">
                                <div class="filter-head">{{ ShowLabelById(20) }}</div>
                                <div class="filter-content">
                                    <div class="catalog-filter-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"
                                                   value="{{ $min_price ?? 0 }}">
                                            <div class="filter-price-line"></div>
                                            <input id="maxPrice" type="text" name="max_price"
                                                   value="{{ $max_price ?? $get_max_price }}"
                                                   data-max-val="{{ $get_max_price }}">
                                            <div class="filter-price-currency">
                                                <p>{{ ShowLabelById(23) }}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @if(!empty($all_subjects) && count($all_subjects) && request()->segment(3) == 'sale')
                                <div class="filter-item">
                                    <div class="filter-head">{{ ShowLabelById(267) }}</div>
                                    <div class="filter-content">
                                        <ul>
                                            @foreach($all_subjects as $subject_param)
                                                <li>
                                                    <input
                                                        type="checkbox"
                                                        name="c[]"
                                                        id="id-{{ $subject_param->id ?? '' }}"
                                                        value="{{ $subject_param->id ?? '' }}"
                                                    @if(!empty($filters_elements) && !empty($filters_elements['c']))
                                                        {{ in_array($subject_param->id, $filters_elements['c']) ? 'checked' : '' }}
                                                        @endif
                                                    >
                                                    <label
                                                        for="id-{{ $subject_param->id ?? '' }}">
                                                        {{ $subject_param->itemByLang->name ?? '' }}
                                                    </label>
                                                </li>
                                            @endforeach
                                        </ul>
                                    </div>
                                </div>
                            @endif

                            @if(!empty($all_discounts) && count($all_discounts) && request()->segment(3) == 'sale')
                                <div class="filter-item">
                                    <div class="filter-head">{{ ShowLabelById(269) }}</div>
                                    <div class="filter-content">
                                        <ul>
                                            @foreach($all_discounts as $discounts_param)
                                                <li>
                                                    <input
                                                        type="checkbox"
                                                        name="r[]"
                                                        id="sale-id-{{ $discounts_param ?? '' }}"
                                                        value="{{ $discounts_param ?? '' }}"
                                                    @if(!empty($filters_elements) && !empty($filters_elements['r']))
                                                        {{ in_array($discounts_param, $filters_elements['r']) ? 'checked' : '' }}
                                                        @endif
                                                    >
                                                    <label
                                                        for="sale-id-{{ $discounts_param ?? '' }}">
                                                        {{ $discounts_param . '%' ?? '' }}
                                                    </label>
                                                </li>
                                            @endforeach
                                        </ul>
                                    </div>
                                </div>
                            @endif

                            @if(!empty($parameters) && count($parameters))
                                @foreach($parameters as $one_parameter)
                                    @switch($one_parameter->parametr_type)
                                        @case('checkbox')
                                        @case('select')
                                        @case('radio')
                                            @if(!empty($parameters_value[$one_parameter->id]) && count($parameters_value[$one_parameter->id]))
                                                <div class="filter-item{{ $one_parameter->is_color == 1 ? ' filter-color' : '' }}{{ $one_parameter->start_open == 0 ? ' closed' : '' }}">
                                                    <div class="filter-head">{{ $one_parameter->itemByLang->name ?? '' }}</div>
                                                    <div class="filter-content">
                                                        <ul>
                                                            @foreach($parameters_value[$one_parameter->id] as $one_parameter_value)
                                                                <li>
                                                                    <input type="checkbox" name="p_{{ $one_parameter_value->goods_parametr_id ?? '' }}[]"
                                                                           id="id-{{ $one_parameter_value->id ?? '' }}"
                                                                           value="{{ $one_parameter_value->id ?? '' }}"
                                                                    @if(!empty($filters_elements['p_'.$one_parameter_value->goods_parametr_id]))
                                                                        {{ !empty($filters_elements) && in_array($one_parameter_value->id, $filters_elements['p_'.$one_parameter_value->goods_parametr_id]) ? 'checked' : '' }}
                                                                        @endif>
                                                                    <label for="id-{{ $one_parameter_value->id ?? '' }}">
                                                                        {{ $one_parameter_value->itemByLang->name ?? '' }}
                                                                        @if($one_parameter->is_color == 1)
                                                                            <span
                                                                                style="color: {{ $one_parameter_value->color_code ?? '' }}"></span>
                                                                        @endif
                                                                    </label>
                                                                </li>
                                                            @endforeach
                                                        </ul>
                                                    </div>
                                                </div>
                                            @endif
                                            @break
                                        @default
                                            @break
                                    @endswitch
                                @endforeach
                            @endif
                        </div>

                    </form>
                    <div class="catalog-content">

                        @include('front.templates.timer-promo')

                        <div class="catalog-sort">
                            <div class="catalog-sort-icon">
                                <img src="{{ asset('front-assets/img/icons/sort.svg') }}" alt="Sort">
                            </div>
                            <div class="catalog-sort-item">
                                <label for="sorting">{{ ShowLabelById(116) }}:</label>
                                <select name="sorting" class="change-sorting" id="sorting">
                                    <option value="" {{ !$sorting? 'selected' : '' }}>{{ ShowLabelById(117) }}</option>
                                    <option value="price_asc" {{ $sorting && $sorting == 'price_asc' ? 'selected' : '' }}>{{ ShowLabelById(118) }}</option>
                                    <option value="price_desc" {{ $sorting && $sorting == 'price_desc' ? 'selected' : '' }}>{{ ShowLabelById(119) }}</option>
                                    <option value="name_asc" {{ $sorting && $sorting == 'name_asc' ? 'selected' : '' }}>{{ ShowLabelById(120) }}</option>
                                    <option value="name_desc" {{ $sorting && $sorting == 'name_desc' ? 'selected' : '' }}>{{ ShowLabelById(121) }}</option>
                                </select>
                            </div>
                            <div class="catalog-sort-item">
                                <label for="goods-per-page">{{ ShowLabelById(108) }}:</label>
                                <select name="goods_per_page" class="change-goods-per-page" id="goods-per-page">
                                    <option value="20" {{ $count_per_page == 20 ? 'selected' : '' }}>20</option>
                                    <option value="40" {{ $count_per_page == 40 ? 'selected' : '' }}>40</option>
                                    <option value="60" {{ $count_per_page == 60 ? 'selected' : '' }}>60</option>
                                </select>
                            </div>
                        </div>
                        <div class="catalog-sort-mobile">
                            <button type="button" class="open-sort">
                                <img src="{{ asset('front-assets/img/icons/sort.svg') }}" alt="Sort">
                                <span>{{ !$sorting ? ShowLabelById(117) : getEnumValueName($sorting) }}</span>
                            </button>
                            <div class="sort-mobile-modal">
                                <button type="button" class="sort-mobile-close">
                                    <svg>
                                        <use xlink:href="{{ asset('front-assets/svg/sprite.svg#close') }}"></use>
                                    </svg>
                                </button>
                                <div class="sort-mobile-title">{{ ShowLabelById(116) }}:</div>
                                <div class="sort-mobile-list">
                                    <ul>
                                        <li>
                                            <a href="javascript:;" class="sort-mobile-item li-sorting-items{{ !$sorting? ' active' : '' }}">{{ ShowLabelById(117) }}</a>
                                        </li>
                                        <li>
                                            <a href="javascript:;" class="sort-mobile-item li-sorting-items{{ $sorting && $sorting == 'price_asc' ? ' active' : '' }}" data-sorting="price_asc">{{ ShowLabelById(118) }}</a>
                                        </li>
                                        <li>
                                            <a href="javascript:;" class="sort-mobile-item li-sorting-items{{ $sorting && $sorting == 'price_desc' ? ' active' : '' }}" data-sorting="price_desc">{{ ShowLabelById(119) }}</a>
                                        </li>
                                        <li>
                                            <a href="javascript:;" class="sort-mobile-item li-sorting-items{{ $sorting && $sorting == 'name_asc' ? ' active' : '' }}" data-sorting="name_asc">{{ ShowLabelById(120) }}</a>
                                        </li>
                                        <li>
                                            <a href="javascript:;" class="sort-mobile-item li-sorting-items{{ $sorting && $sorting == 'name_desc' ? ' active' : '' }}" data-sorting="name_desc">{{ ShowLabelById(121) }}</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <button type="button" class="open-filter">
                                <img src="{{ asset('front-assets/img/icons/filter.svg') }}" alt="Filter">
                                <span>{{ ShowLabelById(122) }}</span>
                            </button>
                        </div>

                        <div class="catalog-list render-products-list">
                            @if(!empty($goods_items_list) && count($goods_items_list))
                                @include('front.ajax.products-list', ['goods_items_list' => $goods_items_list])
                            @else
                                <div class="container">
                                    <div class="basket-inner">
                                        <div class="basket-empty-icon">
                                            <img src="{{ asset('front-assets/img/icons/basket-end-1.svg') }}"
                                                 alt="Empty List">
                                        </div>
                                        <div class="basket-empty-title">{{ ShowLabelById(106) }}</div>
                                        <div class="basket-empty-link">
                                            <a href="{{ route('/') }}">{{ ShowLabelById(28) }}</a>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @push('other-scripts')
        <script>
            $(document).ready(function () {
                let priceSlider = document.getElementById('priceSlider');
                let min_input = document.getElementById('minPrice');
                let max_input = document.getElementById('maxPrice');
                let inputs = [min_input, max_input];

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

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

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

                priceSlider.noUiSlider.on('change', function (values, handle) {
                    inputs[handle].value = Math.round(values[handle]);
                    let my_form_id = $('#filter-data').get(0);
                    filterForm(my_form_id);
                });
            });
        </script>
    @endpush

    @include('front.templates.script-timer-promo')
@stop