clqms-be/app/Views/patients/dialog_form.php

<!-- Patient Form Modal -->
<dialog id="patient_modal" class="modal" :class="showModal && 'modal-open'">
  <div class="modal-box w-11/12 max-w-2xl bg-base-100">
    <!-- Header -->
    <div class="flex items-center justify-between mb-4">
      <h3 class="font-bold text-lg flex items-center gap-2">
        <i class="fa-solid fa-user-plus text-primary"></i>
        <span x-text="isEditing ? 'Edit Patient' : 'New Patient'"></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">
      <!-- Patient ID -->
      <div class="form-control">
        <label class="label">
          <span class="label-text font-medium">Patient ID (MRN)</span>
        </label>
        <input 
          type="text" 
          class="input input-bordered" 
          placeholder="Auto-generated if empty"
          x-model="form.PatientID"
        />
      </div>

      <!-- Name Row -->
      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div class="form-control">
          <label class="label">
            <span class="label-text font-medium">First Name <span class="text-error">*</span></span>
          </label>
          <input 
            type="text" 
            class="input input-bordered"
            :class="errors.NameFirst && 'input-error'"
            x-model="form.NameFirst"
          />
          <label class="label" x-show="errors.NameFirst">
            <span class="label-text-alt text-error" x-text="errors.NameFirst"></span>
          </label>
        </div>
        
        <div class="form-control">
          <label class="label">
            <span class="label-text font-medium">Middle Name</span>
          </label>
          <input 
            type="text" 
            class="input input-bordered"
            x-model="form.NameMiddle"
          />
        </div>
        
        <div class="form-control">
          <label class="label">
            <span class="label-text font-medium">Last Name <span class="text-error">*</span></span>
          </label>
          <input 
            type="text" 
            class="input input-bordered"
            :class="errors.NameLast && 'input-error'"
            x-model="form.NameLast"
          />
          <label class="label" x-show="errors.NameLast">
            <span class="label-text-alt text-error" x-text="errors.NameLast"></span>
          </label>
        </div>
      </div>

      <!-- Gender & Birthdate -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="form-control">
          <label class="label">
            <span class="label-text font-medium">Gender</span>
          </label>
          <select class="select select-bordered" x-model="form.Gender">
            <option value="1">Male</option>
            <option value="2">Female</option>
          </select>
        </div>
        
        <div class="form-control">
          <label class="label">
            <span class="label-text font-medium">Birth Date</span>
          </label>
          <input 
            type="date" 
            class="input input-bordered"
            x-model="form.Birthdate"
          />
        </div>
      </div>

      <!-- Contact Info -->
      <div class="divider">Contact Information</div>
      
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="form-control">
          <label class="label">
            <span class="label-text font-medium">Mobile Phone</span>
          </label>
          <input 
            type="tel" 
            class="input input-bordered"
            placeholder="+62..."
            x-model="form.MobilePhone"
          />
        </div>
        
        <div class="form-control">
          <label class="label">
            <span class="label-text font-medium">Email</span>
          </label>
          <input 
            type="email" 
            class="input input-bordered"
            placeholder="patient@email.com"
            x-model="form.EmailAddress1"
          />
        </div>
      </div>

      <!-- Address -->
      <div class="divider">Address</div>
      
      <div class="form-control">
        <label class="label">
          <span class="label-text font-medium">Street Address</span>
        </label>
        <input 
          type="text" 
          class="input input-bordered"
          x-model="form.Street_1"
        />
      </div>
      
      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div class="form-control">
          <label class="label">
            <span class="label-text font-medium">City</span>
          </label>
          <input 
            type="text" 
            class="input input-bordered"
            x-model="form.City"
          />
        </div>
        
        <div class="form-control">
          <label class="label">
            <span class="label-text font-medium">Province</span>
          </label>
          <input 
            type="text" 
            class="input input-bordered"
            x-model="form.Province"
          />
        </div>
        
        <div class="form-control">
          <label class="label">
            <span class="label-text font-medium">ZIP Code</span>
          </label>
          <input 
            type="text" 
            class="input input-bordered"
            x-model="form.ZIP"
          />
        </div>
      </div>
    </div>

    <!-- Actions -->
    <div class="modal-action">
      <button class="btn btn-ghost" @click="closeModal()">Cancel</button>
      <button class="btn btn-primary" @click="save()" :disabled="saving">
        <span x-show="saving" class="loading loading-spinner loading-sm"></span>
        <i x-show="!saving" class="fa-solid fa-save mr-1"></i>
        <span x-text="saving ? 'Saving...' : 'Save Patient'"></span>
      </button>
    </div>
  </div>
  <div class="modal-backdrop bg-black/50" @click="closeModal()"></div>
</dialog>