<script setup>
import AdminLayout from "@/Layouts/AdminLayout.vue";
import { useForm, Link } from "@inertiajs/vue3";
import { KeyRoundIcon, ArrowLeftIcon, SaveIcon } from "lucide-vue-next";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/Components/ui/card";
import { Button } from "@/Components/ui/button";
import { Input } from "@/Components/ui/input";
import { Label } from "@/Components/ui/label";
import { Textarea } from "@/Components/ui/textarea";
import { Checkbox } from "@/Components/ui/checkbox";

const props = defineProps({
  roles: Array,
});

const form = useForm({
  name: "",
  slug: "",
  description: "",
  roles: [],
});

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

<template>
  <AdminLayout title="Novo dovoljenje">
    <div class="max-w-2xl mx-auto">
      <Card>
        <CardHeader>
          <div class="flex items-start justify-between">
            <div class="flex items-start gap-3">
              <div
                class="inline-flex items-center justify-center h-10 w-10 rounded-lg bg-primary/10 text-primary"
              >
                <KeyRoundIcon class="h-5 w-5" />
              </div>
              <div>
                <CardTitle>Novo dovoljenje</CardTitle>
                <CardDescription
                  >Ustvari sistemsko dovoljenje za uporabo pri vlogah.</CardDescription
                >
              </div>
            </div>
            <Button variant="ghost" size="sm" as-child>
              <Link :href="route('admin.permissions.index')">
                <ArrowLeftIcon class="h-4 w-4 mr-2" />
                Nazaj
              </Link>
            </Button>
          </div>
        </CardHeader>
        <CardContent>
          <form @submit.prevent="submit" class="space-y-6">
            <div class="grid sm:grid-cols-2 gap-6">
              <div class="space-y-2">
                <Label for="name">Ime</Label>
                <Input id="name" v-model="form.name" type="text" />
                <p v-if="form.errors.name" class="text-sm text-destructive">
                  {{ form.errors.name }}
                </p>
              </div>
              <div class="space-y-2">
                <Label for="slug">Slug</Label>
                <Input id="slug" v-model="form.slug" type="text" class="font-mono" />
                <p v-if="form.errors.slug" class="text-sm text-destructive">
                  {{ form.errors.slug }}
                </p>
              </div>
              <div class="sm:col-span-2 space-y-2">
                <Label for="description">Opis</Label>
                <Textarea id="description" v-model="form.description" rows="3" />
                <p v-if="form.errors.description" class="text-sm text-destructive">
                  {{ form.errors.description }}
                </p>
              </div>
              <div class="sm:col-span-2 space-y-2">
                <Label>Veži na vloge</Label>
                <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3">
                  <label
                    v-for="r in props.roles"
                    :key="r.id"
                    class="flex items-center gap-2 text-sm cursor-pointer"
                  >
                    <Checkbox
                      :value="r.id"
                      :checked="form.roles.includes(r.id)"
                      @update:checked="
                        (checked) => {
                          if (checked) form.roles.push(r.id);
                          else form.roles = form.roles.filter((id) => id !== r.id);
                        }
                      "
                    />
                    <span
                      ><span class="font-medium">{{ r.name }}</span>
                      <span class="text-xs text-muted-foreground"
                        >({{ r.slug }})</span
                      ></span
                    >
                  </label>
                </div>
                <p v-if="form.errors.roles" class="text-sm text-destructive">
                  {{ form.errors.roles }}
                </p>
              </div>
            </div>

            <div class="flex items-center gap-3 pt-2">
              <Button :disabled="form.processing" type="submit">
                <SaveIcon class="h-4 w-4 mr-2" />
                Shrani
              </Button>
              <Button variant="ghost" as-child>
                <Link :href="route('admin.permissions.index')">Prekliči</Link>
              </Button>
            </div>
          </form>
        </CardContent>
      </Card>
    </div>
  </AdminLayout>
</template>
