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

<template>
  <div class="max-w-5xl mx-auto py-8 px-4">
    <div class="mb-6">
      <Link :href="route('ticketing.index')" class="text-sm text-indigo-600 hover:underline">← Back to tickets</Link>
      <h1 class="text-2xl font-bold text-gray-900 mt-2">Ticketing Settings</h1>
    </div>

    <div v-if="isBootstrap" class="mb-6 px-5 py-4 bg-amber-50 border border-amber-300 rounded-xl">
      <h2 class="text-base font-semibold text-amber-800 mb-1">🚀 First-Run Setup</h2>
      <p class="text-sm text-amber-700">
        No groups exist yet. Create your first group below to get started.
        Default priorities (Low, Medium, High, Urgent) will be seeded automatically.
      </p>
    </div>

    <div v-if="$page.props.flash?.success" class="mb-4 px-4 py-2 bg-green-50 border border-green-200 text-green-700 rounded-lg text-sm">
      {{ $page.props.flash.success }}
    </div>

    <div v-if="$page.props.errors?.priority" class="mb-4 px-4 py-2 bg-red-50 border border-red-200 text-red-700 rounded-lg text-sm">
      {{ $page.props.errors.priority }}
    </div>

    <div v-if="$page.props.errors?.project" class="mb-4 px-4 py-2 bg-red-50 border border-red-200 text-red-700 rounded-lg text-sm">
      {{ $page.props.errors.project }}
    </div>

    <div class="flex gap-1 border-b border-gray-200 mb-6">
      <button
        v-for="tab in tabs"
        :key="tab.key"
        @click="activeTab = tab.key"
        :class="[
          'px-4 py-2.5 text-sm font-medium border-b-2 transition',
          activeTab === tab.key
            ? 'border-indigo-600 text-indigo-600'
            : 'border-transparent text-gray-500 hover:text-gray-700'
        ]"
      >{{ tab.label }}</button>
    </div>

    <div v-if="activeTab === 'groups'">
      <div class="flex justify-between items-center mb-4">
        <h2 class="text-lg font-semibold text-gray-800">Groups</h2>
        <button @click="showAddGroup = !showAddGroup" class="text-sm text-indigo-600 hover:underline">
          {{ showAddGroup ? 'Cancel' : '+ Add Group' }}
        </button>
      </div>

      <div v-if="showAddGroup" class="bg-gray-50 rounded-xl p-4 mb-5 space-y-3">
        <h3 class="text-sm font-semibold text-gray-700">New Group</h3>
        <form @submit.prevent="submitGroup" class="grid grid-cols-2 gap-3">
          <div>
            <label class="block text-xs text-gray-500 mb-1">Name</label>
            <input v-model="groupForm.name" required type="text" class="w-full text-sm border-gray-300 rounded-lg" />
          </div>
          <div>
            <label class="block text-xs text-gray-500 mb-1">Prefix (e.g. IT)</label>
            <input v-model="groupForm.prefix" required type="text" maxlength="10" class="w-full text-sm border-gray-300 rounded-lg uppercase" />
          </div>
          <div>
            <label class="block text-xs text-gray-500 mb-1">Email Address</label>
            <input v-model="groupForm.email_address" type="email" class="w-full text-sm border-gray-300 rounded-lg" />
          </div>
          <div>
            <label class="block text-xs text-gray-500 mb-1">Color</label>
            <input v-model="groupForm.color" type="color" class="h-9 w-full border-gray-300 rounded-lg cursor-pointer" />
          </div>
          <div class="col-span-2 flex justify-end">
            <button type="submit" :disabled="groupForm.processing" class="bg-indigo-600 text-white text-sm px-4 py-2 rounded-lg hover:bg-indigo-700 disabled:opacity-60">
              Create Group
            </button>
          </div>
        </form>
      </div>

      <div class="space-y-3">
        <div v-if="groups.length === 0" class="text-sm text-gray-400 italic">No groups yet.</div>
        <div
          v-for="group in groups"
          :key="group.id"
          class="flex items-center justify-between px-4 py-3 bg-white border border-gray-200 rounded-xl"
        >
          <div class="flex items-center gap-3">
            <span class="w-3 h-3 rounded-full" :style="{ backgroundColor: group.color }"></span>
            <div>
              <p class="font-medium text-sm text-gray-800">{{ group.name }}</p>
              <p class="text-xs text-gray-400">{{ group.prefix }} · {{ group.email_address || 'No email' }}</p>
            </div>
          </div>
          <button @click="startEditGroup(group)" class="text-xs text-indigo-600 hover:underline">Edit</button>
        </div>
      </div>

      <div v-if="editingGroup" class="mt-4 bg-gray-50 rounded-xl p-4 space-y-3">
        <h3 class="text-sm font-semibold text-gray-700">Edit: {{ editingGroup.name }}</h3>
        <form @submit.prevent="submitEditGroup" class="grid grid-cols-2 gap-3">
          <div>
            <label class="block text-xs text-gray-500 mb-1">Name</label>
            <input v-model="editGroupForm.name" required type="text" class="w-full text-sm border-gray-300 rounded-lg" />
          </div>
          <div>
            <label class="block text-xs text-gray-500 mb-1">Prefix</label>
            <input v-model="editGroupForm.prefix" required type="text" maxlength="10" class="w-full text-sm border-gray-300 rounded-lg uppercase" />
          </div>
          <div>
            <label class="block text-xs text-gray-500 mb-1">Email Address</label>
            <input v-model="editGroupForm.email_address" type="email" class="w-full text-sm border-gray-300 rounded-lg" />
          </div>
          <div>
            <label class="block text-xs text-gray-500 mb-1">Color</label>
            <input v-model="editGroupForm.color" type="color" class="h-9 w-full border-gray-300 rounded-lg cursor-pointer" />
          </div>
          <div class="col-span-2 flex justify-end gap-2">
            <button type="button" @click="editingGroup = null" class="text-sm text-gray-500 px-3 py-2 rounded-lg border border-gray-300 hover:bg-gray-100">Cancel</button>
            <button type="submit" :disabled="editGroupForm.processing" class="bg-indigo-600 text-white text-sm px-4 py-2 rounded-lg hover:bg-indigo-700 disabled:opacity-60">Save</button>
          </div>
        </form>
      </div>
    </div>

    <div v-if="activeTab === 'agents'">
      <div class="flex justify-between items-center mb-4">
        <h2 class="text-lg font-semibold text-gray-800">Agents</h2>
        <button @click="showAddAgent = !showAddAgent" class="text-sm text-indigo-600 hover:underline">
          {{ showAddAgent ? 'Cancel' : '+ Add Agent' }}
        </button>
      </div>

      <div v-if="showAddAgent" class="bg-gray-50 rounded-xl p-4 mb-5 space-y-3">
        <form @submit.prevent="submitAgent" class="grid grid-cols-3 gap-3">
          <div>
            <label class="block text-xs text-gray-500 mb-1">User ID</label>
            <input v-model="agentForm.user_id" required type="number" placeholder="User ID" class="w-full text-sm border-gray-300 rounded-lg" />
          </div>
          <div>
            <label class="block text-xs text-gray-500 mb-1">Group</label>
            <select v-model="agentForm.group_id" required class="w-full text-sm border-gray-300 rounded-lg">
              <option value="">Select group</option>
              <option v-for="g in groups" :key="g.id" :value="g.id">{{ g.name }}</option>
            </select>
          </div>
          <div>
            <label class="block text-xs text-gray-500 mb-1">Role</label>
            <select v-model="agentForm.role" class="w-full text-sm border-gray-300 rounded-lg">
              <option value="agent">Agent</option>
              <option value="manager">Manager</option>
            </select>
          </div>
          <div class="col-span-3 flex justify-end">
            <button type="submit" :disabled="agentForm.processing" class="bg-indigo-600 text-white text-sm px-4 py-2 rounded-lg hover:bg-indigo-700 disabled:opacity-60">
              Add Agent
            </button>
          </div>
        </form>
      </div>

      <div class="space-y-2">
        <div v-if="agents.length === 0" class="text-sm text-gray-400 italic">No agents configured yet.</div>
        <div
          v-for="access in agents"
          :key="access.id"
          class="flex items-center justify-between px-4 py-2.5 bg-white border border-gray-200 rounded-xl"
        >
          <div>
            <p class="text-sm font-medium text-gray-800">{{ access.user?.name || 'User #' + access.user_id }}</p>
            <p class="text-xs text-gray-400">{{ access.user?.email }} · {{ access.group?.name || 'Unknown Group' }} · <span class="capitalize">{{ access.role }}</span></p>
          </div>
          <button @click="openRemoveAgentModal(access)" class="text-xs text-red-500 hover:underline">Remove</button>
        </div>
      </div>
    </div>

    <div v-if="activeTab === 'priorities'">
      <div class="flex justify-between items-center mb-4">
        <h2 class="text-lg font-semibold text-gray-800">Priority Levels</h2>
        <button @click="showAddPriority = !showAddPriority" class="text-sm text-indigo-600 hover:underline">
          {{ showAddPriority ? 'Cancel' : '+ Add Priority' }}
        </button>
      </div>

      <div v-if="showAddPriority" class="bg-gray-50 rounded-xl p-4 mb-5 space-y-3">
        <form @submit.prevent="submitPriority" class="grid grid-cols-2 gap-3">
          <div>
            <label class="block text-xs text-gray-500 mb-1">Name</label>
            <input v-model="priorityForm.name" required type="text" class="w-full text-sm border-gray-300 rounded-lg" />
          </div>
          <div>
            <label class="block text-xs text-gray-500 mb-1">Color</label>
            <input v-model="priorityForm.color" type="color" class="h-9 w-full border-gray-300 rounded-lg cursor-pointer" />
          </div>
          <div class="col-span-2">
            <label class="block text-xs text-gray-500 mb-1">Description</label>
            <input v-model="priorityForm.description" type="text" class="w-full text-sm border-gray-300 rounded-lg" />
          </div>
          <div>
            <label class="block text-xs text-gray-500 mb-1">Sort Order</label>
            <input v-model="priorityForm.sort_order" type="number" min="0" class="w-full text-sm border-gray-300 rounded-lg" />
          </div>
          <div>
            <label class="block text-xs text-gray-500 mb-1">Group (blank = global)</label>
            <select v-model="priorityForm.group_id" class="w-full text-sm border-gray-300 rounded-lg">
              <option :value="null">Global</option>
              <option v-for="g in groups" :key="g.id" :value="g.id">{{ g.name }}</option>
            </select>
          </div>
          <div class="col-span-2 flex justify-end">
            <button type="submit" :disabled="priorityForm.processing" class="bg-indigo-600 text-white text-sm px-4 py-2 rounded-lg hover:bg-indigo-700 disabled:opacity-60">
              Create Priority
            </button>
          </div>
        </form>
      </div>

      <div class="space-y-2">
        <div v-if="priorities.length === 0" class="text-sm text-gray-400 italic">No priorities defined yet.</div>
        <div
          v-for="p in priorities"
          :key="p.id"
          class="flex items-center gap-3 px-4 py-2.5 bg-white border border-gray-200 rounded-xl"
        >
          <span class="w-3 h-3 rounded-full flex-shrink-0" :style="{ backgroundColor: p.color }"></span>
          <div class="flex-1">
            <p class="text-sm font-medium text-gray-800">{{ p.name }}</p>
            <p v-if="p.description" class="text-xs text-gray-400">{{ p.description }}</p>
          </div>
          <span class="text-xs text-gray-400">{{ p.group_id ? 'Group-specific' : 'Global' }}</span>
          <div class="flex items-center gap-3">
            <button @click="startEditPriority(p)" class="text-xs text-indigo-600 hover:underline">Edit</button>
            <button @click="openDeletePriorityModal(p)" class="text-xs text-red-500 hover:underline">Delete</button>
          </div>
        </div>
      </div>

      <div v-if="editingPriority" class="mt-4 bg-gray-50 rounded-xl p-4 space-y-3">
        <h3 class="text-sm font-semibold text-gray-700">Edit Priority: {{ editingPriority.name }}</h3>
        <form @submit.prevent="submitEditPriority" class="grid grid-cols-2 gap-3">
          <div>
            <label class="block text-xs text-gray-500 mb-1">Name</label>
            <input v-model="editPriorityForm.name" required type="text" class="w-full text-sm border-gray-300 rounded-lg" />
          </div>
          <div>
            <label class="block text-xs text-gray-500 mb-1">Color</label>
            <input v-model="editPriorityForm.color" type="color" class="h-9 w-full border-gray-300 rounded-lg cursor-pointer" />
          </div>
          <div class="col-span-2">
            <label class="block text-xs text-gray-500 mb-1">Description</label>
            <input v-model="editPriorityForm.description" type="text" class="w-full text-sm border-gray-300 rounded-lg" />
          </div>
          <div>
            <label class="block text-xs text-gray-500 mb-1">Sort Order</label>
            <input v-model="editPriorityForm.sort_order" type="number" min="0" class="w-full text-sm border-gray-300 rounded-lg" />
          </div>
          <div>
            <label class="block text-xs text-gray-500 mb-1">Scope</label>
            <input :value="editingPriority.group_id ? 'Group-specific' : 'Global'" disabled type="text" class="w-full text-sm border-gray-300 rounded-lg opacity-70" />
          </div>
          <div class="col-span-2 flex justify-end gap-2">
            <button type="button" @click="editingPriority = null" class="text-sm text-gray-500 px-3 py-2 rounded-lg border border-gray-300 hover:bg-gray-100">Cancel</button>
            <button type="submit" :disabled="editPriorityForm.processing" class="bg-indigo-600 text-white text-sm px-4 py-2 rounded-lg hover:bg-indigo-700 disabled:opacity-60">Save</button>
          </div>
        </form>
      </div>
    </div>

    <div v-if="activeTab === 'projects'">
      <div class="flex justify-between items-center mb-4">
        <h2 class="text-lg font-semibold text-gray-800">Projects</h2>
        <button @click="showAddProject = !showAddProject" class="text-sm text-indigo-600 hover:underline">
          {{ showAddProject ? 'Cancel' : '+ Add Project' }}
        </button>
      </div>

      <div v-if="showAddProject" class="bg-gray-50 rounded-xl p-4 mb-5 space-y-3">
        <form @submit.prevent="submitProject" class="grid grid-cols-2 gap-3">
          <div>
            <label class="block text-xs text-gray-500 mb-1">Group</label>
            <select v-model="projectForm.group_id" required class="w-full text-sm border-gray-300 rounded-lg">
              <option value="">Select group</option>
              <option v-for="g in groups" :key="g.id" :value="g.id">{{ g.name }}</option>
            </select>
          </div>
          <div>
            <label class="block text-xs text-gray-500 mb-1">Status</label>
            <select v-model="projectForm.status" class="w-full text-sm border-gray-300 rounded-lg">
              <option value="active">Active</option>
              <option value="archived">Archived</option>
            </select>
          </div>
          <div class="col-span-2">
            <label class="block text-xs text-gray-500 mb-1">Name</label>
            <input v-model="projectForm.name" required type="text" class="w-full text-sm border-gray-300 rounded-lg" />
          </div>
          <div class="col-span-2">
            <label class="block text-xs text-gray-500 mb-1">Description</label>
            <textarea v-model="projectForm.description" rows="3" class="w-full text-sm border-gray-300 rounded-lg"></textarea>
          </div>
          <div class="col-span-2 flex justify-end">
            <button type="submit" :disabled="projectForm.processing" class="bg-indigo-600 text-white text-sm px-4 py-2 rounded-lg hover:bg-indigo-700 disabled:opacity-60">
              Create Project
            </button>
          </div>
        </form>
      </div>

      <div class="space-y-2">
        <div v-if="projects.length === 0" class="text-sm text-gray-400 italic">No projects defined yet.</div>
        <div
          v-for="project in projects"
          :key="project.id"
          class="flex items-center gap-3 px-4 py-3 bg-white border border-gray-200 rounded-xl"
        >
          <div class="flex-1">
            <p class="text-sm font-medium text-gray-800">{{ project.name }}</p>
            <p class="text-xs text-gray-400">{{ groups.find(g => g.id === project.group_id)?.name || 'Unknown Group' }} · {{ project.status }}</p>
            <p v-if="project.description" class="text-xs text-gray-500 mt-1">{{ project.description }}</p>
          </div>
          <div class="flex items-center gap-3">
            <button @click="startEditProject(project)" class="text-xs text-indigo-600 hover:underline">Edit</button>
            <button @click="openDeleteProjectModal(project)" class="text-xs text-red-500 hover:underline">Delete</button>
          </div>
        </div>
      </div>

      <div v-if="editingProject" class="mt-4 bg-gray-50 rounded-xl p-4 space-y-3">
        <h3 class="text-sm font-semibold text-gray-700">Edit Project: {{ editingProject.name }}</h3>
        <form @submit.prevent="submitEditProject" class="grid grid-cols-2 gap-3">
          <div class="col-span-2">
            <label class="block text-xs text-gray-500 mb-1">Name</label>
            <input v-model="editProjectForm.name" required type="text" class="w-full text-sm border-gray-300 rounded-lg" />
          </div>
          <div>
            <label class="block text-xs text-gray-500 mb-1">Status</label>
            <select v-model="editProjectForm.status" class="w-full text-sm border-gray-300 rounded-lg">
              <option value="active">Active</option>
              <option value="archived">Archived</option>
            </select>
          </div>
          <div>
            <label class="block text-xs text-gray-500 mb-1">Group</label>
            <input :value="groups.find(g => g.id === editingProject.group_id)?.name || 'Unknown Group'" disabled type="text" class="w-full text-sm border-gray-300 rounded-lg opacity-70" />
          </div>
          <div class="col-span-2">
            <label class="block text-xs text-gray-500 mb-1">Description</label>
            <textarea v-model="editProjectForm.description" rows="3" class="w-full text-sm border-gray-300 rounded-lg"></textarea>
          </div>
          <div class="col-span-2 flex justify-end gap-2">
            <button type="button" @click="editingProject = null" class="text-sm text-gray-500 px-3 py-2 rounded-lg border border-gray-300 hover:bg-gray-100">Cancel</button>
            <button type="submit" :disabled="editProjectForm.processing" class="bg-indigo-600 text-white text-sm px-4 py-2 rounded-lg hover:bg-indigo-700 disabled:opacity-60">Save</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <div v-if="removeAgentModalOpen" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 px-4">
    <div class="w-full max-w-md rounded-2xl bg-white p-6 shadow-xl">
      <h3 class="text-lg font-semibold text-gray-900">Remove agent?</h3>
      <p class="mt-2 text-sm text-gray-600">
        Remove <strong>{{ pendingAgentRemoval?.user?.name || ('User #' + pendingAgentRemoval?.user_id) }}</strong>
        from <strong>{{ pendingAgentRemoval?.group?.name }}</strong>?
      </p>
      <div class="mt-6 flex justify-end gap-2">
        <button type="button" @click="closeRemoveAgentModal" class="text-sm text-gray-600 px-3 py-2 rounded-lg border border-gray-300 hover:bg-gray-100">Cancel</button>
        <button type="button" @click="confirmRemoveAgent" class="bg-red-600 text-white text-sm px-4 py-2 rounded-lg hover:bg-red-700">Remove</button>
      </div>
    </div>
  </div>

  <div v-if="deletePriorityModalOpen" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 px-4">
    <div class="w-full max-w-md rounded-2xl bg-white p-6 shadow-xl">
      <h3 class="text-lg font-semibold text-gray-900">Delete priority?</h3>
      <p class="mt-2 text-sm text-gray-600">
        Delete <strong>{{ pendingPriorityDelete?.name }}</strong>? This cannot be undone.
      </p>
      <div class="mt-6 flex justify-end gap-2">
        <button type="button" @click="closeDeletePriorityModal" class="text-sm text-gray-600 px-3 py-2 rounded-lg border border-gray-300 hover:bg-gray-100">Cancel</button>
        <button type="button" @click="confirmDeletePriority" class="bg-red-600 text-white text-sm px-4 py-2 rounded-lg hover:bg-red-700">Delete</button>
      </div>
    </div>
  </div>

  <div v-if="deleteProjectModalOpen" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 px-4">
    <div class="w-full max-w-md rounded-2xl bg-white p-6 shadow-xl">
      <h3 class="text-lg font-semibold text-gray-900">Delete project?</h3>
      <p class="mt-2 text-sm text-gray-600">
        Delete <strong>{{ pendingProjectDelete?.name }}</strong>? This cannot be undone.
      </p>
      <div class="mt-6 flex justify-end gap-2">
        <button type="button" @click="closeDeleteProjectModal" class="text-sm text-gray-600 px-3 py-2 rounded-lg border border-gray-300 hover:bg-gray-100">Cancel</button>
        <button type="button" @click="confirmDeleteProject" class="bg-red-600 text-white text-sm px-4 py-2 rounded-lg hover:bg-red-700">Delete</button>
      </div>
    </div>
  </div>
