@extends('app')
@php
    use Illuminate\Support\Facades\Storage;
    $seoKey = 'reviews';
@endphp
@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($professional->intro_image, 'intro') }}" alt="">
                    <div class="profile__avatar">
                        <img src="{{ user_image_url($professional->image, 'avatar') }}">
                    </div>
                    <div class="profile__user">
                        <div class="profile__user-left">
                                <p class="profile__user-name">{{$professional->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') ? '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('showReviewsPage') ? 'profile__navigation-item--active' : '' }}">
                    <a href="{{ route('showReviewsPage') }}" 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('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="reviews" id="reviews">
        <div class="container">
            <div class="reviews__top">
                <h4 class="reviews__top-title">Отзывов о: {{$professional->specialistInfo->company_name ?? $professional->name}} - {{$reviewsCount}}</h4>
            </div>
            <div class="reviews__quality">
                <div class="reviews__quality-top">
                    <div class="star-rating">
                        <span class="specialist__person-stars">{{ $averageRating }}</span>&nbsp;
                        @for ($i = 1; $i <= 5; $i++)
                            <span class="star {{ $i <= $averageRating ? 'filled' : '' }}">&#9733;</span>
                        @endfor

                    </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: #ffc107;"></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: #ffc107;"></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: #ffc107;"></div>
                            </div>
                            <span>{{ number_format($averageCost, 1) }}</span>
                        </div>
                    </div>
                </div>

            </div>
            <div class="reviews__filter row" style="display: flex; align-items: center; justify-content: flex-end; margin-bottom: 20px;">
                <form method="GET" action="{{ route('showReviewsPage') }}" class="reviews__sort-form" style="display: flex; align-items: center;">
                    <!-- Выпадающий список для сортировки -->
                    <div class="reviews__drop drop" style="position: relative;">
                        <div class="drop-select" style="cursor: pointer; padding: 8px 15px; border: 1px solid #ccc; border-radius: 5px; background: white; min-width: 180px;">
                            <span>{{ request()->sort == 'oldest' ? 'В начале старые' : 'В начале новые' }}</span>
                            {{-- <span style="float: right;">▼</span> --}}
                        </div>
                        <ul class="drop-list" style="display: none; position: absolute; background: white; border: 1px solid #ccc; border-radius: 5px; margin-top: 5px; min-width: 180px; z-index: 1000; list-style: none; padding: 0; box-shadow: 0 2px 5px rgba(0,0,0,0.2);">
                            <li style="padding: 8px 15px; cursor: pointer; border-bottom: 1px solid #eee;">
                                <button type="submit" name="sort" value="newest" style="background: none; border: none; color: inherit; cursor: pointer; font-size: 16px; width: 100%; text-align: left; padding: 0;">
                                    В начале новые
                                </button>
                            </li>
                            <li style="padding: 8px 15px; cursor: pointer;">
                                <button type="submit" name="sort" value="oldest" style="background: none; border: none; color: inherit; cursor: pointer; font-size: 16px; width: 100%; text-align: left; padding: 0;">
                                    В начале старые
                                </button>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>
            <div class="reviews__list">
                @foreach($reviews as $review)
                    @if($review->reviews)
                        <div class="reviews__item">
                            <div class="reviews__item-top">
                                @if($review->user->image)
                                    <img src="{{ Storage::url($review->user->image) }}" alt="avatar" style="object-fit: cover">
                                @else
                                    <img src="{{ asset('default-images/default-avatar.png') }}" style="object-fit: cover" alt="avatar">
                                @endif
                                <div class="reviews__item-ngb">

                                    <p class="reviews__item-name">{{ $professional->specialistInfo->company_name ?? $professional->name }}</p>
                                    <p class="reviews__item-stars">★★★★★</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->created_at->format('d.m.Y') }}</p>
                            @if(mb_strlen($review->reviews) > 200)
                                <button class="toggle-button">Читать далее
                            @endif

                        </div>
                    @endif
                @endforeach
            </div>
        </div>
    </section>
</main>

<style>
    .profile__navigation-item--active .profile__navigation-link {
        color: #217b00; /* Устанавливаем зеленый цвет для активной ссылки */
    }
    /* Стили для модального окна */
    .modal {
        display: none; /* По умолчанию скрыто */
        position: fixed;
        z-index: 1050;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.5); /* Черный полупрозрачный фон */
    }

    /* .reviews__item {
        margin-bottom: 20px;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
    } */

    .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; /* Отступ снизу, чтобы буквы не обрезались */
    }

    /* .toggle-button {
        background: none;
        border: none;
        color: #217b00;
        padding: 0;
        cursor: pointer;
        font-size: inherit;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        margin-top: 8px;
    } */

    .toggle-button:hover {
        color: #144a00;
        /* text-decoration: underline; */
    }

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


    h4.modal-title {
        display: inline;
    }

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

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

    .close {
        font-size: 20px;
        float: right;
    }

    .modal-header {
        padding: 15px;
        border-bottom: 1px solid #e9ecef;
        background-color: #f8f9fa;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }

    .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;
    }

    /* Стили для рейтинга звезд */
    .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;
    }

    .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: #ffc107; /* желтые звезды */
    }

    .rating-number {
        font-size: 16px;
        color: #000;
        margin-left: 8px;
    }
</style>
<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.innerHTML = 'Скрыть';
                } else {

                }
            });
        });

        // Обработка выпадающего списка сортировки
        const dropSelect = document.querySelector('.reviews__drop .drop-select');
        const dropList = document.querySelector('.reviews__drop .drop-list');

        if (dropSelect && dropList) {
            dropSelect.addEventListener('click', function() {
                dropList.style.display = dropList.style.display === 'block' ? 'none' : 'block';
                this.classList.toggle('active');
            });

            // Закрытие выпадающего списка при клике вне его
            document.addEventListener('click', function(event) {
                if (!event.target.closest('.reviews__drop')) {
                    if (dropList) {
                        dropList.style.display = 'none';
                    }
                    if (dropSelect) {
                        dropSelect.classList.remove('active');
                    }
                }
            });
        }
    });
</script>

@endsection