Bryam105
194 lines
11 KiB
PHP
194 lines
11 KiB
PHP
<x-layout title="Catalogo - Lauck">
|
|
|
|
@push('styles')
|
|
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
|
|
<style>
|
|
/* Adaptación de Select2 para Dark Mode y tema Lime */
|
|
html.dark .select2-container--default .select2-selection--single {
|
|
background-color: #171717; /* bg-neutral-900 */
|
|
border: 1px solid #262626; /* border-neutral-800 */
|
|
height: 42px;
|
|
display: flex;
|
|
align-items: center;
|
|
border-radius: 0.5rem;
|
|
}
|
|
html.dark .select2-container--default .select2-selection--single .select2-selection__rendered {
|
|
color: #d4d4d4; /* text-gray-300 */
|
|
}
|
|
html.dark .select2-dropdown {
|
|
background-color: #171717;
|
|
border: 1px solid #262626;
|
|
color: #d4d4d4;
|
|
}
|
|
html.dark .select2-search__field {
|
|
background-color: #262626;
|
|
color: #fff;
|
|
border: 1px solid #404040;
|
|
}
|
|
html.dark .select2-container--default .select2-results__option--highlighted[aria-selected] {
|
|
background-color: #84cc16; /* bg-lime-500 */
|
|
color: #000;
|
|
}
|
|
html.dark .select2-results__option[aria-selected=true] {
|
|
background-color: #262626;
|
|
}
|
|
</style>
|
|
@endpush
|
|
|
|
<x-section-header subtitle="Inicio" title="Catálogo de " highlight="Productos"/>
|
|
|
|
<div class="w-full max-w-5xl mx-auto px-4">
|
|
|
|
<!-- BLOQUE 1: Búsqueda rápida con Select2 (Te lleva directo al producto) -->
|
|
<div class="mb-4 bg-stone-200/30 dark:bg-neutral-950/30 p-5 rounded-xl border border-neutral-200 dark:border-neutral-800">
|
|
<label for="buscador-catalogo" class="block text-sm font-semibold text-gray-800 dark:text-gray-300 mb-2">
|
|
Salto rápido a producto específico
|
|
</label>
|
|
<select id="buscador-catalogo" class="w-full">
|
|
<option value="">Escribe para buscar un producto...</option>
|
|
@foreach ($allProducts as $p)
|
|
<option value="{{ route('catalogo.show', $p->id) }}">
|
|
{{ $p->name }} - ${{ number_format($p->price, 2, ',', '.') }}
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
|
|
<!-- BLOQUE 2: Filtros de la Grilla -->
|
|
<form action="{{ route('catalogo.index') }}" method="GET" class="mb-8 flex flex-col md:flex-row gap-3 bg-stone-200/30 dark:bg-neutral-950/30 p-4 rounded-xl border border-neutral-200 dark:border-neutral-800">
|
|
|
|
<div class="relative w-full md:w-1/2">
|
|
<input type="text" name="search" value="{{ request('search') }}"
|
|
class="block w-full p-3 text-sm text-black dark:text-white border border-neutral-400 dark:border-neutral-700 rounded-lg bg-white dark:bg-neutral-900 placeholder-gray-600 dark:placeholder-gray-500 focus:ring-neon-lime focus:border-neon-lime"
|
|
placeholder="Buscar en el catálogo...">
|
|
</div>
|
|
|
|
<div class="w-full md:w-1/3">
|
|
<select name="type" onchange="this.form.submit()"
|
|
class="block w-full p-3 text-sm text-black dark:text-white border border-neutral-400 dark:border-neutral-700 rounded-lg bg-white dark:bg-neutral-900 focus:ring-neon-lime focus:border-neon-lime cursor-pointer">
|
|
<option value="">Todas las Categorías</option>
|
|
<option value="bike" {{ request('type') == 'bike' ? 'selected' : '' }}>Bicicletas</option>
|
|
<option value="clothing" {{ request('type') == 'clothing' ? 'selected' : '' }}>Indumentaria</option>
|
|
<option value="accessory" {{ request('type') == 'accessory' ? 'selected' : '' }}>Accesorios</option>
|
|
<option value="spare" {{ request('type') == 'spare' ? 'selected' : '' }}>Repuestos</option>
|
|
<option value="children" {{ request('type') == 'children' ? 'selected' : '' }}>Infantil</option>
|
|
<option value="rollers" {{ request('type') == 'rollers' ? 'selected' : '' }}>Rollers</option>
|
|
<option value="skate" {{ request('type') == 'skate' ? 'selected' : '' }}>Skate</option>
|
|
<option value="other" {{ request('type') == 'other' ? 'selected' : '' }}>Otros</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="flex-none gap-2">
|
|
<button type="submit" class="w-full md:w-auto text-center px-10 py-3 text-sm font-bold text-neon-lime dark:text-neutral-900 bg-neutral-950 dark:bg-neon-lime rounded-lg hover:bg-neutral-900/80 hover:dark:bg-[#b3e600] transition-colors uppercase tracking-wide">
|
|
Filtrar
|
|
</button>
|
|
@if(request('search') || request('type') || request('tag'))
|
|
<a href="{{ route('catalogo.index') }}" title="Limpiar Filtros" class="flex items-center justify-center p-3 text-sm font-bold text-red-600 bg-red-100 dark:bg-red-900/30 rounded-lg hover:bg-red-200 transition-colors">
|
|
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6"/>
|
|
</svg>
|
|
</a>
|
|
@endif
|
|
</div>
|
|
|
|
<input type="hidden" name="tag" value="{{ request('tag') }}">
|
|
</form>
|
|
|
|
<!-- Filtro de Etiquetas -->
|
|
@if($allTags->count() > 0)
|
|
<div class="mb-8 flex flex-wrap gap-2">
|
|
@foreach($allTags as $t)
|
|
<a href="{{ route('catalogo.index', array_merge(request()->query(), ['tag' => $t->name])) }}"
|
|
class="px-3 py-1.5 text-xs font-bold uppercase rounded-full border transition-colors
|
|
{{ request('tag') == $t->name
|
|
? 'bg-neon-lime border-neon-lime text-black dark:text-black'
|
|
: 'bg-transparent border-neutral-400 dark:border-neutral-600 text-gray-700 dark:text-gray-300 hover:border-neon-lime hover:text-neon-lime dark:hover:border-neon-lime dark:hover:text-neon-lime' }}">
|
|
#{{ $t->name }}
|
|
</a>
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
|
|
<!-- GRILLA DE PRODUCTOS -->
|
|
<!-- GRILLA DE PRODUCTOS -->
|
|
@if ($products->count() > 0)
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
@foreach ($products as $product)
|
|
<!-- ACÁ ESTÁ EL PRIMER CAMBIO: Agregamos "flex flex-col h-full" -->
|
|
<div class="group flex flex-col h-full p-4 border bg-stone-200/30 dark:bg-neutral-950/30 border-neutral-200 dark:border-neutral-800 rounded-xl hover:border-lime-500 hover:dark:border-neon-lime hover:-translate-y-1 transition-all duration-300">
|
|
|
|
{{-- Imagen si existe --}}
|
|
@if (!empty($product->image_path))
|
|
<img src="{{ asset('storage/' . $product->image_path) }}" alt="{{ $product->name }}"
|
|
class="w-full h-40 object-cover rounded mb-4">
|
|
@else
|
|
<div class="w-full border border-neutral-200 dark:border-neutral-800 h-40 bg-stone-200 dark:bg-stone-900 flex items-center justify-center rounded mb-4">
|
|
<span class="text-lime-800 dark:text-neon-lime text-md uppercase font-bold">Sin imagen</span>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- ACÁ ESTÁ EL SEGUNDO CAMBIO: Agregamos "flex-1" al título -->
|
|
<h2 class="text-lg font-semibold text-black dark:text-white flex-1">{{ $product->name }}</h2>
|
|
|
|
{{-- Etiquetas --}}
|
|
@if($product->tags->count() > 0)
|
|
<div class="flex flex-wrap gap-1 mt-2">
|
|
@foreach($product->tags as $t)
|
|
<span class="text-[10px] font-bold uppercase tracking-wider px-2 py-0.5 rounded-full border border-neon-lime text-neon-lime bg-neon-lime/10">
|
|
#{{ $t->name }}
|
|
</span>
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
|
|
{{-- Precio --}}
|
|
@if (!empty($product->price))
|
|
<p class="text-neutral-900 dark:text-white group-hover:text-lime-700 group-hover:dark:text-neon-lime font-bold mt-3 transition-colors">${{ number_format($product->price, 2, ',', '.') }}</p>
|
|
@endif
|
|
|
|
{{-- Botón --}}
|
|
<a href="{{ route('catalogo.show', $product->id) }}"
|
|
class="font-bold uppercase mt-4 block w-full bg-neutral-900 dark:bg-neon-lime/80 text-neon-lime dark:text-black py-2 rounded-lg text-center shadow-md shadow-gray-900/10 dark:shadow-neon-lime/10 hover:bg-neon-lime hover:dark:bg-neutral-900/70 border border-transparent hover:text-black hover:dark:text-neon-lime hover:border-black hover:dark:border-neon-lime transition-all">
|
|
Ver Detalle
|
|
</a>
|
|
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
@else
|
|
<p class="text-center text-gray-600 dark:text-gray-400 mt-10 font-medium">No se encontraron productos con esos filtros.</p>
|
|
@endif
|
|
|
|
<div class="mt-8">
|
|
{{ $products->links() }}
|
|
</div>
|
|
</div>
|
|
|
|
@push('scripts')
|
|
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
|
|
|
|
<script>
|
|
$(document).ready(function() {
|
|
// 1. Inicializamos Select2
|
|
$('#buscador-catalogo').select2({
|
|
placeholder: "🔍 Ej: Bici R12 o Guantes...",
|
|
allowClear: true,
|
|
width: '100%'
|
|
});
|
|
|
|
// 2. Evento: Cuando el usuario hace clic en una opción de la lista Select2
|
|
$('#buscador-catalogo').on('select2:select', function (e) {
|
|
let urlDestino = $(this).val();
|
|
|
|
if (urlDestino) {
|
|
// Redirigimos a la página del detalle del producto
|
|
window.location.href = urlDestino;
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
@endpush
|
|
|
|
</x-layout>
|