feat: Add database backup files and update control form dialog

app/Views/master/control/dialog_control_form.php

@@ -34,19 +34,33 @@
                     </template>
                 </div>
             </template>
-            <div class="form-control">
+            <div class="form-control relative" x-data="{ showAutocomplete: false, filteredNames: [], highlightIndex: -1 }" @click.outside="showAutocomplete = false">
                 <label class="label py-1">
                     <span class="label-text-alt font-semibold text-base-content/70">Control Name</span>
                 </label>
                 <input type="text"
                     class="input input-bordered input-sm w-full focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary bg-base-200 border-base-300 text-base-content placeholder:opacity-50"
-                    :class="{'border-error': errors.controlName}" x-model="form.controlName" list="control-names-list"
+                    :class="{'border-error': errors.controlName}" 
+                    x-model="form.controlName" 
+                    @input="filteredNames = uniqueControlNames.filter(n => n.toLowerCase().includes(form.controlName.toLowerCase())).slice(0, 10); showAutocomplete = filteredNames.length > 0 && form.controlName.length > 0; highlightIndex = -1"
+                    @focus="filteredNames = uniqueControlNames.filter(n => n.toLowerCase().includes(form.controlName.toLowerCase())).slice(0, 10); showAutocomplete = filteredNames.length > 0 && form.controlName.length > 0"
+                    @keydown.down.prevent="highlightIndex = Math.min(highlightIndex + 1, filteredNames.length - 1)"
+                    @keydown.up.prevent="highlightIndex = Math.max(highlightIndex - 1, -1)"
+                    @keydown.enter.prevent="if (highlightIndex >= 0) { form.controlName = filteredNames[highlightIndex]; showAutocomplete = false; }"
+                    @keydown.escape="showAutocomplete = false"
                     placeholder="Enter control name" />
-                <datalist id="control-names-list">
+                <div x-show="showAutocomplete" 
-                    <template x-for="name in uniqueControlNames" :key="name">
+                     x-transition:enter="transition ease-out duration-100"
-                        <option :value="name" x-text="name"></option>
+                     x-transition:enter-start="opacity-0 scale-95"
+                     x-transition:enter-end="opacity-100 scale-100"
+                     class="absolute top-full left-0 right-0 mt-1 bg-base-100 border border-base-300 rounded-lg shadow-lg z-50 max-h-48 overflow-y-auto">
+                    <template x-for="(name, index) in filteredNames" :key="name">
+                        <div @click="form.controlName = name; showAutocomplete = false"
+                             :class="{'bg-primary text-primary-content': index === highlightIndex, 'hover:bg-base-200': index !== highlightIndex}"
+                             class="px-3 py-2 cursor-pointer text-sm"
+                             x-text="name"></div>
                     </template>
-                </datalist>
+                </div>
                 <template x-if="errors.controlName">
                     <label class="label">
                         <span class="label-text-alt text-error" x-text="errors.controlName"></span>
@@ -74,18 +88,32 @@
                 </div>
             </div>
 
-            <div class="form-control">
+            <div class="form-control relative" x-data="{ showProdAutocomplete: false, filteredProducers: [], prodHighlightIndex: -1 }" @click.outside="showProdAutocomplete = false">
                 <label class="label py-1">
                     <span class="label-text-alt font-semibold text-base-content/70">Producer</span>
                 </label>
                 <input type="text"
                     class="input input-bordered input-sm w-full focus:outline-none focus:ring-1 focus:ring-primary/40 focus:border-primary bg-base-200 border-base-300 text-base-content placeholder:opacity-50"
-                    x-model="form.producer" list="producers-list" placeholder="Enter producer name" />
+                    x-model="form.producer" 
-                <datalist id="producers-list">
+                    @input="filteredProducers = uniqueProducers.filter(p => p && p.toLowerCase().includes(form.producer.toLowerCase())).slice(0, 10); showProdAutocomplete = filteredProducers.length > 0 && form.producer.length > 0; prodHighlightIndex = -1"
-                    <template x-for="producer in uniqueProducers" :key="producer">
+                    @focus="filteredProducers = uniqueProducers.filter(p => p && p.toLowerCase().includes(form.producer.toLowerCase())).slice(0, 10); showProdAutocomplete = filteredProducers.length > 0 && form.producer.length > 0"
-                        <option :value="producer" x-text="producer"></option>
+                    @keydown.down.prevent="prodHighlightIndex = Math.min(prodHighlightIndex + 1, filteredProducers.length - 1)"
+                    @keydown.up.prevent="prodHighlightIndex = Math.max(prodHighlightIndex - 1, -1)"
+                    @keydown.enter.prevent="if (prodHighlightIndex >= 0) { form.producer = filteredProducers[prodHighlightIndex]; showProdAutocomplete = false; }"
+                    @keydown.escape="showProdAutocomplete = false"
+                    placeholder="Enter producer name" />
+                <div x-show="showProdAutocomplete" 
+                     x-transition:enter="transition ease-out duration-100"
+                     x-transition:enter-start="opacity-0 scale-95"
+                     x-transition:enter-end="opacity-100 scale-100"
+                     class="absolute top-full left-0 right-0 mt-1 bg-base-100 border border-base-300 rounded-lg shadow-lg z-50 max-h-48 overflow-y-auto">
+                    <template x-for="(producer, index) in filteredProducers" :key="producer">
+                        <div @click="form.producer = producer; showProdAutocomplete = false"
+                             :class="{'bg-primary text-primary-content': index === prodHighlightIndex, 'hover:bg-base-200': index !== prodHighlightIndex}"
+                             class="px-3 py-2 cursor-pointer text-sm"
+                             x-text="producer"></div>
                     </template>
-                </datalist>
+                </div>
             </div>
         </div>