<script lang="ts" setup>
import { useForm, Link } from '@inertiajs/vue3'
import AccountLayout from '@/Layouts/AccountLayout.vue'

defineOptions({ layout: AccountLayout })

const form = useForm({
  subject: '',
  department: 'general',
  priority: 'medium',
  message: '',
})

const departmentOptions = [
  { title: 'General', value: 'general' },
  { title: 'Billing', value: 'billing' },
  { title: 'Technical', value: 'technical' },
  { title: 'Sales', value: 'sales' },
]

const priorityOptions = [
  { title: 'Low', value: 'low' },
  { title: 'Medium', value: 'medium' },
  { title: 'High', value: 'high' },
  { title: 'Urgent', value: 'urgent' },
]

function submitTicket(): void {
  form.post('/tickets', {
    preserveScroll: true,
  })
}
</script>

<template>
  <div>
    <div class="mb-4">
      <Link href="/tickets" class="text-primary text-body-2 text-decoration-none">
        &larr; Back to Tickets
      </Link>
    </div>

    <div class="text-h4 font-weight-bold mb-6">
      Create Support Ticket
    </div>

    <VCard>
      <VCardText>
        <VForm @submit.prevent="submitTicket">
          <VRow>
            <VCol cols="12">
              <VTextField
                v-model="form.subject"
                label="Subject"
                placeholder="Brief description of your issue"
                :error-messages="form.errors.subject"
              />
            </VCol>

            <VCol cols="12" md="6">
              <VSelect
                v-model="form.department"
                label="Department"
                :items="departmentOptions"
                :error-messages="form.errors.department"
              />
            </VCol>

            <VCol cols="12" md="6">
              <VSelect
                v-model="form.priority"
                label="Priority"
                :items="priorityOptions"
                :error-messages="form.errors.priority"
              />
            </VCol>

            <VCol cols="12">
              <VTextarea
                v-model="form.message"
                label="Message"
                placeholder="Please describe your issue in detail (minimum 10 characters)..."
                rows="8"
                :error-messages="form.errors.message"
                counter="5000"
                maxlength="5000"
              />
            </VCol>

            <VCol cols="12" class="d-flex justify-end ga-3">
              <Link href="/tickets" class="text-decoration-none">
                <VBtn variant="tonal" color="secondary">
                  Cancel
                </VBtn>
              </Link>
              <VBtn
                type="submit"
                color="primary"
                :loading="form.processing"
                :disabled="form.processing"
              >
                <VIcon icon="tabler-send" start />
                Submit Ticket
              </VBtn>
            </VCol>
          </VRow>
        </VForm>
      </VCardText>
    </VCard>
  </div>
</template>
