<template>
    <Head title="Agregar empleado" />

    <AuthenticatedLayout>
        <template #header> Nuevo empleado </template>

        <div class="bg-white rounded shadow-lg p-4 px-4 md:p-8 mb-6">
            <div
                class="grid gap-4 gap-y-2 text-sm grid-cols-1 lg:grid-cols-2 md:grid-cols-2 mb-6"
            >
                <div class="text-gray-600">
                    <p class="font-medium text-lg">Informacion del empleado</p>
                    <p>Por favor complete todos los campos.</p>
                </div>
                <div class="text-right">
                    <SecondaryButtonReturn class="text-center"/>
                </div>
            </div>

            <form @submit.prevent="submit" class="">
                <div
                    class="grid gap-4 gap-y-2 text-sm grid-cols-1 lg:grid-cols-4 md:grid-cols-4 text-gray-600"
                >
                    <div>
                        <InputLabel
                            for="tipo_documento"
                            value="Tipo Documento"
                        />
                        <Dropdown
                            v-model="form.tipo_documento"
                            :options="tipos_doc"
                            optionValue="name"
                            optionLabel="name"
                            placeholder="Seleccione tipo"
                            class="w-full mt-1"
                        />
                        <InputError
                            class="mt-2"
                            :message="form.errors.tipo_documento"
                        />
                    </div>
                    <div>
                        <InputLabel
                            for="documento"
                            value="Número de documento"
                        />
                        <TextInput
                            id="documento"
                            type="number"
                            class="mt-1 block w-full"
                            v-model="form.documento"
                            required
                            autocomplete="documento"
                        />
                        <InputError
                            class="mt-2"
                            :message="form.errors.documento"
                        />
                    </div>
                    <div>
                        <InputLabel for="nombre" value="Nombre" />
                        <TextInput
                            id="nombre"
                            type="text"
                            class="mt-1 block w-full"
                            v-model="form.nombre"
                            required
                            autocomplete="nombre"
                        />
                        <InputError
                            class="mt-2"
                            :message="form.errors.nombre"
                        />
                    </div>
                    <div>
                        <InputLabel for="imagen" value="Foto de perfil" />
                        <FileUpload v-model="form.imagen" url="/api/upload" chooseLabel="Subir" class="mt-1" mode="basic"
                                name="imagen[]" accept="image/*" :maxFileSize="2000000"
                                @upload="onUpload"
                                @input="form.imagen = $event.target.files[0]" />
                        <InputLabel for="imagen" value="(Tamaño recomendado: 600px - 600px)" />
                        <InputError
                            class="mt-2"
                            :message="form.errors.imagen"
                        />
                    </div>
                </div>
                <div
                    class="grid gap-4 gap-y-4 mt-3 text-sm grid-cols-1 lg:grid-cols-4 md:grid-cols-4 text-gray-600"
                >
                    <div>
                        <InputLabel for="email" value="Email" />
                        <TextInput
                            id="email"
                            type="email"
                            class="mt-1 block w-full"
                            v-model="form.email"
                            required
                            autocomplete="nombre"
                        />
                        <InputError class="mt-2" :message="form.errors.email" />
                    </div>
                    <div>
                        <InputLabel for="telefono" value="Número de telefono" />
                        <TextInput
                            id="telefono"
                            type="number"
                            class="mt-1 block w-full"
                            v-model="form.telefono"
                            required
                            autocomplete="telefono"
                        />
                        <InputError
                            class="mt-2"
                            :message="form.errors.telefono"
                        />
                    </div>
                    <div>
                        <InputLabel for="direccion" value="Dirección" />
                        <TextInput
                            id="direccion"
                            type="text"
                            class="mt-1 block w-full"
                            v-model="form.direccion"
                            required
                            autocomplete="Dirección"
                        />
                        <InputError
                            class="mt-2"
                            :message="form.errors.direccion"
                        />
                    </div>
                    <div>
                        <InputLabel for="cargo" value="Cargo" />
                        <TextInput
                            id="cargo"
                            type="text"
                            class="mt-1 block w-full"
                            v-model="form.cargo"
                            required
                            autocomplete="Cargo"
                        />
                        <InputError class="mt-2" :message="form.errors.cargo" />
                    </div>
                </div>
                <div class="mt-3 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5">
                    <div class="col-span-3 pr-1">
                        <Fieldset legend="Porcentaje del empleado">
                            <p class="m-0">
                                Define el valor que le corresponde al empleado
                                por cada servicio realizado.
                            </p>
                            <!-- <InputLabel for="porcentaje" value="Porcentaje" /> -->
                            <InputNumber
                                class="mt-3"
                                v-model="form.porcentaje"
                                suffix="%"
                                required
                            />
                        </Fieldset>
                        <InputError
                            class="mt-2"
                            :message="form.errors.porcentaje"
                        />
                    </div>
                    <div class="col-span-2">
                        <Fieldset legend="Estado del empleado" class="w-full">
                            <p class="m-0">
                                Enciende el Switch si deseas activar el
                                empleado, de lo contrario dejalo apagado.
                            </p>
                            <InputSwitch
                                id="empleado_estado"
                                class="float-right"
                                v-model="form.estado"
                            />
                        </Fieldset>
                        <InputError
                            class="mt-2"
                            :message="form.errors.editable"
                        />
                    </div>
                </div>
                <div class="mt-4 flex flex-col items-end">
                    <PrimaryButton
                        :class="{ 'opacity-25': form.processing }"
                        :disabled="form.processing"
                    >
                        Registrar empleado
                    </PrimaryButton>
                </div>
            </form>
        </div>
        <Toast />
    </AuthenticatedLayout>
