@php use App\Models\Project;

    $seoKey = 'specialists';
@endphp

@extends('app')
@section('content')
<main>


    <section class="intro">
        <div class="container">
            <div class="intro__wrapper">
                <h1 class="secondary-title">
    {{
        $subcategory_query
            ? mb_ucfirst(mb_strtolower($subcategory_query->title))
            : ($category_query
                ? mb_ucfirst(mb_strtolower($category_query->title))
                : 'Все специалисты')
    }} в {{ $declinedCity ?? 'Москве' }}
	                </h1>
                <div class="breadcrumbs">
                    <div class="breadcrumbs__inner">
                        <ul class="breadcrumbs__list mobile-overflow">
                            <li class="breadcrumbs__list-item">
                                <a href="{{route('showHomePage')}}">Главная</a>
                            </li>
                            @if($slug)
                                <li class="breadcrumbs__list-item">
                                    <a href="{{ route('showCatalogPage', ['city' => ($slug ?? null) , 'category' => null,'subcategory' => null]) }}">
                                        {{ $city }}
                                    </a>
                                </li>
                            @endif

                            @if($category_query)
                                <li class="breadcrumbs__list-item">
                                    <a href="{{ route('showCatalogPage', ['city' => ($slug ?? null) , 'category' => ($category_query ? $category_query->slug : null),'subcategory' => null]) }}">
                                        {{ $category_query ? mb_ucfirst(mb_strtolower($category_query->title)) : 'Категория не указана' }}
                                    </a>
                                </li>
                            @endif
                            @if($subcategory_query)
                                <li class="breadcrumbs__list-item">
                                    <a href="{{ route('showCatalogPage', ['city' => ($slug ?? null) , 'category' => ($category_query ? $category_query->slug : null),'subcategory' => ($subcategory_query ? $subcategory_query->slug : null)]) }}">
                                        {{ mb_ucfirst(mb_strtolower($subcategory_query->title)) }}
                                    </a>
                                </li>
                            @endif

                        </ul>
                    </div>
                </div>
            </div>

        </div>
    </section>
    <section class="catalog">
        <div class="container">
            <div class="catalog__inner">
                <button class="acide__btn">Фильтр</button>
                <aside class="catalog__inner-aside aside-filter hidden" style="max-width: 267px">
                    <div class="tabs-container">
                        <div id="filter-1" class="tabs-content aside-filter__tabs-content tabs-content--active">
                            <form class="aside-filter__form" id="filterForm" method="GET"
                                  action="{{ route('showCatalogPage') }}">
                                <p class="aside-filter__title">Город</p>
                                <div class="catalog__drop drop">
                                    <div class="drop-select-catalog drop-select">
                                        @if($city)
                                            <span>{{$city}}</span>
                                        @else
                                            <span>Москва</span>
                                        @endif
                                    </div>
                                    <ul class="drop-list">
                                        <div class="search">
                                            <i class="uil uil-search">
                                                <svg width="17px" height="17px" viewBox="0 0 32 32" version="1.1"
                                                     xmlns="http://www.w3.org/2000/svg"
                                                     xmlns:xlink="http://www.w3.org/1999/xlink"
                                                     xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
                                                     fill="#c6c3c3" stroke="#c6c3c3">
                                                    <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                                                    <g id="SVGRepo_tracerCarrier" stroke-linecap="round"
                                                       stroke-linejoin="round"></g>
                                                    <g id="SVGRepo_iconCarrier"><title>search</title>
                                                        <g id="Page-1" stroke="none" stroke-width="1" fill="none"
                                                           fill-rule="evenodd" sketch:type="MSPage">
                                                            <g id="Icon-Set" sketch:type="MSLayerGroup"
                                                               transform="translate(-256.000000, -1139.000000)"
                                                               fill="#c2c2c2">
                                                                <path d="M269.46,1163.45 C263.17,1163.45 258.071,1158.44 258.071,1152.25 C258.071,1146.06 263.17,1141.04 269.46,1141.04 C275.75,1141.04 280.85,1146.06 280.85,1152.25 C280.85,1158.44 275.75,1163.45 269.46,1163.45 L269.46,1163.45 Z M287.688,1169.25 L279.429,1161.12 C281.591,1158.77 282.92,1155.67 282.92,1152.25 C282.92,1144.93 276.894,1139 269.46,1139 C262.026,1139 256,1144.93 256,1152.25 C256,1159.56 262.026,1165.49 269.46,1165.49 C272.672,1165.49 275.618,1164.38 277.932,1162.53 L286.224,1170.69 C286.629,1171.09 287.284,1171.09 287.688,1170.69 C288.093,1170.3 288.093,1169.65 287.688,1169.25 L287.688,1169.25 Z"
                                                                      id="search" sketch:type="MSShapeGroup"></path>
                                                            </g>
                                                        </g>
                                                    </g>
                                                </svg>
                                            </i>
                                            <input id="cityFilterInput" spellcheck="false" type="text"
                                                   placeholder="Введите город" value="{{ $selectedCity ?: ($city ?: 'Москва') }}"
                                                   oninput="searchСityCatalog(this.value)">
                                        </div>
                                        <!-- Список городов -->
                                        {{-- @foreach($cities as $city1)
                                            <li class="city-list__item" data-slug="{{$city1->slug}}" data-city="{{ $city1->title }}">{{ $city1->title }}</li>
                                        @endforeach --}}
                                    </ul>
                                </div>

                                <input type="hidden" name="city" id="selected-city" value="{{ $selectedCity }}">

                                <ul class="aside-filter__list">
                                    <li class="aside-filter__item">
                                        <p class="aside-filter__title">Специалисты</p>




