clqms-be/app/Views/v2/master/valuesets/valueset_dialog.php

<!-- Value Set Item Form Modal -->
<div 
  x-show="showModal" 
  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-list-plus" style="color: rgb(var(--color-primary));"></i>
        <span x-text="isEditing ? 'Edit Item' : 'New Item'"></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-6">
      
      <!-- General Error -->
      <div x-show="errors.general" class="p-4 rounded-lg bg-rose-50 border border-rose-200" style="display: none;">
        <div class="flex items-center gap-2">
          <i class="fa-solid fa-exclamation-triangle text-rose-500"></i>
          <p class="text-sm font-medium text-rose-700" x-text="errors.general"></p>
        </div>
      </div>

      <!-- Category Selection (only show if no selectedDef) -->
      <div x-show="!selectedDef" class="space-y-4">
        <h4 class="font-semibold text-sm uppercase tracking-wider opacity-60" style="color: rgb(var(--color-text));">Category Assignment</h4>
        
        <div>
          <label class="label">
            <span class="label-text font-medium">Category <span style="color: rgb(var(--color-error));">*</span></span>
          </label>
          <select class="select" x-model="form.VSetID" :class="errors.VSetID && 'input-error'">
            <option value="">Select Category</option>
            <template x-for="def in defsList" :key="def.VSetID">
              <option :value="def.VSetID" x-text="def.VSName"></option>
            </template>
          </select>
          <label class="label" x-show="errors.VSetID">
            <span class="label-text-alt" style="color: rgb(var(--color-error));" x-text="errors.VSetID"></span>
          </label>
        </div>
      </div>

      <!-- Basic Information Section -->
      <div class="space-y-4">
        <h4 class="font-semibold text-sm uppercase tracking-wider opacity-60" style="color: rgb(var(--color-text));">Item Details</h4>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label class="label">
              <span class="label-text font-medium">Value / Key <span style="color: rgb(var(--color-error));">*</span></span>
            </label>
            <input 
              type="text" 
              class="input"
              :class="errors.VValue && 'input-error'"
              x-model="form.VValue"
              placeholder="e.g. M, F, Active"
            />
            <label class="label" x-show="errors.VValue">
              <span class="label-text-alt" style="color: rgb(var(--color-error));" x-text="errors.VValue"></span>
            </label>
          </div>
          <div>
            <label class="label">
              <span class="label-text font-medium">Display Order</span>
            </label>
            <input 
              type="number" 
              class="input text-center"
              x-model="form.VOrder"
              placeholder="0"
              min="0"
            />
          </div>
        </div>

        <div>
          <label class="label">
            <span class="label-text font-medium">Semantic Description</span>
          </label>
          <textarea 
            class="input h-24 pt-2"
            x-model="form.VDesc"
            placeholder="Detailed description or definition of this value..."
          ></textarea>
        </div>
      </div>

      <!-- System Information Section -->
      <div class="space-y-4">
        <h4 class="font-semibold text-sm uppercase tracking-wider opacity-60" style="color: rgb(var(--color-text));">System Information</h4>
        
        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="label">
              <span class="label-text font-medium">Item ID</span>
            </label>
            <input 
              type="text" 
              class="input text-center font-mono"
              x-model="form.VID"
              placeholder="Auto-generated"
              readonly
            />
          </div>
          <div>
            <label class="label">
              <span class="label-text font-medium">Site ID</span>
            </label>
            <input 
              type="number" 
              class="input text-center font-mono"
              x-model="form.SiteID"
              placeholder="1"
              readonly
            />
          </div>
        </div>
      </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...' : (isEditing ? 'Update Item' : 'Create Item')"></span>
      </button>
    </div>
  </div>
</div>