@extends('front.front-app')

@include('front.header')

@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>

            <div class="sort-by">
                <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', 'gift', 'filter']) }}" method="POST" role="form"
                          id="filter-data" 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">{{ strtoupper(ShowLabelById(318, $lang_id)) }}</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">{{ strtoupper(ShowLabelById(317, $lang_id)) }}</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">{{ strtoupper(ShowLabelById(319, $lang_id)) }}</label>
                                </li>
                            </ul>
                        </div>
                        <div class="filter-list">

                            <div class="filter-item">
                                <div class="filter-head">
                                    <p>{{ ShowLabelById(84, $lang_id) }}</p>
                                </div>
                                <div class="filter-item-list">
                                    <ul>
                                        <li>
                                            <input name="gender[]" value="male" type="checkbox" id="male" {{$male}}>
                                            <label for="male" id="male"> {!! ShowLabelById(33, $lang_id) !!} </label>
                                        </li>
                                        <li>
                                            <input name="gender[]" value="female" type="checkbox"
                                                   id="female" {{$female}}>
                                            <label for="female"
                                                   id="female"> {!! ShowLabelById(32, $lang_id) !!} </label>
                                        </li>
                                        <li>
                                            <input name="gender[]" value="unisex" type="checkbox"
                                                   id="unisex" {{$unisex}}>
                                            <label for="unisex"
                                                   id="unisex"> {!! ShowLabelById(34, $lang_id) !!} </label>
                                        </li>
                                    </ul>
                                </div>
                            </div>

                            {{-- {{ dd($filters_elements) }}--}}

                            <div class="filter-item">
                                <div class="filter-head">
                                    <p>{{ ShowLabelById(87, $lang_id) }}</p>
                                </div>
                                <div class="filter-item-list">

                                    <ul>
                                        <li>
                                            <input name="age[]" value="0" type="checkbox" id="age-1" {{ $age_1 }}>
                                            <label for="age-1"> {{ ShowLabelById(151, $lang_id) }} </label>
                                        </li>
                                        <li>
                                            <input name="age[]" value="2" type="checkbox" id="age-2" {{ $age_2 }}>
                                            <label for="age-2"> {{ ShowLabelById(36, $lang_id) }} </label>
                                        </li>
                                        <li>
                                            <input name="age[]" value="3" type="checkbox" id="age-3" {{ $age_3 }}>
                                            <label for="age-3"> {{ ShowLabelById(38, $lang_id) }} </label>
                                        </li>
                                        <li>
                                            <input name="age[]" value="4" type="checkbox" id="age-4" {{ $age_4 }}>
                                            <label for="age-4"> {{ ShowLabelById(39, $lang_id) }} </label>
                                        </li>
                                        <li>
                                            <input name="age[]" value="5" type="checkbox" id="age-5" {{ $age_5 }}>
                                            <label for="age-5"> {{ ShowLabelById(40, $lang_id) }} </label>
                                        </li>
                                        <li>
                                            <input name="age[]" value="6" type="checkbox" id="age-6" {{ $age_6 }}>
                                            <label for="age-6"> {{ ShowLabelById(41, $lang_id) }} </label>
                                        </li>
                                        <li>
                                            <input name="age[]" value="7" type="checkbox" id="age-7" {{ $age_7 }}>
                                            <label for="age-7"> {{ ShowLabelById(42, $lang_id) }} </label>
                                        </li>
                                        <li>
                                            <input name="age[]" value="8" type="checkbox" id="age-8" {{ $age_8 }}>
                                            <label for="age-8"> {{ ShowLabelById(43, $lang_id) }} </label>
                                        </li>
                                        <li>
                                            <input name="age[]" value="9" type="checkbox" id="age-9" {{ $age_9 }}>
                                            <label for="age-9"> {{ ShowLabelById(44, $lang_id) }} </label>
                                        </li>
                                        <li>
                                            <input name="age[]" value="10" type="checkbox" id="age-10" {{ $age_10 }}>
                                            <label for="age-10"> {{ ShowLabelById(45, $lang_id) }} </label>
                                        </li>
                                    </ul>
                                </div>
                            </div>


                            <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"
                                               value="{{ $filters_elements && @$filters_elements['min_price'] ? $filters_elements['min_price'] : $min_price  }}">
                                        <div class="filter-price-line"></div>
                                        <input id="maxPrice" type="text" name="max_price"
                                               value="{{ $filters_elements && @$filters_elements['max_price'] ? $filters_elements['max_price'] : $max_price }}"
                                               data-max-val="{{ $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>
                @if(!empty(showSettingBodyByAlias('description-for-gifts-page', $lang_id)) && (is_null(request()->get('page')) || request()->get('page') == 1))
                    <div class="product-list-text common-text">
                        {!! showSettingBodyByAlias('description-for-gifts-page', $lang_id) !!}
                    </div>
                @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);
            });
        });
    </script>
@stop

@include('front.footer')