tinyqc/app/Views/test/dialog_form.php

<!-- Backdrop -->
<div x-show="showModal"
     x-transition:enter="transition ease-out duration-200"
     x-transition:enter-start="opacity-0"
     x-transition:enter-end="opacity-100"
     x-transition:leave="transition ease-in duration-150"
     x-transition:leave-start="opacity-100"
     x-transition:leave-end="opacity-0"
     class="fixed inset-0 bg-slate-900/50 backdrop-blur-sm z-40"
     @click="closeModal()">
</div>

<!-- Modal Panel -->
<div x-show="showModal"
     x-cloak
     x-transition:enter="transition ease-out duration-200"
     x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
     x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
     x-transition:leave="transition ease-in duration-150"
     x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
     x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
     class="fixed inset-0 z-50 flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl shadow-2xl w-full max-w-2xl" @click.stop>
        <!-- Header -->
        <div class="px-6 py-4 border-b border-slate-100 flex items-center justify-between">
            <h3 class="text-lg font-semibold text-slate-800" x-text="form.test_id ? 'Edit Test' : 'Add Test'"></h3>
            <button @click="closeModal()" class="text-slate-400 hover:text-slate-600">
                <i class="fa-solid fa-xmark text-xl"></i>
            </button>
        </div>

        <!-- Form -->
        <form @submit.prevent="save()">
            <div class="p-6">
                <div class="grid grid-cols-2 gap-4">
                    <div class="col-span-2">
                        <label class="block text-sm font-medium text-slate-700 mb-1">Department <span class="text-red-500">*</span></label>
                        <select x-model="form.dept_ref_id" class="w-full px-4 py-2.5 text-sm bg-slate-50 border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500" :class="{'border-red-300 bg-red-50': errors.dept_ref_id}" required>
                            <option value="">Select Department</option>
                            <template x-for="dept in depts" :key="dept.dept_id">
                                <option :value="dept.dept_id" x-text="dept.name"></option>
                            </template>
                        </select>
                        <p x-show="errors.dept_ref_id" x-text="errors.dept_ref_id" class="text-red-500 text-xs mt-1"></p>
                    </div>
                    <div class="col-span-2">
                        <label class="block text-sm font-medium text-slate-700 mb-1">Test Name <span class="text-red-500">*</span></label>
                        <input type="text" x-model="form.name" class="w-full px-4 py-2.5 text-sm bg-slate-50 border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500" :class="{'border-red-300 bg-red-50': errors.name}" placeholder="Enter test name" required>
                        <p x-show="errors.name" x-text="errors.name" class="text-red-500 text-xs mt-1"></p>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">Unit</label>
                        <input type="text" x-model="form.unit" class="w-full px-4 py-2.5 text-sm bg-slate-50 border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500" placeholder="e.g., mg/dL">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">Method</label>
                        <input type="text" x-model="form.method" class="w-full px-4 py-2.5 text-sm bg-slate-50 border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500" placeholder="e.g., Spectrophotometry">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">CVA</label>
                        <input type="text" x-model="form.cva" class="w-full px-4 py-2.5 text-sm bg-slate-50 border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500" placeholder="Coefficient of Variation A">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">BA</label>
                        <input type="text" x-model="form.ba" class="w-full px-4 py-2.5 text-sm bg-slate-50 border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500" placeholder="Bias A">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">TEA</label>
                        <input type="text" x-model="form.tea" class="w-full px-4 py-2.5 text-sm bg-slate-50 border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500" placeholder="Total Error Allowable">
                    </div>
                </div>
            </div>

            <!-- Footer -->
            <div class="flex items-center justify-end gap-3 px-6 py-4 border-t border-slate-100 bg-slate-50/50 rounded-b-2xl">
                <button type="button" @click="closeModal()" class="px-4 py-2 text-sm font-medium text-slate-600 hover:text-slate-800 transition-colors">Cancel</button>
                <button type="submit" :disabled="loading" class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors">
                    <template x-if="!loading">
                        <span><i class="fa-solid fa-check mr-1"></i> <span x-text="form.test_id ? 'Update' : 'Save'"></span></span>
                    </template>
                    <template x-if="loading">
                        <span><i class="fa-solid fa-spinner fa-spin mr-1"></i> Saving...</span>
                    </template>
                </button>
            </div>
        </form>
    </div>
</div>