<template>
  <div class="worship-management">
    <h2>Gottesdienst Verwaltung</h2>
    <form @submit.prevent="saveWorship">
      <label for="eventPlaceId">Veranstaltungsort:</label>
      <multiselect v-model="selectedEventPlace" :options="eventPlaces" label="name" track-by="id"
        placeholder="Veranstaltungsort wählen"></multiselect>

      <label for="date">Datum:</label>
      <input type="date" id="date" v-model="worshipData.date" required>

      <label for="dayName">Name des Tags:</label>
      <input type="text" id="dayName" v-model="worshipData.dayName" required>

      <label for="time">Uhrzeit:</label>
      <input type="time" id="time" v-model="worshipData.time" required>

      <label for="title">Titel:</label>
      <input type="text" id="title" v-model="worshipData.title" required>

      <label for="organizer">Gestalter:</label>
      <input type="text" id="organizer" v-model="worshipData.organizer">

      <label for="collection">Kollekte:</label>
      <input type="text" id="collection" v-model="worshipData.collection">

      <label for="address">Adresse:</label>
      <input type="text" id="address" v-model="worshipData.address">

      <label for="selfInformation">Selbstinformation:</label>
      <input type="checkbox" id="selfInformation" v-model="worshipData.selfInformation">

      <label for="highlightTime">Uhrzeit hervorheben:</label>
      <input type="checkbox" id="highlightTime" v-model="worshipData.highlightTime">

      <label for="neighborInvitation">Einladung zum Nachbarschaftsraum:</label>
      <input type="checkbox" id="neighborInvitation" v-model="worshipData.neighborInvitation">

      <label for="introLine">Einleitungszeile:</label>
      <input type="text" id="introLine" v-model="worshipData.introLine">

      <button type="submit">Speichern</button>
      <button type="button" @click="resetForm">Neuer Gottesdienst</button>
    </form>

    <ul>
      <li v-for="worship in worships" :key="worship.id">
        <span>{{ worship.title }} - {{ formatDate(worship.date) }}, {{ formatTime(worship.time) }}</span>
        <button @click="editWorship(worship)">Bearbeiten</button>
        <button @click="deleteWorship(worship.id)">Löschen</button>
        <div class="tooltip">{{ getEventPlaceName(worship.eventPlaceId) }}</div>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';
import Multiselect from 'vue-multiselect';
import { formatTime, formatDate } from '../../utils/strings'; // Importieren der Methode

export default {
  name: 'WorshipManagement',
  components: { Multiselect },
  data() {
    return {
      worships: [],
      eventPlaces: [],
      worshipData: {
        eventPlaceId: null,
        date: '',
        time: '',
        title: '',
        organizer: '',
        collection: '',
        address: '',
        selfInformation: false,
        highlightTime: false,
        neighborInvitation: false,
        introLine: ''
      },
      selectedEventPlace: null,
      editMode: false,
      editId: null
    };
  },
  async created() {
    await this.fetchEventPlaces();
    await this.fetchWorships();
  },
  methods: {
    formatTime,
    formatDate,
    async fetchWorships() {
      try {
        const response = await axios.get('/worships');
        this.worships = response.data;
      } catch (error) {
        console.error('Fehler beim Abrufen der Gottesdienste:', error);
      }
    },
    async fetchEventPlaces() {
      try {
        const response = await axios.get('/event-places');
        this.eventPlaces = response.data;
      } catch (error) {
        console.error('Fehler beim Abrufen der Veranstaltungsorte:', error);
      }
    },
    async saveWorship() {
      try {
        const payload = {
          ...this.worshipData,
          eventPlaceId: this.selectedEventPlace ? this.selectedEventPlace.id : null
        };

        if (this.editMode) {
          await axios.put(`/worships/${this.editId}`, payload);
        } else {
          await axios.post('/worships', payload);
        }

        this.resetForm();
        await this.fetchWorships();
      } catch (error) {
        console.error('Fehler beim Speichern des Gottesdienstes:', error);
      }
    },
    editWorship(worship) {
      this.worshipData = { ...worship };
      this.selectedEventPlace = this.eventPlaces.find(ep => ep.id === worship.eventPlaceId);
      this.editMode = true;
      this.editId = worship.id;
    },
    async deleteWorship(id) {
      try {
        await axios.delete(`/worships/${id}`);
        await this.fetchWorships();
      } catch (error) {
        console.error('Fehler beim Löschen des Gottesdienstes:', error);
      }
    },
    resetForm() {
      this.worshipData = {
        eventPlaceId: null,
        date: '',
        time: '',
        title: '',
        organizer: '',
        collection: '',
        address: '',
        selfInformation: false,
        highlightTime: false,
        neighborInvitation: false,
        introLine: ''
      };
      this.selectedEventPlace = null;
      this.editMode = false;
      this.editId = null;
    },
    getEventPlaceName(eventPlaceId) {
      const place = this.eventPlaces.find(place => place.id === eventPlaceId);
      return place ? place.name : 'Unbekannter Ort';
    }
  }
};
</script>

<style scoped>
@import 'vue-multiselect/dist/vue-multiselect.css';

.worship-management {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

form {
  display: flex;
  flex-direction: column;
}

label {
  margin-top: 10px;
}

button {
  margin-top: 20px;
}

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;
}

.tooltip {
  visibility: hidden;
  width: auto;
  background-color: rgba(224, 224, 224, 0.6);
  color: #000;
  text-align: center;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 75%;
  left: 50%;
  margin-left: -100px;
  padding: 5px;
  border: 1px solid #000;
  opacity: 0;
  transition: opacity 0.2s;
}

li:hover .tooltip {
  visibility: visible;
  opacity: 1;
}
</style>
