Atomcms-edit/resources/themes/dusk/views/rare-values.blade.php

<x-app-layout>
    @push('title', __('Rare values'))

    <div class="col-span-12 lg:col-span-9 lg:w-[96%]">
        <div class="flex flex-col gap-y-4">
            {{-- Statistics Card --}}
            @if(isset($statistics))
                <x-content.content-card icon="currency-icon">
                    <x-slot:title>
                        {{ __('Rare Statistics') }}
                    </x-slot:title>

                    <x-slot:under-title>
                        {{ __('Overview of rare values on :hotel', ['hotel' => setting('hotel_name')]) }}
                    </x-slot:under-title>

                    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-center">
                        <div class="p-3 rounded bg-gray-700">
                            <div class="text-2xl font-bold text-primary">{{ $statistics['total_categories'] }}</div>
                            <div class="text-sm text-gray-400">{{ __('Categories') }}</div>
                        </div>
                        <div class="p-3 rounded bg-gray-700">
                            <div class="text-2xl font-bold text-primary">{{ $statistics['total_rares'] }}</div>
                            <div class="text-sm text-gray-400">{{ __('Total Rares') }}</div>
                        </div>
                        <div class="p-3 rounded bg-gray-700">
                            <div class="text-2xl font-bold text-primary">{{ round($statistics['average_rares_per_category']) }}</div>
                            <div class="text-sm text-gray-400">{{ __('Avg per Category') }}</div>
                        </div>
                        <div class="p-3 rounded bg-gray-700">
                            <div class="text-lg font-bold text-primary truncate">{{ $statistics['most_valuable_category'] }}</div>
                            <div class="text-sm text-gray-400">{{ __('Top Category') }}</div>
                        </div>
                    </div>
                </x-content.content-card>
            @endif

            {{-- Search Results Info --}}
            @if(isset($searchTerm))
                <x-content.content-card icon="search-icon">
                    <x-slot:title>
                        {{ __('Search Results') }}
                    </x-slot:title>
                    <x-slot:under-title>
                        {{ __('Showing results for: :term', ['term' => $searchTerm]) }}
                    </x-slot:under-title>
                    <p class="text-sm text-gray-400">
                        {{ __('Found :count categories', ['count' => $categories->count()]) }}
                    </p>
                </x-content.content-card>
            @endif

            @if(isset($categories) && isset($categories->name))
                {{-- Single Category View with Sorting --}}
                <x-content.content-card :icon="$categories->badge">
                    <x-slot:title>
                        {{ $categories->name }}
                    </x-slot:title>

                    <x-slot:under-title>
                        {{ __('All :count rares in :category', ['count' => $categories->furniture->count(), 'category' => $categories->name]) }}
                    </x-slot:under-title>

                    {{-- Sort Controls --}}
                    <div class="mb-4 flex flex-wrap gap-2">
                        <span class="text-sm text-gray-400 self-center">{{ __('Sort by:') }}</span>
                        <a href="{{ route('values.category', ['id' => $categories->id, 'sort' => 'name', 'order' => 'asc']) }}"
                           class="px-3 py-1 rounded text-sm {{ request('sort', 'name') === 'name' ? 'bg-primary text-white' : 'bg-gray-700' }}">
                            {{ __('Name') }}
                        </a>
                        <a href="{{ route('values.category', ['id' => $categories->id, 'sort' => 'credit_value', 'order' => 'desc']) }}"
                           class="px-3 py-1 rounded text-sm {{ request('sort') === 'credit_value' ? 'bg-primary text-white' : 'bg-gray-700' }}">
                            {{ __('Credits') }}
                        </a>
                        <a href="{{ route('values.category', ['id' => $categories->id, 'sort' => 'currency_value', 'order' => 'desc']) }}"
                           class="px-3 py-1 rounded text-sm {{ request('sort') === 'currency_value' ? 'bg-primary text-white' : 'bg-gray-700' }}">
                            {{ __('Currency') }}
                        </a>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                        @foreach($categories->furniture as $rare)
                            <x-rares.rare-card :rare="$rare" />
                        @endforeach
                    </div>
                </x-content.content-card>
            @else
                {{-- All Categories View --}}
                @forelse($categories ?? [] as $category)
                    <x-content.content-card :icon="$category->badge">
                        <x-slot:title>
                            {{ $category->name }}
                        </x-slot:title>

                        <x-slot:under-title>
                            {{ __(':count rares', ['count' => $category->furniture->count()]) }}
                        </x-slot:under-title>

                        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                            @foreach($category->furniture->take(6) as $rare)
                                <x-rares.rare-card :rare="$rare" />
                            @endforeach
                        </div>

                        @if($category->furniture->count() > 6)
                            <div class="mt-4 text-center">
                                <a href="{{ route('values.category', ['id' => $category->id]) }}" class="text-primary hover:underline">
                                    {{ __('View all :count rares', ['count' => $category->furniture->count()]) }} →
                                </a>
                            </div>
                        @endif
                    </x-content.content-card>
                @empty
                    <x-content.content-card icon="currency-icon">
                        <x-slot:title>
                            {{ __('Rare values') }}
                        </x-slot:title>

                        <x-slot:under-title>
                            {{ __('Get an overview of all of the rares on :hotel', ['hotel' => setting('hotel_name')]) }}
                        </x-slot:under-title>

                        <p class="text-center py-8">
                            {{ __('We currently have no rares listed here') }}
                        </p>
                    </x-content.content-card>
                @endforelse
            @endif
        </div>
    </div>

    <div class="col-span-12 lg:col-span-3 lg:w-[110%] space-y-4 lg:-ml-8">
        {{-- Enhanced Search --}}
        <x-content.content-card icon="catalog-icon" classes="border border-gray-900">
            <x-slot:title>
                {{ __('Search Rares') }}
            </x-slot:title>

            <x-slot:under-title>
                {{ __('Find rares quickly') }}
            </x-slot:under-title>

            <form action="{{ route('values.search') }}" method="POST" class="space-y-3">
                @csrf

                <x-form.input classes="mb-3" name="search" placeholder="Search for a rare..." value="{{ $searchTerm ?? '' }}"/>

                @if (setting('google_recaptcha_enabled'))
                    <div class="g-recaptcha" data-sitekey="{{ config('habbo.site.recaptcha_site_key') }}"></div>
                @endif

                @if (setting('cloudflare_turnstile_enabled'))
                    <x-turnstile />
                @endif

                <x-form.secondary-button class="w-full">
                    {{ __('Search') }}
                </x-form.secondary-button>
            </form>

            @if(isset($statistics))
                <div class="mt-4 pt-4 border-t border-gray-700">
                    <p class="text-xs text-gray-500">
                        {{ __('Searching through :total rares', ['total' => $statistics['total_rares']]) }}
                    </p>
                </div>
            @endif
        </x-content.content-card>

        {{-- Categories Navigation --}}
        <x-content.content-card icon="inventory-icon" classes="border border-gray-900">
            <x-slot:title>
                {{ __('Categories') }}
            </x-slot:title>

            <x-slot:under-title>
                {{ __(':count categories', ['count' => $categoriesNav->count() ?? 0]) }}
            </x-slot:under-title>

            <div class="px-2 text-sm text-gray-200 space-y-2 max-h-96 overflow-y-auto">
                <div class="rounded bg-gray-700 py-2 px-4 transition duration-200 ease-in-out hover:scale-[102%]">
                    <a href="{{ route('values.index') }}" class="block text">
                        {{ __('All Rares') }}
                    </a>
                </div>

                @foreach($categoriesNav ?? [] as $category)
                    <div class="rounded bg-gray-700 py-2 px-4 transition duration-200 ease-in-out hover:scale-[102%]">
                        <a href="{{ route('values.category', ['id' => $category->id]) }}" class="block text">
                            {{ $category->name }}
                            <span class="float-right text-xs opacity-75">({{ $category->furniture_count ?? $category->furniture->count() }})</span>
                        </a>
                    </div>
                @endforeach
            </div>
        </x-content.content-card>
    </div>
</x-app-layout>