<script setup>
import { computed, ref } from 'vue';
import { useForm } from '@inertiajs/inertia-vue3';
import Input from '../../Share/Components/Input.vue';

const locations = ref([]);
const locationsToString = computed({
    get: () => locations.value.join(', '),
    set: (val) => {
        val = val.replace(', ', ',').replace(' , ', ',').replace(' ,', ',');
        val = val.split(',');
        val.forEach((element, key) => {
            val[key] = element.trim();
        });
        locations.value = val;
    }
});

const mission = ref([]);
const missionToString = computed({
    get: () => mission.value.join("\n"),
    set: (value) => {
        mission.value = value.split("\n");
    }
});

const form = useForm({
    recipient: null,
    email: null,
    phone_number: null,
    locations: locations,
    mission: missionToString,
    rodo: null,
    position: null,
    notes: null,
});

function createCV() {
    form.post('/dashboard/cv');
}
</script>

<template>
    <InertiaHead title="Nowe dane do CV" />
    <div class="p-4">
        <header class="pb-4">
            <div class="flex items-center gap-2">
                <InertiaLink
                    as="button"
                    href="/dashboard/cv"
                    class="px-2 text-xl text-gray-700 hover:text-black"
                    title="Wróć do listy CV"><FontAwesomeIcon :icon="['fas', 'caret-left']" /></InertiaLink>
                <h1 class="text-3xl font-roboto font-light">Nowe dane do CV</h1>
            </div>
        </header>
        <div>
            <form class="flex flex-col gap-4" @submit.prevent="createCV">
                <Input
                    id="recipient"
                    label="Firma gdzie jest składane CV"
                    placeholder="Oki doki sp. z.o.o"
                    v-model="form.recipient"
                    :error="form.errors.recipient"
                />
                <Input
                    id="email"
                    type="email"
                    label="E-mail"
                    placeholder="Adres e-mail wyświetlany na CV"
                    v-model="form.email"
                    :error="form.errors.email"
                />
                <Input
                    id="phone"
                    label="Numer telefonu"
                    placeholder="+48 123 456 789"
                    v-model="form.phone_number"
                    :error="form.errors.phone_number"
                />
                <Input
                    id="locations"
                    label="Lokalizacje"
                    placeholder="Miejsca pracy."
                    v-model="locationsToString"
                    :error="form.errors.locations"
                />
                <Input
                    id="position"
                    label="Stanowisko (opcjonalne)"
                    placeholder="Stanowisko na jakie jest rekrutacja."
                    v-model="form.position"
                    :error="form.errors.position"
                />
                <Input
                    id="notes"
                    type="textarea"
                    label="Notatki (opcjonalne)"
                    placeholder="Notatka dla administratora"
                    v-model="form.notes"
                    :error="form.errors.notes"
                />
                <Input
                    id="mission"
                    type="textarea"
                    label="Misja - wstęp (opcjonalne)"
                    placeholder="Krótki opis, list motywacyjny."
                    v-model="form.mission"
                    :error="form.errors.mission"
                />
                <Input
                    id="rodo"
                    type="textarea"
                    label="RODO (opcjonalne)"
                    placeholder="Klauzula informacyjna RODO"
                    v-model="form.rodo"
                    :error="form.errors.rodo"
                />
                <button class="px-0.5 py-1 rounded-lg bg-[#436da7] border-4 border-[#436da7] text-white text-lg hover:bg-transparent hover:text-[#436da7]">Utwórz nowe CV</button>
            </form>
        </div>
    </div>
</template>
