clqms-be/app/Views/v2/master/tests/test_dialog.php

<!-- Lab Test Form Modal -->
<div 
  x-show="showModal && currentDialogType === 'TEST'" 
  x-cloak
  class="modal-overlay"
  @click.self="closeModal()"
  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"
>
  <div 
    class="modal-content p-6 max-w-2xl w-full max-h-[90vh] overflow-y-auto"
    @click.stop
    x-transition:enter="transition ease-out duration-200"
    x-transition:enter-start="opacity-0 transform scale-95"
    x-transition:enter-end="opacity-100 transform scale-100"
    x-transition:leave="transition ease-in duration-150"
    x-transition:leave-start="opacity-100 transform scale-100"
    x-transition:leave-end="opacity-0 transform scale-95"
  >
    <!-- Header -->
    <div class="flex items-center justify-between mb-6">
      <h3 class="font-bold text-xl flex items-center gap-2" style="color: rgb(var(--color-text));">
        <i class="fa-solid fa-microscope" style="color: rgb(var(--color-primary));"></i>
        <span x-text="isEditing ? 'Edit Lab Test' : 'New Lab Test'"></span>
      </h3>
      <button class="btn btn-ghost btn-sm btn-square" @click="closeModal()">
        <i class="fa-solid fa-times"></i>
      </button>
    </div>

    <!-- Tabs -->
    <div class="flex border-b mb-6" style="border-color: rgb(var(--color-border));">
      <button 
        class="px-6 py-2 font-medium text-sm transition-colors border-b-2"
        :class="form.dialogTab === 'general' ? 'border-primary text-primary' : 'border-transparent text-slate-500 hover:text-slate-700'"
        style="--tw-text-opacity: 1; border-color: transition;"
        @click="form.dialogTab = 'general'"
        :style="form.dialogTab === 'general' ? 'border-color: rgb(var(--color-primary)); color: rgb(var(--color-primary));' : ''"
      >
        General
      </button>
      <button 
        class="px-6 py-2 font-medium text-sm transition-colors border-b-2"
        :class="form.dialogTab === 'reff' ? 'border-primary text-primary' : 'border-transparent text-slate-500 hover:text-slate-700'"
        @click="form.dialogTab = 'reff'"
        :style="form.dialogTab === 'reff' ? 'border-color: rgb(var(--color-primary)); color: rgb(var(--color-primary));' : ''"
      >
        Reff
      </button>
    </div>

    <!-- Form Content -->
    <div class="space-y-4">
      
      <!-- General Tab -->
      <div x-show="form.dialogTab === 'general'" class="space-y-4">
        <div>
          <label class="label">
            <span class="label-text font-medium">Test Name <span style="color: rgb(var(--color-error));">*</span></span>
          </label>
          <input 
            type="text" 
            class="input"
            :class="errors.TestSiteName && 'input-error'"
            x-model="form.TestSiteName"
            placeholder="Glucose Fasting"
          />
          <label class="label" x-show="errors.TestSiteName">
            <span class="label-text-alt" style="color: rgb(var(--color-error));" x-text="errors.TestSiteName"></span>
          </label>
        </div>

        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="label">
              <span class="label-text font-medium">Test Code <span style="color: rgb(var(--color-error));">*</span></span>
            </label>
            <input 
              type="text" 
              class="input font-mono"
              :class="errors.TestSiteCode && 'input-error'"
              x-model="form.TestSiteCode"
              placeholder="GLUC"
            />
            <label class="label" x-show="errors.TestSiteCode">
              <span class="label-text-alt" style="color: rgb(var(--color-error));" x-text="errors.TestSiteCode"></span>
            </label>
          </div>
          <div>
            <label class="label">
              <span class="label-text font-medium">Test Type <span style="color: rgb(var(--color-error));">*</span></span>
            </label>
            <select class="select" x-model="form.TestType" :class="errors.TestType && 'input-error'">
              <option value="">Select Type</option>
              <template x-for="t in typesList" :key="t.VID">
                <option :value="t.VID" x-text="t.VDesc"></option>
              </template>
            </select>
            <label class="label" x-show="errors.TestType">
              <span class="label-text-alt" style="color: rgb(var(--color-error));" x-text="errors.TestType"></span>
            </label>
          </div>
        </div>

        <div>
          <label class="label">
            <span class="label-text font-medium">Description</span>
          </label>
          <textarea 
            class="input h-20 pt-2"
            x-model="form.Description"
            placeholder="Internal test description..."
          ></textarea>
        </div>

        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="label">
              <span class="label-text font-medium">Site</span>
            </label>
            <select class="select" x-model="form.SiteID">
              <template x-for="s in sitesList" :key="s.SiteID">
                <option :value="s.SiteID" x-text="s.SiteName"></option>
              </template>
            </select>
          </div>
          <div class="grid grid-cols-2 gap-2">
              <div>
                  <label class="label">
                      <span class="label-text font-medium">Seq (Scr)</span>
                  </label>
                  <input type="number" class="input text-center" x-model="form.SeqScr" />
              </div>
              <div>
                  <label class="label">
                      <span class="label-text font-medium">Seq (Rpt)</span>
                  </label>
                  <input type="number" class="input text-center" x-model="form.SeqRpt" />
              </div>
          </div>
        </div>

        <div class="flex items-center gap-6 p-4 rounded-xl border border-slate-100 bg-slate-50/50">
          <label class="flex items-center gap-2 cursor-pointer">
            <input type="checkbox" class="checkbox" x-model="form.VisibleScr" :true-value="1" :false-value="0" />
            <span class="label-text">Visible in Screen</span>
          </label>
          <label class="flex items-center gap-2 cursor-pointer">
            <input type="checkbox" class="checkbox" x-model="form.VisibleRpt" :true-value="1" :false-value="0" />
            <span class="label-text">Visible in Report</span>
          </label>
          <label class="flex items-center gap-2 cursor-pointer">
            <input type="checkbox" class="checkbox" x-model="form.CountStat" :true-value="1" :false-value="0" />
            <span class="label-text">Count in Statistics</span>
          </label>
        </div>
      </div>

      <!-- Reff Tab -->
      <div x-show="form.dialogTab === 'reff'" class="space-y-4" x-cloak>
        <div>
          <label class="label">
            <span class="label-text font-medium">Ref Type</span>
          </label>
          <select class="select" x-model="form.RefType">
            <option value="">Select Ref Type</option>
            <template x-for="rt in refTypesList" :key="rt.VID">
              <option :value="rt.VValue" x-text="rt.VDesc"></option>
            </template>
          </select>
        </div>

        <!-- Numeric Reference Range -->
        <template x-if="form.RefType === 'NMRC'">
          <div class="space-y-4">
            <div class="grid grid-cols-2 gap-4">
              <div>
                <label class="label"><span class="label-text font-medium">Ref Low</span></label>
                <input type="text" class="input" x-model="form.RefLow" placeholder="0.00" />
              </div>
              <div>
                <label class="label"><span class="label-text font-medium">Ref High</span></label>
                <input type="text" class="input" x-model="form.RefHigh" placeholder="10.00" />
              </div>
            </div>
            <div class="grid grid-cols-2 gap-4 border-t pt-4" style="border-color: rgb(var(--color-border));">
              <div>
                <label class="label"><span class="label-text font-medium text-error">Crit Low</span></label>
                <input type="text" class="input border-error/30" x-model="form.CritLow" placeholder="0.00" />
              </div>
              <div>
                <label class="label"><span class="label-text font-medium text-error">Crit High</span></label>
                <input type="text" class="input border-error/30" x-model="form.CritHigh" placeholder="20.00" />
              </div>
            </div>
            <div class="grid grid-cols-2 gap-4">
              <div>
                <label class="label"><span class="label-text font-medium">Unit</span></label>
                <input type="text" class="input" x-model="form.Unit1" placeholder="mg/dL" />
              </div>
              <div>
                <label class="label"><span class="label-text font-medium">Decimals</span></label>
                <input type="number" class="input" x-model="form.Decimal" />
              </div>
            </div>
          </div>
        </template>


        <!-- Descriptive Text -->
        <template x-if="form.RefType === 'TEXT'">
          <div>
            <label class="label">
              <span class="label-text font-medium">Default Reference Text</span>
            </label>
            <textarea 
              class="input h-32 pt-2"
              x-model="form.RefText"
              placeholder="e.g. Negative"
            ></textarea>
          </div>
        </template>

        <!-- List / Value Set -->
        <template x-if="form.RefType === 'LIST'">
          <div>
            <label class="label">
              <span class="label-text font-medium">Select Value Set</span>
            </label>
            <select class="select" x-model="form.RefVSet">
              <option value="">Select a value set...</option>
              <template x-for="v in vsetDefsList" :key="v.VSetDefID">
                <option :value="v.VSetDefID" x-text="v.VSDesc"></option>
              </template>
            </select>
            <div class="mt-4 p-4 rounded-lg bg-blue-50 border border-blue-100 flex items-start gap-3">
              <i class="fa-solid fa-circle-info text-blue-500 mt-0.5"></i>
              <p class="text-xs text-blue-700 leading-relaxed">
                Selecting a value set will restrict result entry to predefined values and use them for reference matching.
              </p>
            </div>
          </div>
        </template>

      </div>
    </div>

    <!-- Actions -->
    <div class="flex gap-3 mt-8 pt-6" style="border-top: 1px solid rgb(var(--color-border));">
      <button class="btn btn-ghost flex-1" @click="closeModal()">Cancel</button>
      <button class="btn btn-primary flex-1" @click="save()" :disabled="saving">
        <span x-show="saving" class="spinner spinner-sm"></span>
        <i x-show="!saving" class="fa-solid fa-save mr-2"></i>
        <span x-text="saving ? 'Saving...' : 'Save Test'"></span>
      </button>
    </div>
  </div>
</div>