@extends('app')
@php
    use Illuminate\Support\Facades\Storage;
@endphp
@section('content')



<!-- Main Page -->
<main>
    <section class="intro">
        <div class="container">
            <div class="intro__wrapper">
                <h1 class="secondary-title">Журнал</h1>
                <div class="breadcrumbs">
                    <div class="breadcrumbs__inner">
                        <ul class="breadcrumbs__list mobile-overflow">
                            <li class="breadcrumbs__list-item">
                                <a href="{{route('showHomePage')}}">Главная</a>
                            </li>
                            <li class="breadcrumbs__list-item">
                                <a href="{{route('showJournalPage')}}">Журнал</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="journal">
        <div class="container">
            <div class="journal__inner">
                <button class="acide__btn">Фильтр</button>
                <aside class="journal__inner-aside aside-filter hidden">
                    <div class="tabs-container">
                        <div id="filter-1" class="tabs-content aside-filter__tabs-content tabs-content--active">
                            <form class="aside-filter__form" method="GET" action="{{ route('filterBlogs') }}">
                                <!-- Сохраняем параметры сортировки и поиска -->
                                @if(request('sort'))
                                    <input type="hidden" name="sort" value="{{ request('sort') }}">
                                @endif
                                @if(request('query'))
                                    <input type="hidden" name="query" value="{{ request('query') }}">
                                @endif
                                <ul class="aside-filter__list">
                                    <li class="aside-filter__item">
                                        <div class="aside-filter__content">
                                            <div class="aside-filter__box">
                                                @php
                                                    $categories = \App\Models\BlogCategory::whereNull('parent_id')->with('children')->get();
                                                    $selectedCategory = null;
                                                    $selectedSubcategory = null;
                                                    $categorySlug = request('category');
                                                    $subcategorySlug = request('subcategory');
                                                    if ($categorySlug) {
                                                        $selectedCategory = \App\Models\BlogCategory::where('slug', $categorySlug)->first();
                                                    }
                                                    if ($subcategorySlug) {
                                                        $selectedSubcategory = \App\Models\BlogCategory::where('slug', $subcategorySlug)->first();
                                                    }
                                                    function renderBlogCategoryTree($categories, $selectedCategory, $selectedSubcategory, $level = 0) {
                                                        $selectedCategorySlug = $selectedCategory ? $selectedCategory->slug : null;
                                                        $selectedSubcategorySlug = $selectedSubcategory ? $selectedSubcategory->slug : null;
                                                        foreach($categories as $cat) {
                                                            $isSelected = $selectedCategorySlug === $cat->slug && !$selectedSubcategorySlug;
                                                            $isParentOfSelected = $selectedCategorySlug === $cat->slug && $selectedSubcategorySlug;
                                                            echo '<label class="checkbox__item" style="margin-left:'.($level*20).'px;'.($isParentOfSelected ? 'font-weight:bold;' : '').'">';
                                                            echo '<input type="radio" name="category" value="'.$cat->slug.'" class="checkbox__input custom-radio" '.(($isSelected || $isParentOfSelected) ? 'checked' : '').' onchange="showChildren(this)">';
                                                            echo '<span class="fake"></span>';
                                                            echo '<span class="checkbox__name">'.$cat->title.'</span>';
                                                            echo '</label>';
                                                            if($cat->children->count() && $level < 1) {
                                                                $show = $isParentOfSelected || $isSelected;
                                                                echo '<div class="subcategory spec_check" style="display:'.($show ? 'block' : 'none').';">';
                                                                foreach($cat->children as $child) {
                                                                    $isChildSelected = $selectedCategorySlug === $cat->slug && $selectedSubcategorySlug === $child->slug;
                                                                    echo '<label class="checkbox__item" style="margin-left:'.(($level+1)*8).'px;">';
                                                                    echo '<input type="radio" name="subcategory" value="'.$child->slug.'" class="checkbox__input custom-radio" data-parent="'.$cat->slug.'" '.($isChildSelected ? 'checked' : '').' onchange="showChildren(this)">';
                                                                    echo '<span class="fake"></span>';
                                                                    echo '<span class="checkbox__name">'.$child->title.'</span>';
                                                                    echo '</label>';
                                                                }
                                                                echo '</div>';
                                                            }
                                                        }
                                                    }
                                                @endphp
                                                @php renderBlogCategoryTree($categories, $selectedCategory, $selectedSubcategory); @endphp
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                                <button type="submit" class="btn-main settings__btn">Применить фильтр</button>
                            </form>
                        </div>
                    </div>
                </aside>
                <div class="top">
                    <div class="journal__filter">
                        <div class="journal__filter-inner">
                            <div class="journal__filter-items mobile-overflow">
                                @if($selectedCategory)
                                    <button class="tag-button" data-type="category" data-value="{{ $selectedCategory->slug }}">
                                        <span>{{ $selectedCategory->title }}</span>
                                            <span class="tag-button-close"></span>
                                        </button>
                                    @endif
                                @if($selectedSubcategory)
                                    <button class="tag-button" data-type="subcategory" data-value="{{ $selectedSubcategory->slug }}">
                                        <span>{{ $selectedSubcategory->title }}</span>
                                            <span class="tag-button-close"></span>
                                        </button>
                                    @endif
                                    @if(request()->has('query') && request()->query('query'))
                                        <button class="tag-button" data-type="query" data-value="{{ request()->query('query') }}">
                                            <span>{{ request()->query('query') }}</span>
                                            <span class="tag-button-close"></span>
                                        </button>
                                    @endif
                            </div>
                        </div>
                        <div class="journal__filter-controls" style="display: flex; align-items: center; gap: 15px; flex-wrap: wrap; justify-content: space-between;width: 100%;">
                            <!-- Сортировка по дате -->
                            <div class="journal__sort-wrapper">
                                <form method="GET" action="{{ (request('category') || request('subcategory') || request('query')) ? route('filterBlogs') : route('showJournalPage') }}" class="journal__sort-form" id="sortForm">
                                    <!-- Сохраняем текущие параметры фильтрации -->
                                    @if(request('category'))
                                        <input type="hidden" name="category" value="{{ request('category') }}">
                                    @endif
                                    @if(request('subcategory'))
                                        <input type="hidden" name="subcategory" value="{{ request('subcategory') }}">
                                    @endif
                                    @if(request('query'))
                                        <input type="hidden" name="query" value="{{ request('query') }}">
                                    @endif

                                    <!-- Выпадающий список для сортировки -->
                                    <div class="journal__sort-drop drop" style="position: relative;">
                                        <div class="drop-select journal__sort-select" style="cursor: pointer; padding: 8px 15px; border: 1px solid #ccc; border-radius: 5px; background: white; min-width: 180px; display: flex; align-items: center; justify-content: space-between;">
                                            <span>{{ request()->sort == 'oldest' ? 'В начале старые' : 'В начале новые' }}</span>
                                            {{-- <span style="margin-left: 10px; color: #666;">▼</span> --}}
                                        </div>
                                        <ul class="drop-list journal__sort-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); top: 100%;">
                                            <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="journal__search search-main__wrapper" style="min-width: 200px;">
                                <form action="{{ route('filterBlogs') }}" method="GET" id="searchForm">
                                    <!-- Сохраняем текущие параметры фильтрации -->
                                    @if(request('category'))
                                        <input type="hidden" name="category" value="{{ request('category') }}">
                                    @endif
                                    @if(request('subcategory'))
                                        <input type="hidden" name="subcategory" value="{{ request('subcategory') }}">
                                    @endif
                                    @if(request('sort'))
                                        <input type="hidden" name="sort" value="{{ request('sort') }}">
                                    @endif

                                    <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="journal__search-input search-main"
                                            type="text"
                                            name="query"
                                            placeholder="Искать"
                                            value="{{ request('query') }}"
                                            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>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="journal__inner-list">
                        @foreach($blogs as $blog)
                            <div class="journal-item__wrapper row">
                                @if($blog->preview_image)
                                    <img class="journal-item__img" src="{{ blog_image_url($blog->preview_image) }}" alt="journal">
                                @else
                                    <img class="journal-item__img" style="" src="/images/Blogs/1743262131_thumbnail_ПРИНТ.png" alt="journal">
                                @endif

                                <div class="journal-info">
                                    <div class="journal-info__top">
                                        <p class="journal-info__title">{{ Str::limit($blog->title, 50) }}</p>
                                    </div>
                                    <div class="journal-info__description">
                                        @php
                                            $rawText = $blog->content ?? '';
                                            // Удаляем все теги и оставляем только текст
                                            $cleanedText = preg_replace('/<[^>]+>/', '', $rawText);
                                        @endphp

                                        <p>{{ Str::limit($cleanedText, 246) }}</p>

                                        <a class="journal-info__link" href="{{ route('showPostPage', ['slug' => $blog->slug]) }}">Читать статью полностью</a>
                                    </div>
                                    <div class="journal-info__bottom row">
                                        @if($blog->user && $blog->user->avatar)
                                            <img src="{{ Storage::url($blog->user->avatar) }}" style="border-radius: 50%" alt="avatar">
                                        @else
                                            <img src="{{ asset('default-images/default-avatar.png') }}" style="border-radius: 50%" alt="avatar">
                                        @endif
                                        <p>{{ $blog->user->name ?? 'Ремонт.ру' }}</p>
                                    </div>
                                    <div class="journal-info__stars">
                                        <span>{{$blog->likes->count()}}</span>
                                    </div>
                                </div>

                            </div>
                        @endforeach
                    </div>
                    @if($blogs->count() >= $blogs->perPage() && $blogs->lastPage() > 1)
                    <div class="pagination">
                        <ul class="pagination__list">
                                {{-- Кнопка "Назад" --}}
                                @if ($blogs->currentPage() > 1)
                                    <li class="pagination__item pagination__item--prev">
                                        <a class="a-prev" href="{{ $blogs->previousPageUrl() }}">Назад</a>
                                    </li>
                            @endif

                                {{-- Номера страниц --}}
                                @php
                                    $currentPage = $blogs->currentPage();
                                    $lastPage = $blogs->lastPage();
                                    $start = max(1, $currentPage - 2);
                                    $end = min($lastPage, $currentPage + 2);
                                @endphp
                                @for ($i = $start; $i <= $end; $i++)
                                    <li class="pagination__item {{ $i == $currentPage ? 'pagination__item--active' : '' }}">
                                        <a href="{{ $blogs->url($i) }}">{{ $i }}</a>
                                    </li>
                                @endfor

                                {{-- Кнопка "Далее" --}}
                                @if ($blogs->currentPage() < $blogs->lastPage())
                                    <li class="pagination__item pagination__item--next">
                                        <a href="{{ $blogs->nextPageUrl() }}">Далее</a>
                                    </li>
                            @endif
                        </ul>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </section>
    <section class="info">
        <div class="container">
            <div class="info__list">
                <div class="info__item">
                    <h2 class="info__title">Журнал Ремонт.рф — всё о ремонте, строительстве и обустройстве</h2>
                    <p class="info__text">Добро пожаловать в журнал Ремонт.рф — раздел, где собраны полезные статьи, инструкции, подборки и советы для тех, кто делает ремонт, строит дом или просто хочет улучшить своё жильё.</p>
                    <p class="info__text">Все материалы готовят эксперты, мастера и дизайнеры — без «воды», с реальными рекомендациями и примерами. Мы публикуем не просто тексты, а практичные решения и вдохновение для вашего дома.</p>
                    <p class="info__text">Ищете, с чего начать ремонт? Или хотите узнать, как выбрать ламинат, утеплить балкон или спланировать ванную? Всё это — в <strong>журнале Ремонт.рф</strong>.</p>
                </div>
            </div>
        </div>
    </section>
