<template>
    <div class="institution-form">
      <h2>{{ institution && institution.id ? 'Institution bearbeiten' : 'Institution erstellen' }}</h2>
      <form @submit.prevent="saveInstitution">
        <label for="name">Name:</label>
        <input type="text" id="name" v-model="localInstitution.name" required>
  
        <label for="street">Straße:</label>
        <input type="text" id="street" v-model="localInstitution.street">
  
        <label for="zipcode">PLZ:</label>
        <input type="text" id="zipcode" v-model="localInstitution.zipcode">
  
        <label for="city">Ort:</label>
        <input type="text" id="city" v-model="localInstitution.city">
  
        <label for="phone">Telefon:</label>
        <input type="text" id="phone" v-model="localInstitution.phone">
  
        <label for="fax">Fax:</label>
        <input type="text" id="fax" v-model="localInstitution.fax">
  
        <label for="email">E-Mail:</label>
        <input type="email" id="email" v-model="localInstitution.email">
  
        <label for="contactPersons">Kontaktpersonen:</label>
        <multiselect 
          v-model="selectedContactPersons"
          :options="contactPersons"
          :multiple="true"
          placeholder="Kontaktpersonen auswählen"
          label="name"
          track-by="id"
        ></multiselect>
  
        <button type="submit">Speichern</button>
        <button type="button" @click="$emit('cancelled')">Abbrechen</button>
      </form>
    </div>
  </template>
  
  <script>
  import Multiselect from 'vue-multiselect';
  import axios from 'axios';

  export default {
    name: 'InstitutionForm',
    components: { Multiselect },
    props: {
      institution: {
        type: Object,
        default: () => null
      },
      contactPersons: {
        type: Array,
        required: true
      }
    },
    data() {
      return {
        localInstitution: {
          name: '',
          street: '',
          zipcode: '',
          city: '',
          phone: '',
          fax: '',
          email: '',
          contactPersons: []
        },
        selectedContactPersons: []
      };
    },
    watch: {
      institution: {
        immediate: true,
        handler(newVal) {
          if (newVal) {
            this.localInstitution = { ...newVal };
            this.selectedContactPersons = newVal.contactPersons || [];
          }
        }
      },
      selectedContactPersons(newVal) {
        this.localInstitution.contactPersons = newVal;
      }
    },
    methods: {
      async saveInstitution() {
        try {
          if (this.localInstitution.id) {
            await axios.put(`/institutions/${this.localInstitution.id}`, this.localInstitution);
          } else {
            await axios.post('/institutions', this.localInstitution);
          }
          this.$emit('saved');
          this.$emit('cancelled');
        } catch (error) {
          console.error('Fehler beim Speichern der Institution:', error);
        }
      }
    }
  };
  </script>
  
  <style scoped>
  @import '~vue-multiselect/dist/vue-multiselect.css';

  .institution-form {
    max-width: 400px;
    margin: auto;
  }
  form {
    display: flex;
    flex-direction: column;
  }
  label {
    margin-top: 10px;
  }
  button {
    margin-top: 20px;
  }
  </style>
  