Atomcms-edit/resources/themes/atom/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" style="background-color: var(--color-surface);">
 <div class="text-2xl font-bold" style="color: var(--color-primary)">{{ $statistics['total_categories'] }}</div>
 <div class="text-sm" style="color: var(--color-text-muted)">{{ __('Categories') }}</div>
 </div>
 <div class="p-3 rounded" style="background-color: var(--color-surface);">
 <div class="text-2xl font-bold" style="color: var(--color-primary)">{{ $statistics['total_rares'] }}</div>
 <div class="text-sm" style="color: var(--color-text-muted)">{{ __('Total Rares') }}</div>
 </div>
 <div class="p-3 rounded" style="background-color: var(--color-surface);">
 <div class="text-2xl font-bold" style="color: var(--color-primary)">{{ round($statistics['average_rares_per_category']) }}</div>
 <div class="text-sm" style="color: var(--color-text-muted)">{{ __('Avg per Category') }}</div>
 </div>
 <div class="p-3 rounded" style="background-color: var(--color-surface);">
 <div class="text-lg font-bold truncate" style="color: var(--color-primary)">{{ $statistics['most_valuable_category'] }}</div>
 <div class="text-sm" style="color: var(--color-text-muted)">{{ __('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" style="color: var(--color-text-muted)">
 {{ __('Found :count categories', ['count' => $categories->count()]) }}
 </p>
 </x-content.content-card>
 @endif

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

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

 {{-- Sort Controls --}}
 <div class="mb-4 flex flex-wrap gap-2">
 <span class="text-sm self-center" style="color: var(--color-text-muted)">{{ __('Sort by:') }}</span>
 <a href="{{ route('values.category', ['id' => $category->id, 'sort' => 'name', 'order' => $sortBy === 'name' && $sortOrder === 'asc' ? 'desc' : 'asc']) }}"
 class="px-3 py-1 rounded text-sm" :style="$sortBy === 'name' ? 'background-color: var(--color-primary); color: var(--button-text-color)' : 'background-color: var(--color-surface); color: var(--color-text)'">
 {{ __('Name') }} {{ $sortBy === 'name' ? ($sortOrder === 'asc' ? '↑' : '↓') : '' }}
 </a>
 <a href="{{ route('values.category', ['id' => $category->id, 'sort' => 'credit_value', 'order' => $sortBy === 'credit_value' && $sortOrder === 'asc' ? 'desc' : 'asc']) }}"
 class="px-3 py-1 rounded text-sm" :style="$sortBy === 'credit_value' ? 'background-color: var(--color-primary); color: var(--button-text-color)' : 'background-color: var(--color-surface); color: var(--color-text)'">
 {{ __('Credits') }} {{ $sortBy === 'credit_value' ? ($sortOrder === 'asc' ? '↑' : '↓') : '' }}
 </a>
 <a href="{{ route('values.category', ['id' => $category->id, 'sort' => 'currency_value', 'order' => $sortBy === 'currency_value' && $sortOrder === 'asc' ? 'desc' : 'asc']) }}"
 class="px-3 py-1 rounded text-sm" :style="$sortBy === 'currency_value' ? 'background-color: var(--color-primary); color: var(--button-text-color)' : 'background-color: var(--color-surface); color: var(--color-text)'">
 {{ __('Currency') }} {{ $sortBy === 'currency_value' ? ($sortOrder === 'asc' ? '↑' : '↓') : '' }}
 </a>
 </div>

 <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
 @foreach($category->furniture->sortBy($sortBy, SORT_REGULAR, $sortOrder === 'desc') as $rare)
 <x-rares.rare-card :rare="$rare" />
 @endforeach
 </div>
 </x-content.content-card>
 @elseif(isset($categories) && $categories instanceof \Illuminate\Database\Eloquent\Collection)
 {{-- All Categories View --}}
 @forelse($categories as $cat)
 <x-content.content-card :icon="$cat->badge">
 <x-slot:title>
 {{ $cat->name }}
 </x-slot:title>

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

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

 @if($cat->furniture->count() > 6)
 <div class="mt-4 text-center">
 <a href="{{ route('values.category', ['id' => $cat->id]) }}" class="text-primary hover:underline">
 {{ __('View all :count rares', ['count' => $cat->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-[32px]">
 {{-- Enhanced Search --}}
 <x-content.content-card icon="catalog-icon" classes="border dark: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

 <div class="relative">
 <x-form.input classes="mb-3 pr-10" name="search" placeholder="Search for a rare..." value="{{ $searchTerm ?? '' }}"/>
 @if(isset($searchTerm))
 <a href="{{ route('values.index') }}" class="absolute right-3 top-3 text-[var(--color-text-muted)] hover:text-[var(--color-text)]">
 ✕
 </a>
 @endif
 </div>

 @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>

 {{-- Quick Stats --}}
 @if(isset($statistics))
 <div class="mt-4 pt-4 border-t border-gray-300 dark:border-gray-700">
 <p class="text-xs text-[var(--color-text-muted)]">
 {{ __('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 dark: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-[var(--color-text)] space-y-2 max-h-96 overflow-y-auto">
 <a href="{{ route('values.index') }}"
 class="block rounded py-2 px-4 transition duration-200 ease-in-out hover:scale-[102%] {{ !isset($category) && !isset($searchTerm) ? 'bg-[var(--color-primary)] text-[var(--button-text-color)]' : 'bg-[var(--color-background)]' }}">
 {{ __('All Rares') }}
 </a>

 @foreach($categoriesNav ?? [] as $cat)
 <a href="{{ route('values.category', ['id' => $cat->id]) }}" class="block text-center text-sm transition hover:scale-[102%]" :style="'background-color: ' + (isset($category) && $category->id === $cat->id ? 'var(--color-primary)' : 'var(--color-surface)') + '; color: ' + (isset($category) && $category->id === $cat->id ? 'var(--button-text-color)' : 'var(--color-text)') + '; border-radius: 0.25rem; padding: 0.5rem 1rem;'" style="display: block; text-align: center; border-radius: 0.25rem; padding: 0.5rem 1rem;">
 {{ $cat->name }}
 <span class="float-right text-xs opacity-75">({{ $cat->furniture_count ?? $cat->furniture->count() }})</span>
 </a>
 @endforeach
 </div>
 </x-content.content-card>
 </div>
</x-app-layout>