<template>
  <div class="institution-management">
    <h2>Institutionenverwaltung</h2>
    <form @submit.prevent="saveInstitution">
      <label for="name">Name:</label>
      <input type="text" id="name" v-model="institutionData.name" required>
  
      <label for="street">Straße:</label>
      <input type="text" id="street" v-model="institutionData.street">
  
      <label for="zipcode">PLZ:</label>
      <input type="text" id="zipcode" v-model="institutionData.zipcode">
  
      <label for="city">Stadt:</label>
      <input type="text" id="city" v-model="institutionData.city">
  
      <label for="phone">Telefon:</label>
      <input type="text" id="phone" v-model="institutionData.phone">
  
      <label for="fax">Fax:</label>
      <input type="text" id="fax" v-model="institutionData.fax">
  
      <label for="email">Email:</label>
      <input type="email" id="email" v-model="institutionData.email">
  
      <button type="submit">Speichern</button>
      <button type="button" @click="resetForm" v-if="editMode">Neue Institution erstellen</button>
    </form>

    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Bearbeiten</th>
          <th>Löschen</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="institution in institutions" :key="institution.id">
          <td>{{ institution.name }}</td>
          <td><button @click="editInstitution(institution)">Bearbeiten</button></td>
          <td><button @click="deleteInstitution(institution.id)">Löschen</button></td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'InstitutionManagement',
  data() {
    return {
      institutions: [],
      contactPersons: [],
      institutionData: {
        name: '',
        street: '',
        zipcode: '',
        city: '',
        phone: '',
        fax: '',
        email: ''
      },
      selectedInstitution: null,
      showForm: false,
      editMode: false,
      editId: null
    };
  },
  created() {
    this.fetchInstitutions();
    this.fetchContactPersons();
  },
  methods: {
    async fetchInstitutions() {
      try {
        const response = await axios.get('/institutions');
        this.institutions = response.data;
      } catch (error) {
        console.error('Fehler beim Abrufen der Institutionen:', error);
      }
    },
    async fetchContactPersons() {
      try {
        const response = await axios.get('/contact-persons');
        this.contactPersons = response.data;
      } catch (error) {
        console.error('Fehler beim Abrufen der Kontaktpersonen:', error);
      }
    },
    async saveInstitution() {
      try {
        if (this.editMode) {
          await axios.put(`/institutions/${this.editId}`, this.institutionData);
        } else {
          const response = await axios.post('/institutions', this.institutionData);
          this.institutions.push(response.data);
        }
        this.resetForm();
        await this.fetchInstitutions();
      } catch (error) {
        console.error('Fehler beim Speichern der Institution:', error);
      }
    },
    editInstitution(institution) {
      this.institutionData = { ...institution };
      this.editMode = true;
      this.editId = institution.id;
      this.showForm = true;
    },
    async deleteInstitution(id) {
      try {
        await axios.delete(`/institutions/${id}`);
        this.fetchInstitutions();
      } catch (error) {
        console.error('Fehler beim Löschen der Institution:', error);
      }
    },
    resetForm() {
      this.institutionData = {
        name: '',
        street: '',
        zipcode: '',
        city: '',
        phone: '',
        fax: '',
        email: ''
      };
      this.editMode = false;
      this.editId = null;
      this.showForm = false;
    },
    showCreateForm() {
      this.resetForm();
      this.showForm = true;
    }
  }
};
</script>

<style scoped>
.institution-management {
  max-width: 600px;
  margin: auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

form {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

label {
  margin-top: 10px;
}

input {
  margin-top: 5px;
  margin-bottom: 10px;
  padding: 8px;
}

button {
  margin-top: 10px;
  padding: 10px;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

th, td {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: left;
}

th {
  background-color: #f4f4f4;
}
</style>
