eamco_office_frontend/src/pages/service/ServiceEditModal.vue

<!-- src/pages/service/ServiceEditModal.vue -->
<template>
  <!-- Modal Overlay -->
  <div class="fixed inset-0 bg-gray-800 bg-opacity-75 flex items-center justify-center z-50">
    <!-- Modal Content -->
    <!-- 1. Reduced max-width for a more compact modal -->
    <div class="relative bg-base-100 text-base-content p-6 rounded-lg shadow-xl w-full max-w-3xl">
      
      <!-- Modal Header -->
      <div class="flex justify-between items-center border-b border-gray-700 pb-3 mb-4">
        <h3 class="text-2xl font-bold">Service Call</h3>
        <span class="font-bold text-white px-3 py-1 mr-10 rounded" :style="{ backgroundColor: getServiceTypeColor(editableService.type_service_call) }">
          {{ getServiceTypeName(editableService.type_service_call) }}
        </span>
      </div>

      <button @click="$emit('close-modal')" type="button" class="absolute top-0 right-0 mt-4 mr-4 text-gray-500 hover:text-white focus:outline-none" aria-label="Close modal">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
      </button>

      <!-- Customer & Parts Info Section (Remains the same) -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
        <div v-if="customer" class="p-4 bg-base-200 rounded-md">
          <div class="flex justify-between items-center font-bold text-lg">
            <div>{{ customer.account_number }}</div>
            <router-link :to="{ name: 'customerProfile', params: { id: customer.id } }" class="btn btn-sm btn-primary">Profile</router-link>
          </div>
          <div class="text-sm">{{ customer.customer_first_name }} {{ customer.customer_last_name }}</div>
          <div class="text-sm">{{ customer.customer_address }}</div>
          <div class="text-sm">{{ customer.customer_town }}, {{ getStateAbbrev(customer.customer_state) }} {{ customer.customer_zip }}</div>
          <div class="text-sm mt-1">{{ customer.customer_phone_number }}</div>
        </div>
        <div v-else class="p-4 bg-base-200 rounded-md text-center"><p>Loading customer details...</p></div>
        <div v-if="!isLoadingParts && serviceParts" class="p-4 bg-base-200 rounded-md">
          <h4 class="font-bold text-lg mb-2">Service Parts on File</h4>
          <div class="grid grid-cols-2 gap-x-4 gap-y-2 text-sm">
            <div><label class="block text-xs font-medium opacity-70">Oil Filter</label><p class="font-semibold">{{ serviceParts.oil_filter || 'N/A' }}</p></div>
            <div><label class="block text-xs font-medium opacity-70">Oil Filter 2</label><p class="font-semibold">{{ serviceParts.oil_filter_2 || 'N/A' }}</p></div>
            <div><label class="block text-xs font-medium opacity-70">Oil Nozzle</label><p class="font-semibold">{{ serviceParts.oil_nozzle || 'N/A' }}</p></div>
            <div><label class="block text-xs font-medium opacity-70">Oil Nozzle 2</label><p class="font-semibold">{{ serviceParts.oil_nozzle_2 || 'N/A' }}</p></div>
          </div>
        </div>
        <div v-else class="p-4 bg-base-200 rounded-md text-center"><p>Loading service parts...</p></div>
      </div>
      
      <!-- ===================================================================== -->
      <!-- ============== 2. Re-organized Form into a Compact Grid ============= -->
      <!-- ===================================================================== -->
      <form @submit.prevent="saveChanges">
        <!-- New grid container for all form fields -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4">
          
          <!-- Scheduled Date -->
          <div>
            <label for="edit-date" class="block text-sm font-medium">Scheduled Date</label>
            <input type="date" id="edit-date" v-model="editableService.date" required class="input input-bordered w-full mt-1">
          </div>
          
          <!-- Scheduled Time -->
          <div>
            <label for="edit-time" class="block text-sm font-medium">Scheduled Time</label>
            <select id="edit-time" v-model.number="editableService.time" class="select select-bordered w-full mt-1">
              <option v-for="hour in 24" :key="hour" :value="hour - 1">{{ (hour - 1).toString().padStart(2, '0') }}:00</option>
            </select>
          </div>
          
          <!-- Type of Service -->
          <div>
            <label for="edit-service-type" class="block text-sm font-medium">Type of Service</label>
            <select id="edit-service-type" v-model.number="editableService.type_service_call" required class="select select-bordered w-full mt-1">
              <option v-for="option in serviceOptions" :key="option.value" :value="option.value">{{ option.text }}</option>
            </select>
          </div>

          <!-- Total Cost -->
          <div>
            <label for="edit-service-cost" class="block text-sm font-medium">Total</label>
            <input type="number" step="0.01" placeholder="" id="edit-service-cost" v-model="editableService.service_cost"  class="input input-bordered w-full mt-1">
          </div>
          
          <!-- Description (Spans full width of the grid) -->
          <div class="md:col-span-2">
            <label for="edit-description" class="block text-sm font-medium">Description</label>
            <textarea id="edit-description" v-model="editableService.description" rows="4" required class="textarea textarea-bordered w-full mt-1"></textarea>
          </div>

        </div>

        <!-- Buttons -->
        <div class="mt-6 flex justify-between items-center">
          <button @click.prevent="confirmDelete" type="button" class="btn btn-error">Delete Call</button>
          <div class="flex space-x-3">
            <button @click.prevent="$emit('close-modal')" type="button" class="btn btn-ghost">Cancel</button>
            <button type="submit" class="btn btn-primary">Save Changes</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import dayjs from 'dayjs';
