@extends('app')
@php
    use Illuminate\Support\Facades\Storage;
@endphp
@section('content')
<main>
    <section class="person">
        <div class="container">
            <div class="person__breadcrumbs breadcrumbs">
                <div class="breadcrumbs__inner">
                    <ul class="breadcrumbs__list mobile-overflow">
                        <li class="breadcrumbs__list-item">
                            <a href="{{ route('showHomePage') }}">Главная</a>
                        </li>
                        @if(isset($breadcrumbCity) && isset($breadcrumbCitySlug))
                            <li class="breadcrumbs__list-item">
                                <a href="{{ route('showCatalogPage', ['city' => $breadcrumbCitySlug, 'category' => null, 'subcategory' => null]) }}">
                                    {{ $breadcrumbCity }}
                                </a>
                            </li>
                        @endif
                        @if(isset($breadcrumbCategory) && isset($breadcrumbCategorySlug) && isset($breadcrumbCitySlug))
                            <li class="breadcrumbs__list-item">
                                <span>{{ $breadcrumbCategory }}</span>
                            </li>
                        @endif
                    </ul>
                </div>
            </div>
            <div class="specialist__person">
                <div class="specialist__person">
                    <div class="specialist__person-left">
                        <img class="specialist__person-img" src="{{ user_image_url($professional->card_image, 'card') }}" alt="">
                        <div class="specialist__person-info">
                            <p class="specialist__person-name">{{ $professional->specialistInfo->company_name }}</p>
                            <div class="specialist__person-rating">
                                <div class="specialist__person-stats">
                                    <div class="star-rating">
                                        <span class="specialist__person-stars">{{ $averageRating }}</span>
                                        @for ($i = 1; $i <= 5; $i++)
                                            <span class="star {{ $i <= $averageRating ? 'filled' : '' }}">&#9733;</span>
                                        @endfor

                                    </div>
                                    <span class="specialist__person-quli">Отзывов: {{ $professional->reviews->filter(function($review) {
                                     return !empty($review->reviews); // Проверьте, что текст отзыва не пустой
                                    })->count() }}</span>

                                </div>
                                <p>{{ $professional->category }}</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="specialist__person-right">
                    @if(!auth()->check() || (auth()->check() && auth()->user()->id !== (int)$specialistId))
                        <div class="user">
                            @livewire('users', ['specialistId' => $specialistId])
                        </div>
                    <button class="specialist__person-btn btn-outline send-review-btn">
                        <svg width="20.069824" height="19.021362" viewBox="0 0 20.0698 19.0214" fill="none"
                             xmlns="http://www.w3.org/2000/svg">
                            <path id="Vector"
                                  d="M15.616 19.0214C15.4573 19.0214 15.2979 18.9843 15.1514 18.908L10.0344 16.2346L4.91846 18.908C4.57935 19.0836 4.16992 19.0535 3.86279 18.8287C3.55371 18.6039 3.40015 18.2236 3.46558 17.8473L4.43994 12.1996L0.30542 8.20068C0.0305176 7.93469 -0.0688477 7.53528 0.048584 7.17004C0.166016 6.80676 0.47998 6.54077 0.859375 6.48669L6.57935 5.65576L9.13623 0.511841C9.47534 -0.170654 10.5942 -0.170654 10.9336 0.511841L13.4905 5.65576L19.2104 6.48669C19.5898 6.54077 19.9038 6.80676 20.0212 7.17004C20.1387 7.53528 20.0393 7.93469 19.7644 8.20068L15.6299 12.1996L16.6042 17.8473C16.6697 18.2236 16.5151 18.6039 16.207 18.8287C16.0322 18.9572 15.8247 19.0214 15.616 19.0214Z"
                                  fill="#217B00" fill-opacity="1.000000" fill-rule="evenodd"/>
                        </svg>
                        Оставить отзыв
                    </button>
                    @endif
                    <button id="shareButton" class="specialist__person-btn btn-outline">
                        <svg width="23.983398" height="24.000000" viewBox="0 0 23.9834 24" fill="none"
                             xmlns="http://www.w3.org/2000/svg">
                            <path id="Vector"
                                  d="M12.7031 5.69043C5.66235 6.05713 0 11.9011 0 19.0312L0 24L1.77783 19.8615C3.88037 15.6571 8.05176 12.9689 12.7031 12.7217L12.7031 18.4084L23.9834 9.1875L12.7031 0L12.7031 5.69043Z"
                                  fill="#217B00" fill-opacity="1.000000" fill-rule="nonzero"/>
                        </svg>

                        Поделиться
                    </button>
                </div>
            </div>

            <!-- Модальное окно -->
            <div class="modal" id="myForm" tabindex="-1" role="dialog">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title"><b>Оставить отзыв</b></h4>
                            <button type="button" class="close" id="closeModalBtn" aria-label="Close">
                                <i class="fa fa-times"></i>
                            </button>
                        </div>
                        <form id="reviewForm" action="{{ route('saveReview',['id' => $professional->id]) }}" method="POST"
                              enctype="multipart/form-data">
                            @csrf
                            <h4 style="text-align: center"><b>Оцените качество работы специалиста</b></h4>
                            <div class="modal-body">
                                <div class="form-group reviews_container">
                                    <label><b style="margin-left: -20px">Качество работы</b></label>
                                    <p class="stars">
                            <span>
                                <a class="star-1" href="#">1</a>&nbsp;&nbsp;
                                <a class="star-2" href="#">2</a>&nbsp;&nbsp;
                                <a class="star-3" href="#">3</a>&nbsp;&nbsp;
                                <a class="star-4" href="#">4</a>&nbsp;&nbsp;
                                <a class="star-5" href="#">5</a>
                            </span>
                                    </p>
                                    <input type="hidden" name="professionalism" id="professionalism" value="">

                                    <label><b style="margin-left: -11px">Коммуникация</b></label>
                                    <p class="stars">
                            <span>
                                <a class="star-1" href="#">1</a>&nbsp;&nbsp;
                                <a class="star-2" href="#">2</a>&nbsp;&nbsp;
                                <a class="star-3" href="#">3</a>&nbsp;&nbsp;
                                <a class="star-4" href="#">4</a>&nbsp;&nbsp;
                                <a class="star-5" href="#">5</a>
                            </span>
                                    </p>
                                    <input type="hidden" name="timeliness" id="timeliness" value="">

                                    <label><b style="margin-left: 5px">Стоимость</b></label>
                                    <p class="stars">
                            <span>
                                <a class="star-1" href="#">1</a>&nbsp;&nbsp;
                                <a class="star-2" href="#">2</a>&nbsp;&nbsp;
                                <a class="star-3" href="#">3</a>&nbsp;&nbsp;
                                <a class="star-4" href="#">4</a>&nbsp;&nbsp;
                                <a class="star-5" href="#">5</a>
                            </span>
                                    </p>
                                    <input type="hidden" name="cost" id="cost" value="">
                                </div>
                            </div>
                            <label for="text" class="text_text"><b>Текст отзыва</b></label>
                            <textarea id="text" name="review" class="form__textarea settings__textarea reviews_text"
                                       rows="4" maxlength="800"
                            ></textarea>
                            <p id="charCount" style="font-size: 14px;margin: 0 24px;">Осталось символов: 800</p>
                            <div class="modal-footer">
                                <button type="submit" style="margin-left: 80%" class="btn-main settings__btn">
                                    Отправить
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="tabs">
                <div class="tabs__header">
                    <div class="tabs__header-item">О нас</div>
                    <div class="tabs__header-item" data-target="contacts">Контакты</div>
                    <div class="tabs__header-item" data-target="awards">Награды</div>
                    <div class="tabs__header-item" data-target="reviews">Отзывы</div>
                </div>
            </div>
            <div class="specialist__person-bottom">
                @if ($professional->specialistInfo->professional_info)
                <h3 class="specialist__person-title">О нас:</h3>
                <div class="tabs__content-item">
                    {!! nl2br(e($professional->specialistInfo->professional_info ?? '')) !!}
                </div>
                @endif
                @if ($professional->specialistInfo->description)
                <h3 class="specialist__person-title" style="margin-top: 20px;">Предоставляемые услуги:</h3>
                <div class="specialist__person-info">
                    {!! nl2br(e($professional->specialistInfo->description ?? '')) !!}
                </div>
                @endif
            </div>
        </div>
    </section>
    <section class="project">
        <div class="container">
            <h4 class="project__title">Проектов: {{$professional->projects->count()}}</h4>
            <div class="project__list" id="project-list">
                <!-- Проекты будут загружаться сюда -->
                @foreach($professional->projects->take(4) as $pro) <!-- Показываем только 4 проекта изначально -->
                @php
                    $coverImage = $pro->images()->where('is_cover', true)->first();
                @endphp
                <div class="project__item">
                    <a href="{{ route('showGalleryPage', $pro->id) }}">
                        @if($coverImage)
                            <img src="{{ project_image_url($coverImage->images) }}" style="width: 100%; height: auto;aspect-ratio: 1 / 1; border-radius: 20px;object-fit: cover" alt="project">
                        @elseif(isset($pro->images[0]))
                            <img src="{{ project_image_url($pro->images[0]->images) }}" style="width: 100%; height: auto;aspect-ratio: 1 / 1; border-radius: 20px;object-fit: cover" alt="project">
                        @else
                            <img src="{{ asset('default-images/default-image.png') }}" style="width: 100%; height: auto;aspect-ratio: 1 / 1; border-radius: 20px;object-fit: cover" alt="project">
                        @endif
                        <div class="project__item-bottom row">
                            <div class="project__item-name">{{ $pro->title }}</div>
                            <svg width="23.983521" height="24.000000" viewBox="0 0 23.9835 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path id="Vector" d="M12.7031 5.69043C5.66223 6.0571 0 11.9012 0 19.0312L0 24L1.77771 19.8614C3.88025 15.6571 8.05176 12.9689 12.7031 12.7217L12.7031 18.4085L23.9835 9.1875L12.7031 0L12.7031 5.69043Z" fill="#217B00" fill-opacity="1.000000" fill-rule="nonzero"/>
                            </svg>
                        </div>
                    </a>

                </div>
                @endforeach
            </div>
            @if($professional->projects->count()>4)
            <div class="project__btn">
                <button class="btn-outline" id="load-more">Загрузить еще</button>
            </div>
            @endif
        </div>
    </section>
    <section class="contact" id="contacts">
        <div class="container">
            <h4 class="contact__title">Контакты</h4>
            <div class="contact__list">
                @if($professional->specialistInfo->vkontakte || $professional->specialistInfo->instagram || $professional->specialistInfo->telegram || $professional->specialistInfo->website)
                <div class="contact__item">
                    <p class="contact__item-title">Контактное лицо</p>
                    <div class="contact__info-list">
                        @if($professional->specialistInfo->vkontakte)
                        <a href="{{$professional->specialistInfo->vkontakte}}" class="contact__social-link">
                            <img src="{{asset('assets/img/social-vk.svg')}}" alt="social" class="contact__social-img">
                        </a>
                        @endif
                        @if($professional->specialistInfo->instagram)
                        <a href="{{$professional->specialistInfo->instagram}}" class="contact__social-link">
                            <img src="{{asset('assets/img/whatsapp-svgrepo-com.svg')}}" alt="social" style="border-radius: 50%;width: 33px;height: 33px" class="contact__social-img">
                        </a>
                        @endif
                        @if($professional->specialistInfo->telegram)
                        <a href="{{$professional->specialistInfo->telegram}}" class="contact__social-link">
                            <img src="{{asset('assets/img/social-telegram.svg')}}" alt="social" class="contact__social-img">
                        </a>
                        @endif
                        @if($professional->specialistInfo->website)
                        <a href="{{$professional->specialistInfo->website}}" class="contact__social-link contact__website">
                            <img src="{{asset('assets/img/social-website.svg')}}" alt="website" class="contact__social-img">
                        </a>
                        @endif
                    </div>
                </div>
                @endif
                    @if ($professional->specialistInfo->price)
                <div class="contact__item">
                    <p class="contact__item-title">Цены</p>
                    <div class="contact__info">
                        <p class="contact__info-name">
                                {{ $professional->specialistInfo->price}}
                        </p>
                        <p class="contact__info-text">Средний, ниже среднего</p>
                    </div>
                </div>
                    @endif
                    @if ($professional->specialistInfo->phone)
                <div class="contact__item">
                    <p class="contact__item-title">Телефон</p>
                    <div class="contact__info">
                        <a class="contact__info-name" href="tel:+79119888909">
                                {{ $professional->specialistInfo->phone}}
                            </a>
                    </div>
                </div>
                    @endif
                    @if ($professional->specialistInfo->address)
                <div class="contact__item">
                    <p class="contact__item-title">Адрес</p>
                    <div class="contact__info">
                        <p class="contact__info-name">

                                {{ $professional->specialistInfo->address}}
                        </p>
                    </div>
                </div>
                    @endif
            </div>
        </div>
    </section>
    @if ($professional->specialistInfo->diploma)
    <section class="awards" id="awards">
        <div class="container">
            <h4 class="awards__title">Награды</h4>
            <div class="awards__list">
                <p class="awards__item">
                    {!! nl2br(e($professional->specialistInfo->diploma ?? '')) !!}
                    </p>
            </div>
        </div>
    </section>
    @endif
    @if ($professional->specialistInfo->pricePolitic)
    <section class="awards" id="awards">
        <div class="container">
            <h4 class="awards__title">Политика ценообразования</h4>
            <div class="awards__list">
                <p class="awards__item">
                    {!! nl2br(e($professional->specialistInfo->pricePolitic ?? '')) !!}
                </p>
            </div>
        </div>
    </section>
    @endif
    <section class="reviews" id="reviews">
        <div class="container">
            <div class="reviews__top">
                <h4 class="reviews__top-title">Отзывов о: {{$professional->specialistInfo->company_name ?? $professional->name}} - {{ $professional->reviews->filter(function($review) {
                                     return !empty($review->reviews); // Проверьте, что текст отзыва не пустой
                                    })->count() }}</h4>
                @if(!auth()->check() || (auth()->check() && auth()->user()->id !== (int)$specialistId))
                <button class="specialist__person-btn btn-outline send-review-btn" id="sendReviewBtn">
                    <svg width="20.069824" height="19.021362" viewBox="0 0 20.0698 19.0214" fill="none"
                         xmlns="http://www.w3.org/2000/svg">
                        <path id="Vector"
                              d="M15.616 19.0214C15.4573 19.0214 15.2979 18.9843 15.1514 18.908L10.0344 16.2346L4.91846 18.908C4.57935 19.0836 4.16992 19.0535 3.86279 18.8287C3.55371 18.6039 3.40015 18.2236 3.46558 17.8473L4.43994 12.1996L0.30542 8.20068C0.0305176 7.93469 -0.0688477 7.53528 0.048584 7.17004C0.166016 6.80676 0.47998 6.54077 0.859375 6.48669L6.57935 5.65576L9.13623 0.511841C9.47534 -0.170654 10.5942 -0.170654 10.9336 0.511841L13.4905 5.65576L19.2104 6.48669C19.5898 6.54077 19.9038 6.80676 20.0212 7.17004C20.1387 7.53528 20.0393 7.93469 19.7644 8.20068L15.6299 12.1996L16.6042 17.8473C16.6697 18.2236 16.5151 18.6039 16.207 18.8287C16.0322 18.9572 15.8247 19.0214 15.616 19.0214Z"
                              fill="#217B00" fill-opacity="1.000000" fill-rule="evenodd"/>
                    </svg>
                    Оставить отзыв
                </button>
                @endif
            </div>
            <div class="reviews__filter row" style="display: flex; align-items: center;">
                <div class="search-main__wrapper" style="flex: 1;">
                    <form method="GET" action="{{ route('searchReviews', ['id' => $professional->id]) }}" class="search__form" style="display: flex; align-items: center; gap: 10px; position: relative;">
                        <div style="position: relative;" class="search__div">
                            <!-- Кнопка с иконкой лупы -->
                            <button
                                    type="submit"
                                    class="search-icon"
                                    style="position: absolute; left: 10px; top: 50%; transform: translateY(-50%); border: none; background: none; cursor: pointer; padding: 0; z-index: 10;"
                            >
                                <img src="{{asset('assets/img/search.svg')}}" alt="Search" style="width: 16px; height: 16px;">
                            </button>

                            <!-- Поле ввода -->
                            <input
                                    class="reviews__search search-main"
                                    type="text"
                                    name="search"
                                    placeholder="Поиск в отзывах"
                                    value="{{ request()->search }}"
                                    style="flex: 1"
                                    id="searchInput"
                            >

                            <!-- Кнопка очистки -->
                            <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>

                        <!-- Выпадающий список -->
                        <div class="reviews__drop drop">
                            <div class="drop-select">
                                <span>{{ request()->sort == 'oldest' ? 'В начале старые' : 'В начале новые' }}</span>
                            </div>
                            <ul class="drop-list" style="display: none;">
                                <li>
                                    <button type="submit" name="sort" value="newest" style="background: none; border: none; color: inherit; cursor: pointer;font-size: 16px;">
                                        В начале новые
                                    </button>
                                </li>
                                <li>
                                    <button type="submit" name="sort" value="oldest" style="background: none; border: none; color: inherit; cursor: pointer;font-size: 16px;">
                                        В начале старые
                                    </button>
                                </li>
                            </ul>
                        </div>
                    </form>

                </div>
            </div>
            <div class="reviews__quality">
                <div class="reviews__quality-top">
                    <div class="reviews__quality-stars">
                        @for ($i = 1; $i <= 5; $i++)
                            <span class="star {{ $i <= $averageRating ? 'filled' : '' }}">&#9733;</span>
                        @endfor
                    </div>
                    {{ $averageRating }}
                    @php
                        $textReviws = 'отзывов';

                        if(count($reviews) == 1){
                            $textReviws = 'отзыв';
                        } else if(count($reviews) == 2 || count($reviews) == 3 || count($reviews) == 4){
                            $textReviws = 'отзыва';
                        } else if(count($reviews) <= 5){
                            $textReviws = 'отзывов';
                        }
                    @endphp
                    <span class="reviews__quality-number">({{count($reviews)}} {{$textReviws}})</span>
                    {{-- <div class="star-rating">
                        <span class="specialist__person-stars">{{ $averageRating }}</span>


                    </div> --}}
                </div>
                <div class="reviews__quality-bottom">
                    <div class="reviews__quality-list">
                        <div class="reviews__quality-item">
                            <p>Качество работы</p>
                            <div class="progress-bar-container">
                                <div class="progress-bar" style="width: {{ ($averageProfessionalism / 5) * 100 }}%; background-color: #ffd600;"></div>
                            </div>
                            <span>{{ number_format($averageProfessionalism, 1) }}</span>
                        </div>
                        <div class="reviews__quality-item">
                            <p>Коммуникация</p>
                            <div class="progress-bar-container">
                                <div class="progress-bar" style="width: {{ ($averageTimeliness / 5) * 100 }}%; background-color: #ffd600;"></div>
                            </div>
                            <span>{{ number_format($averageTimeliness, 1) }}</span>
                        </div>
                        <div class="reviews__quality-item">
                            <p>Стоимость</p>
                            <div class="progress-bar-container">
                                <div class="progress-bar" style="width: {{ ($averageCost / 5) * 100 }}%; background-color: #ffd600;"></div>
                            </div>
                            <span>{{ number_format($averageCost, 1) }}</span>
                        </div>
                    </div>
                </div>

            </div>
            <div class="reviews__list" id="reviews-list">
                @php
                    $month_list = array(
                        1  => 'января',
                        2  => 'февраля',
                        3  => 'марта',
                        4  => 'апреля',
                        5  => 'мая',
                        6  => 'июня',
                        7  => 'июля',
                        8  => 'августа',
                        9  => 'сентября',
                        10 => 'октября',
                        11 => 'ноября',
                        12 => 'декабря'
                    );
                    $reviewsToShow = $reviews->take(10);
                    $totalReviewsCount = isset($totalReviews) ? $totalReviews : $reviews->count();
                @endphp
                @foreach($reviewsToShow as $review)
{{--                    @if($review->reviews)--}}
                    <div class="reviews__item" data-review-id="{{ $review->id }}">
                        <div class="reviews__item-top">
                            <img src="{{ user_image_url($review->user->image, 'avatar') }}" style="object-fit: cover" alt="avatar">
                            <div class="reviews__item-ngb">
                                <p class="reviews__item-name">{{ $review->user->name }}</p>
                                {{-- @dd($review) --}}
                                <p class="reviews__item-stars">
                                    @for($i = 1; $i <= 5; $i++)
                                        <span class="star {{ $i <= $review->cost ? 'filled' : '' }}">&#9733;</span>
                                    @endfor
                                </p>
                            </div>
                        </div>
                        <div class="reviews__item-main">
                            <p class="reviews__item-info" style="white-space: normal;word-wrap: break-word;" id="content">
                                {{ $review->reviews }}
                            </p>
                        </div>
                        @php
                            $oldDate = $review->created_at->format('d m Y');
                            $actualM = $month_list[$review->created_at->format('n')];
                        @endphp
                        <p class="reviews__item-date">{{ $review->created_at->format('d') .' '. $actualM .' '. $review->created_at->format('Y') }}</p>
                        @if(mb_strlen($review->reviews) > 200)
                            <button class="toggle-button">Читать далее</button>
                        @endif
                    </div>
{{--                    @endif--}}
                @endforeach
            </div>
            @if($totalReviewsCount > 10)
            <div class="reviews__btn" style="text-align: center; margin-top: 20px;">
                <button class="btn-outline" id="load-more-reviews">Показать еще</button>
            </div>
            @endif
        </div>
    </section>
    @php
        if(!isset($city)){
            if(session('city')){
                $city = session('city');
            }elseif(session('cityGeo')){
                $city = session('cityGeo');
            }else{
                $city = 'Москва';
            }
        }
        if(!isset($slug)){
            if(session('slug')){
                $slug = session('slug');
            }elseif(session('cityGeo')){
                $slug = session('cityGeo');
            }elseif($slug = \App\Models\City::where('title',$city)->first()){
                $slug = $slug->slug;
            }else{
                $slug = 'moskva';
            }
        }
    @endphp
    @if ($similarSpecialists->isNotEmpty())
        <section class="professional" style="margin-top: 50px;">
            <div class="container">
                <div class="professional-top row">
                    <h2 class="professional__title main-title">
                        @if(isset($categoryName) && $categoryName)
                            {{ mb_ucfirst(mb_strtolower($categoryName)) }} в {{ $declinedCity ?? 'Москве' }}
                        @else
                            Специалисты в {{ $declinedCity ?? 'Москве' }}
                        @endif
                    </h2>
                    <div class="professional-btn row">
                        <div class="swiper-button-prev"></div>
                        <div class="swiper-button-next"></div>
                    </div>
                </div>
                {{-- <p class="professional__subtitle main-subtitle">Опытные специалисты для решения ваших задач</p> --}}
                <div class="swiper mySwiper">
                    <div class="swiper-wrapper">
                        @foreach($similarSpecialists->take(10) as $professional)
                            <div class="swiper-slide">
                                <div class="professional__item">
                                    <div class="professional__item-img">
                                        <img src="{{ user_image_url($professional->card_image, 'card') }}" alt="">
                                    </div>
                                    <div class="professional__item-content">
                                        <div class="professional__item-avatar">
                                            <img src="{{ user_image_url($professional->image, 'avatar') }}"
                                                 style="object-fit: cover;width: 80px;height: 80px"
                                                 alt="Miniature Profile">
                                        </div>
                                        <h2 class="professional__item-name">{{ $professional->specialistInfo->company_name }}</h2>
                                        <div class="rating">
                                            @for ($i = 1; $i <= 5; $i++)
                                                <span class="star {{ $i <= $professional->averageRating ? 'filled' : '' }}">&#9733;</span>
                                            @endfor
                                            <span class="rating-count">({{ $professional->averageRating }})</span>
                                        </div>
                                        <p class="professional__item-info">{{ \App\Helpers\CategoryHelper::getCategory(trim($professional->specialistInfo->category)) }}
                                            <br> {{ $professional->specialistInfo->city->title ?? $professional->specialistInfo->city ?? 'Город не указан' }}</p>
                                        @if(isset($professional->specialistInfo->slug) && $professional->specialistInfo->slug)
                                            <a href="{{ route('showSpecialistPage', $professional->specialistInfo->slug) }}"
                                               class="professional__item-btn">Посмотреть профиль</a>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </section>
    @endif
    {{-- <section class="tags">
        <div class="container">
            <div class="tags__wrapper">
                <div class="tags__block">
                    @if($professional->specialistInfo->workGeography)
                    <h4 class="tags__title">{{$professional->specialistInfo->sub_category}} рядом с {{ $professional->specialistInfo->workGeography }}</h4>

                        @foreach ($similarSpecialists as $similarSpecialist)
                            <p class="tags__item">
                                @if(isset($similarSpecialist->specialistInfo->slug) && $similarSpecialist->specialistInfo->slug)
                                <a class="tags__link" href="{{ route('showSpecialistPage', ['slug' => $similarSpecialist->specialistInfo->slug]) }}">
                                    {{ $similarSpecialist->specialistInfo->company_name }}
                                </a>
                                @endif
                            </p>
                        @endforeach
                    @endif
                </div>
                @if($professional->specialistInfo->workGeography)
                <div class="tags__block">
                    <h4 class="tags__title">Категории профессионалов в {{ $professional->specialistInfo->workGeography }}</h4>
                    @foreach ($similarSpecialists as $similarSpecialist)
                        <p class="tags__item">
                            @if(isset($similarSpecialist->specialistInfo->slug) && $similarSpecialist->specialistInfo->slug)
                                <a class="tags__link" href="{{ route('showSpecialistPage', ['slug' => $similarSpecialist->specialistInfo->slug]) }}">
                                    {{ \App\Helpers\CategoryHelper::getCategory(trim($similarSpecialist->specialistInfo->category)) }}
                                </a>
                            @endif
                        </p>
                    @endforeach
                </div>
                @endif
            </div>
        </div>
    </section> --}}
    @php
        $settings = App\Models\Setting::first();
        $cat_full = \App\Models\Category::with('categories')->get();
        $categories = $cat_full->whereIn('id', $settings->categories);
    @endphp
    <section class="container" style="margin-bottom: 30px;padding-bottom: 35px">
        <div class="main-title" style="padding: 10px">Другие специалисты рядом</div>
        <div class="hero__category" style="margin-top: 20px;padding: 10px">
            @foreach($cat_full->whereIn('id',[1,2,3,4]) as $cat)
                <div class="hero__category-item">
                    <a href="{{ route('showCatalogPage', ['city' => $slug,'category' => $cat->slug]) }}">
                        <img src="{{asset('assets/images/category/' .$cat->slug .'.webp')}}" alt="category"
                             style="border-radius: 20px;object-fit: cover" class="hero__category-img">
                        <p class="hero__category-name">{{ $cat->title }}</p>
                    </a>
                </div>
            @endforeach

        </div>
    </section>
    <script>
        document.querySelector('.search__form').addEventListener('submit', function () {
            localStorage.setItem('scrollPosition', window.scrollY);
        });
    </script>
    <script>
        window.addEventListener('load', function () {
            var scrollPosition = localStorage.getItem('scrollPosition');
            if (scrollPosition) {
                window.scrollTo(0, scrollPosition);
                localStorage.removeItem('scrollPosition');  // Удаляем после использования
            }
        });
    </script>



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

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


        document.addEventListener("DOMContentLoaded", (function () {
            new Swiper(".mySwiper", {
                slidesPerView: 4,
                slidesPerGroup: 4,
                spaceBetween: 24,
                navigation: {nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev"},
                breakpoints: {
                    320: {slidesPerView: 1, slidesPerGroup: 1},
                    640: {slidesPerView: 2, slidesPerGroup: 2},
                    960: {slidesPerView: 3, slidesPerGroup: 3},
                    1280: {slidesPerView: 4, slidesPerGroup: 4}
                }
            })
        }));


    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            let loadMoreButton = document.getElementById('load-more');
            let projectList = document.getElementById('project-list');
            let offset = 4; // Начинаем с 4-х загруженных проектов
            let limit = 4; // Количество проектов, которые нужно загрузить

            if(loadMoreButton && projectList){
                loadMoreButton.addEventListener('click', function (e) {
                    e.preventDefault();

                    // Блокируем кнопку на время загрузки
                    loadMoreButton.disabled = true;
                    loadMoreButton.textContent = 'Загрузка...';

                    // Используем specialistId из контроллера, который гарантированно правильный
                    const specialistId = {{ isset($specialistId) ? $specialistId : $professional->id }};

                    const requestData = {
                        specialist_id: specialistId,
                        offset: offset,
                        limit: limit
                    };

                    fetch("{{ route('loadMoreProjects') }}", {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            'Accept': 'application/json'
                        },
                        body: JSON.stringify(requestData)
                    })
                    .then(response => {
                        if (!response.ok) {
                            return response.text().then(text => {
                                throw new Error('Ошибка загрузки проектов: ' + response.status);
                            });
                        }
                        return response.json();
                    })
                    .then(data => {
                        // Проверяем успешность ответа
                        if (!data.success) {
                            throw new Error(data.error || 'Ошибка при загрузке проектов');
                        }

                        if (data && data.projects && Array.isArray(data.projects) && data.projects.length > 0) {
                            data.projects.forEach(project => {

                                // Находим обложку проекта
                                let coverImage = null;
                                if (project.images && Array.isArray(project.images)) {
                                    coverImage = project.images.find(image => image.is_cover === 1 || image.is_cover === true || image.is_cover === '1');
                                }

                                let projectImage = null;

                                if (coverImage && coverImage.images) {
                                    projectImage = coverImage.images;
                                } else if (project.images && project.images.length > 0 && project.images[0] && project.images[0].images) {
                                    projectImage = project.images[0].images;
                                }

                                // Формируем URL изображения (аналогично функции project_image_url в PHP)
                                let projectImageURL;
                                if (projectImage) {
                                    // Если путь уже содержит http/https - используем как есть
                                    if (projectImage.indexOf('http://') === 0 || projectImage.indexOf('https://') === 0) {
                                        projectImageURL = projectImage;
                                    }
                                    // Если путь начинается с storage/ - используем asset
                                    else if (projectImage.indexOf('storage/') === 0) {
                                        projectImageURL = '{{ asset("") }}' + projectImage;
                                    }
                                    // Если путь начинается с projects/, albums/, images/ и т.д. - добавляем storage/
                                    else if (projectImage.indexOf('projects/') === 0 || projectImage.indexOf('albums/') === 0 || projectImage.indexOf('images/') === 0 || projectImage.indexOf('profile/') === 0 || projectImage.indexOf('blogs/') === 0) {
                                        projectImageURL = '{{ asset("storage/") }}/' + projectImage;
                                    }
                                    // Для остальных случаев пробуем как есть
                                    else {
                                        projectImageURL = '{{ asset("") }}' + projectImage;
                                    }
                                } else {
                                    // Используем изображение по умолчанию
                                    projectImageURL = '{{ asset("default-images/default-image.png") }}';
                                }

                                let projectItem = `
                                    <div class="project__item">
                                        <a href="/gallery/project/${project.id}">
                                            <img src="${projectImageURL}" style="width: 100%; height: auto;aspect-ratio: 1 / 1; border-radius: 20px;object-fit: cover" alt="project">
                                            <div class="project__item-bottom row">
                                                <div class="project__item-name">${project.title || ''}</div>
                                                <svg width="23.983521" height="24.000000" viewBox="0 0 23.9835 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <path id="Vector" d="M12.7031 5.69043C5.66223 6.0571 0 11.9012 0 19.0312L0 24L1.77771 19.8614C3.88025 15.6571 8.05176 12.9689 12.7031 12.7217L12.7031 18.4085L23.9835 9.1875L12.7031 0L12.7031 5.69043Z" fill="#217B00" fill-opacity="1.000000" fill-rule="nonzero"/>
                                                </svg>
                                            </div>
                                        </a>
                                    </div>
                                `;

                                projectList.insertAdjacentHTML('beforeend', projectItem);
                            });

                            offset += limit;

                            // Скрываем кнопку, если загружены все проекты
                            // Проверяем: если загружено меньше чем запрошено ИЛИ offset >= total, значит все проекты загружены
                            if (data.projects.length < limit || offset >= data.total) {
                                loadMoreButton.style.display = 'none';
                            } else {
                                // Разблокируем кнопку для следующей загрузки
                                loadMoreButton.disabled = false;
                                loadMoreButton.textContent = 'Загрузить еще';
                            }
                        } else {
                            // Если проектов больше нет, скрываем кнопку
                            loadMoreButton.style.display = 'none';
                        }
                    })
                    .catch(error => {
                        // Разблокируем кнопку при ошибке
                        loadMoreButton.disabled = false;
                        loadMoreButton.textContent = 'Загрузить еще';
                        alert('Произошла ошибка при загрузке проектов: ' + error.message);
                    });
                });
            }
        });
    </script>

    <script>
        $(document).ready(function () {
            $('.stars a').on('click', function (event) {
                event.preventDefault();
                var rating = $(this).text();
                var category = $(this).closest('.stars').prev('label').text().trim();

                // Убрать класс active у всех звезд
                $(this).closest('.stars').find('a').removeClass('active');

                // Добавить класс active до текущей звезды
                $(this).addClass('active');
                $(this).prevAll().addClass('active');

                // Установка значения в скрытое поле
                if (category === 'Качество работы') {
                    $('#professionalism').val(rating);
                } else if (category === 'Коммуникация') {
                    $('#timeliness').val(rating);
                } else if (category === 'Стоимость') {
                    $('#cost').val(rating);
                }
            });
        });
    </script>
    <script>
        document.querySelector('.drop-select').addEventListener('click', function () {
            var dropdownList = document.querySelector('.drop-list');
            dropdownList.style.display = dropdownList.style.display === 'block' ? 'none' : 'block';
            this.classList.toggle('active');
        });

        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');
            });
        });


        /*Табы*/
        function tabs(headerSelector, tabSelector, contentSelector, activeClass, display = 'flex') {
            const header = document.querySelector(headerSelector),
                tab = document.querySelectorAll(tabSelector),
                content = document.querySelectorAll(contentSelector)

            function hideTabContent() {
                content.forEach(item => {
                    item.style.display = 'none'
                });
                tab.forEach(item => {
                    item.classList.remove(activeClass)
                });
            }

            function showTabContent(i = 0) {
                content[i].style.display = display
                tab[i].classList.add(activeClass)
            }

            hideTabContent()
            showTabContent()
            header.addEventListener('click', e => {
                const target = e.target
                if (target.classList.contains(tabSelector.replace(/\./, '')) ||
                    target.parentNode.classList.contains(tabSelector.replace(/\./, ''))) {
                    tab.forEach((item, i) => {
                        if (target == item || target.parentNode == item) {
                            hideTabContent()
                            showTabContent(i)
                        }
                    });
                }
            })
        }

        // ПЕРВЫЙ аргумент - класс всего нашего хедера табов.
        // ВТОРОЙ аргумент - класс конкретного элемента, при клике на который будет переключатся таб.
        // ТРЕТИЙ аргумент - класс того блока, который будет переключаться.
        // ЧЕТВЕРТЫЙ аргумент - класс активности, который будет добавлятся для таба, который сейчас активен.
        tabs('.tabs__header', '.tabs__header-item', '.tabs__content-item', 'active')

    </script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const tabs = document.querySelectorAll('.tabs__header-item');

            tabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    const targetId = this.getAttribute('data-target');
                    const targetElement = document.getElementById(targetId);

                    if (targetElement) {
                        targetElement.scrollIntoView({ behavior: 'smooth' });
                    }
                });
            });
        });
    </script>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            // Открытие модала
            const sendReviewButtons = document.querySelectorAll('.send-review-btn');
            const modal = document.getElementById("myForm");
            const closeBtn = document.getElementById("closeModalBtn"); // Кнопка закрытия

            sendReviewButtons.forEach(button => {
                button.addEventListener('click', function () {
                    modal.style.display = "block";
                });
            });

            // Закрытие модала по кнопке (X)
            closeBtn.onclick = function () {
                modal.style.display = "none";
            };

            // Закрытие модала по клику вне окна
            window.onclick = function (event) {
                if (event.target == modal) {
                    modal.style.display = "none";
                }
            };
        });
    </script>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const toggleButtons = document.querySelectorAll('.toggle-button');

            toggleButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const itemMain = this.parentElement.querySelector('.reviews__item-main');
                    itemMain.classList.toggle('show-more');

                    if (itemMain.classList.contains('show-more')) {
                        this.textContent = 'Скрыть';
                    } else {
                        this.textContent = 'Читать далее';
                    }
                });
            });
        });
    </script>

    <script>
        document.getElementById('shareButton').addEventListener('click', () => {
            const url = window.location.href; // Текущий URL

            const shareData = {
                title: 'Профиль специалиста',
                text: 'Посмотрите этого специалиста!',
                url: url,
            };

            if (navigator.share) {
                navigator.share(shareData)
                    .then(() => console.log('Поделиться успешно'))
                    .catch((err) => console.error('Ошибка при обмене:', err));
            } else {
                alert('Ваш браузер не поддерживает Web Share API');
            }
        });


    </script>
    <script>
        const textarea = document.getElementById('text');
        const charCount = document.getElementById('charCount');
        const maxLength = 800;

        textarea.addEventListener('input', () => {
            const remaining = maxLength - textarea.value.length;
            charCount.textContent = `Осталось символов: ${remaining}`;

            if (remaining < 0) {
                textarea.value = textarea.value.slice(0, maxLength);
            }
        });
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            let loadMoreReviewsButton = document.getElementById('load-more-reviews');
            let reviewsList = document.getElementById('reviews-list');
            let offset = 10; // Начинаем с 10, так как первые 10 уже показаны
            let limit = 10; // Количество отзывов для загрузки
            let isLoading = false;

            if (loadMoreReviewsButton && reviewsList) {
                loadMoreReviewsButton.addEventListener('click', function (e) {
                    e.preventDefault();

                    if (isLoading) {
                        return; // Предотвращаем множественные запросы
                    }

                    isLoading = true;
                    // Блокируем кнопку на время загрузки
                    loadMoreReviewsButton.disabled = true;
                    loadMoreReviewsButton.textContent = 'Загрузка...';

                    // Получаем параметры поиска и сортировки из формы
                    const searchInput = document.querySelector('.reviews__search');
                    const sortInput = document.querySelector('.drop-select span');
                    const search = searchInput ? searchInput.value : '';
                    const sort = sortInput && sortInput.textContent.includes('старые') ? 'oldest' : 'newest';

                    const specialistId = {{ isset($specialistId) ? $specialistId : $professional->id }};

                    const requestData = {
                        specialist_id: specialistId,
                        offset: offset,
                        limit: limit,
                        search: search,
                        sort: sort
                    };

                    fetch("{{ route('loadMoreReviews') }}", {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            'Accept': 'application/json'
                        },
                        body: JSON.stringify(requestData)
                    })
                    .then(response => {
                        if (!response.ok) {
                            return response.text().then(text => {
                                throw new Error('Ошибка загрузки отзывов: ' + response.status);
                            });
                        }
                        return response.json();
                    })
                    .then(data => {
                        // Проверяем успешность ответа
                        if (!data.success) {
                            throw new Error(data.error || 'Ошибка при загрузке отзывов');
                        }

                        if (data && data.reviews && Array.isArray(data.reviews) && data.reviews.length > 0) {
                            data.reviews.forEach(review => {
                                // Формируем HTML для нового отзыва
                                let starsHtml = '';
                                for (let i = 1; i <= 5; i++) {
                                    const filledClass = i <= review.cost ? 'filled' : '';
                                    starsHtml += `<span class="star ${filledClass}">&#9733;</span>`;
                                }

                                let readMoreButton = '';
                                if (review.has_more_text) {
                                    readMoreButton = '<button class="toggle-button">Читать далее</button>';
                                }

                                let reviewItem = `
                                    <div class="reviews__item" data-review-id="${review.id}">
                                        <div class="reviews__item-top">
                                            <img src="${review.user_image}" style="object-fit: cover" alt="avatar">
                                            <div class="reviews__item-ngb">
                                                <p class="reviews__item-name">${review.user_name}</p>
                                                <p class="reviews__item-stars">
                                                    ${starsHtml}
                                                </p>
                                            </div>
                                        </div>
                                        <div class="reviews__item-main">
                                            <p class="reviews__item-info" style="white-space: normal;word-wrap: break-word;" id="content">
                                                ${review.reviews}
                                            </p>
                                        </div>
                                        <p class="reviews__item-date">${review.date}</p>
                                        ${readMoreButton}
                                    </div>
                                `;

                                reviewsList.insertAdjacentHTML('beforeend', reviewItem);
                            });

                            offset += limit;

                            // Скрываем кнопку, если больше нет отзывов
                            if (!data.has_more || data.reviews.length < limit) {
                                loadMoreReviewsButton.style.display = 'none';
                            } else {
                                // Разблокируем кнопку для следующей загрузки
                                loadMoreReviewsButton.disabled = false;
                                loadMoreReviewsButton.textContent = 'Показать еще';
                            }

                            // Инициализируем обработчики для новых кнопок "Читать далее"
                            const newToggleButtons = reviewsList.querySelectorAll('.toggle-button');
                            newToggleButtons.forEach(button => {
                                if (!button.hasAttribute('data-initialized')) {
                                    button.setAttribute('data-initialized', 'true');
                                    button.addEventListener('click', function() {
                                        const itemMain = this.parentElement.querySelector('.reviews__item-main');
                                        itemMain.classList.toggle('show-more');

                                        if (itemMain.classList.contains('show-more')) {
                                            this.textContent = 'Скрыть';
                                        } else {
                                            this.textContent = 'Читать далее';
                                        }
                                    });
                                }
                            });
                        } else {
                            // Если отзывов больше нет, скрываем кнопку
                            loadMoreReviewsButton.style.display = 'none';
                        }
                    })
                    .catch(error => {
                        // Разблокируем кнопку при ошибке
                        loadMoreReviewsButton.disabled = false;
                        loadMoreReviewsButton.textContent = 'Показать еще';
                        console.error('Ошибка при загрузке отзывов:', error);
                        alert('Произошла ошибка при загрузке отзывов: ' + error.message);
                    })
                    .finally(() => {
                        isLoading = false;
                    });
                });
            }
        });
    </script>
