<template>
  <form class="d-grid gap-2" @submit.prevent="$emit('submit')">
    <div>
      <label class="form-label">Employé</label>
      <select :value="form.employee" class="form-select" @change="updateField('employee', $event.target.value)">
        <option value="" disabled>Choisir un employé</option>
        <option v-for="collab in collaborators" :key="collab.id" :value="collab.name">
          {{ collab.name }}
        </option>
      </select>
    </div>

    <div class="row g-2">
      <div class="col-6">
        <label class="form-label">Du</label>
        <soft-input :model-value="form.startDate" type="date" @update:model-value="updateField('startDate', $event)" />
      </div>
      <div class="col-6">
        <label class="form-label">Au</label>
        <soft-input :model-value="form.endDate" type="date" @update:model-value="updateField('endDate', $event)" />
      </div>
    </div>

    <div>
      <label class="form-label">Motif</label>
      <soft-input
        :model-value="form.reason"
        placeholder="Congé annuel"
        @update:model-value="updateField('reason', $event)"
      />
    </div>

    <div class="d-flex gap-2 justify-content-end pt-2">
      <soft-button color="secondary" variant="outline" @click="$emit('back')">Retour</soft-button>
      <soft-button color="warning" variant="gradient" type="submit">Enregistrer</soft-button>
    </div>
  </form>
</template>

<script setup>
import SoftButton from "@/components/SoftButton.vue";
import SoftInput from "@/components/SoftInput.vue";
import { defineEmits, defineProps } from "vue";
defineProps({
  form: {
    type: Object,
    required: true,
  },
  collaborators: {
    type: Array,
    default: () => [],
  },
});

const emit = defineEmits(["update:form", "submit", "back"]);

const updateField = (field, value) => {
  emit("update:form", { field, value });
};
</script>