</template>

<script setup>
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout.vue";
import InputError from "@/Components/InputError.vue";
import InputLabel from "@/Components/InputLabel.vue";
import PrimaryButton from "@/Components/PrimaryButton.vue";
import TextInput from "@/Components/TextInput.vue";
import { Head, useForm } from "@inertiajs/vue3";
import SecondaryButtonReturn from "@/Components/SecondaryButtonReturn.vue";
import Dropdown from "primevue/dropdown";
import { ref } from "vue";
import InputSwitch from "primevue/inputswitch";
import Fieldset from "primevue/fieldset";
import InputNumber from "primevue/inputnumber";
import FileUpload from 'primevue/fileupload';

import Toast from "primevue/toast";
import { useToast } from "primevue/usetoast";
const toast = useToast();

const props = defineProps({
    roles: {
        type: Object,
        default: () => ({}),
    },
});

const onUpload = () => {
    toast.add({ severity: 'info', summary: 'Imagen subida', detail: 'El archivo se ha subido correctamente', life: 3000 });
};

const form = useForm({
    tipo_documento: "",
    documento: "",
    nombre: "",
    email: "",
    direccion: "",
    telefono: "",
    cargo: "",
    estado: "",
    imagen: null,
    porcentaje: null,
});

const tipos_doc = ref([
    { name: "Cedula de ciudadania" },
    { name: "Tarjeta de identidad" },
    { name: "Cedula de extranjeria" },
    { name: "Pasaporte" },
]);

const tipos_gen = ref([
    { name: "Masculino" },
    { name: "Femenino" },
    { name: "Binario" },
    { name: "No se reconoce" },
]);

const submit = () => {
    // Convertir el valor booleano de editable a 0 o 1
    const estadoValue = form.estado ? 1 : 0;
    // Asignar el nuevo valor a form.editable
    form.estado = estadoValue;

    form.post(route("empleados.store"), {
        onSuccess: function () {
            form.reset("password", "password_confirmation");
            toast.add({
                severity: "success",
                summary: "Registro Guardado",
                detail: "El usuario se ha almacenado exitosamente",
                life: 5000,
            });
        },
    });
};
</script>
