tinyqc/app/Views/master/test/dialog_test_form.php

<dialog class="modal modal-bottom sm:modal-middle" :class="{ 'modal-open': showModal }">
    <div class="modal-box border border-base-300 shadow-2xl bg-base-100">
        <h3 class="font-bold text-lg mb-4 flex items-center gap-2 text-base-content">
            <i class="fa-solid fa-flask-vial text-primary"></i>
            <span x-text="form.testId ? 'Edit Test' : 'New Test'"></span>
        </h3>
        
        <div class="space-y-4">
            <div class="form-control">
                <label class="label">
                    <span class="label-text font-medium text-base-content opacity-80">Test Code</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"
                    x-model="form.testCode"
                    placeholder="Enter test code"
                />
            </div>

            <div class="form-control">
                <label class="label">
                    <span class="label-text font-medium text-base-content opacity-80">Test 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.testName}"
                    x-model="form.testName"
                    placeholder="Enter test name"
                />
                <template x-if="errors.testName">
                    <label class="label">
                        <span class="label-text-alt text-error" x-text="errors.testName"></span>
                    </label>
                </template>
            </div>
            
            <div class="grid grid-cols-2 gap-4">
                <div class="form-control">
                    <label class="label">
                        <span class="label-text font-medium text-base-content opacity-80">Unit</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"
                        x-model="form.testUnit"
                        placeholder="e.g., mg/dL"
                    />
                </div>
                
                <div class="form-control">
                    <label class="label">
                        <span class="label-text font-medium text-base-content opacity-80">Method</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"
                        x-model="form.testMethod"
                        placeholder="e.g., Enzymatic"
                    />
                </div>
            </div>
            
            <div class="grid grid-cols-3 gap-4">
                <div class="form-control">
                    <label class="label">
                        <span class="label-text font-medium text-base-content opacity-80">CVa</span>
                    </label>
                    <input
                        type="number"
                        step="0.01"
                        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"
                        x-model="form.cva"
                        placeholder="0.00"
                    />
                </div>
                
                <div class="form-control">
                    <label class="label">
                        <span class="label-text font-medium text-base-content opacity-80">BA</span>
                    </label>
                    <input
                        type="number"
                        step="0.01"
                        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"
                        x-model="form.ba"
                        placeholder="0.00"
                    />
                </div>
                
                <div class="form-control">
                    <label class="label">
                        <span class="label-text font-medium text-base-content opacity-80">TEa</span>
                    </label>
                    <input
                        type="number"
                        step="0.01"
                        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"
                        x-model="form.tea"
                        placeholder="0.00"
                    />
                </div>
            </div>
        </div>
        
        <div class="modal-action mt-6">
            <button class="btn btn-ghost opacity-70" @click="closeModal()">Cancel</button>
            <button
                class="btn btn-primary gap-2 shadow-lg 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>