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

<!-- Calculation Dialog (for CALC type) -->
<div x-show="showModal && (getTypeCode(form.TestType) === 'CALC' || form.TypeCode === '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-4">
      <div class="flex items-center gap-3">
        <div class="w-10 h-10 rounded-lg bg-amber-100 flex items-center justify-center">
          <i class="fa-solid fa-calculator text-amber-600 text-lg"></i>
        </div>
        <div>
          <h3 class="font-bold text-lg" style="color: rgb(var(--color-text));">
            <span x-text="isEditing ? 'Edit Calculated Test' : 'New Calculated Test'"></span>
          </h3>
          <p class="text-xs" style="color: rgb(var(--color-text-muted));">Derived/Calculated Test Definition</p>
        </div>
      </div>
      <button class="btn btn-ghost btn-sm btn-square" @click="closeModal()">
        <i class="fa-solid fa-times"></i>
      </button>
    </div>

    <!-- Calculation Type Badge -->
    <div class="mb-4">
      <span class="badge badge-warning gap-1">
        <i class="fa-solid fa-calculator"></i>
        <span x-text="form.TypeCode || getTypeName(form.TestType)"></span>
      </span>
    </div>

    <!-- Tabs Navigation -->
    <div class="flex flex-wrap gap-1 mb-4 p-1 rounded-lg"
      style="background: rgb(var(--color-bg-secondary)); border: 1px solid rgb(var(--color-border));">
      <button class="flex-1 px-3 py-2 text-sm font-medium rounded-md transition-all duration-200"
        :class="activeTab === 'basic' ? 'bg-amber-500 text-white shadow' : 'hover:bg-opacity-50'"
        style="color: rgb(var(--color-text));" @click="activeTab = 'basic'">
        <i class="fa-solid fa-info-circle mr-1"></i> Basic
      </button>
      <button class="flex-1 px-3 py-2 text-sm font-medium rounded-md transition-all duration-200"
        :class="activeTab === 'formula' ? 'bg-amber-500 text-white shadow' : 'hover:bg-opacity-50'"
        style="color: rgb(var(--color-text));" @click="activeTab = 'formula'">
        <i class="fa-solid fa-calculator mr-1"></i> Formula
      </button>
      <button class="flex-1 px-3 py-2 text-sm font-medium rounded-md transition-all duration-200"
        :class="activeTab === 'results' ? 'bg-amber-500 text-white shadow' : 'hover:bg-opacity-50'"
        style="color: rgb(var(--color-text));" @click="activeTab = 'results'">
        <i class="fa-solid fa-cog mr-1"></i> Config
      </button>
    </div>

    <!-- Form -->
    <div class="space-y-4">

      <!-- Tab: Basic Information (includes Org and Seq) -->
      <div x-show="activeTab === 'basic'" x-transition:enter="transition ease-out duration-200"
        x-transition:enter-start="opacity-0 transform -translate-x-4"
        x-transition:enter-end="opacity-100 transform translate-x-0">

        <!-- Basic Info Section -->
        <div class="mb-4">
          <h4 class="font-medium text-sm mb-3 flex items-center gap-2">
            <i class="fa-solid fa-info-circle text-amber-500"></i> Basic Information
          </h4>
          <div class="grid grid-cols-2 gap-4">
            <div>
              <label class="label">
                <span class="label-text font-medium text-sm">Test Code <span class="text-error">*</span></span>
              </label>
              <input type="text" class="input input-bordered font-mono uppercase w-full"
                :class="errors.TestSiteCode && 'input-error'" x-model="form.TestSiteCode"
                placeholder="e.g., BMI, eGFR, LDL_C" maxlength="10" />
              <label class="label" x-show="errors.TestSiteCode">
                <span class="label-text-alt text-error text-xs" x-text="errors.TestSiteCode"></span>
              </label>
            </div>
            <div>
              <label class="label">
                <span class="label-text font-medium text-sm">Test Name <span class="text-error">*</span></span>
              </label>
              <input type="text" class="input input-bordered w-full" :class="errors.TestSiteName && 'input-error'"
                x-model="form.TestSiteName" placeholder="e.g., Body Mass Index, eGFR" />
              <label class="label" x-show="errors.TestSiteName">
                <span class="label-text-alt text-error text-xs">Test name is required</span>
              </label>
            </div>
          </div>
          <div class="mt-3">
            <label class="label">
              <span class="label-text font-medium text-sm">Description</span>
            </label>
            <textarea class="textarea textarea-bordered w-full" x-model="form.Description"
              placeholder="e.g., Calculated based on weight and height..." rows="2"></textarea>
          </div>
        </div>

        <!-- Organization Section -->
        <div class="mb-4">
          <h4 class="font-medium text-sm mb-3 flex items-center gap-2">
            <i class="fa-solid fa-building text-amber-500"></i> Organization
          </h4>
          <div class="grid grid-cols-2 gap-4">
            <div>
              <label class="label">
                <span class="label-text font-medium text-sm">Discipline</span>
              </label>
              <select class="select select-bordered w-full" x-model="form.DisciplineID">
                <option value="">Select Discipline</option>
                <option value="1">Hematology</option>
                <option value="2">Chemistry</option>
                <option value="3">Microbiology</option>
                <option value="4">Urinalysis</option>
                <option value="10">General</option>
              </select>
            </div>
            <div>
              <label class="label">
                <span class="label-text font-medium text-sm">Department</span>
              </label>
              <select class="select select-bordered w-full" x-model="form.DepartmentID">
                <option value="">Select Department</option>
                <option value="1">Lab Hematology</option>
                <option value="2">Lab Chemistry</option>
                <option value="3">Lab Microbiology</option>
                <option value="4">Lab Urinalysis</option>
              </select>
            </div>
          </div>
        </div>

        <!-- Sequencing Section -->
        <div>
          <h4 class="font-medium text-sm mb-3 flex items-center gap-2">
            <i class="fa-solid fa-list-ol text-amber-500"></i> Sequencing & Visibility
          </h4>
          <div class="grid grid-cols-4 gap-3">
            <div>
              <label class="label">
                <span class="label-text font-medium text-sm">Seq (Screen)</span>
              </label>
              <input type="number" class="input input-bordered w-full" x-model.number="form.SeqScr" placeholder="0" />
            </div>
            <div>
              <label class="label">
                <span class="label-text font-medium text-sm">Seq (Report)</span>
              </label>
              <input type="number" class="input input-bordered w-full" x-model.number="form.SeqRpt" placeholder="0" />
            </div>
            <div>
              <label class="label">
                <span class="label-text font-medium text-sm">Indent</span>
              </label>
              <input type="number" class="input input-bordered w-full" x-model.number="form.IndentLeft"
                placeholder="0" />
            </div>
            <div>
              <label class="label">
                <span class="label-text font-medium text-sm">Options</span>
              </label>
              <div class="flex flex-wrap gap-3 mt-1">
                <label class="label cursor-pointer justify-start gap-1 px-0">
                  <input type="checkbox" class="checkbox checkbox-sm" x-model="form.CountStat" :true-value="1"
                    :false-value="0" />
                  <span class="label-text text-xs">Count Stat</span>
                </label>
                <label class="label cursor-pointer justify-start gap-1 px-0">
                  <input type="checkbox" class="checkbox checkbox-sm" x-model="form.VisibleScr" :true-value="1"
                    :false-value="0" />
                  <span class="label-text text-xs">Screen</span>
                </label>
                <label class="label cursor-pointer justify-start gap-1 px-0">
                  <input type="checkbox" class="checkbox checkbox-sm" x-model="form.VisibleRpt" :true-value="1"
                    :false-value="0" />
                  <span class="label-text text-xs">Report</span>
                </label>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Tab: Formula Configuration -->
      <div x-show="activeTab === 'formula'" x-transition:enter="transition ease-out duration-200"
        x-transition:enter-start="opacity-0 transform -translate-x-4"
        x-transition:enter-end="opacity-100 transform translate-x-0">
        <div class="space-y-4">
          <div>
            <label class="label">
              <span class="label-text font-medium text-sm">Formula Input Variables <span
                  class="text-error">*</span></span>
              <span class="label-text-alt text-xs">Comma-separated test codes (these become variable names)</span>
            </label>
            <input type="text" class="input input-bordered font-mono w-full" x-model="form.FormulaInput"
              placeholder="e.g., WEIGHT,HEIGHT,AGE,SCR" />
            <p class="text-xs mt-1" style="color: rgb(var(--color-text-muted));">
              <i class="fa-solid fa-info-circle mr-1"></i>
              Enter test codes that will be used as input variables. Use comma to separate multiple variables.
            </p>
          </div>

          <div>
            <label class="label">
              <span class="label-text font-medium text-sm">Formula Expression <span class="text-error">*</span></span>
              <span class="label-text-alt text-xs">JavaScript expression using variable names</span>
            </label>
            <textarea class="textarea textarea-bordered font-mono text-sm w-full" x-model="form.FormulaCode"
              placeholder="e.g., WEIGHT / ((HEIGHT/100) * (HEIGHT/100))" rows="3"></textarea>
          </div>

          <!-- Available Functions Help -->
          <div class="p-3 rounded bg-opacity-20" style="background: rgb(var(--color-bg-tertiary));">
            <h5 class="font-semibold text-sm mb-2">Available Functions:</h5>
            <div class="grid grid-cols-2 gap-2 text-xs font-mono" style="color: rgb(var(--color-text-muted));">
              <div><code>ABS(x)</code> - Absolute value</div>
              <div><code>ROUND(x, d)</code> - Round to d decimals</div>
              <div><code>MIN(a, b, ...)</code> - Minimum value</div>
              <div><code>MAX(a, b, ...)</code> - Maximum value</div>
              <div><code>IF(cond, t, f)</code> - Conditional</div>
              <div><code>MEAN(a, b, ...)</code> - Average</div>
              <div><code>SQRT(x)</code> - Square root</div>
              <div><code>POW(x, y)</code> - Power (x^y)</div>
            </div>
          </div>

          <!-- Formula Preview -->
          <div class="p-3 rounded border"
            style="background: rgb(var(--color-bg-secondary)); border-color: rgb(var(--color-border));">
            <h5 class="font-semibold text-sm mb-2 flex items-center gap-2">
              <i class="fa-solid fa-eye text-amber-500"></i>
              Formula Preview
            </h5>
            <template x-if="form.FormulaInput || form.FormulaCode">
              <div class="font-mono text-sm space-y-1">
                <div class="flex gap-2">
                  <span class="opacity-60">Inputs:</span>
                  <span x-text="form.FormulaInput || '(none)'"></span>
                </div>
                <div class="flex gap-2">
                  <span class="opacity-60">Formula:</span>
                  <code x-text="form.FormulaCode || '(none)'"></code>
                </div>
              </div>
            </template>
            <template x-if="!form.FormulaInput && !form.FormulaCode">
              <span class="text-sm opacity-50 italic">Enter formula inputs and expression above</span>
            </template>
          </div>
        </div>
      </div>

      <!-- Tab: Result Configuration (includes Sample) -->
      <div x-show="activeTab === 'results'" x-transition:enter="transition ease-out duration-200"
        x-transition:enter-start="opacity-0 transform -translate-x-4"
        x-transition:enter-end="opacity-100 transform translate-x-0">

        <!-- Result Configuration -->
        <div class="mb-4">
          <h4 class="font-medium text-sm mb-3 flex items-center gap-2">
            <i class="fa-solid fa-flask text-amber-500"></i> Result Configuration
          </h4>
          <div class="grid grid-cols-3 gap-4">
            <div>
              <label class="label">
                <span class="label-text font-medium text-sm">Result Unit</span>
              </label>
              <input type="text" class="input input-bordered w-full" x-model="form.Unit1"
                placeholder="e.g., kg/m2, mg/dL, %" />
            </div>
            <div>
              <label class="label">
                <span class="label-text font-medium text-sm">Decimal Places</span>
              </label>
              <input type="number" class="input input-bordered w-full" x-model.number="form.Decimal" placeholder="2"
                min="0" max="10" />
            </div>
            <div>
              <label class="label">
                <span class="label-text font-medium text-sm">Expected TAT (min)</span>
              </label>
              <input type="number" class="input input-bordered w-full" x-model.number="form.ExpectedTAT"
                placeholder="5" />
            </div>
          </div>
        </div>

        <!-- Reference Range Section -->
        <div class="mb-4">
          <h4 class="font-medium text-sm mb-3 flex items-center gap-2">
            <i class="fa-solid fa-ruler-combined text-amber-500"></i> Reference Range
          </h4>
          <div class="grid grid-cols-4 gap-3">
            <div>
              <label class="label">
                <span class="label-text font-medium text-sm">Reference Type</span>
              </label>
              <select class="select select-bordered w-full" x-model="form.RefType">
                <option value="">Select Reference Type</option>
                <option value="NMRC">Numeric Range</option>
                <option value="TEXT">Text Reference</option>
                <option value="AGE">Age-based</option>
                <option value="GENDER">Gender-based</option>
                <option value="NONE">No Reference</option>
              </select>
            </div>
          </div>
          <!-- Numeric Reference Fields -->
          <div class="grid grid-cols-4 gap-3 mt-3" x-show="form.RefType === 'NMRC' || form.RefType === 'AGE' || form.RefType === 'GENDER'">
            <div>
              <label class="label">
                <span class="label-text font-medium text-sm">Min Normal</span>
              </label>
              <input type="number" class="input input-bordered w-full" x-model.number="form.RefMin" placeholder="0" step="any" />
            </div>
            <div>
              <label class="label">
                <span class="label-text font-medium text-sm">Max Normal</span>
              </label>
              <input type="number" class="input input-bordered w-full" x-model.number="form.RefMax" placeholder="100" step="any" />
            </div>
            <div>
              <label class="label">
                <span class="label-text font-medium text-sm">Critical Low</span>
              </label>
              <input type="number" class="input input-bordered w-full" x-model.number="form.CriticalLow" placeholder="Optional" step="any" />
            </div>
            <div>
              <label class="label">
                <span class="label-text font-medium text-sm">Critical High</span>
              </label>
              <input type="number" class="input input-bordered w-full" x-model.number="form.CriticalHigh" placeholder="Optional" step="any" />
            </div>
          </div>
          <!-- Text Reference Field -->
          <div class="mt-3" x-show="form.RefType === 'TEXT'">
            <label class="label">
              <span class="label-text font-medium text-sm">Reference Text</span>
            </label>
            <input type="text" class="input input-bordered w-full" x-model="form.RefText" placeholder="e.g., Negative, Positive, etc." />
          </div>
        </div>
      </div>


    </div>

    <!-- Actions -->
    <div class="flex gap-3 mt-6 pt-4 border-t" style="border-color: rgb(var(--color-border));">
      <button class="btn btn-ghost flex-1" @click="closeModal()">
        <i class="fa-solid fa-times mr-2"></i> Cancel
      </button>
      <button class="btn btn-warning flex-1" @click="save()" :disabled="saving">
        <span x-show="saving" class="loading loading-spinner loading-sm mr-2"></span>
        <i x-show="!saving" class="fa-solid fa-save mr-2"></i>
        <span x-text="saving ? 'Saving...' : (isEditing ? 'Update Calculated Test' : 'Create Calculated Test')"></span>
      </button>
    </div>
  </div>
</div>