262 lines
18 KiB
PHP
262 lines
18 KiB
PHP
<div class="mx-auto container mt-8 mb-12 p-6 sm:px-6 lg:px-8">
|
|
@if ($category->image && theme('show_category_image_banner', true))
|
|
<div class="mb-8 rounded-2xl overflow-hidden shadow-xl">
|
|
<div class="relative h-48 md:h-60 lg:h-72">
|
|
<img src="{{ Storage::url($category->image) }}"
|
|
alt="{{ $category->name }}"
|
|
class="w-full h-full object-cover object-center">
|
|
|
|
<div class="absolute inset-0 bg-gradient-to-t from-primary/30 via-primary/15 to-primary/10"></div>
|
|
|
|
<div class="absolute bottom-0 left-0 right-0 p-6 md:p-8">
|
|
<div class="flex items-center gap-3 mb-3">
|
|
|
|
</div>
|
|
<h1 class="text-3xl md:text-4xl lg:text-5xl font-bold text-white text-shadow-lg mb-2 drop-shadow-2xl">
|
|
{{ $category->name }}
|
|
</h1>
|
|
@if ($category->description)
|
|
<div class="hidden md:block text-white md:text-lg text-shadow-lg max-w-3xl drop-shadow-lg ">
|
|
{!! Str::limit($category->description, 215, '...') !!}
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<div class="grid md:grid-cols-4 gap-8 lg:gap-12">
|
|
|
|
<div class="flex flex-col gap-6 col-span-3 md:col-span-1">
|
|
|
|
@if (!$category->image || !theme('show_category_image_banner', true))
|
|
<div class="group bg-gradient-to-br from-background-secondary/50 to-background-secondary/30 border border-neutral/50 rounded-2xl shadow-lg hover:shadow-xl transform transition-all duration-300 overflow-hidden">
|
|
<div class="p-6">
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<div class="bg-primary/10 text-primary p-3 rounded-full shadow-md">
|
|
<x-ri-folder-fill class="size-6" />
|
|
</div>
|
|
</div>
|
|
|
|
<h1 class="text-3xl font-bold text-color-base mb-3 group-hover:text-primary transition-colors duration-300">
|
|
{{ $category->name }}
|
|
</h1>
|
|
|
|
@if ($category->description)
|
|
<article class="prose dark:prose-invert text-color-muted leading-relaxed">
|
|
{!! $category->description !!}
|
|
</article>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<div class="bg-gradient-to-br from-background-secondary/50 to-background-secondary/30 border border-neutral/50 rounded-2xl shadow-lg overflow-hidden">
|
|
<div class="p-6 pb-4 border-b border-neutral/50">
|
|
<div class="flex items-center text-primary font-bold text-lg">
|
|
Categories
|
|
</div>
|
|
</div>
|
|
|
|
<nav class="flex flex-col py-2">
|
|
@foreach ($categories as $ccategory)
|
|
<a href="{{ route('category.show', ['category' => $ccategory->slug]) }}" wire:navigate
|
|
class="group/nav px-6 py-3 text-color-base hover:bg-primary/10 hover:text-primary transition-all duration-300 border-l-4 border-transparent hover:border-primary {{ $category->id == $ccategory->id ? 'font-bold text-primary bg-primary/10 border-primary' : '' }}"
|
|
aria-current="{{ $category->id == $ccategory->id ? 'page' : 'false' }}">
|
|
<div class="flex items-center justify-between">
|
|
<span>{{ $ccategory->name }}</span>
|
|
<x-ri-arrow-right-fill class="size-4 transform transition-transform duration-300 group-hover/nav:translate-x-1 opacity-0 group-hover/nav:opacity-100" />
|
|
</div>
|
|
</a>
|
|
@endforeach
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-8 col-span-3">
|
|
|
|
<!-- Child Categories -->
|
|
@if (count($childCategories) >= 1)
|
|
<div>
|
|
<div class="flex items-center justify-between mb-6">
|
|
<div class="hidden md:flex items-center gap-2 text-color-muted">
|
|
<x-ri-stack-fill class="size-4" />
|
|
<span class="text-sm">{{ count($childCategories) }} {{ Str::plural('category', count($childCategories)) }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
@foreach ($childCategories as $index => $childCategory)
|
|
@php
|
|
$hasImage = !empty($childCategory->image);
|
|
@endphp
|
|
|
|
<div class="group relative flex flex-col bg-gradient-to-br from-background-secondary via-background-secondary/90 to-background-secondary/70 border border-neutral/50 rounded-2xl shadow-xl hover:shadow-2xl transform hover:-translate-y-3 transition-all duration-500 overflow-hidden animate-fade-in-up"
|
|
style="animation-delay: {{ $index * 0.1 }}s;">
|
|
|
|
@if ($hasImage)
|
|
<div class="relative overflow-hidden">
|
|
<img src="{{ Storage::url($childCategory->image) }}" alt="{{ $childCategory->name }}"
|
|
class="w-full h-56 object-cover">
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
|
|
</div>
|
|
@endif
|
|
|
|
<div class="p-6 flex-1 flex flex-col">
|
|
<h3 class="text-xl font-bold text-color-base mb-4 group-hover:text-primary transition-colors duration-300 line-clamp-2">
|
|
{{ $childCategory->name }}
|
|
</h3>
|
|
|
|
@if(theme('show_category_description', true) && $childCategory->description)
|
|
<article class="prose dark:prose-invert text-color-muted text-sm mb-4 leading-relaxed">
|
|
{!! $childCategory->description !!}
|
|
</article>
|
|
@endif
|
|
|
|
<div class="flex w-full mt-auto">
|
|
<a href="{{ route('category.show', ['category' => $childCategory->slug]) }}" wire:navigate
|
|
class="group/btn flex w-full items-center justify-center gap-2 bg-primary hover:bg-primary/90 text-white px-4 py-3 rounded-2xl font-medium transition-all duration-300 hover:shadow-lg hover:scale-105">
|
|
{{ __('View Products') }}
|
|
<x-ri-arrow-right-fill class="size-4 transform transition-transform duration-300 group-hover/btn:translate-x-1" />
|
|
</a>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="absolute inset-0 bg-gradient-to-br from-primary/5 to-primary/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Products -->
|
|
<div>
|
|
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 gap-6">
|
|
@foreach ($products as $index => $product)
|
|
@php
|
|
// Check if product is available
|
|
$isAvailable = ($product->stock !== 0) && $product->price()->available;
|
|
@endphp
|
|
|
|
<div class="group relative flex flex-col bg-gradient-to-br from-background-secondary via-background-secondary/90 to-background-secondary/70 border border-neutral/50 rounded-3xl shadow-xl hover:shadow-2xl transform hover:-translate-y-3 transition-all duration-500 overflow-hidden animate-fade-in-up"
|
|
style="animation-delay: {{ $index * 0.1 }}s;">
|
|
|
|
|
|
|
|
@if(theme('small_images', false))
|
|
<div class="p-6 flex-1 flex flex-col">
|
|
<div class="flex items-start gap-4 mb-4">
|
|
@if ($product->image)
|
|
<div class="flex-shrink-0 relative">
|
|
<img src="{{ Storage::url($product->image) }}" alt="{{ $product->name }}"
|
|
class="w-20 h-20 object-cover">
|
|
@if (!$isAvailable)
|
|
<div class="flex-shrink-0 relative"></div>
|
|
@endif
|
|
</div>
|
|
@endif
|
|
<div class="flex-1">
|
|
<h3 class="text-xl font-bold text-color-base mb-2 group-hover:text-primary transition-colors duration-300 line-clamp-2">
|
|
{{ $product->name }}
|
|
</h3>
|
|
<p class="text-2xl font-bold {{ $isAvailable ? 'text-primary' : 'text-color-muted' }} mb-2">
|
|
{{ $product->price() }}
|
|
</p>
|
|
@if($product->stock !== null)
|
|
<div class="text-xs text-color-muted">
|
|
<!--{{ $product->stock }} in stock-->
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-auto pt-4">
|
|
@if ($isAvailable && theme('direct_checkout', false))
|
|
<a href="{{ route('products.checkout', ['category' => $category, 'product' => $product->slug]) }}" wire:navigate
|
|
class="group/btn w-full inline-flex items-center justify-center gap-2 bg-primary hover:bg-primary/90 text-white px-4 py-3 rounded-2xl font-medium transition-all duration-300 hover:shadow-lg hover:scale-105">
|
|
{{ __('product.add_to_cart') }}
|
|
<x-ri-shopping-cart-fill class="size-4 transform transition-transform duration-300 group-hover/btn:scale-110" />
|
|
</a>
|
|
@elseif ($isAvailable)
|
|
<a href="{{ route('products.show', ['category' => $product->category, 'product' => $product->slug]) }}" wire:navigate
|
|
class="group/btn w-full inline-flex items-center justify-center gap-2 bg-background-tertiary hover:bg-background-tertiary/80 border border-neutral/50 text-color-base px-4 py-3 rounded-2xl font-medium transition-all duration-300 hover:shadow-lg">
|
|
{{ __('general.view') }}
|
|
<x-ri-arrow-right-fill class="size-4 transform transition-transform duration-300 group-hover/btn:translate-x-1" />
|
|
</a>
|
|
@else
|
|
<button disabled
|
|
class="w-full inline-flex items-center justify-center gap-2 bg-red-100 dark:bg-red-900/30 border border-red-500 text-red-600 dark:text-red-400 px-4 py-3 rounded-2xl font-medium cursor-not-allowed opacity-75">
|
|
{{ __('product.out_of_stock', ['product' => $product->name]) }}
|
|
<x-ri-close-circle-fill class="size-4" />
|
|
</button>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
@else
|
|
@if ($product->image)
|
|
<div class="relative overflow-hidden">
|
|
<img src="{{ Storage::url($product->image) }}" alt="{{ $product->name }}"
|
|
class="w-full h-56 object-cover {{ !$isAvailable ? 'filter grayscale opacity-60' : '' }}">
|
|
@if (!$isAvailable)
|
|
<div class="relative overflow-hidden"></div>
|
|
@endif
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
|
|
</div>
|
|
@endif
|
|
|
|
<div class="p-6 flex-1 flex flex-col">
|
|
<h3 class="text-xl font-bold text-color-base mb-4 group-hover:text-primary transition-colors duration-300 line-clamp-2">
|
|
{{ $product->name }}
|
|
</h3>
|
|
|
|
@if(theme('direct_checkout', false) && $product->description)
|
|
<article class="prose dark:prose-invert text-color-muted text-sm mb-4 leading-relaxed">
|
|
{!! $product->description !!}
|
|
</article>
|
|
@endif
|
|
|
|
<div class="flex items-center justify-between mb-6 mt-auto">
|
|
<p class="text-2xl font-bold {{ $isAvailable ? 'text-primary' : 'text-color-muted' }}">
|
|
{{ $product->price() }}
|
|
</p>
|
|
@if($product->stock !== null)
|
|
<div class="text-xs text-color-muted font-medium">
|
|
{{ $product->stock }} in stock
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
@if ($isAvailable && theme('direct_checkout', false))
|
|
<a href="{{ route('products.checkout', ['category' => $category, 'product' => $product->slug]) }}" wire:navigate
|
|
class="group/btn w-full inline-flex items-center justify-center gap-2 bg-primary hover:bg-primary/90 text-white px-4 py-3 rounded-2xl font-medium transition-all duration-300 hover:shadow-lg hover:scale-105">
|
|
{{ __('product.add_to_cart') }}
|
|
<x-ri-shopping-cart-fill class="size-4 transform transition-transform duration-300 group-hover/btn:scale-110" />
|
|
</a>
|
|
@elseif ($isAvailable)
|
|
<a href="{{ route('products.show', ['category' => $product->category, 'product' => $product->slug]) }}" wire:navigate
|
|
class="group/btn w-full inline-flex items-center justify-center gap-2 bg-background-tertiary hover:bg-background-tertiary/80 border border-neutral/50 text-color-base px-4 py-3 rounded-2xl font-medium transition-all duration-300 hover:shadow-lg">
|
|
{{ __('general.view') }}
|
|
<x-ri-arrow-right-fill class="size-4 transform transition-transform duration-300 group-hover/btn:translate-x-1" />
|
|
</a>
|
|
@else
|
|
<button disabled
|
|
class="w-full inline-flex items-center justify-center gap-2 bg-red-100 dark:bg-red-900/30 border border-red-500 text-red-600 dark:text-red-400 px-4 py-3 rounded-2xl font-medium cursor-not-allowed opacity-75">
|
|
{{ __('product.out_of_stock', ['product' => $product->name]) }}
|
|
<x-ri-close-circle-fill class="size-4" />
|
|
</button>
|
|
@endif
|
|
</div>
|
|
@endif
|
|
|
|
<div class="absolute inset-0 bg-gradient-to-br {{ $isAvailable ? 'from-primary/5 to-primary/10' : 'from-red-500/5 to-red-500/10' }} opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|