<template>
  <AppLayout title="New Ticket">
    <div class="p-6 max-w-2xl">
      <div class="flex items-center gap-3 mb-6">
        <Link :href="route('ticketing.index')" class="text-sm text-gray-500 hover:underline">← Tickets</Link>
        <h1 class="text-2xl font-bold text-gray-900">Submit a 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"
            placeholder="Brief summary of the issue"
            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"
            placeholder="Describe the issue in detail…"
            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="">Select category</option>
              <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="">Select priority</option>
              <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>

        <div class="flex justify-end gap-3 pt-2">
          <Link :href="route('ticketing.index')" 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 ? 'Submitting…' : 'Submit Ticket' }}
          </button>
        </div>
      </form>
    </div>
  </AppLayout>
</template>

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

const form = useForm({
  title:       '',
  description: '',
  category:    '',
  priority:    'medium',
})

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

function submit() {
  processing.value = true
  form.post(route('ticketing.store'), {
    onError: (e) => { errors.value = e },
    onFinish: () => { processing.value = false },
  })
}
</script>