{{--                                        @dd(request('subcategory'))--}}
                                        <div class="aside-filter__content">
                                            <div class="aside-filter__box ">
                                                @foreach($categories as $category)
                                                    <label class="checkbox__item">
                                                        <input type="radio" id="category-{{$category->slug}}" name="category"
                                                               value="{{$category->slug}}" class="checkbox__input"
                                                               onclick="handleCategoryClick('{{$category->slug}}', event)"
                                                            {{ request('category') == $category->slug ? 'checked' : '' }}>
                                                        <span class="fake"></span>
                                                        <span class="checkbox__name">{{$category->title}}</span>
                                                    </label>
                                                    <div class="subcategory spec_check" id="subcategories-{{$category->slug}}"
                                                         style="margin-left:8px;{{ $category_query && $category_query->slug == $category->slug ? 'display: block;' : 'display: none;' }}">
                                                        @foreach($category->categories as $subcategory)

                                                            <label class="checkbox__item ">
                                                                <input type="radio" name="subcategory"
                                                                       value="{{$subcategory->slug}}"
                                                                       class="checkbox__input"
                                                                       {{ request('subcategory') == $subcategory->slug ? 'checked' : '' }}
                                                                       onchange="checkedSubCategory('{{$subcategory->slug}}')"
                                                                >
                                                                <span class="fake"></span>
                                                                <span class="checkbox__name">{{$subcategory->title}}</span>
                                                            </label>
                                                        @endforeach
                                                    </div>
                                                @endforeach

                                            </div>
                                        </div>
                                    </li>
                                    <li class="aside-filter__item spec_check">
                                        <p class="aside-filter__title ">Бюджет</p>
                                        <div class="aside-filter__content">
                                            <div class="aside-filter__box">
                                                <label class="checkbox__item">
                                                    <input type="radio" name="price" value="all"
                                                           class="checkbox__input budjet"
                                                           {{ request('price') == 'all' ? 'checked' : '' }}
                                                           onchange="change_price(this)">
                                                    <span class="fake"></span>
                                                    <span class="checkbox__name">Любой бюджет</span>
                                                </label>
                                                <label class="checkbox__item">
                                                    <input type="radio" name="price" value="5000000"
                                                           class="checkbox__input budjet"
                                                           {{ request('price') == '5000000' ? 'checked' : '' }}
                                                           onchange="change_price(this)">
                                                    <span class="fake"></span>
                                                    <span class="checkbox__name">₽₽₽₽ — готов потратиться</span>
                                                </label>

                                                <label class="checkbox__item">
                                                    <input type="radio" name="price" value="1000000"
                                                           class="checkbox__input budjet"
                                                           {{ request('price') == '1000000' ? 'checked' : '' }}
                                                           onchange="change_price(this)">
                                                    <span class="fake"></span>
                                                    <span class="checkbox__name">₽₽₽ — выше среднего</span>
                                                </label>

                                                <label class="checkbox__item">
                                                    <input type="radio" name="price" value="500000"
                                                           class="checkbox__input budjet"
                                                           {{ request('price') == '500000' ? 'checked' : '' }}
                                                           onchange="change_price(this)">
                                                    <span class="fake"></span>
                                                    <span class="checkbox__name">₽₽ — средний бюджет</span>
                                                </label>

                                                <label class="checkbox__item">
                                                    <input type="radio" name="price" value="100000"
                                                           class="checkbox__input budjet"
                                                           {{ request('price') == '100000' ? 'checked' : '' }}
                                                           onchange="change_price(this)">
                                                    <span class="fake"></span>
                                                    <span class="checkbox__name">₽ — скромный бюджет</span>
                                                </label>
                                            </div>

                                        </div>
                                    </li>
                                    <li class="aside-filter__item spec_check">
                                        <p class="aside-filter__title">Рейтинг</p>
                                        <div class="aside-filter__content">
                                            <div class="aside-filter__box">
                                                <label class="checkbox__item">
                                                    <input type="radio" name="rating" value="all"
                                                           class="checkbox__input"
                                                           {{ request('rating') == 'all' ? 'checked' : '' }}
                                                           onchange="change_rating(this)">
                                                    <span class="fake"></span>
                                                    <span class="checkbox__name">Любой рейтинг</span>
                                                </label>
                                                <label class="checkbox__item">
                                                    <input type="radio" name="rating" value="5"
                                                           class="checkbox__input rating_class"
                                                           {{ request('rating') == '5' ? 'checked' : '' }}
                                                           onchange="change_rating(this)">
                                                    <span class="fake"></span>
                                                    <span class="checkbox__name checkbox__star">★★★★★</span>
                                                </label>
                                                <label class="checkbox__item">
                                                    <input type="radio" name="rating" value="4"
                                                           class="checkbox__input rating_class"
                                                           {{ request('rating') == '4' ? 'checked' : '' }}
                                                           onchange="change_rating(this)">
                                                    <span class="fake"></span>
                                                    <span class="checkbox__name checkbox__star">★★★★<span
                                                                class="checkbox__star--down">★</span></span>
                                                </label>
                                                <label class="checkbox__item">
                                                    <input type="radio" name="rating" value="3"
                                                           class="checkbox__input rating_class"
                                                           {{ request('rating') == '3' ? 'checked' : '' }}
                                                           onchange="change_rating(this)">
                                                    <span class="fake"></span>
                                                    <span class="checkbox__name checkbox__star">★★★<span
                                                                class="checkbox__star--down">★★</span></span>
                                                </label>

                                            </div>
                                        </div>
                                    </li>
                                </ul>
                                {{--                                <button type="submit" class="btn-main settings__btn">Применить фильтр</button>--}}
                            </form>
                        </div>
                    </div>
                </aside>
                <div class="top" style="width:100%">
                    <div class="catalog__filter">
                        <div class="catalog__filter-items mobile-overflow">
                            @if($selectedCity)
                                <button class="tag-button" data-type="city">
                                    <span>{{ $selectedCity }}</span>
                                    <span class="tag-button-close" onclick="removeFilter('city')"></span>
                                </button>
                            @endif
                            @if($selectedCategories)
                                <button class="tag-button" data-type="category">
                                    <span>{{ $selectedCategories }}</span>
                                    <span class="tag-button-close" onclick="removeFilter('category')"></span>
                                </button>
                            @endif

                            @if($selectedSubcategories)
                                <button class="tag-button" data-type="subcategory">
                                    <span>{{ $selectedSubcategories }}</span>
                                    <span class="tag-button-close" onclick="removeFilter('subcategory')"></span>
                                </button>
                            @endif




                            @if($request->has('price'))
                                <button class="tag-button" data-type="price">
                                    <span>Бюджет: {{$request->price == 5 ? '₽₽₽₽' : ($request->price == 4 ? '₽₽₽' : ($request->price == 3 ? '₽₽': '₽'))}}</span>
                                    <span class="tag-button-close" onclick="remove('price')"></span>
                                </button>
                            @endif
                            @if($request->has('rating'))
                                <button class="tag-button" data-type="rating">
                                    <span>Рейтинг: {{$request->rating == 'all' ? 'Любой' : $request->rating}}</span>
                                    <span class="tag-button-close" onclick="remove('rating')"></span>
                                </button>
                            @endif
                        </div>
                        <div class="catalog__search search-main__wrapper">
                            <form action="{{ route('showCatalogPage',['city'=>$cityGeo,'category'=>$selectedCategories,'subcategory'=>$selectedSubcategories]) }}" method="GET" class="catalog__search-wrapper">
                                <input
                                    value="{{ request('query') }}"
                                        class="catalog__search-input search-main"
                                        name="query"
                                        type="text"
                                        placeholder="Услуга или специалист"
                                        id="searchInput"
                                        style="width: 100%; padding-left: 40px; padding-right: 40px;"
                                >

                                <!-- Кнопка с иконкой лупы -->
                                <button
                                        type="submit"
                                        class="search-icon"
                                        style="position: absolute; left: 10px; top: 50%; transform: translateY(-50%); border: none; background: none; cursor: pointer;"
                                >
{{--                                    <svg width="23.999512" height="24.000000" viewBox="0 0 23.9995 24" fill="none"--}}
{{--                                         xmlns="http://www.w3.org/2000/svg">--}}
{{--                                        <path--}}
{{--                                                id="Vector"--}}
{{--                                                d="M23.7722 22.6943L17.5759 16.5969C19.1985 14.834 20.1956 12.5024 20.1956 9.93677C20.1948 4.44849 15.6741 0 10.0974 0C4.52051 0 0 4.44849 0 9.93677C0 15.4252 4.52051 19.8737 10.0974 19.8737C12.5068 19.8737 14.717 19.0402 16.4529 17.6547L22.6733 23.776C22.9763 24.0746 23.4685 24.0746 23.7715 23.776C24.0754 23.4775 24.0754 22.9929 23.7722 22.6943ZM10.0974 18.3448C5.37866 18.3448 1.55371 14.5804 1.55371 9.93677C1.55371 5.29321 5.37866 1.52881 10.0974 1.52881C14.8159 1.52881 18.6411 5.29321 18.6411 9.93677C18.6411 14.5804 14.8159 18.3448 10.0974 18.3448Z"--}}
{{--                                                fill="#7A7A7A" fill-opacity="1.000000" fill-rule="nonzero"--}}
{{--                                        />--}}
{{--                                    </svg>--}}
                                </button>

                                <!-- Кнопка очистки (крестик) -->
                                <button
                                        type="button"
                                        class="clear-button"
                                        id="clearSearch"
                                        style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); border: none; background: none; cursor: pointer; font-size: 23px; color: #aaa;"
                                >
                                    &times;
                                </button>
                            </form>
                        </div>
                    </div>
                    <div class="catalog__inner-list">
                        @if ($results->isEmpty())
                            <p style="margin: 38px auto;">Нет результатов для отображения.</p>
                        @else
                            @foreach ($results as $professional)
                                @if ($professional && $professional->user)
                                    <div class="product-item__wrapper row">
                                        @if(isset($professional->slug) && $professional->slug)
                                        <a href="{{ route('showSpecialistPage', $professional->slug) }}">
                                            <img class="product-item__img"
                                                 src="{{ user_image_url($professional->user->card_image ?? null, 'card') }}" alt="catalog">
                                        </a>
                                        @endif
                                        <div class="product-info">
                                            <div class="product-info__top row">
                                                <img class="product-info__avatar"
                                                     src="{{ user_image_url($professional->user->image ?? null, 'avatar') }}"
                                                     style="object-fit: cover;border-radius: 50%" alt="avatar">
                                                <div class="product-info__name">
                                                    @if(isset($professional->slug) && $professional->slug)
                                                    <a href="{{ route('showSpecialistPage', $professional->slug) }}">
                                                        <p class="product-info__title">{{ $professional->company_name }}</p>
                                                    </a>
                                                    @else
                                                        <p class="product-info__title">{{ $professional->company_name }}</p>
                                                    @endif
                                                    <div class="product-info__rating row">
                                                        <div class="star-rating">
                                                            <span class="specialist__person-stars"> {{ $professional->averageRating ?? 0 }}</span>
                                                            @for ($i = 1; $i <= 5; $i++)
                                                                <span class="star {{ $i <= ($professional->averageRating ?? 0) ? 'filled' : '' }}">&#9733;</span>
                                                            @endfor
                                                        </div>
                                                        <span class="specialist__person-quli">Отзывов: {{ $professional->reviews_count ?? 0 }}</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <p class="product-info__description">
                                                {{ Str::limit($professional->description, 300, '...') }}
                                            </p>
                                            <div class="product-info__bottom row">
                                                @if ($professional->address)
                                                    <p class="product-info__street">{{ $professional->address}}</p>
                                                @endif
                                            </div>
                                        </div>
                                        <div class="product-buttons">
                                            @if(!auth()->check())
                                                <a href="{{ route('login') }}" class="product-buttons__mobile btn-outline">
                                                    <svg width="23.750000" height="23.747681" viewBox="0 0 23.75 23.7477"
                                                         fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path id="Vector"
                                                              d="M23.5122 17.9534C23.6588 18.1262 23.7442 18.3473 23.7486 18.5793C23.7595 19.1156 23.707 19.6234 23.6019 20.1049C23.0154 22.7839 20.2072 24.3577 17.5916 23.5238C14.3391 22.4863 10.5481 20.0874 7.1051 16.6444L7.09637 16.6356C3.65997 13.1949 1.25891 9.40613 0.223633 6.15149C-0.57312 3.64746 0.8255 0.89624 3.3645 0.217651C3.64246 0.140991 3.9292 0.0863037 4.22906 0.0490723C4.45892 0.0206299 4.68872 0.00537109 4.92944 0.000976562C5.00824 0.000976562 5.08923 -0.0012207 5.17023 0.000976562C5.52484 0.00537109 5.85095 0.200195 6.01727 0.510986C7.11169 2.58594 7.88654 4.66089 8.05066 6.75122C8.07477 7.05542 7.93903 7.35303 7.70264 7.55005L7.06134 8.08191L6.73743 8.35339C6.42657 8.61157 6.36096 9.06689 6.59729 9.39526C7.60419 10.8092 8.79486 12.2188 10.1541 13.578L10.1628 13.5867C11.5221 14.9459 12.9382 16.1432 14.3522 17.1544C14.6805 17.3907 15.1379 17.3274 15.3984 17.0143L15.6764 16.6794L16.1995 16.0469C16.3965 15.8105 16.6942 15.6748 16.9984 15.6989C19.0887 15.863 21.1658 16.64 23.2386 17.7323C23.2802 17.7563 23.3196 17.7782 23.3568 17.8066C23.4181 17.8505 23.4684 17.9008 23.5122 17.9534Z"
                                                              fill="#217B00" fill-opacity="1.000000" fill-rule="nonzero"/>
                                                    </svg>
                                                    Телефон
                                                </a>
                                            @elseif(auth()->user()->id !== (int)$professional->user_id)
                                                <button class="product-buttons__mobile btn-outline"
                                                        data-phone="{{ $professional->phone }}" onclick="openModal(this)">
                                                    <svg width="23.750000" height="23.747681" viewBox="0 0 23.75 23.7477"
                                                         fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path id="Vector"
                                                              d="M23.5122 17.9534C23.6588 18.1262 23.7442 18.3473 23.7486 18.5793C23.7595 19.1156 23.707 19.6234 23.6019 20.1049C23.0154 22.7839 20.2072 24.3577 17.5916 23.5238C14.3391 22.4863 10.5481 20.0874 7.1051 16.6444L7.09637 16.6356C3.65997 13.1949 1.25891 9.40613 0.223633 6.15149C-0.57312 3.64746 0.8255 0.89624 3.3645 0.217651C3.64246 0.140991 3.9292 0.0863037 4.22906 0.0490723C4.45892 0.0206299 4.68872 0.00537109 4.92944 0.000976562C5.00824 0.000976562 5.08923 -0.0012207 5.17023 0.000976562C5.52484 0.00537109 5.85095 0.200195 6.01727 0.510986C7.11169 2.58594 7.88654 4.66089 8.05066 6.75122C8.07477 7.05542 7.93903 7.35303 7.70264 7.55005L7.06134 8.08191L6.73743 8.35339C6.42657 8.61157 6.36096 9.06689 6.59729 9.39526C7.60419 10.8092 8.79486 12.2188 10.1541 13.578L10.1628 13.5867C11.5221 14.9459 12.9382 16.1432 14.3522 17.1544C14.6805 17.3907 15.1379 17.3274 15.3984 17.0143L15.6764 16.6794L16.1995 16.0469C16.3965 15.8105 16.6942 15.6748 16.9984 15.6989C19.0887 15.863 21.1658 16.64 23.2386 17.7323C23.2802 17.7563 23.3196 17.7782 23.3568 17.8066C23.4181 17.8505 23.4684 17.9008 23.5122 17.9534Z"
                                                              fill="#217B00" fill-opacity="1.000000" fill-rule="nonzero"/>
                                                    </svg>
                                                    Телефон
                                                </button>
                                            @endif
                                            @if(!auth()->check() || (auth()->check() && auth()->user()->id !== (int)$professional->user_id))
                                                <div class="product-buttons__order">
                                                    @livewire('users', ['specialistId' => $professional->user_id])
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                @else

                                @endif
                            @endforeach
                        @endif
                    </div>
                    <!-- Модальное окно -->
                    <div id="phoneModal" class="modal">
                        <div class="modal-content">
                            <span class="close" onclick="closeModal()">&times;</span>
                            <h2>Телефон</h2>
                            <h4 id="phoneNumber"></h4>
                        </div>
                    </div>
                    <div class="pagination">
                        @if(count($results) >= $results->perPage() && $results->lastPage() > 1)
                            <ul class="pagination__list">
                                {{-- Кнопка "Назад" --}}
                                @if ($results->currentPage() > 1)
                                    <li class="pagination__item pagination__item--prev">
                                        <a class="a-prev" href="{{ $results->previousPageUrl() }}">Назад</a>
                                    </li>
                                @endif

                                {{-- Номера страниц --}}
                                @php
                                    $currentPage = $results->currentPage();
                                    $lastPage = $results->lastPage();
                                    $start = max(1, $currentPage - 2);
                                    $end = min($lastPage, $currentPage + 2);
                                @endphp
                                @for ($i = $start; $i <= $end; $i++)
                                    <li class="pagination__item {{ $i == $currentPage ? 'pagination__item--active' : '' }}">
                                        <a href="{{ $results->url($i) }}">{{ $i }}</a>
                                    </li>
                                @endfor

                                {{-- Кнопка "Далее" --}}
                                @if ($results->currentPage() < $results->lastPage())
                                    <li class="pagination__item pagination__item--next">
                                        <a href="{{ $results->nextPageUrl() }}">Далее</a>
                                    </li>
                                @endif
                            </ul>
                        @endif
                    </div>

                </div>
            </div>

        </div>
    </section>



    <section class="info">
        <div class="container">
            <div class="info__list">
                @if(empty($category_query) && empty($subcategory_query))
                    {!! \App\Models\Setting::first()->block_under_footer !!}
                @endif
{{--                <div class="info__item">--}}
{{--                    <h3 class="info__title">Почему так важен дизайн интерьера квартиры?</h3>--}}
{{--                    <p class="info__text">Дизайн интерьера квартиры или дома — это очень ответственное занятие, которому--}}
{{--                        следует уделить особое внимание, ведь от него будет зависеть комфорт и уют в вашем доме. Если вы--}}
{{--                        точно знаете, к чему вы стремитесь в стилистическом и функциональном плане, и--}}
{{--                        четко можете себе представить завершенный вариант, полагайтесь на свое видение и фантазию! Если--}}
{{--                        же вы только приблизительно знаете, чего хотите от ремонта вашего дома, у вас есть идеи дизайна--}}
{{--                        и декора квартиры, но вы не уверены, как воплотить их в жизнь, или же площадь жилого--}}
{{--                        пространства усложняет положение вещей и ваша грандиозная задумка не помещается в маленькую--}}
{{--                        комнату или квартиру — вам нужен хороший дизайнер интерьера! Если заказать дизайн-проект--}}
{{--                        квартиры или дома у профессионала, вы сможете воплотить свои самые смелые идеи в--}}
{{--                        реальность!Давайте же поговорим о том, как и где найти лучшего дизайнера интерьеров для вашей--}}
{{--                        квартиры, в какую студию дизайна обратиться и как понять, подходит ли тот или иной специалист по--}}
{{--                        декору именно вам.</p>--}}
{{--                </div>--}}
{{--                <div class="info__item">--}}
{{--                    <h3 class="info__title">Сколько стоят услуги дизайнера интерьеров?</h3>--}}
{{--                    <p class="info__text">К сожалению, однозначного ответа на этот вопрос нет, все зависит от--}}
{{--                        индивидуального заказа. Стоимость разработки дизайн-проекта интерьера зависит от многих--}}
{{--                        факторов, таких как площадь помещения, сложность работы, выбранный стиль и так далее.--}}
{{--                        Интересоваться--}}
{{--                        ценой проекта можно уже с первых встреч со специалистом. Заранее спросите, что именно входит в--}}
{{--                        стоимость работ: планировочное решение квартиры, подбор материалов и мебели, 3D визуализация--}}
{{--                        проекта, набор планов и чертежей для выполнения ремонтных работ и авторский надзор.--}}
{{--                        Узнайте о любых дополнительных затратах, которые не входят в приобретенный вами "пакет--}}
{{--                        услуг."</p>--}}
{{--                </div>--}}
{{--                <div class="info__item">--}}
{{--                    <h3 class="info__title">Как заказать дизайн-проект квартиры или дома?</h3>--}}
{{--                    <p class="info__text">Все очень просто - вы можете просто посмотреть список дизайнеров и--}}
{{--                        декораторов, представленных на этой странице, изучить готовые выполненные дизайн-проекты и--}}
{{--                        подобрать того, ко вам по душе. На страничке профессионала вы можете связаться с ним напрямую и--}}
{{--                        узнать о стоимости дизайн-проекта и рекомендациях для вашего конктретного случая, а также--}}
{{--                        заказать дизайн.</p>--}}
{{--                </div>--}}
{{--                <div class="info__item">--}}
{{--                    <h3 class="info__title">Как найти хорошего дизайнера интерьеров?</h3>--}}
{{--                    <p class="info__text">Заметьте, что выбирая дизайнера интерьеров, стоит обратить внимание не только--}}
{{--                        на профессиональные, но и личные качества эксперта, задумайтесь, комфортно ли вам будет работать--}}
{{--                        с этим человеком, сможете ли вы положиться на его профессиональное чутье и доверить--}}
{{--                        декор вашего дома.</p>--}}
{{--                </div>--}}
{{--                <div class="info__item">--}}
{{--                    <h3 class="info__title">Где искать специалиста по декору и дизайну интерьеров?</h3>--}}
{{--                    <p class="info__text">При поиске дизайнера интерьеров, многие полагаются на рекомендации знакомых и--}}
{{--                        друзей, но здесь следует быть осторожным, ведь ваши вкусы и ценовые категории могут не--}}
{{--                        совпадать. Другой распространенный и очень удобный вариант — обратиться в студию дизайна--}}
{{--                        интерьеров. В интернете можно найти множество современных дизайн студий и бюро и выбрать ту,--}}
{{--                        которая подойдет вам по всем категориям. Если вам нужна консультация или помощь в составлении--}}
{{--                        дизайн-проекта квартиры, но нанять профессионала вам не по карману, воспользуйтесь--}}
{{--                        помощью начинающего специалиста — его услуги обойдутся вам недорого. Однако не стоит думать, что--}}
{{--                        качество работы при этом будет на низком уровне, для начинающих специалистов, которые еще не--}}
{{--                        наработали впечатляющего портфолио, каждый проект на счету, так что вашему заказу,--}}
{{--                        безусловно, будет уделено много внимания.Просматривайте профили лучших дизайнеров интерьеров--}}
{{--                        на Houzz.ru: читайте отзывы, оценивайте портфолио и фото реализованных проектов и легко--}}
{{--                        связывайтесь с понравившимися вам специалистами в области дизайна интерьеров и декора.--}}
{{--                        Заказать дизайн-проект интерьера просто с Houzz!Если вы – профессионал в области дизайна--}}
{{--                        интерьера, узнайте больше о наших услугах для профессионалов на странице Привлечение клиентов--}}
{{--                        для дизайнеров интерьера с Houzz PRO.</p>--}}
{{--                </div>--}}
            </div>
        </div>
    </section>
</main>

<script>
    // Получаем элементы поиска и список городов
    let url_string = window.location.href;
    let url = new URL(url_string);
    let pathParts = window.location.pathname.split('/').filter(Boolean);
    let query_price = url.searchParams.get("price") ?? null;
    let query_rating = url.searchParams.get("rating") ?? null;
    let query_s = url.searchParams.get("s") ?? null;

    let queryParams = new URLSearchParams(window.location.search);
    function handleCategoryClick(category, event){
        // Проверяем, выбрана ли уже эта категория
        const isCurrentlySelected = pathParts.length >= 3 && pathParts[2] === category;

        if (isCurrentlySelected) {
            // Если категория уже выбрана - отменяем выбор и переходим на страницу только с городом
            event.preventDefault(); // Предотвращаем стандартное поведение radio
            event.stopPropagation(); // Останавливаем всплытие события

            // Убираем категорию из URL, оставляем только город
            if (pathParts.length === 1 && pathParts[0] === 'specialisty') {
                pathParts.push('moskva'); // Добавляем город по умолчанию
            }
            // Удаляем категорию и подкатегорию из pathParts
            if (pathParts.length >= 3) {
                pathParts = pathParts.slice(0, 2); // Оставляем только 'specialisty' и город
            }

            let newUrl = '/' + pathParts.join('/');
            if (queryParams.toString()) {
                newUrl += '?' + queryParams.toString();
            }
            window.location.href = newUrl;
            return false;
        } else {
            // Если категория не выбрана - выбираем её
            toggleSubcategories(category);
            checkedCategory(category);
        }
    }

    function checkedCategory(category){
        // Если у нас нет города в URL (только /specialisty/), добавляем город по умолчанию
        if (pathParts.length === 1 && pathParts[0] === 'specialisty') {
            pathParts.push('moskva'); // Добавляем город по умолчанию
        }
        pathParts[2] = category;
        if(pathParts.length > 3){
            pathParts.pop()
        }
        let newUrl = '/' + pathParts.join('/');
        if (queryParams.toString()) {
            newUrl += '?' + queryParams.toString();
        }
        window.location.href = newUrl;
    }
    function checkedSubCategory(category){
        // Если у нас нет города в URL (только /specialisty/), добавляем город по умолчанию
        if (pathParts.length === 1 && pathParts[0] === 'specialisty') {
            pathParts.push('moskva'); // Добавляем город по умолчанию
        }
        // Если у нас нет категории, добавляем её
        if (pathParts.length === 2) {
            // Нужно получить текущую выбранную категорию из формы
            const selectedCategory = document.querySelector('input[name="category"]:checked');
            if (selectedCategory) {
                pathParts.push(selectedCategory.value);
            }
        }
        pathParts[3] = category;
        let newUrl = '/' + pathParts.join('/');
        if (queryParams.toString()) {
            newUrl += '?' + queryParams.toString();
        }
        window.location.href = newUrl;
    }

    function toggleSubcategories(category) {
        console.log(category);
        var subcategory = document.getElementById('subcategories-' + category);
        console.log(subcategory);
        if (subcategory.style.display === 'none') {
            subcategory.style.display = 'block';
        } else {
            subcategory.style.display = 'none';
        }
        var subcategories = document.querySelectorAll('.subcategory');
        subcategories.forEach(function (subcat) {
            if(subcat.getAttribute('id') !== 'subcategories-' + category){
                subcat.style.display = 'none';
            }
        });
    }
    function change_price(el){
        queryParams.set('price', el.value);
        window.location.href = window.location.pathname+ '?' + queryParams.toString();
    }
    function change_rating(el){
        queryParams.set('rating', el.value);
        window.location.href = window.location.pathname+ '?' + queryParams.toString();
    }
    function change_search(el){
        queryParams.set('s', el.value);
        window.location.href = window.location.pathname+ '?' + queryParams.toString();
    }

    let timerCatalog = null;
    token = document.querySelector('meta[name="csrf-token"]').content;
    function searchСityCatalog(val){
            if(val.length > 0){
                clearTimeout(timerCatalog);
                timerCatalog = setTimeout(() => {
                    fetch("{{ route('loadMoreCities') }}", {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': token
                    },
                    body: JSON.stringify({
                        value: val
                    })
                })
                    .then(response => response.json())
                    .then(data => {
                        let ul = document.querySelector('.drop-list');
                        let list = ul.getElementsByTagName('li');
                        console.debug(list)
                        Array.from(list).forEach(listItem => {
                            listItem.parentNode.removeChild(listItem);
                        });
                        // for (let i = 0; i < list.length; i++) {
                        //     let item = list[i];
                        //     item.remove();
                        // }
                        for (let i = 0; i < data.cities.length; i++) {
                            let city = data.cities[i];
                            let li = document.createElement("li");
                            li.textContent = city.title;
                            li.className = 'city-list__item';
                            // li.setAttribute("data-slug", city.slug);
                            // li.setAttribute("data-title", city.title);
                            li.addEventListener('click', function () {
                                var text = this.textContent;
                                document.querySelector('.drop-select span').textContent = text;
                                document.querySelector('.drop-list').style.display = 'none';
                                document.querySelector('.drop-select').classList.remove('active');
                                pathParts[1] = city.slug;
                                queryParams.delete('city');
                                let newUrl = '/' + pathParts.join('/');
                                if (queryParams.toString()) {
                                    newUrl += '?' + queryParams.toString();
                                }
                                window.location.href = newUrl;
                            });
                            ul.append(li);

                        }

                        // lis.forEach(function (city) {

                        // });
                    })
                    .catch(error => console.error('Error:', error));
                    // myFunction($(this));
                    clearTimeout(timerCatalog);
                }, 1000);
                // if(timeO == null){
                // }
            } else {
                clearTimeout(timerCatalog);
            }

        }

    window.onload = function () {
        {{--let category = "{{ request('category') ?? $category }}";--}}
        {{--let rating = "{{ request('rating') }}"--}}
        {{--if (category === "dizajn-i-proektirovanie") {--}}
        {{--    category = "dizajn-i-proektirovanie"--}}
        {{--}else if(category === 'remont-i-otdelka'){--}}
        {{--    category = "remont-i-otdelka"--}}
        {{--}else if(category === 'mebel-i-tekstil'){--}}
        {{--    category = "mebel-i-tekstil"--}}
        {{--}else if(category === 'dom-i-uchastok'){--}}
        {{--    category = "dom-i-uchastok"--}}
        {{--}else if(category === 'prochie-raboty-i-uslugi'){--}}
        {{--    category = "prochie-raboty-i-uslugi"--}}
        {{--}--}}

        {{--if (category) {--}}
        {{--    toggleSubcategories(category);--}}
        {{--}--}}


    };

    document.addEventListener('DOMContentLoaded', function () {


        console.log(url_string);
        console.log(url);

        console.log(pathParts);
        console.log(queryParams);

        document.querySelector('.drop-select').addEventListener('click', function () {
            var dropdownList = document.querySelector('.drop-list');
            var cityInput = document.getElementById('cityFilterInput');
            var isOpening = dropdownList.style.display !== 'block';

            dropdownList.style.display = dropdownList.style.display === 'block' ? 'none' : 'block';
            this.classList.toggle('active');

            // Если список открывается - устанавливаем фокус и выделяем текст
            if (isOpening && cityInput) {
                // Используем setTimeout для гарантии, что DOM обновился
                setTimeout(function() {
                    cityInput.focus();
                    cityInput.select(); // Выделяем весь текст
                }, 10);
            }
        });

        // --- Исправление: скрытие списка при клике вне дропдауна ---
        document.addEventListener('click', function(event) {
            const dropSelect = document.querySelector('.drop-select');
            const dropList = document.querySelector('.drop-list');
            if (!dropSelect.contains(event.target) && !dropList.contains(event.target)) {
                dropList.style.display = 'none';
                dropSelect.classList.remove('active');
            }
        });

        // --- Исправление: скрытие списка при выборе города через обычный клик по <li> ---
        document.querySelectorAll('.drop-list li').forEach(function (item) {
            item.addEventListener('click', function () {
                var text = this.textContent;
                document.querySelector('.drop-select span').textContent = text;
                document.querySelector('.drop-list').style.display = 'none';
                document.querySelector('.drop-select').classList.remove('active');
                pathParts[1] = item.getAttribute('data-slug');
                queryParams.delete('city');
                let newUrl = '/' + pathParts.join('/');
                if (queryParams.toString()) {
                    newUrl += '?' + queryParams.toString();
                }
                window.location.href = newUrl;
            });
        });



        // const cityListItems = document.querySelectorAll('.drop-list li');
        // const filterForm = document.getElementById('filterForm');  // Ensure the form has the correct id
        // const selectedCityInput = document.getElementById('selected-city');

        // Handle city selection
        // cityListItems.forEach(item => {
        //     item.addEventListener('click', function () {
        //         const city = item.textContent.trim(); // Get the city name and remove extra spaces
        //         selectedCityInput.value = city; // Set the value of the hidden city input
        //         console.log('Selected city:', city); // Debugging
        //
        //         filterForm.submit(); // Submit the form
        //     });
        // });

        // Optionally handle the input filtering for cities
        // const cityFilterInput = document.getElementById('cityFilterInput');
        // if (cityFilterInput) {
        //     cityFilterInput.addEventListener('input', function () {
        //         filterCities(cityFilterInput.value); // Filter cities as the user types
        //     });
        // }

        // Filter cities based on input value
        // function filterCities(query) {
        //     cityListItems.forEach(item => {
        //         if (item.textContent.toLowerCase().includes(query.toLowerCase())) {
        //             item.style.display = 'block'; // Show matching cities
        //         } else {
        //             item.style.display = 'none'; // Hide non-matching cities
        //         }
        //     });
        // }

        const filterButton = document.querySelector('.acide__btn');
        const asideFilter = document.querySelector('.catalog__inner-aside');

        filterButton.addEventListener('click', function () {
            asideFilter.classList.toggle('show-mobile');
        });
    });


</script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const searchInput = document.getElementById('searchInput');
        const clearButton = document.getElementById('clearSearch');

        clearButton.addEventListener('click', function () {
            searchInput.value = ''; // Сбрасываем текст
            searchInput.focus(); // Устанавливаем фокус обратно в поле
        });
    });
</script>
<script>


    function removeFilter(typeToRemove) {
        // let pathParts = window.location.pathname.split('/');
        let pathParts = window.location.pathname.split('/').filter(Boolean);
        let queryParams = new URLSearchParams(window.location.search);


        if(typeToRemove == 'city'){
            pathParts[1] = 'moskva'
            let newUrl = '/' + pathParts.join('/');
            if (queryParams.toString()) {
                newUrl += '?' + queryParams.toString();
            }
            // console.log(newUrl);
            // debugger
            window.location.href = newUrl;
        } else{
            let newUrl = '/' + pathParts[0] + '/' + pathParts[1] + (typeToRemove == 'subcategory' ? ('/' + pathParts[2]) : '');
            // console.log(newUrl);
            // debugger
            if (queryParams.toString()) {
                newUrl += '?' + queryParams.toString();
            }
            window.location.href = newUrl;
        }

    }

</script>


<script>
    // Открытие модального окна и установка номера телефона
    function openModal(button) {
        var phone = button.getAttribute('data-phone');
        document.getElementById('phoneNumber').innerText = phone; // Устанавливаем номер телефона в модальном окне
        document.getElementById('phoneModal').style.display = "flex"; // Показываем модальное окно
    }

    // Закрытие модального окна
    function closeModal() {
        document.getElementById('phoneModal').style.display = "none"; // Прячем модальное окно
    }

    // Закрытие модального окна при клике за пределами окна
    window.onclick = function (event) {
        var modal = document.getElementById('phoneModal');
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }

</script>
<script>

</script>

</body>
<style>
    .product-info__description {
        display: flex;
        align-items: center;
    }

    .product-info__street {
        white-space: normal;
        word-wrap: break-word;
        word-break: break-word;
    }

    /* Стили для картинок специалистов - десктоп */
    .product-item__wrapper.row {
        align-items: flex-start !important;
    }

    .product-item__wrapper.row > a {
        flex-shrink: 0;
    }

    .product-item__img {
        width: 280px !important;
        height: 280px !important;
        object-fit: cover;
        flex-shrink: 0;
    }

    .star {
        color: #9e9e9e;
    }

    .star.filled {
        color: #fdd400;
    }

    .rating-count {
        color: #000;
    }

    /* Основные стили для модального окна */
    .modal {
        display: none; /* Скрыть модальное окно по умолчанию */
        position: fixed; /* Фиксированное позиционирование */
        z-index: 1000; /* Поверх всех элементов */
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto; /* Прокрутка при необходимости */
        background-color: rgba(0, 0, 0, 0.4); /* Полупрозрачный фон */
        transition: opacity 0.3s ease;
    }

    /* Стили для содержимого модального окна */
    .modal-content {
        background-color: #fff; /* Белый фон */
        margin: 15% auto; /* Центрирование по вертикали и горизонтали */
        padding: 20px;
        border-radius: 8px; /* Скругленные углы */
        width: 80%;
        height: 200px;
        max-width: 500px; /* Максимальная ширина */
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Тень */
        position: relative; /* Относительное позиционирование для кнопки закрытия */
        text-align: center; /* Выравнивание текста по центру */
    }

    .pagination__item--next {
        padding: 0 31px 0 12px;
        position: relative;
        width: auto;
    }


    /* Стили для кнопки закрытия */
    .close {
        position: absolute; /* Абсолютное позиционирование */
        top: 10px;
        right: 15px;
        font-size: 24px;
        font-weight: bold;
        color: #333;
        cursor: pointer;
    }

    .close:hover {
        color: #f00; /* Изменение цвета при наведении */
    }

    /* Стили для заголовков и текста */
    .modal-content h2 {
        margin-top: 0;
        font-size: 1.5em;
        color: #333;
    }


    .modal-content h4 {
        margin-top: 50px;
        font-size: 1.5em;
        color: #555;
    }

    .div_city {
        box-shadow: 0px 0px 20px 1px rgb(128, 128, 128);
        background: #fff;
        height: 60px;
        border-radius: 20px;
        padding: 11px;
        border: 1px solid #eee;
        position: absolute;
        bottom: -47px;
        width: 566px;
        left: 1px;
    }

    .span_city {
        margin-left: 37px;
    }

    .span_button {
        margin-left: 20px;
        font: inherit;
        position: relative;
        border: none;
        font-weight: 600;
        border-radius: .6em;
        line-height: 1em;
        cursor: pointer;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        outline: 0;
        text-decoration: none;
        color: #333;
        padding: 0 15px;
        min-height: 36px;
        background: #ebebeb;
    }

    .content {
        display: none;
    }

    .cityModal {
        display: none;
        position: fixed;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: hidden; /* Отключаем прокрутку */
        background-color: rgba(0, 0, 0, 0.4);
        justify-content: center;
        align-items: center;
    }

    .modal-content-city {
        background-color: #fefefe;
        margin: 15% auto;
        padding: 20px;
        border: 1px solid #888;
        width: 100%;
        max-width: 400px; /* Ограничиваем ширину окна */
        overflow: hidden; /* Скрываем прокрутку внутри модального окна */
        border-radius: 8px; /* Немного скруглим углы */
    }

    .modal-header-city {
        font-size: 20px;
        margin-bottom: 10px;
    }

    .modal-body-city {
        margin-bottom: 20px;
    }

    .city-list {
        list-style: none;
        padding: 0;
        margin: 0;
        max-height: 250px; /* Ограничим высоту списка */
        overflow-y: auto; /* Добавляем вертикальную прокрутку внутри списка */
    }

    .city-list li {
        padding: 10px;
        cursor: pointer;
        display: block;
    }

    .city-list li:hover {
        background-color: #f0f0f0;
    }

    .city-list li.hidden {
        display: none;
    }

    .closeCity {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
        cursor: pointer;
    }

    .search {
        position: relative;
        width: 100%; /* Убедитесь, что контейнер имеет нужную ширину */
    }

    .search i {
        position: absolute;
        left: 10px; /* Позиция иконки от левого края */
        top: 50%; /* Центрируем по вертикали */
        transform: translateY(-50%); /* Центрирование по вертикали */
        font-size: 17px; /* Размер иконки */
        color: #c6c3c3; /* Цвет иконки */
        z-index: 1; /* Иконка должна быть сверху, если есть другие элементы */
    }

    .search input {
        width: 100%; /* Поле ввода растягивается на всю ширину родителя */
        padding-left: 30px; /* Оставляем место для иконки */
        padding-right: 10px; /* Немного отступа справа */
        height: 40px; /* Устанавливаем высоту поля */
        font-size: 16px; /* Размер шрифта */
        border: 1px solid #ccc; /* Пределы поля */
        border-radius: 4px; /* Скругленные углы */
    }


    .closeCity:hover,
    .closeCity:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

    .drop-list {
        display: none;
        max-height: 250px; /* Ограничиваем высоту списка */
        overflow-y: auto; /* Включаем вертикальный скролл при необходимости */
        border: 1px solid #ccc; /* Граница для визуального выделения */
        border-radius: 4px; /* Скругляем углы */
        background: #fff; /* Фон */
        /* Скрытие ползунка в WebKit-браузерах (Chrome, Safari) */
        scrollbar-width: none; /* Для Firefox */
        -ms-overflow-style: none; /* Для Internet Explorer и Edge */
    }

    /* Стили для самих элементов списка */
    .drop-list li {
        padding: 10px;
        cursor: pointer;
        min-width: unset !important;
        display: block;
        transition: background 0.2s;
    }

    .drop-list li:hover {
        background-color: #f0f0f0;
    }


    .drop-list::-webkit-scrollbar {
        display: none; /* Скрываем ползунок в Chrome, Safari */
    }

    /* Стили для средних экранов - горизонтальное расположение, но меньшие картинки */
    @media (max-width: 1400px) and (min-width: 1101px) {
        .product-item__img {
            width: 240px !important;
            height: 240px !important;
        }
    }

    /* Стили для планшетов и узких экранов - вертикальное расположение */
    @media (max-width: 1100px) {
        .product-item__wrapper.row {
            flex-direction: column !important;
            flex-wrap: wrap !important;
        }

        .product-item__wrapper.row > a {
            width: 100% !important;
        }

        .product-item__img {
            width: 100% !important;
            height: 250px !important;
            object-fit: cover;
        }
    }

    @media (max-width: 768px) {
        /* Стили для картинок специалистов - мобильная версия */
        .product-item__wrapper.row {
            flex-direction: column;
        }

        .product-item__wrapper.row > a {
            width: 100%;
        }

        .product-item__img {
            width: 100%;
            height: 250px;
            object-fit: cover;
        }

        .div_city {
            box-shadow: 0px 0px 20px 1px rgb(128, 128, 128);
            background: #fff;
            height: 49px;
            border-radius: 20px;
            padding: 10px;
            font-size: 8px;
            border: 1px solid #eee;
            position: absolute;
            bottom: -47px;
            width: 345px;
            left: 1px;
        }

        .span_city {
            margin-left: 20px;
            font-size: 10px;
        }

        .span_button {
            padding: 0px 10px;
            min-height: 27px;
        }


        .modal {
            /* top: -55px; */
            align-items: center;
        }

        .modal-content {
            width: 90%;
        }

        .intro {
            padding-top: 20px;
        }

        /* Стили для фильтров - мобильная версия */
        .catalog__inner-aside.aside-filter.show-mobile {
            margin-right: 0;
            max-width: 100% !important;
        }

        /* Единая ширина для всех контейнеров фильтров */
        .catalog__inner-aside.aside-filter .catalog__drop,
        .catalog__inner-aside.aside-filter .drop,
        .catalog__inner-aside.aside-filter .aside-filter__content,
        .catalog__inner-aside.aside-filter .aside-filter__box {
            width: 100% !important;
            box-sizing: border-box;
        }

        /* Единая ширина для всех полей фильтров */
        .catalog__inner-aside.aside-filter .drop-select-catalog,
        .catalog__inner-aside.aside-filter .drop-select,
        .catalog__inner-aside.aside-filter .search input,
        .catalog__inner-aside.aside-filter .input-main,
        .catalog__inner-aside.aside-filter .settings__input {
            width: 100% !important;
            box-sizing: border-box;
        }

        /* Стили для поля ввода города */
        .catalog__inner-aside.aside-filter .search input {
            width: 100% !important;
            padding: 12px 10px 12px 40px !important;
            font-size: 14px !important;
        }

        /* Стили для дропдауна города */
        .catalog__inner-aside.aside-filter .drop-select-catalog {
            width: 100% !important;
            padding: 12px 58px 12px 36px !important;
        }
    }


</style>
<script>
    function remove(param) {
        const url = new URL(window.location.href);
        url.searchParams.delete(param);
        window.location.href = url.toString();
    }
</script>
@endsection