g
This commit is contained in:
gianella
@@ -1,17 +1,66 @@
|
||||
<x-layout title="Catalogo - Lauck">
|
||||
|
||||
<!-- Header -->
|
||||
@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="Catalogo de " highlight="Productos"/>
|
||||
|
||||
<div class="w-full max-w-5xl">
|
||||
<div class="w-full max-w-5xl mx-auto px-4">
|
||||
|
||||
<div class="mb-8 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">
|
||||
Búsqueda rápida por similitud
|
||||
</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->description }} - ${{ number_format($p->price, 2, ',', '.') }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
|
||||
@if ($products->count() > 0)
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
@foreach ($products as $product)
|
||||
<div class="group 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 }}"
|
||||
<img src="{{ asset('storage/' . $product->image_path) }}" alt="{{ $product->description }}"
|
||||
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">
|
||||
@@ -19,23 +68,15 @@
|
||||
</div>
|
||||
@endif
|
||||
|
||||
{{-- Nombre --}}
|
||||
<h2 class="text-lg font-semibold text-black dark:text-white">{{ $product->name }}</h2>
|
||||
|
||||
{{-- Descripción corta --}}
|
||||
<div class="h-10 overflow-y-auto [scrollbar-width:none]">
|
||||
@if (!empty($product->description))
|
||||
<p class="text-sm text-gray-700 dark:text-gray-400 mt-2">{{ $product->description }}</p>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
{{-- 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) }}"
|
||||
<a href="{{ route('catalogo.show', $product->id) }}"
|
||||
class="mt-4 block w-full bg-neutral-900 dark:bg-neon-lime/80 uppercase text-neon-lime dark:text-black font-semibold 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 +
|
||||
</a>
|
||||
@@ -47,8 +88,35 @@
|
||||
<p class="text-center text-gray-400 dark:text-gray-600 mt-10">No hay productos disponibles.</p>
|
||||
@endif
|
||||
|
||||
<div class="mt-3">
|
||||
<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
|
||||
$('#buscador-catalogo').on('select2:select', function (e) {
|
||||
let urlDestino = $(this).val();
|
||||
|
||||
if (urlDestino) {
|
||||
// Redirigimos a la página del producto
|
||||
window.location.href = urlDestino;
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
|
||||
</x-layout>
|
||||
|
||||
Reference in New Issue
Block a user