<script setup>
import { goTo, transl } from './Component';
import { Link, useForm } from '@inertiajs/vue3';

import PrimaryButton   from '@/Components/Dashboard/Button/Primary.vue';
import Input           from '@/Components/Dashboard/Form/Input.vue';
import PageHeader      from '@/Components/Dashboard/PageHeader.vue';
import GoogleIcon      from '@/Components/Shared/GoogleIcon.vue';
import DashboardLayout from '@/Layouts/DashboardLayout.vue';

defineProps({
    alias: String,
    value: Number,
    description: String
});

const form = useForm({
    alias: '',
    value: '',
    description: '',
});

const submit = () => form.post(route(goTo('store')), {
    onSuccess: () => Notify.success(transl('create.onSuccess')),
    onError:   () => Notify.error(transl('create.onError')),
    onFinish:  () => form.reset('password')
});
</script>

<template>
  <DashboardLayout :title="transl('create.title')">
    <PageHeader>
        <Link :href="route(goTo('index'))">
            <GoogleIcon
                :title="$t('return')"
                class="btn-icon-primary"
                name="arrow_back"
                outline
            />
        </Link>
    </PageHeader>
    <div class="w-full pb-8">
        <div class="mt-8">
            <p
                v-text="transl('create.description')"
            />
      </div>
    </div>
    <div class="w-full">
        <form @submit.prevent="submit" class="grid gap-4 grid-cols-6">
            <Input
                id="Alias"
                class="col-span-2"
                v-model="form.alias"
                :onError="form.errors.alias"
                autofocus
                required
            />
            <Input
                id="Valor"
                class="col-span-2"
                v-model="form.value"
                :onError="form.errors.value"
                autofocus
                required
            />
            <Input
                id="Descripción"
                class="col-span-2"
                v-model="form.description"
                :onError="form.errors.description"
                autofocus
            />
            <div class="col-span-6 flex flex-col items-center justify-end space-y-4 mt-4">
                <PrimaryButton
                    :class="{ 'opacity-25': form.processing }"
                    :disabled="form.processing"
                    v-text="transl('create.title')"
                />
            </div>
        </form>
    </div>
  </DashboardLayout>
</template>
