@php use App\Models\Category;
    $seoKey = 'setup';
@endphp
@extends('app')
@section('content')
<main>
    <section class="profile">
        <div class="container">
            <div class="profile__header">
                <div class="profile__overlay">
                    <img class="profile__intro" src="{{ user_image_url($user->intro_image, 'intro') }}" alt="">
                    <div class="profile__avatar">
                        <img src="{{ user_image_url($user->image, 'avatar') }}">
                    </div>
                    <div class="profile__user">
                        <div class="profile__user-left">
                            <p class="profile__user-name">{{$user->name}}</p>
                            <p class="profile__user-stats">
                                <span class="profile__user-status">ПРО</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <ul class="profile__navigation">
                <li class="profile__navigation-item {{ Route::is('showProfilePage') || Route::is('showSetupPage') ? 'profile__navigation-item--active' : '' }}"><a href="{{route('showProfilePage')}}" class="profile__navigation-link">Главная</a></li>
                <li class="profile__navigation-item {{ Route::is('showMyProjectPage') ? 'profile__navigation-item--active' : '' }}"><a href="{{route('showMyProjectPage')}}" class="profile__navigation-link">Проекты</a></li>
                <li class="profile__navigation-item {{ Route::is('showAlbumPage') || Route::is('showGalleryAlbumPage') ? 'profile__navigation-item--active' : '' }}"><a href="{{route('showAlbumPage')}}" class="profile__navigation-link">Альбомы идей</a></li>
                <li class="profile__navigation-item {{ Route::is('showFavoritesPage') ? 'profile__navigation-item--active' : '' }}"><a href="{{route('showFavoritesPage')}}" class="profile__navigation-link">Избранные</a></li>
                <li class="profile__navigation-item {{ Route::is('showReviewsPage') ? 'profile__navigation-item--active' : '' }}"><a href="{{route('showReviewsPage')}}" class="profile__navigation-link">Отзывы</a></li>
                <li class="profile__navigation-item {{ Route::is('chat.index') || Route::is('chat') ? 'profile__navigation-item--active' : '' }}">
                    <a href="{{route('chat.index')}}" class="profile__navigation-link">
                        Сообщения
                        @if(auth()->check() && auth()->user()->unreadMessagesCount() > 0)
                            <span class="messages-badge">{{ auth()->user()->unreadMessagesCount() }}</span>
                        @endif
                    </a>
                </li>
            </ul>
        </div>
    </section>
    <section class="setup">
        <div class="container">
            <!-- Tabs -->
            <div class="setup__wrapper">
                <div class="setup__header" style="justify-content: unset">
                    <div class="setup__header-item active">
                        <div class="setup__header-circle {{ isset($isProfileFilled) && $isProfileFilled ? 'setup__header-circle--completed' : '' }}">
                            @if(isset($isProfileFilled) && $isProfileFilled)
                                <svg width="12" height="9" viewBox="0 0 12 9" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M1 4.5L4.5 8L11 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                            @endif
                        </div>
                        <span class="setup__header-name">Заполнить профиль</span>
                    </div>
                    <div class="setup__header-item">
                        <div class="setup__header-circle {{ isset($hasAtLeastOneProject) && $hasAtLeastOneProject ? 'setup__header-circle--completed' : '' }}">
                            @if(isset($hasAtLeastOneProject) && $hasAtLeastOneProject)
                                <svg width="12" height="9" viewBox="0 0 12 9" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M1 4.5L4.5 8L11 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                            @endif
                        </div>
                        <span class="setup__header-name">Загрузить фото проекта</span>
                    </div>
                    <div class="setup__header-item">
                        <div class="setup__header-circle {{ isset($hasAtLeastOneReviewRequest) && $hasAtLeastOneReviewRequest ? 'setup__header-circle--completed' : '' }}">
                            @if(isset($hasAtLeastOneReviewRequest) && $hasAtLeastOneReviewRequest)
                                <svg width="12" height="9" viewBox="0 0 12 9" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M1 4.5L4.5 8L11 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                            @endif
                        </div>
                        <span class="setup__header-name">Запросить отзывы</span>
                    </div>
                </div>
                <div class="setup__content">
                    <div class="setup__content-item">
                        <p class="setup__content-title">
                            В вашем профиле отсутствует ключевая информация для привлечения клиентов
                        </p>
                        <p class="setup__content-info">Заполните профиль, чтобы потенциальные клиенты могли вас найти.</p>
                        <button class="btn-main setup__content-btn modal__btn1">Заполнить мой профиль</button>
                    </div>
                    <div class="setup__content-item">
                        <p class="setup__content-title">Загрузите фото своих работ это сделает вашу анкету более привлекательной для заказчиков.</p>
                        <p class="setup__content-info">Фото проектов помогают заказчикам быстрее найти и выбрать именно вас.</p>
                        <button class="btn-main setup__content-btn modal__btn2">Заполнить фото проекта</button>
                    </div>
                    <div class="setup__content-item">
                        <p class="setup__content-title">
                            Попросите бывших клиентов и коллег оставить отзывы о вашей работе
                        </p>
                        <p class="setup__content-info">Хотите больше заявок? Исполнители с минимум 3 отзывами получают отклики в 15 раз чаще.</p>
                        <button class="btn-main setup__content-btn modal__btn3">Запросить отзывы</button>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>


