@extends(get_view('index'))
@section('title'){{ __('Ürünler') }} - @endsection
@section('header')
@endsection
@section('content')

@include(get_view('components.pages.page-title'), ['title' => __('Ürünler') ])

<main>
    <div class="axil-shop-area axil-section-gap bg-color-white">
        <div class="container">
            <div class="row gx-10">
                <div class="col-lg-3">
                    <div class="axil-shop-sidebar">
                        <div class="d-lg-none">
                            <button class="sidebar-close filter-close-btn"><i class="fas fa-times"></i></button>
                        </div>
                        @include(get_view('components.search.filter'))
                    </div>
                </div>

                <div class="col-lg-9">

                    <div class="row">
                        <div class="col-lg-12">
                            <div class="axil-shop-top mb--40">
                                <div class="d-lg-none">
                                    <button class="product-filter-mobile filter-toggle"><i class="fas fa-filter"></i> {{ __('Filtrele') }}</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- row -->
                    <div class="row row--15">

                        @include(get_view('components.product.list'))

                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

@endsection
@section('footer')
<script>
    $('#slider-range').slider({
        range: true,
        min: 0,
        max: 15000,
        values: [{{ request()->start_price ?? 0 }}, {{ request()->end_price ?? 15000 }}],
        slide: function(event, ui) {
            $('#amount').val('₺' + ui.values[0] + ' - ₺' + ui.values[1]);
            $('input[name="start_price"]').val(ui.values[0]);
            $('input[name="end_price"]').val(ui.values[1]);
        }
    });  
    $('#amount').val('₺' + $('#slider-range').slider('values', 0) +
                '  ₺' + $('#slider-range').slider('values', 1));
</script>
<script>
    //price_range if change
    $(document).on('change', 'input[name="price_range"]', function() {
        var price_range = $(this).val();
        var price_range_array = price_range.split('-');
        $('input[name="start_price"]').val(price_range_array[0]);
        $('input[name="end_price"]').val(price_range_array[1]);
    });
</script>
@endsection