</main>
<style>
    .contact__info-list {
        padding-top: 10px;
        display: flex;
        gap: 10px;
    }

    .reviews_container{
        display: flex;
        flex-direction: column;
        margin-left: 212px;
        gap: 13px;
    }

    .reviews_text{
        width: 80%;
        margin-left: 60px;
    }

    .text_text{
        margin-left: 60px
    }

    .contact__social-link {
        display: flex;
        align-items: center;
        justify-content: center; /* Центрирует иконку внутри ссылки */
        width: 33px; /* Размер элемента (можно изменить в зависимости от ваших нужд) */
        height: 33px;
        border-radius: 50%; /* Делает круг */
        background-color: transparent; /* Фон по умолчанию */
        text-decoration: none; /* Убирает подчеркивание у ссылки */
    }

    .contact__social-img{

    }


    .contact__social-link:hover {
        transform: scale(1.1); /* Цвет фона при наведении для всех иконок */
    }

    .contact__website {
        background-color: #00aaff; /* Голубой круг для иконки веб-сайта */
    }

    .contact__website:hover {
        transform: scale(1.1); /* Изменяет цвет фона при наведении для веб-сайта */
    }


    .modal {
        display: none; /* По умолчанию скрыто */
        position: fixed;
        z-index: 1200;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.5); /* Черный полупрозрачный фон */
    }

    .specialist__person-info {
        max-width: 100%; /* Максимальная ширина контейнера */
        overflow: hidden; /* Скрывает все, что выходит за пределы контейнера */
        word-wrap: break-word; /* Переносит длинные слова на следующую строку */
        white-space: normal; /* Разрешает перенос текста на несколько строк */
    }