<!-- Modal -->
<div class="modal__wrapper1" style="display: none">
    <div class="modal">
        <div class="modal__close1"><img src="{{asset('assets/img/close.svg')}}" alt="cancel" width="20" height="20"></div>
        <div class="modal__body">
            <form action="{{route('addSpecialistInfo')}}" method="POST" class="steps__form" enctype="multipart/form-data">
                @csrf
                <div class="steps">
                    <div class="form__step">
                        <div class="form__header">
                            <p class="form__title">Укажите рабочий адрес</p>
                    <br>
                        </div>
                        <div class="form__wrapper">
                            <div class="form__main">
                                {{-- <div class="form-group">
                                    <label class="form-group__labels labels-required">Фамилия</label>
                                    <input class="input-main form-group__input" name="surName" type="text" required>
                                </div> --}}
                                <div class="form-group">
                                    <label class="form-group__labels labels-required" for="cityInput">Город</label>
                                    <input class="input-main form-group__input" id="cityInput" name="city" type="text" autocomplete="off" required>
                                    <ul id="suggestions" class="suggestions-list"></ul>
                                </div>

                                <div class="form-group">
                                    <label class="form-group__labels labels-required" for="addressInput">Адрес</label>
                                    <input class="input-main form-group__input" id="addressInput" name="address" type="text" required>
                                    <ul id="addressSuggestions" class="suggestions-list hidden"></ul>
                                </div>

                            </div>
                            <div class="form__info">
                                <p class="form__info-title">Клиенты из вашего города увидят вас в результатах поиска.</p>
                                <p class="form__info-text">Указанный рабочий адрес будет отображаться на вашей странице. Профиль появится в результатах поиска среди специалистов вашего региона на Ремонт.рф</p>
	                            </div>
                        </div>
                    </div>
                    <div class="form__step">
                        <div class="form__header">
                            <p class="form__title">Где вы оказываете услуги?</p>
                            	<br>
                            <p class="form__subtitle">Выберите города, в которых готовы брать заказы. Так вы получите больше подходящих откликов от клиентов из нужных вам регионов.</p>
                        </div>
                        <div class="form__main">
                            <div class="hero__search-input" style="position: relative;">
                                <a href="" target="_blank" hidden></a>
                                <label for="geoSearchInput" class="sr-only">Найти город</label>
                                <input id="geoSearchInput" type="text" placeholder="Найти город" autocomplete="off">
                                <ul id="geoSuggestions" class="suggestions-list" style="top:41px; left:0;"></ul>
                                <span class="icon">
                                    <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>
                                 </span>
                            </div>
                            	<br>
                            <p class="form__text">Меня интересуют клиенты из:</p>
                            <div class="city-container">
                                <div class="city">
                                    <label class="checkbox__item">
                                        <input type="checkbox" name="geographies[]" value="Москва"
                                               class="checkbox__input">
                                        <span class="fake"></span>
                                        <span class="checkbox__name checkbox__form">Москва</span>
                                    </label>
                                    <label class="checkbox__item">
                                        <input type="checkbox" name="geographies[]" value="Новосибирск"
                                               class="checkbox__input">
                                        <span class="fake"></span>
                                        <span class="checkbox__name checkbox__form">Новосибирск</span>
                                    </label>
                                    <label class="checkbox__item">
                                        <input type="checkbox" name="geographies[]" value="Казань"
                                               class="checkbox__input">
                                        <span class="fake"></span>
                                        <span class="checkbox__name checkbox__form">Казань</span>
                                    </label>
                                    <label class="checkbox__item">
                                        <input type="checkbox" name="geographies[]" value="Нижний Новгород"
                                               class="checkbox__input">
                                        <span class="fake"></span>
                                        <span class="checkbox__name checkbox__form">Нижний Новгород</span>
                                    </label>
                                    <label class="checkbox__item">
                                        <input type="checkbox" name="geographies[]" value="Самара"
                                               class="checkbox__input">
                                        <span class="fake"></span>
                                        <span class="checkbox__name checkbox__form">Самара</span>
                                    </label>
                                    <label class="checkbox__item">
                                        <input type="checkbox" name="geographies[]" value="Ростов-на-Дону"
                                               class="checkbox__input">
                                        <span class="fake"></span>
                                        <span class="checkbox__name checkbox__form">Ростов-на-Дону</span>
                                    </label>
                                    <label class="checkbox__item">
                                        <input type="checkbox" name="geographies[]" value="Воронеж"
                                               class="checkbox__input">
                                        <span class="fake"></span>
                                        <span class="checkbox__name checkbox__form">Воронеж</span>
                                    </label>
                                    <label class="checkbox__item">
                                        <input type="checkbox" name="geographies[]" value="Волгоград"
                                               class="checkbox__input">
                                        <span class="fake"></span>
                                        <span class="checkbox__name checkbox__form">Волгоград</span>
                                    </label>
                                </div>
                                <div class="city">
                                    <label class="checkbox__item">
                                        <input type="checkbox" name="geographies[]" value="Краснодар"
                                               class="checkbox__input">
                                        <span class="fake"></span>
                                        <span class="checkbox__name checkbox__form">Краснодар</span>
                                    </label>
                                    <label class="checkbox__item">
                                        <input type="checkbox" name="geographies[]" value="Пермь"
                                               class="checkbox__input">
                                        <span class="fake"></span>
                                        <span class="checkbox__name checkbox__form">Пермь</span>
                                    </label>
                                    <label class="checkbox__item">
                                        <input type="checkbox" name="geographies[]" value="Санкт-Петербург"
                                               class="checkbox__input">
                                        <span class="fake"></span>
                                        <span class="checkbox__name checkbox__form">Санкт-Петербург</span>
                                    </label>
                                    <label class="checkbox__item">
                                        <input type="checkbox" name="geographies[]" value="Екатеринбург"
                                               class="checkbox__input">
                                        <span class="fake"></span>
                                        <span class="checkbox__name checkbox__form">Екатеринбург</span>
                                    </label>
                                    <label class="checkbox__item">
                                        <input type="checkbox" name="geographies[]" value="Красноярск"
                                               class="checkbox__input">
                                        <span class="fake"></span>
                                        <span class="checkbox__name checkbox__form">Красноярск</span>
                                    </label>
                                    <label class="checkbox__item">
                                        <input type="checkbox" name="geographies[]" value="Челябинск"
                                               class="checkbox__input">
                                        <span class="fake"></span>
                                        <span class="checkbox__name checkbox__form">Челябинск</span>
                                    </label>
                                    <label class="checkbox__item">
                                        <input type="checkbox" name="geographies[]" value="Уфа" class="checkbox__input">
                                        <span class="fake"></span>
                                        <span class="checkbox__name checkbox__form">Уфа</span>
                                    </label>
                                    <label class="checkbox__item">
                                        <input type="checkbox" name="geographies[]" value="Омск"
                                               class="checkbox__input">
                                        <span class="fake"></span>
                                        <span class="checkbox__name checkbox__form">Омск</span>
                                    </label>
                                </div>
                            </div>

                        </div>

                    </div>
                    <div class="form__step">
                        <div class="form__header">
                            <p class="form__title">Какие вы оказываете услуги?</p>
                            <p class="form__subtitle">Отметьте все услуги, которые вы готовы предоставить по отдельности</p>
                        <br>
                        </div>
                        <div class="form__wrapper">
                            <div class="form__main">
                                <!-- Поиск услуг убран, выводим чекбоксы подкатегорий автоматически -->