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

<template>
  <AppLayout>
    <div class="max-w-2xl mx-auto">
      <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">Submit a Ticket</h1>
      </div>

      <!-- Bootstrap / No groups state -->
      <div v-if="isBootstrap" class="bg-amber-50 border border-amber-300 rounded-xl px-5 py-6 text-center">
        <p class="text-amber-800 font-semibold text-base mb-2">📦 Ticketing isn't set up yet</p>
        <p class="text-sm text-amber-700 mb-4">An admin needs to create at least one group before tickets can be submitted.</p>
        <Link v-if="isSiteAdmin" :href="route('ticketing.settings')" class="inline-block bg-indigo-600 text-white text-sm px-4 py-2 rounded-lg hover:bg-indigo-700">Go to Settings</Link>
      </div>

      <form v-else @submit.prevent="submit" class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 space-y-5">
        <!-- Group -->
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">Group <span class="text-red-500">*</span></label>
          <select
            v-model="form.group_id"
            required
            class="w-full border-gray-300 rounded-lg text-sm"
          >
            <option value="">Select a group</option>
            <option v-for="g in groups" :key="g.id" :value="g.id">{{ g.name }}</option>
          </select>
          <p v-if="form.errors.group_id" class="text-xs text-red-600 mt-1">{{ form.errors.group_id }}</p>
        </div>

        <!-- 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"
            required
            placeholder="Brief summary of the issue"
            class="w-full border-gray-300 rounded-lg text-sm"
          />
          <p v-if="form.errors.title" class="text-xs text-red-600 mt-1">{{ form.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"
            required
            rows="5"
            placeholder="Describe the issue in detail..."
            class="w-full border-gray-300 rounded-lg text-sm"
          ></textarea>
          <p v-if="form.errors.description" class="text-xs text-red-600 mt-1">{{ form.errors.description }}</p>
        </div>

        <!-- Priority -->
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">Priority</label>
          <select
            v-model="form.priority_id"
            class="w-full border-gray-300 rounded-lg text-sm"
          >
            <option :value="null">No priority</option>
            <option v-for="p in filteredPriorities" :key="p.id" :value="p.id">{{ p.name }}</option>
          </select>
        </div>

        <!-- Due Date -->
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">Due Date <span class="text-gray-400 font-normal">(optional)</span></label>
          <input
            v-model="form.due_date"
            type="date"
            class="w-full border-gray-300 rounded-lg text-sm"
          />
        </div>

        <!-- Submit -->
        <div class="flex justify-end pt-2">
          <button
            type="submit"
            :disabled="form.processing"
            class="inline-flex items-center gap-2 bg-gray-900 text-white px-5 py-2 rounded-lg text-sm font-medium hover:bg-gray-700 disabled:opacity-60 transition"
          >
            <span v-if="form.processing">Submitting…</span>
            <span v-else>Submit Ticket</span>
          </button>
        </div>
      </form>
    </div>
  </AppLayout>
</template>

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

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

const form = useForm({
  group_id: '',
  title: '',
  description: '',
  priority_id: null,
  due_date: '',
})

const filteredPriorities = computed(() => {
  if (!form.group_id) return props.priorities.filter(p => !p.group_id)
  return props.priorities.filter(p => !p.group_id || p.group_id === Number(form.group_id))
})

// Reset priority if it's no longer valid for the newly selected group
watch(() => form.group_id, () => {
  const valid = filteredPriorities.value.some(p => p.id === form.priority_id)
  if (!valid) {
    form.priority_id = null
  }
})

function submit() {
  form.post(route('ticketing.store'))
}
</script>