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

<!-- Calculated Test Form Modal -->
<div 
  x-show="showModal && currentDialogType === 'CALC'" 
  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-3xl 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-calculator" style="color: rgb(var(--color-secondary));"></i>
        <span x-text="isEditing ? 'Edit Calculated Test' : 'New Calculated Test'"></span>
      </h3>
      <button class="btn btn-ghost btn-sm btn-square" @click="closeModal()">
        <i class="fa-solid fa-times"></i>
      </button>
    </div>

    <!-- Form -->
    <div class="space-y-4">
      
      <!-- Basic Info -->
      <div class="grid grid-cols-2 gap-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="Absolute Neutrophils"
          />
          <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>
          <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="ANC"
          />
          <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>

      <!-- Test Type & Result Unit -->
      <div class="grid grid-cols-2 gap-4">
        <div>
          <label class="label">
            <span class="label-text font-medium">Test Type</span>
          </label>
          <input type="text" class="input input-disabled bg-base-200" x-model="form.TestTypeName" readonly />
        </div>
        <div>
          <label class="label">
            <span class="label-text font-medium">Result Unit</span>
          </label>
          <input 
            type="text" 
            class="input" 
            x-model="form.ResultUnit"
            placeholder="% or cells/µL"
          />
        </div>
      </div>

      <!-- Formula Section -->
      <div class="border rounded-xl p-4 bg-base-50">
        <h4 class="font-semibold flex items-center gap-2 mb-4">
          <i class="fa-solid fa-function"></i>
          Calculation Formula
        </h4>
        
        <div class="space-y-3">
          <div>
            <label class="label">
              <span class="label-text font-medium">Formula Expression <span style="color: rgb(var(--color-error));">*</span></span>
              <span class="label-text-alt text-base-content/60">Use test codes as variables in curly braces</span>
            </label>
            <textarea 
              class="input font-mono h-20"
              :class="errors.Formula && 'input-error'"
              x-model="form.Formula"
              placeholder="({WBC} * {NEU%}) / 100"
            ></textarea>
            <label class="label" x-show="errors.Formula">
              <span class="label-text-alt" style="color: rgb(var(--color-error));" x-text="errors.Formula"></span>
            </label>
          </div>

          <!-- Formula Variables/Tests -->
          <div>
            <label class="label">
              <span class="label-text font-medium">Used Test Variables</span>
              <span class="label-text-alt text-base-content/60">Tests referenced in formula</span>
            </label>
            <div class="flex flex-wrap gap-2">
              <template x-if="!form.formulaVars || form.formulaVars.length === 0">
                <span class="text-sm text-base-content/50 italic">No variables defined. Add tests below.</span>
              </template>
              <template x-for="v in form.formulaVars" :key="v">
                <span class="badge badge-primary gap-1">
                  <code x-text="'{'+v+'}'"></code>
                  <button class="btn btn-ghost btn-xs btn-square" @click="removeFormulaVar(v)">
                    <i class="fa-solid fa-times"></i>
                  </button>
                </span>
              </template>
            </div>
          </div>

          <!-- Add Variable -->
          <div class="flex gap-2">
            <select class="select select-bordered flex-1" x-model="form.newFormulaVar">
              <option value="">Select test variable...</option>
              <template x-for="t in availableTests" :key="t.TestSiteID">
                <option :value="t.TestSiteCode" x-text="t.TestSiteCode + ' - ' + t.TestSiteName"></option>
              </template>
            </select>
            <button class="btn btn-outline" @click="addFormulaVar()">
              <i class="fa-solid fa-plus"></i>
            </button>
          </div>
        </div>
      </div>

      <!-- Result Options -->
      <div class="grid grid-cols-2 gap-4">
        <div>
          <label class="label">
            <span class="label-text font-medium">Decimal Places</span>
          </label>
          <input 
            type="number" 
            class="input text-center" 
            x-model="form.DecimalPlaces"
            min="0"
            max="10"
            placeholder="2"
          />
        </div>
        <div>
          <label class="label">
            <span class="label-text font-medium">Rounding Method</span>
          </label>
          <select class="select" x-model="form.RoundingMethod">
            <option value="round">Standard Round</option>
            <option value="floor">Floor (Down)</option>
            <option value="ceil">Ceiling (Up)</option>
            <option value="truncate">Truncate</option>
          </select>
        </div>
      </div>

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

      <!-- Sequence & Site -->
      <div class="grid grid-cols-3 gap-4">
        <div class="grid grid-cols-2 gap-2">
          <div>
            <label class="label">
              <span class="label-text font-medium">Seq (Screen)</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 (Report)</span>
            </label>
            <input type="number" class="input text-center" x-model="form.SeqRpt" />
          </div>
        </div>
        <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>

      <!-- Options -->
      <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>

    <!-- 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-secondary 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>