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

const props = defineProps({
    cv: {
        type: Object,
        required: true,
    }
});

const locations = ref(props.cv.locations);
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(props.cv.mission);
const missionToString = computed({
    get: () => mission.value.join("\n"),
    set: (value) => {
        mission.value = value.split("\n");
    }
});

const form = useForm({
    recipient: props.cv.recipient,
    email: props.cv.email,
    phone_number: props.cv.phone.formattedNumber,
    locations: locations,
    mission: missionToString,
    rodo: props.cv.rodo,
    position: props.cv.position,
});

function updateCV() {
    form.put(`/dashboard/cv/${props.cv.token}`);
}
</script>

<template>
    <InertiaHead title="Edycja danych do CV" />
    <div class="p-4">
        <header class="flex items-center justify-between 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">Edycja danych do CV</h1>
            </div>
            <InertiaLink
                as="button"
                :href="`/dashboard/cv/${cv.token}/delete`"
                class="flex items-center gap-2 px-2 py-1 text-red-600 hover:text-white hover:bg-red-600 rounded-md"
                title="Usuń CV"
                ><FontAwesomeIcon :icon="['fas', 'trash']" />Usuń</InertiaLink>
        </header>
        <div>
            <form class="flex flex-col gap-4" @submit.prevent="updateCV">
                <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"
                    placeholder="Stanowisko na jakie jest rekrutacja."
                    v-model="form.position"
                    :error="form.errors.position"
                />
                <Input
                    id="mission"
                    type="textarea"
                    label="Misja - wstęp"
                    placeholder="Krótki opis, list motywacyjny."
                    v-model="form.mission"
                    :error="form.errors.mission"
                />
                <Input
                    id="rodo"
                    type="textarea"
                    label="RODO"
                    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]">Edytuj CV</button>
            </form>
        </div>
    </div>
</template>
