{{-- Единый компонент шапки профиля для всех ролей --}}
<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">
                    {{-- Статус в зависимости от роли --}}
                    @if($user->roll == 2 && $user->specialistInfo && $user->specialistInfo->slug)
                        <span class="profile__user-status">ПРО</span>
                        @if(isset($user->specialistInfo->slug) && $user->specialistInfo->slug)
                            <span class="profile__user-status">
                                <a href="{{ route('showSpecialistPage', ['slug' => $user->specialistInfo->slug]) }}"
                                   style="color: white">Посмотреть мой профиль ></a>
                            </span>
                        @endif
                    @elseif($user->roll == 3)
                        <span class="profile__user-status">ПОСТАВЩИК</span>
                    @endif
                </p>
            </div>

            {{-- Кнопка редактирования для всех пользователей --}}
            <div class="profile__user-right">
                <button id="openModalBtn" class="btn-main settings__btn profile__user-edit">
                    Редактировать фото обложки
                </button>
            </div>
        </div>
    </div>
</div>

{{-- Навигационное меню в зависимости от роли --}}
<ul class="profile__navigation">
    {{-- Общие пункты для всех ролей (кроме поставщиков) --}}
    @if($user->roll != 3)
        <li class="profile__navigation-item {{ (Route::is('showProfilePage') || request()->routeIs('showProfilePage') || request()->is('profile*')) ? 'profile__navigation-item--active' : '' }}">
            <a href="{{ route('showProfilePage') }}" class="profile__navigation-link">Главная</a>
        </li>
    @endif

    {{-- Дополнительные пункты для специалистов --}}
    @if($user->roll == 2 && $user->specialistInfo && $user->specialistInfo->slug)
        @if(Route::has('showMyProjectPage'))
            <li class="profile__navigation-item {{ (Route::is('showMyProjectPage') || request()->routeIs('showMyProjectPage') || request()->is('myProject*') || request()->is('addProject*')) ? 'profile__navigation-item--active' : '' }}">
                <a href="{{ route('showMyProjectPage') }}" class="profile__navigation-link">Проекты</a>
            </li>
        @endif
        @if(Route::has('showAlbumPage'))
            <li class="profile__navigation-item {{ (Route::is('showAlbumPage') || Route::is('showGalleryAlbumPage') || request()->routeIs('showAlbumPage') || request()->routeIs('showGalleryAlbumPage') || \Illuminate\Support\Str::startsWith(request()->path(), 'album') || \Illuminate\Support\Str::startsWith(request()->path(), 'gallery/album')) ? 'profile__navigation-item--active' : '' }}">
                <a href="{{ route('showAlbumPage') }}" class="profile__navigation-link">Альбомы идей</a>
            </li>
        @endif
        @if(Route::has('showReviewsPage'))
            <li class="profile__navigation-item {{ (Route::is('showReviewsPage') || request()->routeIs('showReviewsPage') || request()->is('reviews*')) ? 'profile__navigation-item--active' : '' }}">
                <a href="{{ route('showReviewsPage') }}" class="profile__navigation-link">Отзывы</a>
            </li>
        @endif
    @endif

    {{-- Дополнительные пункты для поставщиков --}}
    @if($user->roll == 3)
        @if(Route::has('supplier.profile'))
            <li class="profile__navigation-item {{ (Route::is('supplier.profile') || Route::is('supplier.settings') || request()->routeIs('supplier.profile') || request()->routeIs('supplier.settings') || request()->is('supplier/profile*') || request()->is('supplier/settings*')) ? 'profile__navigation-item--active' : '' }}">
                <a href="{{ route('supplier.profile') }}" class="profile__navigation-link">Главная</a>
            </li>
        @endif
        @if(Route::has('supplier.products'))
            <li class="profile__navigation-item {{ (Route::is('supplier.products') || request()->routeIs('supplier.products') || request()->is('supplier/products*')) ? 'profile__navigation-item--active' : '' }}">
                <a href="{{ route('supplier.products') }}" class="profile__navigation-link">Товары</a>
            </li>
        @endif
        @if(Route::has('supplier.imports'))
            <li class="profile__navigation-item {{ (Route::is('supplier.imports') || request()->routeIs('supplier.imports') || request()->is('supplier/imports*')) ? 'profile__navigation-item--active' : '' }}">
                <a href="{{ route('supplier.imports') }}" class="profile__navigation-link">Импорты</a>
            </li>
        @endif
    @endif

    {{-- Общие пункты для всех ролей --}}
    @if(Route::has('showFavoritesPage'))
        <li class="profile__navigation-item {{ (Route::is('showFavoritesPage') || request()->routeIs('showFavoritesPage') || request()->is('favorites*')) ? 'profile__navigation-item--active' : '' }}">
            <a href="{{ route('showFavoritesPage') }}" class="profile__navigation-link">Избранные</a>
        </li>
    @endif
    @if(Route::has('chat.index'))
        <li class="profile__navigation-item {{ (Route::is('chat.index') || Route::is('chat') || request()->routeIs('chat.index') || request()->routeIs('chat') || \Illuminate\Support\Str::startsWith(request()->path(), '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>
    @endif

    {{-- Цены для специалистов отключены --}}
