From bde877d07f8ce5fda50f02b98f052cc7f3150123 Mon Sep 17 00:00:00 2001
From: Juan Felipe Duarte <70235683+DuarteJFelipe@users.noreply.github.com>
Date: Thu, 16 Oct 2025 15:35:09 -0500
Subject: [PATCH] Improve category selection UI in promociones view

Refactored the category selection in show-promociones.blade.php to display the selected category's image and name above the swiper. Updated the swiper to set the selected category and synchronize with Livewire. Wrapped the logout button in navigation.blade.php with additional padding for better spacing.
---
 resources/views/layouts/navigation.blade.php  | 20 ++---
 .../views/livewire/show-promociones.blade.php | 73 ++++++++++---------
 2 files changed, 49 insertions(+), 44 deletions(-)

diff --git a/resources/views/layouts/navigation.blade.php b/resources/views/layouts/navigation.blade.php
index a4eb903..dcd5883 100755
--- a/resources/views/layouts/navigation.blade.php
+++ b/resources/views/layouts/navigation.blade.php
@@ -218,15 +218,17 @@
                 @endif
 
                 <!-- Logout -->
-                <form method="POST" action="{{ route('logout') }}">
-                    @csrf
-                    <button type="submit" class="w-full text-left py-2 px-3 rounded flex items-center justify-start gap-2 bg-red-600 text-white hover:bg-red-700">
-                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6">
-                            <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 9V5.25A2.25 2.25 0 0 1 10.5 3h6a2.25 2.25 0 0 1 2.25 2.25v13.5A2.25 2.25 0 0 1 16.5 21h-6a2.25 2.25 0 0 1-2.25-2.25V15m-3 0-3-3m0 0 3-3m-3 3H15" />
-                        </svg>
-                        <span>Cerrar sesión</span>
-                    </button>
-                </form>
+                <div class="pt-6">
+                    <form method="POST" action="{{ route('logout') }}">
+                        @csrf
+                        <button type="submit" class="w-full text-left py-2 px-3 rounded flex items-center justify-start gap-2 bg-red-600 text-white hover:bg-red-700">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 9V5.25A2.25 2.25 0 0 1 10.5 3h6a2.25 2.25 0 0 1 2.25 2.25v13.5A2.25 2.25 0 0 1 16.5 21h-6a2.25 2.25 0 0 1-2.25-2.25V15m-3 0-3-3m0 0 3-3m-3 3H15" />
+                            </svg>
+                            <span>Cerrar sesión</span>
+                        </button>
+                    </form>
+                </div>
             </nav>
         </div>
     </div>
diff --git a/resources/views/livewire/show-promociones.blade.php b/resources/views/livewire/show-promociones.blade.php
index 08f4d95..64e239c 100755
--- a/resources/views/livewire/show-promociones.blade.php
+++ b/resources/views/livewire/show-promociones.blade.php
@@ -41,42 +41,49 @@
                     </a>
                 @endif
             </div>
-            {{-- <div class=" gap-2 hidden sm:flex">
-                <select name="categoria_id" id="categoria_id" wire:model.debounce.500ms="categoria_id"
-                    class="w-[8rem] border-2 border-neutral-200 rounded-[0.8rem] shadow apperance-none ring-0 focus:ring-0 focus:border-neutral-300 py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
-                    <option value="" selected>Categoria</option>
-                    @foreach ($categorias as $categoria)
-                        <option value="{{ $categoria->id }}">{{ $categoria->nombre ?? '' }}</option>
-                    @endforeach
-                </select>
-                <div>
-                    @if (auth()->user()->rol->nombre == 'super' || auth()->user()->rol->nombre == 'administrador')
-                        <button x-on:click="newCategoria=true" x-transition.duration.300ms
-                            class="w-10 h-10 float-right bg-[#B221FD] hover:bg-[#7a02b8] rounded-full active:shadow-lg mouse shadow  ease-in focus:outline-none">
-                            <svg viewBox="0 0 20 20" enable-background="new 0 0 20 20" class="w-6 h-6 inline-block">
-                                <path fill="#FFFFFF"
-                                    d="M16,10c0,0.553-0.048,1-0.601,1H11v4.399C11,15.951,10.553,16,10,16c-0.553,0-1-0.049-1-0.601V11H4.601
-                                    C4.049,11,4,10.553,4,10c0-0.553,0.049-1,0.601-1H9V4.601C9,4.048,9.447,4,10,4c0.553,0,1,0.048,1,0.601V9h4.399
-                                    C15.952,9,16,9.447,16,10z" />
-                            </svg>
-                        </button>
-                    @endif
-
-                </div>
-            </div> --}}
         </div>
 
-        <div class="swiper-container overflow-hidden py-4 px-3" wire:ignore>
-            <div class="swiper-wrapper">
-                @foreach ($categorias as $i => $categoria1)
-                    <div wire:key="banner-{{ $categoria1->id }}" class="swiper-slide cursor-pointer transition hover:scale-105 rounded-lg overflow-hidden shadow bg-white" x-on:click="categorian='{{ $categoria1->nombre }}'">
-                        <img src="{{ asset($categoria1->imagen) }}" class="w-full h-12 md:h-32 object-cover object-center text-xs" alt="imagen de {{ $categoria1->nombre }}">
-                    </div>
-                @endforeach
+        <div
+            x-data="{
+                seleccionada: {
+                    nombre: '{{ $categorias->first()->nombre }}',
+                    imagen: '{{ asset($categorias->first()->imagen) }}'
+                }
+            }"
+            class="w-full"
+        >
+            <div x-show="seleccionada"
+                x-transition
+                class="mb-6 bg-white shadow rounded-2xl overflow-hidden transform transition-all duration-300 max-w-4xl m-auto">
+                <img :src="seleccionada.imagen"
+                    class="w-full h-24 sm:h-36 md:h-56 object-cover object-center"
+                    alt="imagen de categoría seleccionada">
+                <div class="p-4 text-center">
+                    <h2 class="text-xl font-semibold text-gray-800" x-text="seleccionada.nombre"></h2>
+                </div>
+            </div>
+
+            <div class="swiper-container overflow-hidden py-4 px-3" wire:ignore>
+                <div class="swiper-wrapper">
+                    @foreach ($categorias as $categoria1)
+                        <div wire:key="banner-{{ $categoria1->id }}" class="swiper-slide cursor-pointer transition hover:scale-105 rounded-lg overflow-hidden shadow bg-white"
+                            x-on:click="
+                                seleccionada = {
+                                    nombre: '{{ $categoria1->nombre }}',
+                                    imagen: '{{ asset($categoria1->imagen) }}'
+                                };
+                                $wire.set('categorian', '{{ $categoria1->nombre }}')
+                            "
+                        >
+                            <img src="{{ asset($categoria1->imagen) }}"
+                                class="w-full h-12 md:h-32 object-cover object-center"
+                                alt="imagen de {{ $categoria1->nombre }}">
+                        </div>
+                    @endforeach
+                </div>
             </div>
         </div>
 
-
         <div class="flex items-center justify-center mt-2 mb-4">
             <button x-on:click="verPro=true" class="max-w-md rounded-lg text-sm md:text-base px-4 py-2 text-white bg-[#B221FD] hover:bg-[#7a02b8] focus:shadow-outline-green sm-text-sm sm-leading-5">
                 Ver todas las promociones
@@ -1133,10 +1140,6 @@
                 </div>
             </div>
         </div>
-
-
-
-
     </div>
 
     <script>