clqms-be/app/Views/v2/master/organization/workstation_dialog.php

<!-- Workstation 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-xl 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-desktop" style="color: rgb(var(--color-primary));"></i>
        <span x-text="isEditing ? 'Edit Workstation' : 'New Workstation'"></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">
      
      <div>
        <label class="label">
          <span class="label-text font-medium">Workstation Name <span style="color: rgb(var(--color-error));">*</span></span>
        </label>
        <input 
          type="text" 
          class="input"
          :class="errors.WorkstationName && 'input-error'"
          x-model="form.WorkstationName"
          placeholder="Chemistry Analyzer 1"
        />
        <label class="label" x-show="errors.WorkstationName">
          <span class="label-text-alt" style="color: rgb(var(--color-error));" x-text="errors.WorkstationName"></span>
        </label>
      </div>

      <div class="grid grid-cols-2 gap-4">
        <div>
          <label class="label">
            <span class="label-text font-medium">Workstation Code <span style="color: rgb(var(--color-error));">*</span></span>
          </label>
          <input 
            type="text" 
            class="input font-mono"
            :class="errors.WorkstationCode && 'input-error'"
            x-model="form.WorkstationCode"
            placeholder="WS-CH-01"
          />
          <label class="label" x-show="errors.WorkstationCode">
            <span class="label-text-alt" style="color: rgb(var(--color-error));" x-text="errors.WorkstationCode"></span>
          </label>
        </div>
        <div>
          <label class="label">
            <span class="label-text font-medium">Department</span>
          </label>
          <select class="select" x-model="form.DepartmentID">
            <option value="">Select Department</option>
            <template x-for="d in departmentsList" :key="d.DepartmentID">
              <option :value="d.DepartmentID" x-text="d.DepartmentName"></option>
            </template>
          </select>
        </div>
      </div>

      <div class="grid grid-cols-2 gap-4">
        <div>
          <label class="label">
            <span class="label-text font-medium">Type</span>
          </label>
          <select class="select" x-model="form.Type">
            <option value="">Select Type</option>
            <option value="1">Manual</option>
            <option value="2">Automated</option>
          </select>
        </div>
        <div>
          <label class="label">
            <span class="label-text font-medium">Status</span>
          </label>
          <select class="select" x-model="form.Enable">
            <option value="1">Enabled</option>
            <option value="0">Disabled</option>
          </select>
        </div>
      </div>

      <div>
        <label class="label">
          <span class="label-text font-medium">Link To Workstation</span>
        </label>
        <select class="select" x-model="form.LinkTo">
          <option value="">None</option>
          <template x-for="w in list" :key="w.WorkstationID">
            <option :value="w.WorkstationID" x-text="w.WorkstationName" :disabled="w.WorkstationID == form.WorkstationID"></option>
          </template>
        </select>
      </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 Workstation'"></span>
      </button>
    </div>
  </div>
</div>