</template>

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

const props = defineProps({
  groups: Array,
  agents: Array,
  priorities: Array,
  projects: Array,
  myGroupIds: Array,
  isBootstrap: Boolean,
  isSiteAdmin: Boolean,
})

const activeTab = ref('groups')
const tabs = [
  { key: 'groups', label: 'Groups' },
  { key: 'agents', label: 'Agents' },
  { key: 'priorities', label: 'Priorities' },
  { key: 'projects', label: 'Projects' },
]

const showAddGroup = ref(false)
const showAddAgent = ref(false)
const showAddPriority = ref(false)
const showAddProject = ref(false)
const editingGroup = ref(null)
const editingPriority = ref(null)
const editingProject = ref(null)
const removeAgentModalOpen = ref(false)
const pendingAgentRemoval = ref(null)
const deletePriorityModalOpen = ref(false)
const pendingPriorityDelete = ref(null)
const deleteProjectModalOpen = ref(false)
const pendingProjectDelete = ref(null)

const groupForm = useForm({ name: '', email_address: '', color: '#6366f1', prefix: '' })
const editGroupForm = useForm({ name: '', email_address: '', color: '#6366f1', prefix: '' })
const agentForm = useForm({ user_id: '', group_id: '', role: 'agent' })
const priorityForm = useForm({ name: '', color: '#6b7280', description: '', sort_order: 0, group_id: null })
const editPriorityForm = useForm({ name: '', color: '#6b7280', description: '', sort_order: 0, group_id: null })
const projectForm = useForm({ group_id: '', name: '', description: '', status: 'active' })
const editProjectForm = useForm({ name: '', description: '', status: 'active' })

