@extends('vendor.site-bases.website.layouts.master')

@section('title', isset($category) ? sprintf('%s - %s', trans('title.products'), $category->title ?? $brand->title ?? null) : trans('title.products'))

@section('page_title', trans('title.products'))

@section('breadcrumbs')
    {!! Breadcrumbs::render('products', $category ?? $brand ?? null) !!}
@endsection

@section('content')
    <section class="products_page container">
        <div class="filter_link filter_mobile">
            <a href="#!">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 14">
                    <path id="Path_4802" data-name="Path 4802" d="M15.8,3,19,7.118H16.6V17H15V7.118H12.6Zm-4,12.353V17H3V15.353Zm0-5.765v1.647H3V9.588ZM10.2,3.824V5.471H3V3.824Z" transform="translate(-3 -3)"/>
                </svg>
                @lang('site.filter')
            </a>
        </div>
        <aside class="products_filters">
            <div class="products_filters-bg"></div>
            <div class="products_filters-container">
                <div class="products_filters-close filter_mobile">
                    <span></span>
                    <span></span>
                </div>
                <div class="products_filters">
                    <div class="filter_link">
                        <a href="{{ url('/products?sales=1') }}">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 14">
                                <path id="Path_4802" data-name="Path 4802" d="M15.8,3,19,7.118H16.6V17H15V7.118H12.6Zm-4,12.353V17H3V15.353Zm0-5.765v1.647H3V9.588ZM10.2,3.824V5.471H3V3.824Z" transform="translate(-3 -3)"/>
                            </svg>
                            @lang('site.sales_filter')
                        </a>
                    </div>
                    {{-- <div class="filter_link">
                        <a href="{{ url('/products?required=1') }}">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 14">
                                <path id="Path_4802" data-name="Path 4802" d="M15.8,3,19,7.118H16.6V17H15V7.118H12.6Zm-4,12.353V17H3V15.353Zm0-5.765v1.647H3V9.588ZM10.2,3.824V5.471H3V3.824Z" transform="translate(-3 -3)"/>
                            </svg>
                            @lang('site.required_filter')
                        </a>
                    </div> --}}
                    <div class="filter_link">
                        <a href="{{ url('/products?sale_with_complect=1') }}">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 14">
                                <path id="Path_4802" data-name="Path 4802" d="M15.8,3,19,7.118H16.6V17H15V7.118H12.6Zm-4,12.353V17H3V15.353Zm0-5.765v1.647H3V9.588ZM10.2,3.824V5.471H3V3.824Z" transform="translate(-3 -3)"/>
                            </svg>
                            @lang('site.sale_with_complect')
                        </a>
                    </div>
                    <form action="" id="priceForm">
                        <div class="categories_filters categories_list">
                            <h4>
                                @lang('site.price')
                            </h4>
                            <div class="price_filter">
                                <div class="from_to">
                                    <input type="number" class="price_input" name="price_from" value="{{ request()->input('price_from') }}" id="price_from" placeholder="-დან">
                                    <input type="number" class="price_input" name="price_to" value="{{ request()->input('price_to') }}" id="price_to" placeholder="-მდე">
                                </div>
                                <div data-role="rangeslider" class="range">
                                    <input type="text" class="js-range-slider" />
                                </div>
                            </div>
                        </div>
                    </form>
                    @if ($categories->count() > 0)
                        <div class="categories_filters categories_list">
                            <h4>
                                @lang('site.categories')
                            </h4>
                            <ul>
                                @foreach ($categories as $first)
                                    <li class="{{ $first->checked($category ?? null) ? 'active' : '' }}">
                                        <a href="{{ $first->url }}" class="checkbox">
                                            {{ $first->title }}
                                        </a>
                                        @if ($first->children->count() > 0)
                                            <span class="cat_dropdown {{ $first->checked($category ?? null) ? 'active' : '' }}">
                                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5 8">
                                                    <path id="Path_1704" data-name="Path 1704" d="M11.5,11.757,14,14.423l-1.25,1.334-3.75-4,3.75-4L14,9.091Z" transform="translate(-9 -7.757)"/>
                                                </svg>
                                            </span>
                                        @endif
                                        @if ($first->children->count() > 0)
                                            <ul class="{{ $first->checked($category ?? null) ? 'active' : '' }}">
                                                @foreach ($first->children as $second)
                                                    <li class="{{ $second->checked($category ?? null) ? 'active' : '' }}">
                                                        <a href="{{ $second->url }}" class="checkbox">
                                                            {{ $second->title }}
                                                        </a>
                                                        @if ($second->children->count() > 0)
                                                            <span class="cat_dropdown_inner {{ $second->checked($category ?? null) ? 'active' : '' }}">
                                                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5 8">
                                                                    <path id="Path_1704" data-name="Path 1704" d="M11.5,11.757,14,14.423l-1.25,1.334-3.75-4,3.75-4L14,9.091Z" transform="translate(-9 -7.757)"/>
                                                                </svg>
                                                            </span>
                                                        @endif
                                                        @if ($second->children->count() > 0)
                                                            <ul class="{{ $second->checked($category ?? null) ? 'active' : '' }}">
                                                                @foreach ($second->children as $third)
                                                                    <li class="{{ $third->checked($category ?? null) ? 'active' : '' }}">
                                                                        <a href="{{ $third->url }}" class="checkbox">
                                                                            {{ $third->title }}
                                                                        </a>
                                                                    </li>
                                                                @endforeach
                                                            </ul>
                                                        @endif
                                                    </li>
                                                @endforeach
                                            </ul>
                                        @endif
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    @isset($propertyTypesWithProperty)
                        <form action="" id="filter-form-property">
                            @foreach ($propertyTypesWithProperty as $propertyType)
                                @if ($propertyType->properties->count() > 0)
                                    <div class="categories_filters categories_list properties">
                                        <div class="properties_title_clear">
                                            <h4>
                                                {{ $propertyType->title }}
                                            </h4>
                                            <button type="button" class="clear_property">
                                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                                    <g id="Group_7133" data-name="Group 7133" transform="translate(-1015 -459)">
                                                    <path id="Path_4636" data-name="Path 4636" d="M0,0H20V20H0Z" transform="translate(1015 459)" fill="none"></path>
                                                    <circle id="Ellipse_81" data-name="Ellipse 81" cx="8" cy="8" r="8" transform="translate(1017 461)" fill="#e8000d"></circle>
                                                    <path id="Path_4637" data-name="Path 4637" d="M9.636,8.747l3.111-3.111.889.889L10.525,9.636l3.111,3.111-.889.889L9.636,10.525,6.525,13.636l-.889-.889L8.747,9.636,5.636,6.525l.889-.889Z" transform="translate(1015.364 459.364)" fill="#fff"></path>
                                                    </g>
                                                </svg>
                                                @lang('site.clear')
                                            </button>
                                        </div>
                                        <ul>
                                            @foreach ($propertyType->properties as $property)
                                                <li class="{{ $property->checked() ? 'active' : '' }}">
                                                    <label class="checkbox {{ $property->products_count == 0 ? 'disabled' : '' }}">
                                                        {{ $property->title }}
                                                        <input {{ $property->products_count == 0 ? 'disabled' : '' }} type="checkbox" class="filter-checkbox filter-checkbox-property" name="properties[]" value="{{ $property->id }}" {{ $property->checked() ? 'checked' : '' }}>
                                                        <span class="checkmark"></span>
                                                    </label>
                                                </li>
                                            @endforeach
                                        </ul>
                                        @if ($propertyType->properties->count() > 6)
                                            <div class="catgories_more">
                                                @lang('site.view_more')
                                            </div>
                                            <div class="catgories_less">
                                                @lang('site.view_less')
                                            </div>
                                        @endif
                                    </div>
                                @endif
                            @endforeach
                            <input type="hidden" name="page_y" id="page_y">
                        </form>
                    @endisset

                    @if (!isset($category) && $brands->count() > 0)
                        <div class="categories_filters brends_list">
                            <h4>
                                @lang('site.brands')
                            </h4>
                            <div class="search_for_brends">
                                <svg xmlns="http://www.w3.org/2000/svg" id="prefix__Component_1_1" data-name="Component 1 – 1" viewBox="0 0 24 24">
                                    <path id="prefix__Path_40" d="M0 0h24v24H0z" data-name="Path 40" style="fill:none"></path>
                                    <path id="prefix__Path_41" d="M10.9 2A8.9 8.9 0 1 1 2 10.9 8.908 8.908 0 0 1 10.9 2zm0 15.831A6.926 6.926 0 1 0 3.979 10.9a6.925 6.925 0 0 0 6.921 6.931zm8.4.07l2.8 2.8-1.4 1.4-2.8-2.8z" data-name="Path 41" transform="translate(.116 .116)"></path>
                                </svg>
                                <input type="search" id="search-brands" placeholder="@lang('site.search_brand')">
                            </div>
                            <ul class="brands-listing">
                                @foreach ($brands as $item)
                                    <li class="{{ isset($brand) && $brand->id == $item->id ? 'active' : '' }}">
                                        <a href="{{ $item->url }}" class="checkbox">
                                            {{ $item->title }}
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                <div>
            </div>
        </aside>
        <div class="products_list grid">
            <div class="view_filters">
                @if (Request::route()->getName() != 'products')
                    <div class="sort_by">
                        <span>@lang('site.sort')
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 4">
                                <path id="prefix__Path_113" d="M12 14l-4-4h8z" data-name="Path 113" transform="translate(-8 -10)"></path>
                            </svg>
                        </span>
                        <ul>
                            @foreach (config('custom.products.sorts') as $key => $item)
                                <li class="{{ $key == request()->input('sort_by') ? 'active' : '' }}"><a href="{{ request()->fullUrlWithQuery(['sort_by' => $key]) }}">{{ trans('site.' . $key) }}</a></li>
                            @endforeach
                        </ul>
                    </div>
                @endif
                <div class="items_count">
                    <span>
                        <b>
                            {{ request()->input('per_page', config('custom.products.per_pages.0')) }}
                        </b>
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 4">
                            <path id="prefix__Path_113" d="M12 14l-4-4h8z" data-name="Path 113" transform="translate(-8 -10)"></path>
                        </svg>
                    </span>
                    <ul>
                        @foreach (config('custom.products.per_pages') as $perPage)
                            <li><a href="{{ request()->fullUrlWithQuery(['per_page' => $perPage]) }}">{{ $perPage }}</a></li>
                        @endforeach
                    </ul>
                </div>
                <ul class="view_style">
                    <li data-style="grid">
                        <svg xmlns="http://www.w3.org/2000/svg" width="23" height="16" viewBox="0 0 23 16">
                            <g>
                                <g>
                                    <g>
                                        <path d="M2 0h6a2 2 0 0 1 0 4H2a2 2 0 1 1 0-4z"></path>
                                    </g>
                                    <g>
                                        <path d="M15 0h6a2 2 0 0 1 0 4h-6a2 2 0 1 1 0-4z"></path>
                                    </g>
                                </g>
                                <g>
                                    <g>
                                        <path d="M2 6h6a2 2 0 1 1 0 3.999H2a2 2 0 1 1 0-4z"></path>
                                    </g>
                                    <g>
                                        <path d="M15 6h6a2 2 0 1 1 0 3.999h-6a2 2 0 1 1 0-4z"></path>
                                    </g>
                                </g>
                                <g>
                                    <g>
                                        <path d="M2 12h6a2 2 0 0 1 0 4H2a2 2 0 0 1 0-4z"></path>
                                    </g>
                                    <g>
                                        <path d="M15 12h6a2 2 0 0 1 0 4h-6a2 2 0 0 1 0-4z"></path>
                                    </g>
                                </g>
                            </g>
                        </svg>
                    </li>
                    <li data-style="list">
                        <svg xmlns="http://www.w3.org/2000/svg" width="23" height="16" viewBox="0 0 23 16">
                            <g>
                                <g>
                                    <path d="M2.226 3.427C1.002 3.427 0 2.657 0 1.713 0 .77 1.002 0 2.226 0h18.548C21.999-.001 23 .77 23 1.713c0 .944-1.001 1.714-2.226 1.714zm0 6.287C1.002 9.713 0 8.941 0 7.998c0-.942 1.002-1.714 2.226-1.714h18.548C21.999 6.285 23 7.057 23 8c0 .943-1.001 1.715-2.226 1.715zm0 6.285C1.002 16 0 15.228 0 14.285s1.002-1.714 2.226-1.714h18.548c1.225 0 2.226.771 2.226 1.714S22 15.999 20.774 15.999z"></path>
                                </g>
                            </g>
                        </svg>
                    </li>
                </ul>
            </div>
            <div class="products_list_inner">
                @foreach ($products as $item)
                    @include('partials.product-item', $item)
                @endforeach
            </div>
            <div class="pagination">
                {{ $products->appends(request()->except('page'))->links() }}
            </div>
        </div>
    </section>
