@extends('app')
@php
    $citySlug = \App\Helpers\Transliterator::transliterate(session('city', 'Москва'));
    $defaultSearch = 'specialist';
    $seoKey = 'home';
@endphp
{{-- @include('header') --}}
@section('content')
<main>
    <section class="hero">
        <div class="container">
            <div class="hero__top">
                <h1 class="hero__title">Ремонт начинается здесь</h1>
                <p class="hero__subtitle">Найдите мастеров и товары для ремонта в своём городе</p>
            </div>
            <div class="hero__search">
                <form action="{{ route(($defaultSearch == 'product' ? 'showProductPage' : 'showCatalogPage'),['city'=> session('slug','moskva')]) }}" method="GET" id="form_search">

                    <div class="wrapper hero__search-item">
                        <div class="hero__search-input">
                            <a href="" target="_blank" hidden></a>
                            <input
                                    type="text"
                                    name="query"
                                    placeholder="{{($defaultSearch != 'product' ? 'Найти услугу' : 'Найти товар')}}"
                                    id="searchInput"
                                    style="width: 100%; padding-left: 40px; padding-right: 40px;"
                            >
                            <div class="autocom-box"></div>
                            <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>
                        </div>
                        <button class="hero__search-btn">Найти</button>
                    </div>
                </form>
            </div>
            <div class="hero__search-input_toggler">
                <div class="hero__search-input_toggler_title">Поиск: </div>
                <div class="hero__search-input_toggler_container">
                    <label class="hero__search-input_toggle" onclick="searchInput.placeholder = 'Найти услугу',form_search.action = '{{route('showCatalogPage',['city'=> session('slug','moskva')])}}', for_products.style.display = 'none',for_services.style.display = 'flex'">
                        <input type="radio" name="search" id="" {{($defaultSearch != 'product' ? 'checked' : '')}}>
                        <span>По услугам</span>
                    </label>
                    <label class="hero__search-input_toggle" onclick="searchInput.placeholder = 'Найти товар',form_search.action = '{{route('showProductPage',['city'=> session('slug','moskva')])}}', for_services.style.display = 'none',for_products.style.display = 'flex'">
                        <input type="radio" name="search" id="" {{($defaultSearch == 'product' ? 'checked' : '')}}>
                        <span>По товарам</span>
                    </label>
                </div>
            </div>
            <ul class="hero__search-list row" data-search="for_services" id="for_services" style="display: {{($defaultSearch != 'product' ? '' : 'none')}};" >