notificaciones pulida

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 $numNoti = 0;
-    public $notificaciones = false;
+    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]);
+        }
     }
 }

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">
+        wire:click="$refresh" @click="menuNotificaciones=!menuNotificaciones">
-        <span
+        @if ($numNoti != 0)
-            class="absolute top-0 left-0 bg-red-500 rounded-full w-5 h-5 flex justify-center items-center text-xs text-white">
+            <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 }}
+                {{ $numNoti > 9 ? '9+' : $numNoti }}
-        </span>
+            </span>
+        @endif
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" class="w-10">
-            <path
+            <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" />
-                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 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">
-        <div>
+        <ul class="p-4">
-            hola hola
+            @foreach ($consulta as $item)
-            hola
+                <li class="px-2 py-1 mb-2 border border-gray-300 rounded-lg relative" wire:loading.class="opacity-50 cursor-wait">
-        </div>
+                    <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>