@extends('front.front-app')

@include('front.header')

@section('container')

    <div class="main-content">
        <div class="container">

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

            <div class="section gifts">
                <form method="get" action="{{url($lang, 'gifts')}}">
                    <div class="gifts-list">
                        <div class="gifts-item">
                            <div class="gifts-head">
                                <p>1. {{ ShowLabelById(286, $lang_id) }}</p>
                            </div>
                            <div class="gifts-content">
                                <div class="gifts-banners">
                                    <ul>
                                        <li>
                                            <input type="checkbox" name="gender[]" id="male" value="male">
                                            <label for="male">
                                                <span class="gifts-banners-title">
                                                    <p>{{ ShowLabelById(33, $lang_id) }}</p>
                                                </span>
                                                <img src="{{ asset('front-assets/img/gifts-banners-1.jpg') }}" alt="male">
                                            </label>
                                        </li>
                                        <li>
                                            <input type="checkbox" name="gender[]" id="female" value="female">
                                            <label for="female">
                                                <span class="gifts-banners-title">
                                                    <p>{{ ShowLabelById(32, $lang_id) }}</p>
                                                </span>
                                                <img src="{{ asset('front-assets/img/gifts-banners-2.jpg') }}" alt="female">
                                            </label>
                                        </li>
                                        <li>
                                            <input type="checkbox" name="gender[]" id="unisex" value="unisex" checked>
                                            <label for="unisex">
                                                <span class="gifts-banners-title">
                                                    <p>{{ ShowLabelById(34, $lang_id) }}</p>
                                                </span>
                                                <img src="{{ asset('front-assets/img/gifts-banners-3.jpg') }}" alt="unisex">
                                            </label>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="gifts-item">
                            <div class="gifts-head">
                                <p>2. {{ ShowLabelById(287, $lang_id) }}</p>
                            </div>
                            <div class="gifts-content">
                                <div class="gifts-years">
                                    <ul>
                                        <li>
                                            <input type="checkbox" name="age[]" id="gifts-years-1" value="0" checked>
                                            <label for="gifts-years-1">{{ ShowLabelById(151, $lang_id) }}</label>
                                        </li>
                                        <li>
                                            <input type="checkbox" name="age[]" id="gifts-years-2" value="2">
                                            <label for="gifts-years-2">{{ ShowLabelById(36, $lang_id) }}</label>
                                        </li>
                                        <li>
                                            <input type="checkbox" name="age[]" id="gifts-years-3" value="3">
                                            <label for="gifts-years-3">{{ ShowLabelById(38, $lang_id) }}</label>
                                        </li>
                                        <li>
                                            <input type="checkbox" name="age[]" id="gifts-years-4" value="4">
                                            <label for="gifts-years-4">{{ ShowLabelById(39, $lang_id) }}</label>
                                        </li>
                                        <li>
                                            <input type="checkbox" name="age[]" id="gifts-years-5" value="5">
                                            <label for="gifts-years-5">{{ ShowLabelById(40, $lang_id) }}</label>
                                        </li>
                                        <li>
                                            <input type="checkbox" name="age[]" id="gifts-years-6" value="6">
                                            <label for="gifts-years-6">{{ ShowLabelById(41, $lang_id) }}</label>
                                        </li>
                                        <li>
                                            <input type="checkbox" name="age[]" id="gifts-years-7" value="7">
                                            <label for="gifts-years-7">{{ ShowLabelById(42, $lang_id) }}</label>
                                        </li>
                                        <li>
                                            <input type="checkbox" name="age[]" id="gifts-years-8" value="8">
                                            <label for="gifts-years-8">{{ ShowLabelById(43, $lang_id) }}</label>
                                        </li>
                                        <li>
                                            <input type="checkbox" name="age[]" id="gifts-years-9" value="9">
                                            <label for="gifts-years-9">{{ ShowLabelById(44, $lang_id) }}</label>
                                        </li>
                                        <li>
                                            <input type="checkbox" name="age[]" id="gifts-years-10" value="10">
                                            <label for="gifts-years-10">{{ ShowLabelById(45, $lang_id) }}</label>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="gifts-item">
                            <div class="gifts-head">
                                <p>3. {{ ShowLabelById(89, $lang_id) }}</p>
                            </div>
                            <div class="gifts-content">
                                <div class="gifts-price">
                                    <div class="gifts-slider-container">
                                        <div class="gifts-price-slider" id="priceSlider"></div>
                                    </div>
                                    <div class="gifts-price-inpust">
                                        <input id="minPrice" type="text" name="min_price" value="{{ $min_price or 0 }}">
                                        <div class="gifts-price-line"></div>
                                        <input id="maxPrice" type="text" name="max_price" value="{{ $max_price }}" data-max-val="{{ $max_price }}">
                                        <div class="gifts-price-currency">
                                            <p>{{ ShowLabelById(6, $lang_id) }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="gifts-submit">
                        <button type="submit" class="button button--green">{{ ShowLabelById(90, $lang_id) }}</button>
                    </div>
                </form>
            </div>

        </div>
    </div>

@stop

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

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

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

            priceSlider.noUiSlider.on('update', function (values, handle) {
                inputs[handle].value = Math.round(values[handle]);
            });
        });
    </script>
@stop

@include('front.footer')