@endsection

@section('style')
    <link rel="stylesheet" href="{{ asset('assets/client/css/ion.rangeSlider.min.css') }}">
@endsection

@section('scripts')
    <script src="{{ asset('assets/client/js/ion.rangeSlider.min.js') }}"></script>
    <script>
        $().ready(function () {
            const urlParams = new URLSearchParams(window.location.search);
            const pageY = urlParams.get('page_y');
            const viewportHeight = window.innerHeight;
            window.scrollTo(0, pageY - (viewportHeight / 2));
        });
        function checkboxChange(params) {
            $('.filter-checkbox-property').change(function (e) {
                $('#filter-form-property').submit();
            });
        }
        $('.filter-checkbox-property').click(function (e) {
            $('#page_y').val(e.pageY);
            checkboxChange();
        })
        $(".js-range-slider").ionRangeSlider({
            type: "double",
            min: 0,
            max: {{ $maxPrice ?: 10000 }},
            from: {{ request()->has('price_from') ? intval(request()->input('price_from')) : 0 }},
            to: {{ request()->has('price_to') ? intval(request()->input('price_to')) : ($maxPrice ? $maxPrice / 2 : 5000) }},
            grid: false,
            onFinish: function (e) {
                $('#price_from').val(e.from);
                $('#price_to').val(e.to);
                $('#priceForm').submit();
            }
        });

        $('#search-brands').keyup(function () {
            $.ajax({
                url:"{{ route('get.brands') }}",
                type:"POST",
                dataType: "json",
                data: {
                    _token: '{{ csrf_token() }}',
                    brand_id: '{{ $brand->id ?? "" }}',
                    q: this.value,
                }
            }).done(function(data){
                $('.brands-listing').html(data);
            });
        });
        $('.price_input').change(function () {
            $('#priceForm').submit();
        });

        $('.clear_property').click(function () {
            let url = location.href;
            if (url.includes('properties')) {
                let checkedIds = [];
                $(this).parent().parent().find('li').each(function () {
                    let checkbox = $(this).find('input');
                    if (checkbox.is(':checked')) {
                        checkedIds.push(checkbox.val());
                    }
                });
                let urls = url.split('?');
                let queryParams = urls[1].split('&');
                checkedIds.forEach(function (id) {
                    let prop = 'properties%5B%5D=' + id;
                    const index = queryParams.indexOf(prop);
                    if (index > -1) {
                        queryParams.splice(index, 1);
                    }
                });
                location.href = urls[0] + '?' + queryParams.join('&');
            }
        });
    </script>
@endsection