import serviceService from '../../services/serviceService';
import customerService from '../../services/customerService';

// --- Interfaces ---
interface ServiceCall { id: number; scheduled_date: string; customer_id: number; customer_name: string; customer_address: string; customer_town: string; type_service_call: number; description: string; service_cost: string }
interface EditableService extends Omit<ServiceCall, 'scheduled_date'> { date: string; time: number; }
interface Customer { id: number; account_number: string; customer_first_name: string; customer_last_name: string; customer_address: string; customer_town: string; customer_state: number; customer_zip: string; customer_phone_number: string; }
interface ServiceParts { customer_id: number; oil_filter: string; oil_filter_2: string; oil_nozzle: string; oil_nozzle_2: string; }

// Props and Emits
const props = defineProps<{
  service: Partial<ServiceCall>
}>()

const emit = defineEmits<{
  'close-modal': []
  'save-changes': [service: ServiceCall]
  'delete-service': [serviceId: number]
}>()

// Reactive data
const editableService = ref({} as Partial<EditableService>)
const customer = ref(null as Customer | null)
const serviceParts = ref(null as ServiceParts | null)
const isLoadingParts = ref(true)
const serviceOptions = ref([
  { text: 'Tune-up', value: 0 }, { text: 'No Heat', value: 1 }, { text: 'Fix', value: 2 },
  { text: 'Tank Install', value: 3 }, { text: 'Other', value: 4 },
])

// Functions (defined before watchers to avoid hoisting issues)
const getCustomer = (customerId: number) => {
  customer.value = null;
  customerService.getById(customerId)
    .then((response: any) => { 
        if (response.data.customer) {
            customer.value = response.data.customer;
        } else if (response.data.ok && response.data.id) {
             customer.value = response.data as unknown as Customer;
        }
    })
    .catch((error: any) => { console.error("Failed to fetch customer details for modal:", error); });
}

const getServiceParts = (customerId: number) => {
  isLoadingParts.value = true;
  serviceParts.value = null;
  serviceService.getPartsForCustomer(customerId)
    .then((response: any) => { 
         if (response.data.parts) {
            if (Array.isArray(response.data.parts) && response.data.parts.length > 0) {
                 serviceParts.value = response.data.parts[0];
            } else {
                 serviceParts.value = response.data.parts as unknown as ServiceParts; 
            }
        }
    })
    .catch((error: any) => { console.error("Failed to fetch service parts:", error); })
    .finally(() => { isLoadingParts.value = false; });
}

const saveChanges = async () => {
  const date = editableService.value.date;
  const time = editableService.value.time || 0;
  const combinedDateTime = dayjs(`${date} ${time}:00`).format('YYYY-MM-DDTHH:mm:ss');
  const finalPayload = { ...props.service, ...editableService.value, scheduled_date: combinedDateTime };

  try {
    await serviceService.update(finalPayload.id!, finalPayload);
    emit('save-changes', finalPayload as ServiceCall);
  } catch (error) {
     console.error("Failed to save changes:", error);
    alert("An error occurred while saving. Please check the console.");
  }
}

const confirmDelete = () => {
  if (props.service.id && window.confirm(`Are you sure you want to delete this service call?`)) {
    emit('delete-service', props.service.id);
  }
}

const getServiceTypeName = (typeId: number | undefined | null): string => {
  if (typeId === undefined || typeId === null) return 'Unknown';
  const typeMap: { [key: number]: string } = { 0: 'Tune-up', 1: 'No Heat', 2: 'Fix', 3: 'Tank Install', 4: 'Other' };
  return typeMap[typeId] || 'Unknown';
}

const getServiceTypeColor = (typeId: number | undefined | null): string => {
  if (typeId === undefined || typeId === null) return 'gray';
  const colorMap: { [key: number]: string } = { 0: 'blue', 1: 'red', 2: 'green', 3: '#B58900', 4: 'black' };
  return colorMap[typeId] || 'gray';
}

const getStateAbbrev = (stateId: number | undefined | null): string => {
  if (stateId === undefined || stateId === null) return 'Unknown';
  const stateMap: { [key: number]: string } = { 0: 'MA', 1: 'RI', 2: 'NH', 3: 'ME', 4: 'VT', 5: 'CT', 6: 'NY' };
  return stateMap[stateId] || 'Unknown';
}

// Watchers (after function definitions)
watch(() => props.service, (newVal) => {
  if (!newVal) return;
  const scheduled = dayjs(newVal.scheduled_date || new Date());
  editableService.value = { ...newVal, date: scheduled.format('YYYY-MM-DD'), time: scheduled.hour() };
  if (newVal.customer_id) {
    getCustomer(newVal.customer_id);
    getServiceParts(newVal.customer_id);
  }
}, { immediate: true, deep: true })
</script>