</main>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const filterButton = document.querySelector('.acide__btn');
        const asideFilter = document.querySelector('.journal__inner-aside');

        filterButton.addEventListener('click', function () {
            asideFilter.classList.toggle('show-mobile');
        });
    });


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

        clearButton.addEventListener('click', function () {
            searchInput.value = ''; // Сбрасываем текст
            searchInput.focus(); // Устанавливаем фокус обратно в поле
        });
    });
</script>
<script>
    function toggleSubcategories(category) {
        var subcategories = document.getElementById('subcategories-' + category);
        if (subcategories.style.display === 'none') {
            subcategories.style.display = 'block';
        } else {
            subcategories.style.display = 'none';
        }
    }
</script>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('.tag-button-close').forEach(button => {
            button.addEventListener('click', function () {
                const filterButton = this.closest('.tag-button');
                const filterType = filterButton.getAttribute('data-type');
                const url = new URL(window.location.href);

                if (filterType === 'category') {
                    url.searchParams.delete('category');
                    url.searchParams.delete('subcategory'); // сбрасываем и подкатегорию
                } else if (filterType === 'subcategory') {
                    url.searchParams.delete('subcategory');
                } else if (filterType === 'query') {
                    url.searchParams.delete('query');
                }
                window.location.href = url.toString();
            });
        });
    });



