@extends('app')
@section('content')
<main style="min-height: unset">
    <section class="profile">
        <div class="container">
            {{-- Используем единый компонент шапки профиля --}}
            <x-profile-header :user="$user" />
        </div>
    </section>
</main>
<div class="profile__main">
    <div class="container">
        @if($favoriteShops && $favoriteShops->isNotEmpty())
            <p class="profile__title">Избранных товаров: {{ $favoriteShops->count() }}</p>
        @else

        @endif
        <div class="profile__ideas">
            <div class="profile__ideas-list">
                @forelse ($favoriteShops as $favorite)
                    <div class="profile__item">
                        <div class="profile__item-card">
                            @php
                                // Для товаров используем вычисляемый URL из модели Product
                            @endphp
                            <img src="{{ $favorite->product->primary_image_url }}" alt="">
                        </div>
                        <a href="{{ route('showCardPage', $favorite->product->url) }}" style="color: #0a0c0d;width: 100%">
                            <div class="profile__item-title" style="width: 100%">{{ $favorite->product->name }}</div>
                        </a>
                    </div>
                @empty
                @endforelse
            </div>
        </div>



    </div>
</div>
<div class="profile__main">
    <div class="container">
        @if($favoriteProjects && $favoriteProjects->isNotEmpty())
            <p class="profile__title">Избранных проектов: {{ $favoriteProjects->count() }}</p>
        @else

        @endif
        <div class="profile__ideas">
            <div class="profile__ideas-list">
                @forelse ($favoriteProjects as $favorite)
                    <div class="profile__item">
                        <div class="profile__item-card">
                            @php
                                // Поиск изображения с is_cover = 1
                                $coverImage = $favorite->images->firstWhere('is_cover', 1);
                                // Если изображение с is_cover = 1 не найдено, возьмем первое из массива
                                $displayImage = $coverImage ?? $favorite->images->first();
                            @endphp
                            @if($displayImage)
                                <img src="{{ Storage::url($displayImage->images) }}" alt="">
                            @elseif(isset($favorite->images->first()->images))
                                <img src="{{ Storage::url($favorite->images->first()->images) }}" alt="">
                            @else
                                <img src="/default-images/default-image.png" alt="">
                                {{-- Нет фото для показа --}}
                            @endif
                        </div>
                        <a href="{{ route('showGalleryPage', ['id' => $favorite->project->id]) }}" style="color: #0a0c0d;width: 100%">
                            <div class="profile__item-title" style="width: 100%">{{ Str::limit($favorite->project->title, 10) }}</div>
                        </a>
                    </div>
                @empty
                @endforelse
            </div>
        </div>



    </div>
</div>

<div class="profile__main">
    <div class="container">
        @if($favoriteAlbums && $favoriteAlbums->isNotEmpty())
            <p class="profile__title">Избранных aльбомов Идеи: {{$favoriteAlbums->count()}}</p>
        @else

        @endif
        <div class="profile__ideas">
            <div class="profile__ideas-list">
                @forelse ($favoriteAlbums as $album)
                    <div class="profile__item">
                        <div class="profile__item-card">
                            @php
                                // Поиск изображения с is_cover = 1
                                $coverImage = $album->images->firstWhere('is_cover', 1);
                                // Если изображение с is_cover = 1 не найдено, возьмем первое из массива
                                $displayImage = $coverImage ?? $album->images->first();
                            @endphp
                            @if($displayImage)
                                <img src="{{ Storage::url($displayImage->images) }}" alt="">
                            @elseif(isset($album->images->first()->images))
                                <img src="{{ Storage::url($album->images->first()->images) }}" alt="">
                            @else
                                <img src="/default-images/default-image.png" alt="">
                                {{-- Нет фото для показа --}}
                            @endif
                        </div>
                        <a href="{{ route('showGalleryAlbumPage', ['id' => $album->album->id]) }}" style="color: #0a0c0d;width: 100%">
                            <div class="profile__item-title" style="width: 100%">{{ Str::limit($album->album->title, 10) }}</div>
                        </a>
                    </div>
                @empty

                @endforelse
            </div>

        </div>


    </div>
</div>

<div class="profile__main">
    <div class="container">
        @if($favoriteBlogs && $favoriteBlogs->isNotEmpty())
            <p class="profile__title">Избранные статьи: {{$favoriteBlogs->count()}}</p>
        @else

        @endif

        <div class="profile__ideas">
            <div class="profile__ideas-list">
                @forelse ($favoriteBlogs as $blog)
                    <div class="profile__item">
                        <div class="profile__item-card">
                            @if($blog->blog->preview_image)
                                <img src="{{ blog_image_url($blog->blog->preview_image) }}" alt="">
                            @else
                                <img src="/default-images/default-image.png" alt="">
                                {{-- Нет фото для показа --}}
                            @endif
                        </div>
                        <a href="{{ route('showPostPage', ['slug' => $blog->blog->slug]) }}" style="color: #0a0c0d;width: 100%">
                            <div class="profile__item-title" style="width: 100%">{{ Str::limit($blog->blog->title, 10) }}</div>
                        </a>
                    </div>
                @empty
                @endforelse
            </div>
        </div>


    </div>
