From 42604a658ce5392dd7622624ea6a71608fc32843 Mon Sep 17 00:00:00 2001
From: Felipe <felipeduarteuts@gmail.com>
Date: Mon, 23 Oct 2023 11:55:43 -0500
Subject: [PATCH] notificaciones pulida

---
 app/Http/Livewire/Bell.php              | 28 +++++++++++++++--
 resources/views/livewire/bell.blade.php | 42 +++++++++++++++++--------
 2 files changed, 54 insertions(+), 16 deletions(-)

diff --git a/app/Http/Livewire/Bell.php b/app/Http/Livewire/Bell.php
index 3c54134..5137e30 100644
--- a/app/Http/Livewire/Bell.php
+++ b/app/Http/Livewire/Bell.php
@@ -2,15 +2,37 @@
 
 namespace App\Http\Livewire;
 
+use App\Models\Notificacion;
+use Illuminate\Support\Facades\Auth;
 use Livewire\Component;
 
 class Bell extends Component
 {
-    public $noti = 8;
-    public $notificaciones = false;
+    public $numNoti = 0;
+    public $menuNotificaciones = false;
 
     public function render()
     {
-        return view('livewire.bell');
+        $consulta = Notificacion::where('estado', true)
+            ->where(function ($query) {
+                $query->where('todos', true)
+                    ->orWhere('destinatario_id', Auth::user()->id);
+            })->orderBy('created_at', 'desc')
+            ->get();
+
+        $this->numNoti = count($consulta);
+
+        return view('livewire.bell', [
+            'consulta' => $consulta
+        ]);
+    }
+
+    public function deleteNotificacion($id)
+    {
+        $notificacion = Notificacion::find($id);
+
+        if ($notificacion) {
+            $notificacion->update(['estado' => false]);
+        }
     }
 }
diff --git a/resources/views/livewire/bell.blade.php b/resources/views/livewire/bell.blade.php
index 0febcf5..682273e 100644
--- a/resources/views/livewire/bell.blade.php
+++ b/resources/views/livewire/bell.blade.php
@@ -1,20 +1,36 @@
-<div class="flex justify-center items-center" x-data="{ notificaciones: @entangle('notificaciones') }">
+<div class="flex justify-center items-center" x-data="{ menuNotificaciones: @entangle('menuNotificaciones') }">
     <div class="fill-[{{ App\Models\Configuracione::Orderby('id', 'desc')->first()->color_boton }}] relative cursor-pointer"
-        @click="notificaciones=!notificaciones">
-        <span
-            class="absolute top-0 left-0 bg-red-500 rounded-full w-5 h-5 flex justify-center items-center text-xs text-white">
-            {{ $noti > 9 ? '9+' : $noti }}
-        </span>
+        wire:click="$refresh" @click="menuNotificaciones=!menuNotificaciones">
+        @if ($numNoti != 0)
+            <span class="absolute top-0 left-0 bg-red-500 rounded-full w-5 h-5 flex justify-center items-center text-xs text-white">
+                {{ $numNoti > 9 ? '9+' : $numNoti }}
+            </span>
+        @endif
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" class="w-10">
-            <path
-                d="M200-200q-17 0-28.5-11.5T160-240q0-17 11.5-28.5T200-280h40v-280q0-83 50-147.5T420-792v-28q0-25 17.5-42.5T480-880q25 0 42.5 17.5T540-820v28q80 20 130 84.5T720-560v280h40q17 0 28.5 11.5T800-240q0 17-11.5 28.5T760-200H200Zm280-300Zm0 420q-33 0-56.5-23.5T400-160h160q0 33-23.5 56.5T480-80ZM320-280h320v-280q0-66-47-113t-113-47q-66 0-113 47t-47 113v280Z" />
+            <path d="M200-200q-17 0-28.5-11.5T160-240q0-17 11.5-28.5T200-280h40v-280q0-83 50-147.5T420-792v-28q0-25 17.5-42.5T480-880q25 0 42.5 17.5T540-820v28q80 20 130 84.5T720-560v280h40q17 0 28.5 11.5T800-240q0 17-11.5 28.5T760-200H200Zm280-300Zm0 420q-33 0-56.5-23.5T400-160h160q0 33-23.5 56.5T480-80ZM320-280h320v-280q0-66-47-113t-113-47q-66 0-113 47t-47 113v280Z" />
         </svg>
     </div>
 
-    <div x-cloak x-show="notificaciones" @click.outside="notificaciones = false" class="absolute top-14 right-32 rounded-lg border border-[{{ App\Models\Configuracione::Orderby('id', 'desc')->first()->color_boton }}]  bg-white w-96 h-96 z-50">
-        <div>
-            hola hola
-            hola
-        </div>
+    <div x-cloak x-show="menuNotificaciones" @click.outside="menuNotificaciones = false" class="absolute top-14 right-32 rounded-lg border overflow-y-auto border-[{{ App\Models\Configuracione::Orderby('id', 'desc')->first()->color_boton }}] bg-white w-96 h-96 z-50">
+        <ul class="p-4">
+            @foreach ($consulta as $item)
+                <li class="px-2 py-1 mb-2 border border-gray-300 rounded-lg relative" wire:loading.class="opacity-50 cursor-wait">
+                    <h4 class="font-bold text-base text-[{{ App\Models\Configuracione::Orderby('id', 'desc')->first()->color_boton }}]">
+                        {{ $item->titulo }}
+                    </h4>
+                    <p class="text-sm">
+                        {{ $item->descripcion }}
+                    </p>
+                    @if (!$item->todos)
+                        <span class="text-red-500 font-semibold absolute top-0 right-2 cursor-pointer select-none" wire:click="deleteNotificacion({{ $item->id }})" wire:loading.remove>
+                            x
+                        </span>
+                        <span class="text-gray-400 font-semibold absolute top-0 right-2 cursor-wait select-none" wire:loading>
+                            x
+                        </span>
+                    @endif
+                </li>
+            @endforeach
+        </ul>
     </div>
 </div>