Add reservation cancel button to facility show page

Users can now cancel reservations directly from the reservations tab
inside the facility show page via a cancel button with confirmation.
Previously reservations were display-only with no way to modify them.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

app/Livewire/Facilities/FacilityShow.php

@@ -32,6 +32,23 @@ public function mount(Facility $facility): void
         ]);
     }
 
+    public function cancelReservation(int $id): void
+    {
+        $this->authorize('facilities.update');
+
+        $reservation = SpaceReservation::where('facility_id', $this->facility->id)
+            ->where('id', $id)
+            ->firstOrFail();
+
+        $reservation->update([
+            'status' => ReservationStatus::Cancelled,
+            'cancelled_by' => auth()->id(),
+            'cancelled_at' => now(),
+        ]);
+
+        session()->flash('success', __('تم إلغاء الحجز بنجاح'));
+    }
+
     public function render()
     {
         $today = Carbon::today();

resources/views/livewire/facilities/facility-show.blade.php

@@ -492,7 +492,10 @@ class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white rounded-lg ho
                                 <th class="text-start px-4 py-3 text-xs font-medium text-gray-500 uppercase bg-gray-50">{{ __('الوقت') }}</th>
                                 <th class="text-start px-4 py-3 text-xs font-medium text-gray-500 uppercase bg-gray-50">{{ __('العنوان') }}</th>
                                 <th class="text-start px-4 py-3 text-xs font-medium text-gray-500 uppercase bg-gray-50">{{ __('الأجزاء المحجوزة') }}</th>
-                                <th class="text-start px-4 py-3 text-xs font-medium text-gray-500 uppercase bg-gray-50 rounded-se-lg">{{ __('الحالة') }}</th>
+                                <th class="text-start px-4 py-3 text-xs font-medium text-gray-500 uppercase bg-gray-50">{{ __('الحالة') }}</th>
+                                @can('facilities.update')
+                                <th class="text-start px-4 py-3 text-xs font-medium text-gray-500 uppercase bg-gray-50 rounded-se-lg">{{ __('إجراءات') }}</th>
+                                @endcan
                             </tr>
                         </thead>
                         <tbody class="divide-y divide-gray-100">
@@ -532,6 +535,18 @@ class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white rounded-lg ho
                                         {{ $reservation->status->label() }}
                                     </span>
                                 </td>
+                                @can('facilities.update')
+                                <td class="px-4 py-3">
+                                    @if($resStatusValue !== 'cancelled')
+                                    <button wire:click="cancelReservation({{ $reservation->id }})"
+                                            wire:confirm="{{ __('هل أنت متأكد من إلغاء هذا الحجز؟') }}"
+                                            wire:loading.attr="disabled"
+                                            class="text-red-600 hover:text-red-800 text-xs font-medium">
+                                        {{ __('إلغاء') }}
+                                    </button>
+                                    @endif
+                                </td>
+                                @endcan
                             </tr>
                             @endforeach
                         </tbody>