@extends('shop::layouts.master')

@section('page_title')
    {{ __('shop::app.search.page-title') }}
@endsection




@push('css')
<link rel="stylesheet" href="{{bagisto_asset('styles/categories-tv.css')}}" />
    <link rel="stylesheet" href="{{bagisto_asset('styles/style.css')}}">
    <link rel="stylesheet" href="{{bagisto_asset('styles/categories-tv.css')}}">
    <link rel="stylesheet" href="{{bagisto_asset('styles/cart.css')}}">
    <link rel="stylesheet" href="{{bagisto_asset('styles/favourites.css')}}">
@endpush

@section('content-wrapper')
<svg display="none">
        <symbol id="rows" viewBox="0 0 23 20">
            <g id="View_2_" data-name="View (2)" transform="translate(0 -61)">
                <g id="Сгруппировать_39" data-name="Сгруппировать 39" transform="translate(5.192 61)">
                    <g id="Сгруппировать_38" data-name="Сгруппировать 38" transform="translate(0 0)">
                        <path id="Контур_72" data-name="Контур 72"
                            d="M135.764,61h-13.72a1.8,1.8,0,1,0,0,3.562h13.72a1.8,1.8,0,1,0,0-3.562Z"
                            transform="translate(-120 -61)" />
                    </g>
                </g>
                <g id="Сгруппировать_41" data-name="Сгруппировать 41" transform="translate(5.192 69.219)">
                    <g id="Сгруппировать_40" data-name="Сгруппировать 40" transform="translate(0 0)">
                        <path id="Контур_73" data-name="Контур 73"
                            d="M135.764,211h-13.72a1.8,1.8,0,1,0,0,3.562h13.72a1.8,1.8,0,1,0,0-3.562Z"
                            transform="translate(-120 -211)" />
                    </g>
                </g>
                <g id="Сгруппировать_43" data-name="Сгруппировать 43" transform="translate(5.192 77.438)">
                    <g id="Сгруппировать_42" data-name="Сгруппировать 42">
                        <path id="Контур_74" data-name="Контур 74"
                            d="M135.764,361h-13.72a1.8,1.8,0,1,0,0,3.562h13.72a1.8,1.8,0,1,0,0-3.562Z"
                            transform="translate(-120 -361)" />
                    </g>
                </g>
                <g id="Сгруппировать_45" data-name="Сгруппировать 45" transform="translate(0 61)">
                    <g id="Сгруппировать_44" data-name="Сгруппировать 44" transform="translate(0 0)">
                        <path id="Контур_75" data-name="Контур 75"
                            d="M1.781,61a1.781,1.781,0,1,0,1.781,1.781A1.783,1.783,0,0,0,1.781,61Z"
                            transform="translate(0 -61)" />
                    </g>
                </g>
                <g id="Сгруппировать_47" data-name="Сгруппировать 47" transform="translate(0 69.219)">
                    <g id="Сгруппировать_46" data-name="Сгруппировать 46" transform="translate(0 0)">
                        <path id="Контур_76" data-name="Контур 76"
                            d="M1.781,211a1.781,1.781,0,1,0,1.781,1.781A1.783,1.783,0,0,0,1.781,211Z"
                            transform="translate(0 -211)" />
                    </g>
                </g>
                <g id="Сгруппировать_49" data-name="Сгруппировать 49" transform="translate(0 77.438)">
                    <g id="Сгруппировать_48" data-name="Сгруппировать 48">
                        <path id="Контур_77" data-name="Контур 77"
                            d="M1.781,361a1.781,1.781,0,1,0,1.781,1.781A1.783,1.783,0,0,0,1.781,361Z"
                            transform="translate(0 -361)" />
                    </g>
                </g>
            </g>
        </symbol>
        <symbol id="cubes" viewBox="0 0 20 20">
            <g id="View_1_" data-name="View (1)" transform="translate(-1542 -408)">
                <path id="Контур_68" data-name="Контур 68"
                    d="M5.222-1H1.667A2.666,2.666,0,0,0-1,1.667V5.222A2.666,2.666,0,0,0,1.667,7.889H5.222A2.666,2.666,0,0,0,7.889,5.222V1.667A2.666,2.666,0,0,0,5.222-1Zm.889,6.222a.888.888,0,0,1-.889.889H1.667a.888.888,0,0,1-.889-.889V1.667A.888.888,0,0,1,1.667.778H5.222a.888.888,0,0,1,.889.889V5.222Z"
                    transform="translate(1543 409)" />
                <path id="Контур_69" data-name="Контур 69"
                    d="M5.222-1H1.667A2.666,2.666,0,0,0-1,1.667V5.222A2.666,2.666,0,0,0,1.667,7.889H5.222A2.666,2.666,0,0,0,7.889,5.222V1.667A2.666,2.666,0,0,0,5.222-1Zm.889,6.222a.888.888,0,0,1-.889.889H1.667a.888.888,0,0,1-.889-.889V1.667A.888.888,0,0,1,1.667.778H5.222a.888.888,0,0,1,.889.889V5.222Z"
                    transform="translate(1554.111 409)" />
                <path id="Контур_70" data-name="Контур 70"
                    d="M5.222-1H1.667A2.666,2.666,0,0,0-1,1.667V5.222A2.666,2.666,0,0,0,1.667,7.889H5.222A2.666,2.666,0,0,0,7.889,5.222V1.667A2.666,2.666,0,0,0,5.222-1Zm.889,6.222a.888.888,0,0,1-.889.889H1.667a.888.888,0,0,1-.889-.889V1.667A.888.888,0,0,1,1.667.778H5.222a.888.888,0,0,1,.889.889V5.222Z"
                    transform="translate(1554.111 420.111)" />
                <path id="Контур_71" data-name="Контур 71"
                    d="M5.222-1H1.667A2.666,2.666,0,0,0-1,1.667V5.222A2.666,2.666,0,0,0,1.667,7.889H5.222A2.666,2.666,0,0,0,7.889,5.222V1.667A2.666,2.666,0,0,0,5.222-1Zm.889,6.222a.888.888,0,0,1-.889.889H1.667a.888.888,0,0,1-.889-.889V1.667A.888.888,0,0,1,1.667.778H5.222a.888.888,0,0,1,.889.889V5.222Z"
                    transform="translate(1543 420.111)" />
            </g>
        </symbol>
