@extends('layouts.nova')

@section('content')
<div class="container-fluid legacy-page">
    @php \App\Banner::ShowResponsiveAd(); @endphp

    <div class="effect2 page-header-wrap">
        <header class="page-heading">
            <h1 class="page-header">{{ $page_title }}</h1>
            <p style="clear:both">{!! $tidy ?? '' !!}</p>
        </header>
    </div>

    <div class="md:hidden px-4 py-3">
        <button id="sidebarToggle" aria-controls="sidebar" aria-expanded="false" class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-white/5 hover:bg-white/7 border border-white/5">
            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 6h16M4 12h16M4 18h16"/></svg>
            <span class="text-sm text-white/90">Categories</span>
        </button>
    </div>

    <div class="mx-auto w-full">
        <div class="flex min-h-[calc(100vh-64px)]">
            <!-- SIDEBAR -->
            <aside id="sidebar" class="hidden md:block w-72 shrink-0 border-r border-neutral-800 bg-nova-900/60 backdrop-blur-sm">
                <div class="p-4">
                    <button class="w-full h-12 rounded-xl bg-white/5 hover:bg-white/7 border border-white/5 flex items-center gap-3 px-4">
                        <span class="w-8 h-8 rounded-lg bg-white/5 inline-flex items-center justify-center">
                            <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 6h16M4 12h16M4 18h16"/></svg>
                        </span>
                        <span class="text-sm text-white/90">Menu</span>
                    </button>

                    <div class="mt-6 text-sm text-neutral-400">
                        <div class="font-semibold text-white/80 mb-2">Main Categories:</div>
                        <ul class="space-y-2">
                            <li><a class="flex items-center gap-2 hover:text-white" href="/photography"><span class="opacity-70">📷</span> Photography</a></li>
                            <li><a class="flex items-center gap-2 hover:text-white" href="/wallpapers"><span class="opacity-70">🖼️</span> Wallpapers</a></li>
                            <li><a class="flex items-center gap-2 hover:text-white" href="/skins"><span class="opacity-70">🧩</span> Skins</a></li>
                            <li><a class="flex items-center gap-2 hover:text-white" href="/other"><span class="opacity-70">✨</span> Other</a></li>
                        </ul>

                        <div class="mt-6 font-semibold text-white/80 mb-2">Browse Subcategories:</div>
                        <ul class="space-y-2 sb-scrollbar max-h-56 overflow-auto pr-2">
                            @foreach($subcategories ?? [] as $skupina)
                                @php
                                    // Prefer an explicit slug when provided by the model/mapping, otherwise build one from the name
                                    $slug = $skupina->slug ?? \Illuminate\Support\Str::slug($skupina->category_name);
                                    $ctype = strtolower($group ?? 'photography');
                                    $addit = (isset($id) && ($skupina->category_id ?? null) == $id) ? 'selected_group' : '' ;
                                @endphp
                                <li class="subgroup {{ $addit }}"><a class="hover:text-white" href="/{{ $ctype }}/{{ $slug }}">{{ $skupina->category_name }}</a></li>
                            @endforeach
                        </ul>

                        <div class="mt-6 font-semibold text-white/80 mb-2">Daily Uploads <span class="text-neutral-400 font-normal">(245)</span></div>
                        <div class="rounded-xl bg-white/5 border border-white/5 overflow-hidden">
                            <button class="w-full px-4 py-3 text-left hover:bg-white/5">All</button>
                            <button class="w-full px-4 py-3 text-left hover:bg-white/5">Hot</button>
                        </div>

                        <a class="mt-4 inline-flex items-center gap-2 text-neutral-400 hover:text-white" href="#">
                            <span>Link, more</span>
                            <span class="opacity-60">›</span>
                        </a>
                    </div>

                </div>
            </aside>

            <!-- Mobile overlay (shown when sidebar opens) -->
            <div id="sidebarOverlay" class="hidden md:hidden fixed inset-0 bg-black/50 z-30"></div>

            <!-- MAIN -->
            <main class="flex-1">
                <div class="nova-gallery grid grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
                    @foreach($artworks as $art)
                        @include('legacy._artwork_card', ['art' => $art])
                    @endforeach
                </div>

                <div class="paginationMenu text-center mt-6">
                    {{ method_exists($artworks, 'withQueryString') ? $artworks->withQueryString()->links() : '' }}
                </div>
            </main>
        </div>
    </div>

</div>
@endsection

@push('styles')
<style>
    /* Nova-like gallery tweaks: fixed-height thumbnails, tighter spacing, refined typography */
    .nova-gallery {
        margin-top: 1.25rem;
    }

    .nova-gallery .artwork a { display: block; }

    /* Ensure consistent gap and card sizing across breakpoints */
    @media (min-width: 1024px) {
        .nova-gallery { gap: 1rem; }
    }

    /* Typography refinements to match Nova */
    .nova-gallery .artwork h3 { font-size: 0.95rem; line-height: 1.15; }
    .nova-gallery .artwork .text-xs { font-size: 0.72rem; }

    /* Improve image loading artifact handling */
    .nova-gallery img { background: linear-gradient(180deg,#0b0b0b,#0f0f10); }

    /* Remove any default margins on article cards that can create vertical gaps */
    .nova-gallery .artwork { margin: 0; }

    /* Ensure grid items don't collapse when overlay hidden */
    .nova-gallery .artwork a { min-height: 0; }
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    var toggle = document.getElementById('sidebarToggle');
    var sidebar = document.getElementById('sidebar');
    var overlay = document.getElementById('sidebarOverlay');

    if (!toggle || !sidebar) return;

    function openSidebar() {
        sidebar.classList.remove('hidden');
        sidebar.classList.add('fixed','left-0','top-0','bottom-0','z-40');
        overlay.classList.remove('hidden');
        toggle.setAttribute('aria-expanded','true');
    }

    function closeSidebar() {
        sidebar.classList.add('hidden');
        sidebar.classList.remove('fixed','left-0','top-0','bottom-0','z-40');
        overlay.classList.add('hidden');
        toggle.setAttribute('aria-expanded','false');
    }

    toggle.addEventListener('click', function (e) {
        e.preventDefault();
        if (sidebar.classList.contains('hidden')) openSidebar(); else closeSidebar();
    });

    overlay && overlay.addEventListener('click', function () { closeSidebar(); });
    // Close on Escape
    document.addEventListener('keyup', function (e) { if (e.key === 'Escape') closeSidebar(); });
});
</script>
@endpush