</script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Автосабмит при выборе категории или подкатегории
        const filterForm = document.querySelector('.aside-filter__form');
        if (filterForm) {
            filterForm.querySelectorAll('input[name="category"], input[name="subcategory"]').forEach(radio => {
                radio.addEventListener('change', function () {
                    // Если выбрана категория, сбрасываем подкатегории
                    if (this.name === 'category') {
                        filterForm.querySelectorAll('input[name="subcategory"]').forEach(subRadio => subRadio.checked = false);
                    }
                    filterForm.submit();
                });
            });
        }

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

        if (sortSelect && sortList) {
            sortSelect.addEventListener('click', function(e) {
                e.stopPropagation();
                const isVisible = sortList.style.display === 'block';
                sortList.style.display = isVisible ? 'none' : 'block';
                this.classList.toggle('active');
            });

            // Закрытие выпадающего списка при клике вне его
            document.addEventListener('click', function(event) {
                if (!event.target.closest('.journal__sort-drop')) {
                    if (sortList) {
                        sortList.style.display = 'none';
                    }
                    if (sortSelect) {
                        sortSelect.classList.remove('active');
                    }
                }
            });

            // Предотвращаем закрытие при клике на элементы списка
            sortList.addEventListener('click', function(e) {
                e.stopPropagation();
            });
        }
    });