</div>
<style>
    .profile__navigation-item--active .profile__navigation-link {
        color: #217b00; /* Устанавливаем зеленый цвет для активной ссылки */
    }
    .form__main {
        display: flex;
        flex-direction: column;
    }

    .city-container {
        display: flex;
        justify-content: space-between;
    }


    .city {
        display: flex;
        flex-direction: column;
        width: 48%;
    }



    .select{
        padding: 10px;
        margin-bottom: 20px;
    }

    .image-preview {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        overflow-y: auto; /* Включить вертикальную прокрутку, если это необходимо */
        max-height: 200px; /* Ограничить высоту, чтобы предотвратить выход за границы */
        width: calc(100% - 80px); /* Учитываем отступы и прокрутку */
        margin-top: 20px; /* Отступ сверху */
    }

    .preview-image {
        width: 150px;
        height: 150px;
        object-fit: cover;
        border-radius: 5px;
        cursor: grab;
        transition: transform 0.2s ease-out;
    }

    .profile__ideas-list {
        display: flex;
        flex-wrap: wrap; /* Перенос элементов на следующую строку */
        gap: 32px; /* Отступ между элементами, можно настроить по своему усмотрению */
    }

    .profile__item {
        flex: 1 1 calc(33.33% - 16px); /* Задаем ширину, чтобы 3 карточки влезали в строку */
        box-sizing: border-box;
        max-width: 220px;
        position: relative; /* Для размещения иконки внутри */
        margin-bottom: 16px;
    }

    .profile__item-card {
        background-color: #f4f4f4; /* Пример фона */
        padding: 10px;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease;
        width: 100%;
        display: flex;
        flex-direction: column; /* Равномерное распределение контента */
        /* height: 100%; Чтобы карточка не вылезала */
    }

    .profile__item-card img {
        width: 100%;
        height: 200px;
        border-radius: 4px;
        object-fit: cover;
    }

    .profile__item:hover .profile__item-card {
        transform: scale(1.02);
    }

    @media (max-width: 768px) {
        .container {
            padding: 15px !important;
        }

        .profile__title {
            font-size: 18px !important;
            margin-bottom: 20px !important;
        }

        .profile__ideas-list {
            gap: 20px !important;
        }

        .profile__item {
            flex: 1 1 calc(50% - 10px) !important; /* 2 карточки в строке на планшетах */
            max-width: none !important;
            margin-bottom: 20px !important;
        }

        .search__div{
            width: 100%;
        }

        .profile__item-card {
            width: 100% !important;
            padding: 15px !important;
        }

        .profile__item-card img {
            width: 100% !important;
            height: 180px !important; /* Уменьшенная высота для мобильных */
            border-radius: 4px;
            object-fit: cover;
        }

        .profile__item-title {
            font-size: 14px !important;
            margin-top: 10px !important;
            line-height: 1.3 !important;
        }
    }

    @media (max-width: 480px) {
        .container {
            padding: 10px !important;
        }

        .profile__item {
            flex: 1 1 100% !important; /* 1 карточка в строке на мобильных */
            margin-bottom: 15px !important;
        }

        .profile__item-card {
            padding: 12px !important;
        }

        .profile__item-card img {
            height: 160px !important;
        }

        .profile__item-title {
            font-size: 13px !important;
        }
    }

    /* Для экранов больше 1024px */
    @media (min-width: 1024px) {
        .profile__item {
            flex: 1 1 calc(33.33% - 16px); /* 3 карточки в строке для больших экранов */
            max-width: 220px; /* Максимальная ширина для обычных экранов */
        }

        .profile__item-card img {
            width: 100%; /* Изображение будет растягиваться на 100% ширины */
            height: 200px;
            border-radius: 4px;
            object-fit: cover;
        }
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const projectSelect = document.getElementById('projectSelect');
        const newProjectNameFldRow = document.getElementById('newProjectNameFldRow');

        projectSelect.addEventListener('change', function () {
            if (projectSelect.value === 'NewProject') {
                newProjectNameFldRow.style.display = 'block';
            } else {
                newProjectNameFldRow.style.display = 'none';
            }
        });
    });

    function showSubcategories() {
        const categories = document.getElementById('categories');
        const subcategories = document.getElementById('subcategories').children;

        for (let i = 0; i < subcategories.length; i++) {
            subcategories[i].style.display = 'none';
        }

        switch (categories.value) {
            case 'ДИЗАЙН И СТРОИТЕЛЬСТВО':
                document.getElementById('design').style.display = 'block';
                break;
            case 'РЕМОНТ И ОТДЕЛКА':
                document.getElementById('repair').style.display = 'block';
                break;
            case 'ДЕКОР И МЕБЕЛЬ':
                document.getElementById('decor').style.display = 'block';
                break;
            case 'ДОМ И УЧАСТОК':
                document.getElementById('home').style.display = 'block';
                break;
            case 'ПРОЧИЕ РАБОТЫ И УСЛУГИ':
                document.getElementById('other').style.display = 'block';
                break;
        }
    }
