<script setup>
import AdminLayout from '@/Layouts/AdminLayout.vue'
import { useForm, Link } from '@inertiajs/vue3'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faKey, faArrowLeft, faPlus } from '@fortawesome/free-solid-svg-icons'

const form = useForm({
  name: '',
  slug: '',
  description: ''
})

function submit() {
  form.post(route('admin.permissions.store'), {
    preserveScroll: true,
    onSuccess: () => form.reset('name','slug','description')
  })
}
</script>

<template>
  <AdminLayout title="Novo dovoljenje">
    <div class="max-w-2xl mx-auto bg-white border rounded-xl shadow-sm p-6 space-y-8">
      <header class="flex items-start justify-between gap-6">
        <div class="space-y-1">
          <h1 class="text-xl font-semibold tracking-tight flex items-center gap-2">
            <span class="inline-flex items-center justify-center h-9 w-9 rounded-md bg-indigo-50 text-indigo-600"><FontAwesomeIcon :icon="faKey" /></span>
            Novo dovoljenje
          </h1>
          <p class="text-sm text-gray-500">Ustvari sistemsko dovoljenje za uporabo pri vlogah.</p>
        </div>
        <Link :href="route('admin.permissions.index')" class="inline-flex items-center gap-1 text-xs font-medium text-gray-500 hover:text-gray-700">
          <FontAwesomeIcon :icon="faArrowLeft" class="w-4 h-4" /> Nazaj
        </Link>
      </header>

      <form @submit.prevent="submit" class="space-y-6">
        <div class="grid sm:grid-cols-2 gap-6">
          <div class="space-y-1">
            <label class="block text-xs font-medium uppercase tracking-wide text-gray-600">Ime</label>
            <input v-model="form.name" type="text" class="w-full border rounded-md px-3 py-2 text-sm focus:ring-indigo-500 focus:border-indigo-500" />
            <p v-if="form.errors.name" class="text-xs text-red-600 mt-1">{{ form.errors.name }}</p>
          </div>
          <div class="space-y-1">
            <label class="block text-xs font-medium uppercase tracking-wide text-gray-600">Slug</label>
            <input v-model="form.slug" type="text" class="w-full border rounded-md px-3 py-2 text-sm font-mono focus:ring-indigo-500 focus:border-indigo-500" />
            <p v-if="form.errors.slug" class="text-xs text-red-600 mt-1">{{ form.errors.slug }}</p>
          </div>
          <div class="sm:col-span-2 space-y-1">
            <label class="block text-xs font-medium uppercase tracking-wide text-gray-600">Opis</label>
            <textarea v-model="form.description" rows="3" class="w-full border rounded-md px-3 py-2 text-sm focus:ring-indigo-500 focus:border-indigo-500" />
            <p v-if="form.errors.description" class="text-xs text-red-600 mt-1">{{ form.errors.description }}</p>
          </div>
        </div>

        <div class="flex items-center gap-3 pt-2">
          <button :disabled="form.processing" type="submit" class="inline-flex items-center gap-2 px-4 py-2 rounded-md bg-indigo-600 text-white text-sm font-medium hover:bg-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 disabled:opacity-50">
            <FontAwesomeIcon :icon="faPlus" class="w-4 h-4" /> Shrani
          </button>
          <Link :href="route('admin.permissions.index')" class="text-sm text-gray-500 hover:text-gray-700">Prekliči</Link>
        </div>
      </form>
    </div>
  </AdminLayout>
</template>
