<template>
  <div class="event-management">
    <h2>Veranstaltungen</h2>
    <button @click="createEvent">Neue Veranstaltung</button>
    <EventForm v-if="showForm" 
               :event="selectedEvent" 
               :institutions="institutions" 
               :eventPlaces="eventPlaces" 
               :contactPersons="contactPersons" 
               @saved="handleEventSaved" 
               @cancelled="handleEventCancelled" />
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Typ</th>
          <th>Datum</th>
          <th>Uhrzeit</th>
          <th>Wochentag</th>
          <th>Beschreibung</th>
          <th>Aktionen</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="event in events" :key="event.id">
          <td>{{ event.name }}</td>
          <td>{{ getEventTypeCaption(event.eventTypeId) }}</td>
          <td>{{ event.date }}</td>
          <td>{{ formatTime(event.time) }}<span v-if="event.endTime"> - {{ formatTime(event.endTime) }}</span></td>
          <td>{{ getWeekdayName(event.dayOfWeek) }}</td>
          <td>{{ event.description }}</td>
          <td>
            <button @click="editEvent(event)">Bearbeiten</button>
            <button @click="deleteEvent(event.id)">Löschen</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from 'axios';
import EventForm from '@/components/EventForm.vue';
import { formatTime } from '../../utils/strings';

export default {
  components: { EventForm },
  data() {
    return {
      events: [],
      institutions: [],
      eventPlaces: [],
      contactPersons: [],
      eventTypes: [],
      selectedEvent: null,
      showForm: false,
    };
  },
  async created() {
    await this.fetchData();
  },
  methods: {
    formatTime,
    async fetchData() {
      try {
        const [eventResponse, institutionResponse, eventPlaceResponse, contactPersonResponse, eventTypeResponse] = await Promise.all([
          axios.get('/events'),
          axios.get('/institutions'),
          axios.get('/event-places'),
          axios.get('/contact-persons'),
          axios.get('/event-types')
        ]);

        this.events = eventResponse.data;
        this.institutions = institutionResponse.data;
        this.eventPlaces = eventPlaceResponse.data;
        this.contactPersons = contactPersonResponse.data;
        this.eventTypes = eventTypeResponse.data;
      } catch (error) {
        console.error('Fehler beim Abrufen der Daten:', error);
      }
    },
    createEvent() {
      this.selectedEvent = {};
      this.showForm = true;
    },
    editEvent(event) {
      this.selectedEvent = { ...event };
      this.showForm = true;
    },
    async deleteEvent(id) {
      try {
        await axios.delete(`/events/${id}`);
        this.fetchData();
      } catch (error) {
        console.error('Fehler beim Löschen der Veranstaltung:', error);
      }
    },
    handleEventSaved() {
      this.showForm = false;
      this.fetchData();
    },
    handleEventCancelled() {
      this.showForm = false;
    },
    getEventTypeCaption(eventTypeId) {
      const eventType = this.eventTypes.find(type => type.id === eventTypeId);
      return eventType ? eventType.caption : 'Unbekannt';
    },
    getWeekdayName(dayOfWeek) {
      const weekdays = ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'];
      return weekdays[dayOfWeek - 1];
    },
  }
};
</script>

<style scoped>
.event-management {
  max-width: 1200px;
  margin: 0 auto;
}

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

th,
td {
  border: 1px solid #ddd;
  padding: 8px;
}

th {
  background-color: #f2f2f2;
}

button {
  margin: 5px;
}
</style>