</svg>
<!-- BREADCRUMB ======================================================================== -->
<section class="breadcrumb">
        <div class="container">

            <div class="breadcrumb-container">
                <ul class="breadcrumb">
                    <li><a href="/">{{__('shop::app.home.page-title')}}</a></li>
                    <li><a href="#" class="current">{{__('shop::app.search.page-title')}}</a></li>
                </ul>
            </div>
        </div>
    </section>
    <!-- BREADCRUMB end ==================================================================== -->

<main class="item-section container empty">
    @if (request('image-search'))
        <image-search-result-component></image-search-result-component>
    @endif

    @if (! $results)
        {{  __('shop::app.search.no-results') }}
    @endif

    @if ($results)
            @if ($results->isEmpty())
                <div class="empty_icon">
                    <img src="{{bagisto_asset('icons/search_pink.svg')}}" alt="empty search">

                </div>
                <h2 class="empty_text">{{ __('shop::app.search.no-results') }}</h2>
            @else
                <!-- FAVOURITES CONTENT =================================================================-->
                    <div class="favourites-content-inner">
                        <div class="item-section-title">
                            <h2 class="item-section-title-text">{{ $results->total() }} {{ ($results->total() == 1) ? __('shop::app.search.found-result') : __('shop::app.search.found-results') }} </h2>
                            <div class="item-section-filter item-section-filter-desktop">
                                <div class="item-section-filter-img">
                                    <img src="{{bagisto_asset('icons/Filter.svg')}}" alt="Filter">
                                </div>

                                @inject ('toolbarHelper', 'Webkul\Product\Helpers\Toolbar')

                                <select name="filter-option" onchange="window.location.href = this.value" id="filter-options">
                                    @foreach ($toolbarHelper->getAvailableOrders() as $key => $order)
                                        <option value="{{ $toolbarHelper->getOrderUrl($key) }}" {{ $toolbarHelper->isOrderCurrent($key) ? 'selected' : '' }}>
                                            <span>{{ __('shop::app.products.' . $order) }}</span>
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="item-section-view">
                                <div class="item-section-view-img-1 ">
                                    <svg class="rows ">
                                        <use xlink:href="#rows"></use>
                                    </svg>
                                </div>
                                <div class="item-section-view-img-2 view-active">
                                    <svg class="cubes icon-active">
                                        <use xlink:href="#cubes"></use>
                                    </svg>
                                </div>
                            </div>
                        </div>
                        <div class="horizontal"></div>
                        <div class="item-section-products">
                            <div class="product-block-wrapper gridded-view">

                            @foreach ($results as $productFlat)
                                @include('shop::products.list.card', ['product' => $productFlat->product])
                            @endforeach

                            </div>
                        </div>
                    </div>
                    <div class="product-section-pagination">
                        <div class="pagination-buttons">
                            <a href="{{ $results->previousPageUrl() }}" class="pagination-button pagination-button-left">
                                <div>
                                    <img src="{{bagisto_asset('icons/arrow-down-sign-to-navigate.svg')}}" alt="">
                                </div>
                            </a>
                            <span class="mid-button-text">{{ $results->currentPage()}}</span>
                            <a href="{{ $results->nextPageUrl() }}" class="pagination-button pagination-button-right">
                                <div>
                                    <img src="{{bagisto_asset('icons/arrow-down-sign-to-navigate.svg')}}" alt="">
                                </div>
                            </a>
                        </div>
                        <h6 class="page-count">{{__('shop::app.products.total-pages',['total'=>$results->lastPage()])}}</h6>
                    </div>
            @endif
    @endif
