<template>
    <div>
        <table v-if="worships.length" class="worships">
            <tr v-for="worship in worships" :key="worship.id" :style="worship.eventPlace && worship.eventPlace.backgroundColor ? `background-color:${worship.eventPlace.backgroundColor}` : ''">
                <td>
                    <div>{{ formatDate(worship.date) }}</div>
                    <div>{{ worship.dayName }}</div>
                </td>
                <td>
                    <div v-if="worship.neighborInvitation" class="neighborhood-invitation">Einladung zum Gottesdienst im Nachbarschaftsraum:</div>
                    <h3>
                        <span :class="worship.highlightTime ? 'highlight-time' : ''">{{ formatTime(worship.time) }}</span>&nbsp;-&nbsp;
                        {{ !worship.neighborInvitation ? worship.title : `Gottesdienst in ${worship.eventPlace.name}` }}
                    </h3>
                    <div v-if="worship.organizer">Gestaltung: {{ worship.organizer }}</div>
                    <div v-if="worship.collection">Kollekte: {{ worship.collection }}</div>
                    <div v-if="worship.eventPlace.id && worship.eventPlace.id">
                        Adresse: {{ worship.eventPlace.name }}, {{ worship.eventPlace.street }}, {{ worship.eventPlace.city }}
                    </div>
                    <div v-if="worship.selfInformation" class="selfinformation">Bitte informieren Sie sich auch auf den Internetseiten dieser Gemeinde!</div>
                </td>
            </tr>
        </table>
        <p v-else>Keine Gottesdienste verfügbar.</p>
    </div>
</template>

<script>
import axios from '@/axios';
import { formatTime, formatDate } from '@/utils/strings';

export default {
    name: 'WorshipRender',
    props: {
        location: {
            type: Number,
            required: true
        },
        orderBy: {
            type: String,
            default: 'date ASC'
        }
    },
    data() {
        return {
            worships: []
        };
    },
    async created() {
        await this.fetchWorships();
    },
    methods: {
        formatTime,
        formatDate,
        async fetchWorships() {
            try {
                const response = await axios.get('/worships/filtered', {
                    params: {
                        location: this.location,
                        orderBy: this.orderBy
                    }
                });
                this.worships = response.data;
            } catch (error) {
                console.error('Fehler beim Abrufen der Gottesdienste:', error);
            }
        }
    }
};
</script>

<style scoped>
table.worships {
    border-collapse: collapse;
    width: 100%;
}
table.worships td {
    border: 1px solid #000;
    text-align: center;
}
h3 {
    margin: 0;
}
table.worships td div{
    margin: 5px;
}
.highlight-time {
    text-decoration: underline;
}
.neighborhood-invitation {
    font-weight: bold;
    color: #0020e0;
}
</style>