function submitGroup() {
  groupForm.post(route('ticketing.settings.groups.store'), {
    onSuccess: () => { showAddGroup.value = false; groupForm.reset() }
  })
}

function startEditGroup(group) {
  editingGroup.value = group
  editGroupForm.name = group.name
  editGroupForm.email_address = group.email_address || ''
  editGroupForm.color = group.color
  editGroupForm.prefix = group.prefix
}

function submitEditGroup() {
  editGroupForm.put(route('ticketing.settings.groups.update', { group: editingGroup.value.id }), {
    onSuccess: () => { editingGroup.value = null }
  })
}

function submitAgent() {
  agentForm.post(route('ticketing.settings.agents.store'), {
    onSuccess: () => { showAddAgent.value = false; agentForm.reset() }
  })
}

function openRemoveAgentModal(access) {
  pendingAgentRemoval.value = access
  removeAgentModalOpen.value = true
}

function closeRemoveAgentModal() {
  removeAgentModalOpen.value = false
  pendingAgentRemoval.value = null
}

function confirmRemoveAgent() {
  if (!pendingAgentRemoval.value) return

  router.delete(route('ticketing.settings.agents.destroy', { access: pendingAgentRemoval.value.id }), {
    onFinish: closeRemoveAgentModal,
  })
}