</ul>

{{-- Модальное окно для загрузки фото обложки (изолированное) --}}
<div class="ph-modal" id="phUploadImageModal" tabindex="-1" role="dialog" style="display: none">
    <div class="ph-modal__dialog" role="document" style="top:30%">
        <div class="ph-modal__content">
            <div class="ph-modal__header">
                <h5 class="ph-modal__title">Загрузить фото обложки</h5>
                <button type="button" class="ph-modal__close" data-ph-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="ph-modal__body">
                <form id="phUploadImageForm" enctype="multipart/form-data">
                    @csrf
                    <div class="ph-form-group">
                        <label for="intro_image">Выберите изображение:</label>
                        <input type="file" class="ph-form-control-file" id="intro_image" name="intro_image" accept="image/*" required>
                        <small class="ph-form-text ph-text-muted">Поддерживаемые форматы: JPG, PNG, GIF. Максимальный размер: 5MB</small>
                    </div>
                    <div id="imagePreview" style="margin-top: 15px; text-align: center;">
                        <!-- Здесь будет превью изображения -->
                    </div>
                </form>
            </div>
            <div class="ph-modal__footer">
                <button type="button" class="ph-btn ph-btn--secondary" data-ph-dismiss="modal">Отмена</button>
                <button type="button" class="ph-btn ph-btn--primary" id="phUploadImageBtn">Загрузить</button>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const openModalBtn = document.getElementById('openModalBtn');
    const uploadImageModal = document.getElementById('phUploadImageModal');
    const uploadImageForm = document.getElementById('phUploadImageForm');
    const uploadImageBtn = document.getElementById('phUploadImageBtn');
    const introImageInput = document.getElementById('intro_image');
    const imagePreview = document.getElementById('imagePreview');
    const closeButtons = document.querySelectorAll('[data-ph-dismiss="modal"]');

    // Открытие модального окна
    if (openModalBtn) {
        openModalBtn.addEventListener('click', function() {
            uploadImageModal.style.display = 'block';
            document.body.classList.add('ph-modal-open');
        });
    }

    // Закрытие модального окна
    if (closeButtons && closeButtons.length) {
        closeButtons.forEach(function(btn){
            btn.addEventListener('click', function() {
                uploadImageModal.style.display = 'none';
                document.body.classList.remove('ph-modal-open');
            });
        });
    }

    // Закрытие по клику вне модального окна
    uploadImageModal.addEventListener('click', function(e) {
        if (e.target === uploadImageModal) {
            uploadImageModal.style.display = 'none';
            document.body.classList.remove('ph-modal-open');
        }
    });

    // Превью изображения
    if (introImageInput) {
        introImageInput.addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    imagePreview.innerHTML = '<img src="' + e.target.result + '" style="max-width: 100%; max-height: 200px; border-radius: 5px;">';
                };
                reader.readAsDataURL(file);
            }
        });
    }

    // Загрузка изображения
    if (uploadImageBtn) {
        uploadImageBtn.addEventListener('click', function() {
            const formData = new FormData(uploadImageForm);

            // Показываем индикатор загрузки
            uploadImageBtn.disabled = true;
            uploadImageBtn.textContent = 'Загружается...';

            fetch('{{ route("saveIntroImage") }}', {
                method: 'POST',
                body: formData,
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Обновляем изображение на странице
                    const profileIntro = document.querySelector('.profile__intro');
                    if (profileIntro) {
                        profileIntro.src = data.image_url + '?t=' + new Date().getTime();
                    }

                    // Закрываем модальное окно
                    uploadImageModal.style.display = 'none';
                    document.body.classList.remove('ph-modal-open');

                    // Показываем уведомление об успехе
                    alert('Фото обложки успешно загружено!');
                } else {
                    alert('Ошибка при загрузке: ' + (data.message || 'Неизвестная ошибка'));
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('Произошла ошибка при загрузке изображения');
            })
            .finally(() => {
                // Восстанавливаем кнопку
                uploadImageBtn.disabled = false;
                uploadImageBtn.textContent = 'Загрузить';
            });
        });
    }
});
</script>