</script>
<script>
    function setup(headerSelector, setupSelector, contentSelector, activeClass, display = 'flex') {
        const header = document.querySelector(headerSelector),
            tab = document.querySelectorAll(setupSelector),
            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(setupSelector.replace(/\./, '')) ||
                target.parentNode.classList.contains(setupSelector.replace(/\./, ''))) {
                tab.forEach((item, i) => {
                    if (target == item || target.parentNode == item) {
                        hideTabContent()
                        showTabContent(i)
                    }
                });
            }
        })
    }

    // ПЕРВЫЙ аргумент - класс всего нашего хедера табов.
    // ВТОРОЙ аргумент - класс конкретного элемента, при клике на который будет переключатся таб.
    // ТРЕТИЙ аргумент - класс того блока, который будет переключаться.
    // ЧЕТВЕРТЫЙ аргумент - класс активности, который будет добавлятся для таба, который сейчас активен.
    setup('.setup__header', '.setup__header-item', '.setup__content-item', 'active')
</script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        document.querySelector('.file__input').addEventListener('change', function(event) {
            const files = event.target.files;

            // Очищаем существующие фотографии
            document.getElementById('image-preview').innerHTML = '';

            // Перебираем выбранные файлы и отображаем их
            for (let i = 0; i < files.length; i++) {
                const file = files[i];
                const reader = new FileReader();

                reader.onload = function(e) {
                    const img = document.createElement('img');
                    img.src = e.target.result;
                    img.classList.add('preview-image');
                    document.getElementById('image-preview').appendChild(img);
                };

                reader.readAsDataURL(file);
            }
        });
    });

</script>

<script>
    function bindModal(triggerSelector, modalSelector, closeSelector) {
        const triggers = document.querySelectorAll(triggerSelector),
            modals = document.querySelectorAll(modalSelector),
            closes = document.querySelectorAll(closeSelector),
            body = document.body;

        triggers.forEach((trigger, index) => {
            trigger.addEventListener('click', e => {
                e.preventDefault();
                const modal = modals[index];
                modal.style.display = 'flex';
                body.classList.add('locked');
            });
        });

        closes.forEach((close, index) => {
            close.addEventListener('click', () => {
                const modal = modals[index];
                modal.style.display = 'none';
                body.classList.remove('locked');
            });
        });

        modals.forEach(modal => {
            modal.addEventListener('click', e => {
                if (e.target === modal) {
                    modal.style.display = 'none';
                    body.classList.remove('locked');
                }
            });
        });
    }

    // Example of initializing multiple modals
    bindModal('.modal__btn1', '.modal__wrapper1', '.modal__close1');
    bindModal('.modal__btn2', '.modal__wrapper2', '.modal__close2');
    bindModal('.modal__btn3', '.modal__wrapper3', '.modal__close3');
</script>

<script>
    function stepForm() {
        document.querySelectorAll(".steps__form").forEach(form => {
            const steps = form.querySelectorAll(".form__step");
            const prevBtn = form.querySelector(".prev__step");
            const nextBtn = form.querySelector(".next__step");
            const progressIndicator = form.querySelector(".form__bar-indicator");
            const finishBlock = form.querySelector(".finish");

            let formStep = 0;
            updateFormSteps();

            prevBtn.addEventListener("click", (e) => {
                e.preventDefault();
                if (formStep > 0) {
                    formStep--;
                    updateFormSteps();
                }
            });

            nextBtn.addEventListener("click", (e) => {
                e.preventDefault();
                if (formStep < steps.length - 1) {
                    formStep++;
                } else {
                    // Если это последний шаг, отправляем форму
                    form.submit();
                    return;
                }
                updateFormSteps();
            });

            function updateFormSteps() {
                steps.forEach((step, index) => {
                    step.style.display = index === formStep ? "block" : "none";
                });
                progressIndicator.style.width = `${(formStep / (steps.length - 1)) * 100}%`;
                prevBtn.style.display = formStep === 0 ? "none" : "inline-block";
                nextBtn.textContent = formStep === steps.length - 1 ? "Сохранить" : "Далее";
            }
        });
    }

    document.addEventListener("DOMContentLoaded", stepForm);
</script>
<script>
    document.getElementById('project-select').addEventListener('change', function() {
        var newProjectInput = document.getElementById('new-project-name');
        if (this.value === 'NewProject') {
            newProjectInput.style.display = 'block';
        } else {
            newProjectInput.style.display = 'none';
        }
    });
</script>
@endsection