<template>
  <div class="event-places-management">
    <h2>Veranstaltungsorte verwalten</h2>
    <form @submit.prevent="addEventPlace">
      <label for="name">Name:</label>
      <input type="text" id="name" v-model="newEventPlace.name" placeholder="Name" required>
      <label for="street">Straße:</label>
      <input type="text" id="street" v-model="newEventPlace.street" placeholder="Straße" required>
      <label for="zipcode">PLZ:</label>
      <input type="text" id="zipcode" v-model="newEventPlace.zipcode" placeholder="PLZ" required>
      <label for="city">Stadt:</label>
      <input type="text" id="city" v-model="newEventPlace.city" placeholder="Stadt" required>
      <label for="city">Webseite:</label>
      <input type="text" id="website" v-model="newEventPlace.website" placeholder="Webseite" required>
      <label for="backgroundColor">Hintergrundfarbe:</label>
      <input type="color" id="backgroundColor" v-model="newEventPlace.backgroundColor">
      <button type="submit">Speichern</button>
      <button type="button" v-if="editMode" @click="resetForm">Neuen Veranstaltungsort erstellen</button>
    </form>

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

<script>
import axios from 'axios';

export default {
  data() {
    return {
      eventPlaces: [],
      newEventPlace: {
        name: '',
        street: '',
        zipcode: '',
        city: '',
        backgroundColor: '#ffffff',
        website: '',
      },
      editMode: false,
      editId: null
    };
  },
  methods: {
    async fetchEventPlaces() {
      const response = await axios.get('/event-places');
      this.eventPlaces = response.data;
    },
    async addEventPlace() {
      if (this.editMode) {
        await axios.put(`/event-places/${this.editId}`, this.newEventPlace);
      } else {
        const response = await axios.post('/event-places', this.newEventPlace);
        this.eventPlaces.push(response.data);
      }
      this.resetForm();
      await this.fetchEventPlaces();
    },
    async updateEventPlace(eventPlace) {
      await axios.put(`/event-places/${eventPlace.id}`, eventPlace);
      this.fetchEventPlaces(); // Refresh the list
    },
    async deleteEventPlace(id) {
      await axios.delete(`/event-places/${id}`);
      this.fetchEventPlaces(); // Refresh the list
    },
    editEventPlace(eventPlace) {
      this.newEventPlace = { ...eventPlace };
      this.editMode = true;
      this.editId = eventPlace.id;
    },
    resetForm() {
      this.newEventPlace = {
        name: '',
        street: '',
        zipcode: '',
        city: '',
        backgroundColor: '#ffffff',
        website: '',
      };
      this.editMode = false;
      this.editId = null;
    }
  },
  created() {
    this.fetchEventPlaces();
  }
};
</script>

<style scoped>
.event-places-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>
