Label multi-branch department picks and add searchable patients.

Make appointment/practitioner department (and practitioner) options show branch names so duplicates are distinguishable, and replace the patient select with a searchable dropdown.

Co-authored-by: Cursor <cursoragent@cursor.com>

resources/js/app.js

@@ -172,5 +172,48 @@ Alpine.data('dealForm', (initialLines = [], products = []) => ({
     },
 }));
 
+// Searchable select for long option lists (patients, etc.).
+Alpine.data('searchableSelect', (config = {}) => ({
+    options: Array.isArray(config.options) ? config.options : [],
+    selected: config.selected == null ? '' : String(config.selected),
+    placeholder: config.placeholder || 'Search…',
+    emptyLabel: config.emptyLabel || 'Select…',
+    query: '',
+    open: false,
+    toggle() {
+        this.open = !this.open;
+        if (this.open) {
+            this.$nextTick(() => this.$refs.query?.focus());
+        }
+    },
+    selectedLabel() {
+        if (! this.selected) {
+            return this.emptyLabel;
+        }
+        const match = this.options.find((o) => String(o.value) === String(this.selected));
+        return match?.label || this.emptyLabel;
+    },
+    get filtered() {
+        const q = this.query.trim().toLowerCase();
+        if (! q) {
+            return this.options;
+        }
+        return this.options.filter((o) => {
+            const hay = `${o.search || ''} ${o.label || ''}`.toLowerCase();
+            return hay.includes(q);
+        });
+    },
+    choose(value) {
+        this.selected = value == null ? '' : String(value);
+        this.open = false;
+        this.query = '';
+    },
+    selectFirst() {
+        if (this.filtered.length > 0) {
+            this.choose(this.filtered[0].value);
+        }
+    },
+}));
+
 window.Alpine = Alpine;
 Alpine.start();