function submitPriority() {
  priorityForm.post(route('ticketing.settings.priorities.store'), {
    onSuccess: () => { showAddPriority.value = false; priorityForm.reset() }
  })
}

function startEditPriority(priority) {
  editingPriority.value = priority
  editPriorityForm.name = priority.name
  editPriorityForm.color = priority.color
  editPriorityForm.description = priority.description || ''
  editPriorityForm.sort_order = priority.sort_order
  editPriorityForm.group_id = priority.group_id
}

function submitEditPriority() {
  editPriorityForm.put(route('ticketing.settings.priorities.update', { priority: editingPriority.value.id }), {
    onSuccess: () => { editingPriority.value = null }
  })
}

function openDeletePriorityModal(priority) {
  pendingPriorityDelete.value = priority
  deletePriorityModalOpen.value = true
}

function closeDeletePriorityModal() {
  deletePriorityModalOpen.value = false
  pendingPriorityDelete.value = null
}

function confirmDeletePriority() {
  if (!pendingPriorityDelete.value) return

  router.delete(route('ticketing.settings.priorities.destroy', { priority: pendingPriorityDelete.value.id }), {
    onFinish: closeDeletePriorityModal,
  })
}

function submitProject() {
  projectForm.post(route('ticketing.settings.projects.store'), {
    onSuccess: () => { showAddProject.value = false; projectForm.reset() }
  })
}

function startEditProject(project) {
  editingProject.value = project
  editProjectForm.name = project.name
  editProjectForm.description = project.description || ''
  editProjectForm.status = project.status
}

function submitEditProject() {
  editProjectForm.put(route('ticketing.settings.projects.update', { project: editingProject.value.id }), {
    onSuccess: () => { editingProject.value = null }
  })
}

function openDeleteProjectModal(project) {
  pendingProjectDelete.value = project
  deleteProjectModalOpen.value = true
}

function closeDeleteProjectModal() {
  deleteProjectModalOpen.value = false
  pendingProjectDelete.value = null
}

function confirmDeleteProject() {
  if (!pendingProjectDelete.value) return

  router.delete(route('ticketing.settings.projects.destroy', { project: pendingProjectDelete.value.id }), {
    onFinish: closeDeleteProjectModal,
  })
}
</script>