<template>
    <div class="event-types-management">
      <h2>Event-Typen Verwaltung</h2>
      <form @submit.prevent="saveEventType">
        <label for="newEventType">Event-Typ:</label>
        <input type="text" id="newEventType" v-model="eventTypeData.caption" placeholder="Event-Typ" required>
        <button type="submit">{{ editMode ? 'Aktualisieren' : 'Hinzufügen' }}</button>
        <button type="button" v-if="editMode" @click="resetForm">Abbrechen</button>
      </form>
  
      <table>
        <tr v-for="eventType in eventTypes" :key="eventType.id">
          <td>{{ eventType.caption }}</td>
          <td><button @click="editEventType(eventType)">Bearbeiten</button></td>
          <td><button @click="deleteEventType(eventType.id)">Löschen</button></td>
        </tr>
      </table>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  
  export default {
    data() {
      return {
        eventTypes: [],
        eventTypeData: {
          caption: ''
        },
        editMode: false,
        editId: null
      };
    },
    methods: {
      async fetchEventTypes() {
        try {
          const response = await axios.get('/event-types');
          this.eventTypes = response.data;
        } catch (error) {
          console.error('Fehler beim Abrufen der Event-Typen:', error);
        }
      },
      async saveEventType() {
        try {
          if (this.editMode) {
            await axios.put(`/event-types/${this.editId}`, this.eventTypeData);
          } else {
            const response = await axios.post('/event-types', this.eventTypeData);
            this.eventTypes.push(response.data);
          }
          this.resetForm();
          await this.fetchEventTypes();
        } catch (error) {
          console.error('Fehler beim Speichern des Event-Typs:', error);
        }
      },
      editEventType(eventType) {
        this.eventTypeData = { ...eventType };
        this.editMode = true;
        this.editId = eventType.id;
      },
      async deleteEventType(id) {
        try {
          await axios.delete(`/event-types/${id}`);
          await this.fetchEventTypes();
        } catch (error) {
          console.error('Fehler beim Löschen des Event-Typs:', error);
        }
      },
      resetForm() {
        this.eventTypeData = {
          caption: ''
        };
        this.editMode = false;
        this.editId = null;
      }
    },
    async created() {
      await this.fetchEventTypes();
    }
  };
  </script>
  
  <style scoped>
  @import 'vue-multiselect/dist/vue-multiselect.css';
  
  .event-types-management {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
  }
  
  form {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
  }
  
  label {
    margin-top: 10px;
  }
  
  input {
    margin-top: 10px;
    padding: 5px;
  }
  
  button {
    margin-top: 20px;
    padding: 10px;
  }
  
  ul {
    margin-top: 20px;
  }
  
  li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid rgba(224, 224, 224, 0.9);
    position: relative;
  }
  
  button {
    margin-left: 10px;
  }
  </style>
  