dashboard-ticketing/resources/js/Pages/Ticketing/Edit.vue

<template>
  <AppLayout :title="`Edit Ticket #${ticket.id}`">
    <div class="p-6 max-w-2xl">
      <div class="flex items-center gap-3 mb-6">
        <Link :href="route('ticketing.show', ticket.id)" class="text-sm text-gray-500 hover:underline">← Ticket #{{ ticket.id }}</Link>
        <h1 class="text-2xl font-bold text-gray-900">Edit Ticket</h1>
      </div>

      <form @submit.prevent="submit" class="bg-white rounded-xl shadow p-6 space-y-5">
        <!-- Title -->
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">Title <span class="text-red-500">*</span></label>
          <input
            v-model="form.title"
            type="text"
            maxlength="255"
            class="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400"
            :class="{ 'border-red-400': errors.title }"
          />
          <p v-if="errors.title" class="mt-1 text-xs text-red-500">{{ errors.title }}</p>
        </div>

        <!-- Description -->
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">Description <span class="text-red-500">*</span></label>
          <textarea
            v-model="form.description"
            rows="5"
            class="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400"
            :class="{ 'border-red-400': errors.description }"
          />
          <p v-if="errors.description" class="mt-1 text-xs text-red-500">{{ errors.description }}</p>
        </div>

        <!-- Category + Priority -->
        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Category <span class="text-red-500">*</span></label>
            <select
              v-model="form.category"
              class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400"
              :class="{ 'border-red-400': errors.category }"
            >
              <option value="IT">IT</option>
              <option value="Facilities">Facilities</option>
              <option value="HR">HR</option>
              <option value="Other">Other</option>
            </select>
            <p v-if="errors.category" class="mt-1 text-xs text-red-500">{{ errors.category }}</p>
          </div>

          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Priority <span class="text-red-500">*</span></label>
            <select
              v-model="form.priority"
              class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400"
              :class="{ 'border-red-400': errors.priority }"
            >
              <option value="low">Low</option>
              <option value="medium">Medium</option>
              <option value="high">High</option>
              <option value="urgent">Urgent</option>
            </select>
            <p v-if="errors.priority" class="mt-1 text-xs text-red-500">{{ errors.priority }}</p>
          </div>
        </div>

        <!-- Admin-only: Status + Assigned To -->
        <template v-if="isAdmin">
          <div class="grid grid-cols-2 gap-4">
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">Status</label>
              <select
                v-model="form.status"
                class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400"
              >
                <option value="open">Open</option>
                <option value="in_progress">In Progress</option>
                <option value="resolved">Resolved</option>
                <option value="closed">Closed</option>
              </select>
            </div>
          </div>
        </template>

        <div class="flex justify-between items-center pt-2">
          <button
            type="button"
            @click="destroy"
            class="px-4 py-2 text-sm text-red-600 hover:text-red-800 transition"
          >
            Delete Ticket
          </button>
          <div class="flex gap-3">
            <Link :href="route('ticketing.show', ticket.id)" class="px-4 py-2 text-sm text-gray-600 bg-gray-100 hover:bg-gray-200 rounded-lg transition">
              Cancel
            </Link>
            <button
              type="submit"
              :disabled="processing"
              class="px-5 py-2 text-sm text-white rounded-lg transition disabled:opacity-50"
              style="background-color: var(--color-sidebar-active-bg)"
            >
              {{ processing ? 'Saving…' : 'Save Changes' }}
            </button>
          </div>
        </div>
      </form>
    </div>
  </AppLayout>
</template>

<script setup>
import { ref } from 'vue'
import { Link, useForm, router } from '@inertiajs/vue3'
import AppLayout from '@/Layouts/AppLayout.vue'

const props = defineProps({
  ticket:  Object,
  isAdmin: { type: Boolean, default: false },
})

const form = useForm({
  title:       props.ticket.title,
  description: props.ticket.description,
  category:    props.ticket.category,
  priority:    props.ticket.priority,
  status:      props.ticket.status,
  assigned_to: props.ticket.assigned_to ?? '',
})

const processing = ref(false)
const errors = ref({})

function submit() {
  processing.value = true
  form.put(route('ticketing.update', props.ticket.id), {
    onError:  (e) => { errors.value = e },
    onFinish: () => { processing.value = false },
  })
}

function destroy() {
  if (!confirm('Delete this ticket? This cannot be undone.')) return
  router.delete(route('ticketing.destroy', props.ticket.id))
}
</script>