Fix row/col/all select buttons: use live $wire.gridSegments not stale @json

The @script block renders @json($gridSegments) once at page load (empty array).
When a time slot is selected and gridSegments populates, the JS still references
the stale empty array. Switch to this.$wire.gridSegments for live data access.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

resources/views/livewire/facilities/visual-schedule-builder.blade.php

@@ -613,9 +613,14 @@ class="text-[10px] text-red-500 hover:text-red-700 hover:underline">{{ __('ال
         }
     },
 
+    getSegments() {
+        return this.$wire.gridSegments || [];
+    },
+
     selectRowByIndex(rowIndex) {
-        const segments = @json($gridSegments);
+        const segments = this.getSegments();
         const rowSegs = segments.filter(s => s.row === rowIndex && s.available).map(s => s.id);
+        if (rowSegs.length === 0) return;
         const allSelected = rowSegs.every(id => this.selectedSegments.includes(id));
         if (allSelected) {
             this.selectedSegments = this.selectedSegments.filter(id => !rowSegs.includes(id));
@@ -625,8 +630,9 @@ class="text-[10px] text-red-500 hover:text-red-700 hover:underline">{{ __('ال
     },
 
     selectColByIndex(colIndex) {
-        const segments = @json($gridSegments);
+        const segments = this.getSegments();
         const colSegs = segments.filter(s => s.col === colIndex && s.available).map(s => s.id);
+        if (colSegs.length === 0) return;
         const allSelected = colSegs.every(id => this.selectedSegments.includes(id));
         if (allSelected) {
             this.selectedSegments = this.selectedSegments.filter(id => !colSegs.includes(id));
@@ -636,8 +642,9 @@ class="text-[10px] text-red-500 hover:text-red-700 hover:underline">{{ __('ال
     },
 
     selectAll() {
-        const segments = @json($gridSegments);
+        const segments = this.getSegments();
         const allAvailable = segments.filter(s => s.available).map(s => s.id);
+        if (allAvailable.length === 0) return;
         const allSelected = allAvailable.every(id => this.selectedSegments.includes(id));
         if (allSelected) {
             this.selectedSegments = [];
@@ -648,7 +655,7 @@ class="text-[10px] text-red-500 hover:text-red-700 hover:underline">{{ __('ال
 
     selectRow() {
         if (this.selectedSegments.length === 0) return;
-        const segments = @json($gridSegments);
+        const segments = this.getSegments();
         const firstSelected = segments.find(s => s.id === this.selectedSegments[0]);
         if (!firstSelected) return;
         this.selectRowByIndex(firstSelected.row);
@@ -656,7 +663,7 @@ class="text-[10px] text-red-500 hover:text-red-700 hover:underline">{{ __('ال
 
     selectCol() {
         if (this.selectedSegments.length === 0) return;
-        const segments = @json($gridSegments);
+        const segments = this.getSegments();
         const firstSelected = segments.find(s => s.id === this.selectedSegments[0]);
         if (!firstSelected) return;
         this.selectColByIndex(firstSelected.col);