.tabs__content-item{
    max-width: 80%; /* Максимальная ширина контейнера */
    overflow: hidden; /* Скрывает все, что выходит за пределы контейнера */
    word-wrap: break-word; /* Переносит длинные слова на следующую строку */
    white-space: normal; /* Разрешает перенос текста на несколько строк */
}


    .modal-dialog {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        max-width: 600px; /* Максимальная ширина модального окна */
        width: 90%; /* Ширина модального окна */
        height: auto; /* Высота автоматически подстраивается */
        margin: 0 auto;
    }

    .modal-content {
        position: relative;
        background-color: #fefefe;
        border: 1px solid #888;
        border-radius: 6px;
        outline: none;
    }

    .modal-header {
        padding: 15px;
        border-bottom: 1px solid #e9ecef;
        background-color: #f8f9fa;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .modal-body {
        padding: 20px;
    }

    .modal-footer {
        padding: 15px;
        border-top: 1px solid #e9ecef;
        background-color: #f8f9fa;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .close {
        font-size: 20px;
        color: #000;
        opacity: 1;
        cursor: pointer;
        border: none;
        background: none;
    }

    .close:hover {
        color: #217b00; /* Цвет при наведении */
        opacity: 0.7;
    }

    .btn-main.settings__btn {
        background-color: #217b00;
        color: white;
        border: none;
        padding: 8px 12px;
        border-radius: 5px;
        cursor: pointer;
        margin-right: 10px;
    }

    .btn-main.settings__btn:hover {
        background-color: #144a00;
    }

    .btn-secondary {
        background-color: #6c757d;
        color: white;
        border: none;
        padding: 8px 12px;
        border-radius: 5px;
        cursor: pointer;
    }

    .btn-secondary:hover {
        background-color: #5a6268;
    }

    /* Стили для textarea */
    .form-control {
        width: 100%;
        padding: 10px;
        border: 1px solid #ced4da;
        border-radius: 5px;
        box-sizing: border-box;
    }

    .reviews__item-top {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
    }

    .reviews__item-top img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-right: 10px;
    }

    .reviews__item-ngb {
        flex: 1;
    }

    .reviews__item-main {
        margin-bottom: 10px;
        overflow: hidden; /* Скрыть часть текста, выходящую за границы */
        max-height: 20px; /* Ограничить высоту до одной строки */
    }

    .reviews__item-info {
        white-space: pre-line; /* Разрешить перенос текста и сохранять пробелы */
        word-wrap: break-word; /* Разрывать слова, если они не помещаются */
        line-height: 1.6; /* Увеличенное расстояние между строками */
        padding-bottom: 4px; /* Отступ снизу, чтобы буквы не обрезались */
    }

    .dropbtn-content span a {
        font-size: 16px;
    }


    .toggle-btn-button {
        background-color: #217b00;
        color: white;
        border: none;
        padding: 8px 12px;
        border-radius: 5px;
        cursor: pointer;
    }

    .toggle-btn-button:hover {
        background-color: #144a00;
    }

    .show-more {
        max-height: none; /* Показать весь текст при раскрытии */
    }

    /* Стили для рейтинга звезд */
    .rating {
        margin-top: 10px;
    }


    .br-theme-fontawesome-stars .br-widget a {
        color: #ccc;
    }

    .br-theme-fontawesome-stars .br-widget a.br-selected:before,
    .br-theme-fontawesome-stars .br-widget a.br-selected:after,
    .br-theme-fontawesome-stars .br-widget a.br-active:before,
    .br-theme-fontawesome-stars .br-widget a.br-active:after,
    .br-theme-fontawesome-stars .br-widget a.br-current-rating:before,
    .br-theme-fontawesome-stars .br-widget a.br-current-rating:after {
        color: #fdd400 !important;
    }

    .stars a {
        display: inline-block;
        padding-right: 4px;
        text-decoration: none;
        margin: 0;
        color: black;
    text-align: center;
    }

    .stars a:after {
        position: relative;
        font-size: 18px;
        font-family: 'FontAwesome', serif;
        display: block;
        content: "\f005";
        color: #9e9e9e;
    }

    span {
        /*font-size: 0;*/
        /* trick to remove inline-element's margin */
    }

    .stars a:hover ~ a:after {
        color: #9e9e9e !important;
    }

    span.active a.active ~ a:after {
        color: #9e9e9e;
    }

    span:hover a:after {
        color: #fdd400 !important;
    }

    span.active a:after,
    .stars a.active:after {
        color: #fdd400;
    }

    .star-rating {
        display: flex;
        direction: ltr;
    }
    .star {
        font-size: 20px;
        color: #ddd; /* серые звезды по умолчанию */
    }
    .star.filled {
        color: #ffd600; /* желтые звезды */
    }

    .rating-number {
        font-size: 16px;
        color: #000;
        margin-left: 8px;
    }
    .search__form{
        display: flex;
        align-items: center;
        width: 100%;
    }

    .reviews__drop{
        margin-left: 10px;
    }

    pre {
        white-space: pre-wrap; /* Разрешает перенос строк */
        word-wrap: break-word; /* Переносит длинные слова */
        overflow-wrap: break-word; /* Переносит длинные слова */
        max-width: 100%; /* Чтобы контент не выходил за пределы экрана */
        word-break: break-all; /* Разбивает слова на мобильных устройствах */
    }

    @media (max-width: 767.98px) {
        .search__form{
            display: flex;
            align-items: center;
            width: 100%;
            flex-direction: column;
        }

        .search__div{
            width: 100%;
        }

        pre {
            white-space: pre-wrap; /* Разрешает перенос строк */
            word-wrap: break-word; /* Переносит длинные слова */
            overflow-wrap: break-word; /* Переносит длинные слова */
            max-width: 100%; /* Чтобы контент не выходил за пределы экрана */
            word-break: break-all; /* Разбивает слова на мобильных устройствах */
        }

        .reviews__drop{
            margin-top: 20px;
            margin-left: 0.1px;
            width: 100%;
        }

        .project__list {
            display: flex;
            flex-direction: column; /* Элементы располагаются в колонку */
            overflow-x: hidden; /* Отключаем горизонтальную прокрутку */
            overflow-y: auto; /* Включаем вертикальную прокрутку, если нужно */
            gap: 10px; /* Отступ между элементами */
            padding-bottom: 10px;
        }

        .text_text{
            margin-left: 0;
        }

        .reviews_container{
            display: flex;
            flex-direction: column;
            margin-left: 0;
            gap: 13px;
            padding: 0 15px;
        }

        .reviews_text{
            width: calc(100% - 30px);
            margin-left: 15px;
            margin-right: 15px;
        }

        .modal-dialog {
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            transform: none;
            max-width: 100%;
            width: 100%;
            height: 100%;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 15px;
            box-sizing: border-box;
        }

        .modal-content {
            width: 100%;
            max-width: 100%;
            max-height: calc(100vh - 30px);
            overflow-y: auto;
            margin: 0;
        }

        .modal-body {
            padding: 15px;
        }

        .modal-header {
            padding: 15px;
        }

        .modal-footer {
            padding: 15px;
        }

        .modal-footer .btn-main.settings__btn {
            margin-left: 0;
            width: 100%;
        }

        .reviews_container label b {
            margin-left: 0 !important;
        }

        #charCount {
            margin: 0 15px !important;
        }

        .modal-body h4 {
            padding: 0 15px;
            font-size: 16px;
        }

        .search-main {
            font-family: Manrope, sans-serif;
            border-radius: 10px;
            background: #d3d3d3;
            opacity: .5;
            outline: 0;
            border: none;
            padding: 12px 58px 12px 32px;
            color: black;
            font-size: 16px;
            font-weight: 500;
            line-height: 22px;
        }

        .tags__title {
            word-wrap: break-word; /* Чтобы текст не выходил за пределы */
            white-space: normal; /* Обычное поведение переноса */
            hyphens: auto; /* Автоматический перенос слов по слогам */
        }




    }
</style>
{{-- <script>
    // Получаем элементы для кнопки и dropdown
    const dropdownButton = document.querySelector('.dropbtn');
    const dropdownContent = document.querySelector('.dropdown-content');

    // Функция для переключения видимости dropdown
    function toggleDropdown() {
        dropdownContent.classList.toggle('show');
    }

    // Обработчик клика по кнопке
    dropdownButton.addEventListener('click', function(event) {
        // Останавливаем распространение события, чтобы не сработал обработчик клика вне меню
        event.stopPropagation();
        toggleDropdown();
    });

    // Обработчик клика по всему документу
    document.addEventListener('click', function(event) {
        // Если клик был вне кнопки и dropdown, закрываем его
        if (!dropdownContent.contains(event.target) && !dropdownButton.contains(event.target)) {
            dropdownContent.classList.remove('show');
        }
    });


</script> --}}
@endsection