</main>
@endsection

@push('scripts')

    <script type="text/x-template" id="image-search-result-component-template">
        <div class="image-search-result">
            <div class="searched-image">
                <img :src="searched_image_url" alt=""/>
            </div>

            <div class="searched-terms">
                <h3>{{ __('shop::app.search.analysed-keywords') }}</h3>

                <div class="term-list">
                    <a v-for="term in searched_terms" :href="'{{ route('shop.search.index') }}?term=' + term">
                        @{{ term }}
                    </a>
                </div>
            </div>
        </div>
    </script>

    <script>
        Vue.component('image-search-result-component', {

            template: '#image-search-result-component-template',

            data: function() {
                return {
                    searched_image_url: localStorage.searched_image_url,

                    searched_terms: []
                }
            },

            created: function() {
                if (localStorage.searched_terms && localStorage.searched_terms != '') {
                    this.searched_terms = localStorage.searched_terms.split('_');
                }
            }
        });
    </script>

<script>
    $(document).ready(function(){
        let viewButton1 = document.querySelector('.item-section-view-img-1');
        let viewButton2 = document.querySelector('.item-section-view-img-2');
        let product = document.querySelectorAll('.product-block');
        let itemSection = document.querySelector('.product-block-wrapper');
        let svgRowIcon = document.querySelector('.rows');
        let svgCubeIcon = document.querySelector('.cubes');

        viewButton1.addEventListener('click', () => {
            viewButton1.classList.add('view-active');
            viewButton2.classList.remove('view-active');
            itemSection.classList.remove('gridded-view');
            product.forEach((el) => {
                el.classList.remove('cube-view');
            });
            svgRowIcon.classList.add('icon-active');
            svgCubeIcon.classList.remove('icon-active');
        });
        viewButton2.addEventListener('click', () => {
            viewButton2.classList.add('view-active');
            viewButton1.classList.remove('view-active');
            itemSection.classList.add('gridded-view');
            product.forEach((el) => {
                el.classList.add('cube-view');
            });
            svgRowIcon.classList.remove('icon-active');
            svgCubeIcon.classList.add('icon-active');
        });

    });
</script>


@endpush