@extends('front.app')
@section('meta')
    <x-meta :meta="$meta"/>
@stop

@section('container')

    <div class="page-content">

        <div class="breadcrumbs">
            <div class="container d-flex">
                {{ Breadcrumbs::render('search-page') }}
            </div>
        </div>

        @if(!empty($goods_items_list) && count($goods_items_list) && $goods_items_search_builder->count() > 0)
            <div class="search-page-title">
                <div class="container">
                    <div class="inner">
                        <div class="title-h1">«{{$search_value}}»</div>
                        <span class="search-page-title-count">{{$goods_items_list->count()}} {{ShowLabelById(293)}}</span>
                    </div>
                </div>
            </div>
            @if(!empty($search_categories) && count($search_categories))
                <section>
                    <div class="container">
                        <div class="list-mid-catalog">
                            <div class="title">
                                <h1 class="title-h1">{{ ShowLabelById(28) }}</h1>
                            </div>
                            <div class="list-second list-second-mobile">
                                @foreach($search_categories as $index => $one_subject)
                                    <a href="{{ $one_subject->is_link ? $one_subject->link : route('catalog', $one_subject->alias) }}" class="cat-slider-block {{ $index >= 8 ? 'hidden-item' : '' }}">
                                        <span class="image-block">
                                            <img src="{{ $one_subject->image }}" alt="{{ $one_subject->name }}">
                                        </span>
                                        <span class="name-item">{{ $one_subject->name }}</span>
                                    </a>
                                @endforeach
                                    @if($search_categories->count() > 8)
                                        <div class="list-second-more">
                                            <button type="button" class="list-second-more-btn">
                                                {{ ShowLabelById(292) }}
                                            </button>
                                        </div>
                                        <script>
                                            document.addEventListener('DOMContentLoaded', function () {
                                                const btn = document.querySelector('.list-second-more-btn');

                                                if (!btn) return;

                                                btn.addEventListener('click', function () {
                                                    const hiddenItems = document.querySelectorAll('.hidden-item');

                                                    hiddenItems.forEach(item => {
                                                        item.classList.remove('hidden-item');
                                                    });

                                                    btn.style.display = 'none';
                                                });
                                            });
                                        </script>
                                    @endif
                            </div>
                        </div>
                    </div>
                </section>
            @endif

            <section class="catalog-products-item">
                <div class="container">
                 {{--   <div class="d-flex justify-content-between align-items-center mt-10">
                        <div class="title">
                            <div class="title-h1 mt-0 h1-filter-name">{{ ShowLabelById(115) }} «{{ $search_value }}»</div>
                        </div>
                        @include('front.templates.catalog.sorting-desktop')
                    </div>--}}
                    <div class="row">
                        <div class="col-lg-2 grid-sidebar">
                            <div class="grid-sidebar-head">
                                <p>{{ ShowLabelById(109) }}</p>
                                <div class="grid-sidebar-close"></div>
                            </div>
                            <form action="{{ route('search-filter') }}" data-form-id="filter-data"
                                  data-form-type="filter-search"
                                  method="post" id="filter-data">
                                @csrf

                                <input type="hidden" name="s" value="{{ $search_value }}">
                                <input type="hidden" name="use_like" value="{{ request()->input('use_like') }}">

                                <div class="filter">

                                    @include('front.templates.catalog.filter-price')
                                    @include('front.templates.catalog.filter-discount')
                                    @include('front.templates.catalog.filter-goods-subjects')
                                    @include('front.templates.catalog.filter-brands')
                                </div>
                            </form>
                            <button type="button" class="grid-sidebar-close-bottom">{{ ShowLabelById(106) }}</button>
                        </div>
                        <div class="col-lg-10 mob-15 catalog-list-wrapper">
                            @include('front.templates.catalog.sorting-mob')
                            @include('front.templates.catalog.render-products-list')
                        </div>
                    </div>
                </div>
            </section>
        @else
            <section>
                <div class="container">
                    <div class="title">
                        <h1 class="title-h1">{{ ShowLabelById(81) }}</h1>
                    </div>
                </div>
            </section>
            <div class="basket-end basket-end--error p-0">
                <div class="container">
                    <div class="basket-end-inner">
                        <div class="basket-end-img">
                            <img src="{{ asset('front-assets/img/icons/basket-end-2.svg') }}"
                                 alt="Empty List">
                        </div>
                        <div class="basket-end-title">{{ ShowLabelById(68) }}</div>
                        <div class="basket-end-text">
                            <p>{{ ShowLabelById(82) }} <strong>{{ $search_value ?? '' }}</strong> :(</p>
                        </div>
                        <div class="basket-end-link">
                            <a href="{{ route('/') }}">{{ ShowLabelById(66) }}</a>
                        </div>
                    </div>
                </div>
            </div>
        @endif
    </div>
    @if(!empty($goods_items_list) && count($goods_items_list))
        @push('other-scripts')
            @include('front.templates.price-range-script')
        @endpush
    @endif
@stop