tinyqc/app/Views/master/control/dialog_control_form.php

<dialog class="modal modal-bottom sm:modal-middle" :class="{ 'modal-open': showModal }">
    <div class="modal-box p-5 border border-base-300 shadow-2xl bg-base-100 max-w-sm">
        <h3 class="font-bold text-base mb-3 flex items-center gap-2 text-base-content">
            <i class="fa-solid fa-vial text-primary text-sm"></i>
            <span x-text="form.controlId ? 'Edit Control' : 'New Control'"></span>
        </h3>

        <div class="space-y-2">
            <template x-if="loadingDepartments">
                <div class="flex items-center justify-center py-2">
                    <span class="loading loading-spinner loading-sm text-primary"></span>
                    <span class="ml-2 text-xs opacity-50">Loading departments...</span>
                </div>
            </template>
            <template x-if="departments">
                <div class="form-control">
                    <label class="label py-1">
                        <span class="label-text-alt font-semibold text-base-content/70">Department</span>
                    </label>
                    <select
                        class="select select-bordered select-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"
                        :class="{'border-error': errors.deptId}"
                        x-model="form.deptId"
                        placeholder="Select department">
                        <option value="">Select Department</option>
                        <template x-for="dept in departments" :key="dept.deptId">
                            <option :value="dept.deptId" x-text="dept.deptName"></option>
                        </template>
                    </select>
                    <template x-if="errors.deptId">
                        <label class="label">
                            <span class="label-text-alt text-error" x-text="errors.deptId"></span>
                        </label>
                    </template>
                </div>
            </template>
            <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" 
                    @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" />
                <div x-show="showAutocomplete" 
                     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="(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>
                </div>
                <template x-if="errors.controlName">
                    <label class="label">
                        <span class="label-text-alt text-error" x-text="errors.controlName"></span>
                    </label>
                </template>
            </div>

            <div class="grid grid-cols-2 gap-3">
                <div class="form-control">
                    <label class="label py-1">
                        <span class="label-text-alt font-semibold text-base-content/70">Lot Number</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.lot" placeholder="e.g., LOT12345" />
                </div>

                <div class="form-control">
                    <label class="label py-1">
                        <span class="label-text-alt font-semibold text-base-content/70">Expiry Date</span>
                    </label>
                    <input type="date"
                        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"
                        x-model="form.expDate" />
                </div>
            </div>

            <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"
                    @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"
                    @focus="filteredProducers = uniqueProducers.filter(p => p && p.toLowerCase().includes(form.producer.toLowerCase())).slice(0, 10); showProdAutocomplete = filteredProducers.length > 0 && form.producer.length > 0"
                    @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>
                </div>
            </div>

            <div class="form-control">
                <label class="label cursor-pointer justify-start gap-3 py-1">
                    <input type="checkbox"
                        class="checkbox checkbox-sm checkbox-primary"
                        x-model="form.isActive"
                        :checked="form.isActive == 1"
                        :value="1" />
                    <span class="label-text text-sm font-semibold text-base-content/70">Active</span>
                </label>
            </div>
        </div>

        <div class="modal-action mt-5">
            <button class="btn btn-sm btn-ghost opacity-70" @click="closeModal()">Cancel</button>
            <button class="btn btn-sm btn-primary gap-2 shadow-md shadow-primary/20 font-medium"
                :class="{'loading': loading}" @click="save()" :disabled="loading">
                <template x-if="!loading">
                    <span><i class="fa-solid fa-save"></i> Save</span>
                </template>
                <template x-if="loading">
                    <span>Saving...</span>
                </template>
            </button>
        </div>
    </div>
    <form method="dialog" class="modal-backdrop bg-black/60" @click="closeModal()"></form>
</dialog>