</script>
<style>
    /* Исправление изображений журнала - аналогично реализации на странице Специалисты */
    .journal-item__wrapper {
        overflow: hidden; /* Скрываем переполнение */
    }

    .journal-item__wrapper > a,
    .journal-item__wrapper > img {
        flex-shrink: 0; /* Предотвращаем сжатие */
    }

    /* Десктоп - фиксированные размеры */
    .journal-item__wrapper .journal-item__img {
        width: 280px !important;
        height: 203px !important;
        object-fit: cover !important;
        border-radius: 20px;
        flex-shrink: 0;
        max-width: 280px !important;
    }

    /* Планшет */
    @media (max-width: 1024px) {
        .journal-item__wrapper .journal-item__img {
            width: 240px !important;
            height: 173px !important;
            max-width: 240px !important;
        }
    }

    /* Мобильные устройства - как на странице Специалисты */
    @media (max-width: 768px) {
        .journal-item__wrapper {
            flex-direction: column !important;
            width: 100% !important;
        }

        .journal-item__wrapper .journal-item__img {
            width: 100% !important;
            height: 250px !important;
            max-width: 100% !important;
            border-radius: 20px 20px 0 0 !important;
        }

        .journal-info {
            width: 100% !important;
        }
    }

    /* Маленькие мобильные */
    @media (max-width: 480px) {
        .journal-item__wrapper .journal-item__img {
            height: 200px !important;
        }
    }

    /* Стили для сортировки */
    .journal__filter-controls {
        display: flex;
        align-items: center;
        gap: 15px;
        flex-wrap: wrap;
        margin-top: 15px;
    }

    .journal__sort-wrapper {
        position: relative;
    }

    .journal__sort-select {
        transition: all 0.3s ease;
    }

    .journal__sort-select:hover {
        border-color: #217b00;
    }

    .journal__sort-select.active {
        border-color: #217b00;
    }

    .journal__sort-list li:hover {
        background-color: #f5f5f5;
    }

    .journal__sort-list li button:hover {
        color: #217b00;
    }

    /* Мобильная адаптация для сортировки */
    @media (max-width: 768px) {
        .journal__filter-controls {
            flex-direction: column;
            gap: 10px;
        }

        .journal__sort-wrapper {
            width: 100%;
        }

        .journal__sort-select {
            width: 100%;
            min-width: 100%;
        }

        .journal__search {
            width: 100% !important;
            min-width: 100% !important;
        }
    }

    @media (max-width: 480px) {
        .journal__filter-controls {
            gap: 8px;
        }

        .journal__sort-select {
            padding: 10px 12px;
            font-size: 14px;
        }

        .journal__sort-list {
            min-width: 100%;
            font-size: 14px;
        }

        .journal__sort-list li {
            padding: 10px 12px;
        }

        .journal__sort-list li button {
            font-size: 14px;
        }
    }
</style>
@endsection