<template>
    <AppLayout>
        <template #header>
            <h2 class="text-xl font-bold">
                {{ database?.id ? 'Редактирование' : 'Создание' }} целевой БД
            </h2>
        </template>

        <Card class="max-w-2xl">
            <template #content>
                <form @submit.prevent="submit" class="flex flex-col gap-4">
                    <div>
                        <label for="name" class="block text-sm font-medium mb-1">Название *</label>
                        <InputText id="name" v-model="form.name" class="w-full" :class="{ 'p-invalid': form.errors.name }" />
                        <small class="p-error">{{ form.errors.name }}</small>
                    </div>

                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label for="host" class="block text-sm font-medium mb-1">Хост *</label>
                            <InputText id="host" v-model="form.host" class="w-full" :class="{ 'p-invalid': form.errors.host }" />
                            <small class="p-error">{{ form.errors.host }}</small>
                        </div>
                        <div>
                            <label for="port" class="block text-sm font-medium mb-1">Порт *</label>
                            <InputText id="port" v-model="form.port" class="w-full" :class="{ 'p-invalid': form.errors.port }" />
                            <small class="p-error">{{ form.errors.port }}</small>
                        </div>
                    </div>

                    <div>
                        <label for="database" class="block text-sm font-medium mb-1">Имя базы данных *</label>
                        <InputText id="database" v-model="form.database" class="w-full" :class="{ 'p-invalid': form.errors.database }" />
                        <small class="p-error">{{ form.errors.database }}</small>
                    </div>

                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label for="username" class="block text-sm font-medium mb-1">Пользователь *</label>
                            <InputText id="username" v-model="form.username" class="w-full" :class="{ 'p-invalid': form.errors.username }" />
                            <small class="p-error">{{ form.errors.username }}</small>
                        </div>
                        <div>
                            <label for="password" class="block text-sm font-medium mb-1">
                                Пароль {{ database?.id ? '(оставьте пустым для сохранения текущего)' : '*' }}
                            </label>
                            <Password id="password" v-model="form.password" class="w-full" :class="{ 'p-invalid': form.errors.password }" 
                                      :feedback="false" toggle-mask />
                            <small class="p-error">{{ form.errors.password }}</small>
                        </div>
                    </div>

                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label for="driver" class="block text-sm font-medium mb-1">Драйвер</label>
                            <Dropdown id="driver" v-model="form.driver"
                                      :options="[
                                          { label: 'PostgreSQL', value: 'pgsql' },
                                          { label: 'Microsoft SQL Server', value: 'mssql' }
                                      ]"
                                      optionLabel="label" optionValue="value"
                                      class="w-full" />
                        </div>
                        <div>
                            <label for="description" class="block text-sm font-medium mb-1">Описание</label>
                            <InputText id="description" v-model="form.description" class="w-full" />
                        </div>
                    </div>

                    <div class="flex gap-2 pt-4">
                        <Button type="submit" label="Сохранить" icon="pi pi-check" :loading="form.processing" />
                        <Link :href="route('databases.target.index')">
                            <Button type="button" label="Отмена" severity="secondary" />
                        </Link>
                    </div>
                </form>
            </template>
        </Card>
    </AppLayout>
</template>

<script setup>
import { useForm, Link } from '@inertiajs/vue3';
import AppLayout from '@/Layouts/AppLayout.vue';
import Card from 'primevue/card';
import InputText from 'primevue/inputtext';
import Textarea from 'primevue/textarea';
import Button from 'primevue/button';
import Password from 'primevue/password';
import Dropdown from 'primevue/dropdown';

const props = defineProps({
    database: Object,
});

const form = useForm({
    name: props.database?.name || '',
    host: props.database?.host || '',
    port: props.database?.port || 5432,
    database: props.database?.database || '',
    username: props.database?.username || '',
    password: '',
    driver: props.database?.driver || 'pgsql',
    description: props.database?.description || '',
});

const submit = () => {
    if (props.database?.id) {
        form.put(route('databases.target.update', props.database.id));
    } else {
        form.post(route('databases.target.store'));
    }
};
</script>
