<script setup>
import {NButton, NFlex, NGi, NGrid, NH2, NForm, NFormItem, NInput, NTransfer, NSwitch} from "naive-ui";
import AppLayout from "../../../Layouts/AppLayout.vue";
import AppContainer from "../../../Components/AppContainer.vue";
import AppPanel from "../../../Components/AppPanel.vue";
import {useForm} from "@inertiajs/vue3";
import {computed, ref} from "vue";

const props = defineProps({
    departments: {
        type: Array,
        default: []
    },
    roles: {
        type: Array,
        default: []
    }
})

const departmentOptions = computed(() => props.departments.map(itm => ({
    label: itm.name_full,
    value: itm.department_id
})))
const roleOptions = computed(() => props.roles.map(itm => ({
    label: itm.name,
    value: itm.role_id
})))

const form = ref({
    'name': '',
    'login': '',
    'password': '',
    'is_active': true,
})

</script>

<template>
    <AppLayout>
        <template #header>
            <NFlex align="center" justify="space-between" class="max-w-6xl mx-auto mt-6 mb-4 w-full">
                <NH2>
                    Создание учетной записи
                </NH2>
            </NFlex>
        </template>
        <AppContainer>
            <NGrid cols="2" x-gap="16">
                <NGi>
                    <AppPanel header="Основная информация">
                        <NForm v-model:model="form">
                            <NFormItem label="Имя">
                                <NInput v-model:value="form.name" />
                            </NFormItem>
                            <NFormItem label="Привязка к ресурсу МИС">
                                <NInput v-model:value="form.password" />
                            </NFormItem>
                            <NFormItem label="Основное отделение">
                                <NInput v-model:value="form.password" />
                            </NFormItem>
                            <NFormItem label-placement="left" label-width="auto" label-style="align-items: center;" label="Пользователь заблокирован">
                                <NSwitch />
                            </NFormItem>
                        </NForm>
                    </AppPanel>
                </NGi>
                <NGi>
                    <AppPanel header="Данные для входа">
                        <NForm v-model:model="form">
                            <NFormItem label="Логин">
                                <NInput v-model:value="form.login" />
                            </NFormItem>
                            <NFormItem label="Пароль">
                                <NInput type="password" v-model:value="form.password" show-password-toggle />
                            </NFormItem>
                        </NForm>
                    </AppPanel>
                </NGi>
            </NGrid>

            <AppPanel no-padding header="Привязка к отделениям">
                <NTransfer
                    v-model:value="form.departments"
                    virtual-scroll
                    :options="departmentOptions"
                    source-filterable
                    target-filterable
                />
            </AppPanel>

            <AppPanel no-padding header="Роли">
                <NTransfer
                    v-model:value="form.roles"
                    virtual-scroll
                    :options="roleOptions"
                    source-filterable
                    target-filterable
                />
            </AppPanel>
        </AppContainer>
    </AppLayout>
</template>

<style scoped>

</style>
