complete story 5.3 with qa tests

resources/views/livewire/admin/posts/index.blade.php

@@ -17,6 +17,9 @@ new class extends Component
     public string $sortDir = 'desc';
     public int $perPage = 10;
 
+    public ?Post $postToDelete = null;
+    public bool $showDeleteModal = false;
+
     public function updatedSearch(): void
     {
         $this->resetPage();
@@ -85,8 +88,25 @@ new class extends Component
 
     public function delete(int $id): void
     {
-        DB::transaction(function () use ($id) {
-            $post = Post::lockForUpdate()->find($id);
+        $this->postToDelete = Post::find($id);
+
+        if (! $this->postToDelete) {
+            session()->flash('error', __('posts.post_not_found'));
+
+            return;
+        }
+
+        $this->showDeleteModal = true;
+    }
+
+    public function confirmDelete(): void
+    {
+        if (! $this->postToDelete) {
+            return;
+        }
+
+        DB::transaction(function () {
+            $post = Post::lockForUpdate()->find($this->postToDelete->id);
 
             if (! $post) {
                 session()->flash('error', __('posts.post_not_found'));
@@ -108,6 +128,15 @@ new class extends Component
 
             session()->flash('success', __('posts.post_deleted'));
         });
+
+        $this->showDeleteModal = false;
+        $this->postToDelete = null;
+    }
+
+    public function cancelDelete(): void
+    {
+        $this->showDeleteModal = false;
+        $this->postToDelete = null;
     }
 
     public function with(): array
@@ -268,7 +297,6 @@ new class extends Component
                         </flux:button>
                         <flux:button
                             wire:click="delete({{ $post->id }})"
-                            wire:confirm="{{ __('posts.confirm_delete') }}"
                             variant="danger"
                             size="sm"
                         >
@@ -293,4 +321,30 @@ new class extends Component
     <div class="mt-6">
         {{ $posts->links() }}
     </div>
+
+    {{-- Delete Confirmation Modal --}}
+    <flux:modal wire:model="showDeleteModal">
+        <div class="space-y-4">
+            <flux:heading size="lg">{{ __('posts.delete_post') }}</flux:heading>
+
+            <flux:callout variant="danger">
+                {{ __('posts.delete_post_warning') }}
+            </flux:callout>
+
+            @if($postToDelete)
+                <p class="text-zinc-700 dark:text-zinc-300">
+                    {{ __('posts.deleting_post', ['title' => $postToDelete->getTitle()]) }}
+                </p>
+            @endif
+
+            <div class="flex gap-3 justify-end pt-4">
+                <flux:button wire:click="cancelDelete">
+                    {{ __('common.cancel') }}
+                </flux:button>
+                <flux:button variant="danger" wire:click="confirmDelete">
+                    {{ __('posts.delete_permanently') }}
+                </flux:button>
+            </div>
+        </div>
+    </flux:modal>
 </div>