<style>
/* Изолированные стили модального окна загрузки обложки */
.ph-modal {
    position: fixed;
    z-index: 1050;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
}

.ph-modal__dialog {
    position: relative;
    width: auto;
    margin: 1.75rem auto;
    max-width: 500px;
    /* pointer-events: none; */
}

.ph-modal__content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 0.3rem;
    outline: 0;
}

.ph-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1rem 1rem;
    border-bottom: 1px solid #dee2e6;
    border-top-left-radius: calc(0.3rem - 1px);
    border-top-right-radius: calc(0.3rem - 1px);
    background-color: #f8f9fa;
}

.ph-modal__title {
    margin-bottom: 0;
    line-height: 1.5;
    font-size: 1.25rem;
    font-weight: 500;
    color: #333;
}

.ph-modal__close {
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: 0.5;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.ph-modal__close:hover {
    color: #000;
    text-decoration: none;
    opacity: 0.75;
}

.ph-modal__body {
    position: relative;
    flex: 1 1 auto;
    padding: 1rem;
}

.ph-modal__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    padding: 0.75rem;
    border-top: 1px solid #dee2e6;
    border-bottom-right-radius: calc(0.3rem - 1px);
    border-bottom-left-radius: calc(0.3rem - 1px);
    background-color: #f8f9fa;
}

.ph-btn {
    display: inline-block;
    font-weight: 400;
    color: #212529;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    text-decoration: none;
}

.ph-btn--secondary {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}

.ph-btn--secondary:hover {
    color: #fff;
    background-color: #5a6268;
    border-color: #545b62;
}

.ph-btn--primary {
    color: #fff;
    background-color: #217b00;
    border-color: #217b00;
}

.ph-btn--primary:hover {
    color: #fff;
    background-color: #1a6600;
    border-color: #1a6600;
}

.ph-form-group {
    margin-bottom: 1rem;
}

.ph-form-control-file {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.ph-form-text {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: #6c757d;
}

.ph-text-muted {
    color: #6c757d !important;
}

/* Адаптивные стили для модального окна */
@media (max-width: 768px) {
    .ph-modal__dialog {
        margin: 0.5rem;
        max-width: none;
    }

    .ph-modal__header {
        padding: 0.75rem;
    }

    .ph-modal__title {
        font-size: 1.1rem;
    }

    .ph-modal__body {
        padding: 0.75rem;
    }

    .ph-modal__footer {
        padding: 0.5rem;
        flex-direction: column;
        gap: 0.5rem;
    }

    .ph-btn {
        width: 100%;
        margin: 0;
    }

    .ph-form-control-file {
        font-size: 0.9rem;
    }

    .ph-form-text {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .ph-modal__dialog {
        margin: 0.25rem;
    }

    .ph-modal__header {
        padding: 0.5rem;
    }

    .ph-modal__body {
        padding: 0.5rem;
    }

    .ph-modal__footer {
        padding: 0.5rem;
    }
}
</style>