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

<!-- Group Test Form Modal -->
<div 
  x-show="showModal && currentDialogType === 'GROUP'" 
  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-5 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-4">
      <h3 class="font-bold text-lg flex items-center gap-2" style="color: rgb(var(--color-text));">
        <i class="fa-solid fa-layer-group" style="color: rgb(var(--color-primary));"></i>
        <span x-text="isEditing ? 'Edit Test Group' : 'New Test Group'"></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-3">
      
      <!-- Basic Info -->
      <div class="grid grid-cols-2 gap-3">
        <div>
          <label class="label py-1">
            <span class="label-text font-medium text-sm">Group Name <span style="color: rgb(var(--color-error));">*</span></span>
          </label>
          <input 
            type="text" 
            class="input input-sm input-bordered"
            :class="errors.TestSiteName && 'input-error'"
            x-model="form.TestSiteName"
            placeholder="CBC Panel"
          />
        </div>
        <div>
          <label class="label py-1">
            <span class="label-text font-medium text-sm">Group Code <span style="color: rgb(var(--color-error));">*</span></span>
          </label>
          <input 
            type="text" 
            class="input input-sm input-bordered font-mono"
            :class="errors.TestSiteCode && 'input-error'"
            x-model="form.TestSiteCode"
            placeholder="CBC"
          />
        </div>
      </div>

      <!-- Test Type & Default Specimen -->
      <div class="grid grid-cols-2 gap-3">
        <div>
          <label class="label py-1">
            <span class="label-text font-medium text-sm">Test Type</span>
          </label>
          <input type="text" class="input input-sm input-bordered bg-base-200" x-model="form.TestTypeName" readonly />
        </div>
        <div>
          <label class="label py-1">
            <span class="label-text font-medium text-sm">Default Specimen</span>
          </label>
          <select class="select select-sm select-bordered" x-model="form.SpcType">
            <option value="">Select</option>
            <template x-for="s in specimenTypesList" :key="s.VID || s.id">
              <option :value="s.VValue" x-text="s.VDesc || s.VValue"></option>
            </template>
          </select>
        </div>
      </div>

      <!-- Test Members Selection -->
      <div class="border rounded-lg p-3 bg-base-50">
        <div class="flex items-center justify-between mb-2">
          <h4 class="font-semibold text-sm flex items-center gap-1">
            <i class="fa-solid fa-list-check text-sm"></i>
            Group Members
          </h4>
          <button class="btn btn-primary btn-xs" @click="openTestSelector()">
            <i class="fa-solid fa-plus mr-1"></i> Add
          </button>
        </div>
        
        <!-- Selected Members List -->
        <div class="space-y-2 max-h-64 overflow-y-auto">
          <template x-if="!form.members || form.members.length === 0">
            <div class="text-center py-4 text-base-content/50">
              <i class="fa-solid fa-inbox text-xl mb-1"></i>
              <p class="text-xs">No tests added</p>
            </div>
          </template>
          
          <template x-for="(member, index) in form.members" :key="index">
            <div class="grid grid-cols-[1fr_auto] gap-2 p-2 bg-white rounded border items-center">
              <span class="text-xs font-medium truncate" x-text="member.TestSiteCode+' - '+member.TestSiteName"></span>
              <div class="flex items-center gap-1">
                <input type="number" class="input input-xs py-1 text-center w-8" x-model="member.SeqScr" placeholder="#" title="Order"/>
                <button class="btn btn-ghost btn-xs btn-square text-error" @click="removeMember(index)">
                  <i class="fa-solid fa-times text-xs"></i>
                </button>
              </div>
            </div>
          </template>
        </div>
      </div>

      <!-- Sequence & Site - Very Compact -->
      <div class="flex flex-wrap items-center gap-3">
        <div class="flex items-center gap-1">
          <span class="text-xs text-base-content/60">Scr:</span>
          <input type="number" class="input input-xs w-12 text-center" x-model="form.SeqScr" />
        </div>
        <div class="flex items-center gap-1">
          <span class="text-xs text-base-content/60">Rpt:</span>
          <input type="number" class="input input-xs w-12 text-center" x-model="form.SeqRpt" />
        </div>
        <select class="select select-xs flex-1" 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>

      <!-- Options - Compact -->
      <div class="flex items-center gap-3 p-2 rounded border border-slate-100 bg-slate-50/50">
        <label class="flex items-center gap-1 cursor-pointer">
          <input type="checkbox" class="checkbox checkbox-xs" x-model="form.VisibleScr" :true-value="1" :false-value="0" />
          <span class="label-text text-xs">Screen</span>
        </label>
        <label class="flex items-center gap-1 cursor-pointer">
          <input type="checkbox" class="checkbox checkbox-xs" x-model="form.VisibleRpt" :true-value="1" :false-value="0" />
          <span class="label-text text-xs">Report</span>
        </label>
        <label class="flex items-center gap-1 cursor-pointer">
          <input type="checkbox" class="checkbox checkbox-xs" x-model="form.CountStat" :true-value="1" :false-value="0" />
          <span class="label-text text-xs">Stats</span>
        </label>
      </div>

    </div>

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

  <!-- Test Selector Modal -->
  <div x-show="showTestSelector" x-cloak class="modal-overlay" style="z-index: 100;">
    <div class="modal-content p-4 max-w-lg" @click.stop>
      <div class="flex items-center justify-between mb-3">
        <h4 class="font-bold">Select Tests</h4>
        <button class="btn btn-ghost btn-sm btn-square" @click="showTestSelector = false">
          <i class="fa-solid fa-times"></i>
        </button>
      </div>
      
      <input 
        type="text" 
        class="input input-sm mb-2" 
        placeholder="Search tests..."
        x-model="testSearch"
      />
      
      <div class="max-h-48 overflow-y-auto space-y-1">
        <template x-for="test in availableTests" :key="test.TestSiteID">
          <label class="flex items-center gap-2 p-2 hover:bg-base-200 rounded-lg cursor-pointer">
            <input 
              type="checkbox" 
              class="checkbox checkbox-sm checkbox-primary"
              :checked="isTestSelected(test.TestSiteID)"
              @change="toggleTestSelection(test)"
            />
            <div class="flex-1">
              <div class="font-medium text-sm" x-text="test.TestSiteName"></div>
              <div class="text-xs text-base-content/60 font-mono" x-text="test.TestSiteCode"></div>
            </div>
          </label>
        </template>
      </div>
      
      <div class="flex gap-2 mt-3 pt-2" style="border-top: 1px solid rgb(var(--color-border));">
        <button class="btn btn-sm btn-ghost flex-1" @click="showTestSelector = false">Cancel</button>
        <button class="btn btn-sm btn-primary flex-1" @click="confirmTestSelection()">
          <i class="fa-solid fa-check mr-1"></i> Confirm
        </button>
      </div>
    </div>
  </div>

</div>