<script setup>
import {onMounted, reactive, ref} from "vue";
import ParticipationFees from "./ParticipationFees.vue";
import ParticipationOptions from "./ParticipationOptions.vue";
import EventAddons from "./EventAddons.vue";
import ParticipationSummary from "./ParticipationSummary.vue";
import CommonSettings from "./CommonSettings.vue";
import EventManagement from "./EventManagement.vue";
import Modal from "../../../../Views/Components/Modal.vue";
import MailCompose from "./MailCompose.vue";
import FullScreenModal from "../../../../Views/Components/FullScreenModal.vue";
import {toast} from "vue3-toastify";

const props = defineProps({
        data: Object,
    })

    const dynamicProps = reactive({
        event : null,
    });

    const displayData = ref('main');
    const showEventData = ref(false);


    async function showMain() {
        const response = await fetch("/api/v1/event/details/" + props.data.event.id + '/summary');
        const data = await response.json();
        Object.assign(dynamicProps, data);
        displayData.value = 'main';
    }

    async function showCommonSettings() {
        displayData.value = 'commonSettings';
    }

    async function showParticipationFees() {
        displayData.value = 'participationFees';
    }

    async function showParticipationOptions() {
        displayData.value = 'participationOptions';
    }

async function showEventAddons() {
    displayData.value = 'eventAddons';
}

    async function showEventManagement() {
        displayData.value = 'eventManagement';
    }

    async function eventData() {
        showEventData.value = true;
    }

    onMounted(async () => {
        const response = await fetch("/api/v1/event/details/" + props.data.event.id + '/summary');
        const data = await response.json();
        Object.assign(dynamicProps, data);
    });

    const mailCompose = ref(false);

    function mailToGroup() {
        mailCompose.value = true
    }

    async function archiveEvent() {
        const response = await fetch("/api/v1/event/details/" + props.data.event.identifier + "/archive" );
        const data = await response.json();
        if (data.status === 'success') {
            toast.success(data.message)
        } else {
            toast.error(data.message)
        }
    }

    async function sendPaymentReminder() {
        toast.info("Die Nachrichten werden gesendet. Bitte verlasse diese Seite nicht.");
        const response = await fetch("/api/v1/event/" + props.data.event.identifier + "/send-payment-reminder/" );
        const data = await response.json();
        if (data.success) {
            toast.success(data.message)
        } else {
            toast.error(data.message)
        }
    }
</script>

<template>
    <div class="smartphone-actions">
        <a :href="'/event/details/' + props.data.event.identifier + '/pdf/first-aid-list'">
            <input type="button" value="Erste-Hilfe-Liste (PDF)" />
        </a><br/>

        <a :href="'/event/details/' + props.data.event.identifier + '/csv/participant-list'">
            <input type="button" value="Teili-Liste (CSV)" />
        </a><br/>

        <a :href="'/event/details/' + props.data.event.identifier + '/pdf/kitchen-list'">
            <input type="button" value="Küchenübersicht (PDF)" />
        </a><br/>

        <a :href="'/event/details/' + props.data.event.identifier + '/pdf/amount-list'">
            <input type="button" value="Beitragsliste (PDF)" />
        </a><br/>

        <a :href="'/event/details/' + props.data.event.identifier + '/pdf/drinking-list'">
            <input type="button" value="Getränkeliste (PDF)" />
        </a><br/>

        <a :href="'/event/details/' + props.data.event.identifier + '/pdf/photo-permission-list'">
            <input type="button" value="Foto-Erlaubnis (PDF)" />
        </a><br/>
    </div>


    <ParticipationFees v-if="displayData === 'participationFees'" :event="dynamicProps.event"  @close="showMain" />
    <ParticipationOptions v-else-if="displayData === 'participationOptions'" :event="dynamicProps.event"
                          @close="showMain"/>
    <EventAddons v-else-if="displayData === 'eventAddons'" :event="dynamicProps.event" @close="showMain"/>
    <CommonSettings v-else-if="displayData === 'commonSettings'" :event="dynamicProps.event"  @close="showMain" />
    <EventManagement v-else-if="displayData === 'eventManagement'" :event="dynamicProps.event"  @close="showMain" />

    <div class="event-flexbox" v-else>
        <div class="event-flexbox-row top">
            <div class="actions-left"><ParticipationSummary v-if="dynamicProps.event" :event="dynamicProps.event" /></div>
            <div class="actions-right">
                <a :href="'/event/details/' + props.data.event.identifier + '/pdf/first-aid-list'">
                    <input type="button" value="Erste-Hilfe-Liste (PDF)" />
                </a><br/>

                <a :href="'/event/details/' + props.data.event.identifier + '/csv/participant-list'">
                    <input type="button" value="Teili-Liste (CSV)" />
                </a><br/>

                <a :href="'/event/details/' + props.data.event.identifier + '/pdf/kitchen-list'">
                    <input type="button" value="Küchenübersicht (PDF)" />
                </a><br/>

                <a :href="'/event/details/' + props.data.event.identifier + '/pdf/amount-list'">
                    <input type="button" value="Beitragsliste (PDF)" />
                </a><br/>

                <a :href="'/event/details/' + props.data.event.identifier + '/pdf/drinking-list'">
                    <input type="button" value="Getränkeliste (PDF)" />
                </a><br/>

                <a :href="'/event/details/' + props.data.event.identifier + '/pdf/photo-permission-list'">
                    <input type="button" value="Foto-Erlaubnis (PDF)" />
                </a><br/>
                <input type="button" @click="sendPaymentReminder" class="fix-button" value="Zahlungserinnerung senden" /><br/>
                <input type="button" class="deny-button" value="Letzte Mahnung senden" style="display: none" /><br/>
                <input type="button" value="Rundmail senden" @click="mailToGroup" /><br/>
            </div>
        </div>



        <div>
            <table>
                <tr>
                    <th style="width: 200px">Veranstaltung</th>
                    <td>{{ dynamicProps.event.name }}</td>
                </tr>
                <tr>
                    <th style="width: 200px">Beginn</th>
                    <td>{{ dynamicProps.event.eventBegin }}</td>
                </tr>

                <tr>
                    <th>Ende</th>
                    <td>{{ dynamicProps.event.eventEnd }}</td>
                </tr>

                <tr>
                    <th>Anmeldeschluss</th>
                    <td>{{dynamicProps.event.earlyBirdEnd.formatted}}</td>
                </tr>

                <tr>
                    <th>Nachmeldeschluss</th>
                    <td>{{dynamicProps.event.registrationFinalEnd.formatted}}</td>
                </tr>

                <tr>
                    <th>Anmelde-URL</th>
                    <td>
                        {{dynamicProps.event.urlShort}}<br />
                        <img :src="'/print-event-code/' + dynamicProps.event.identifier" alt="Event Code" style="width: 150px; height: 150px; margin-top: 20px;" />
                    </td>
                </tr>
            </table>
        </div>


        <div class="event-flexbox-row bottom">
            <label style="font-size: 9pt;" class="link" @click="showCommonSettings">Allgemeine Einstellungen</label> &nbsp;
            <label style="font-size: 9pt;" class="link" @click="showEventManagement">Veranstaltungsleitung</label> &nbsp;
            <label style="font-size: 9pt;" class="link" @click="showParticipationFees">Teilnahmegebühren</label> &nbsp;
            <label style="font-size: 9pt;" class="link" @click="showParticipationOptions">Teilnahmeoptionen</label>
            &nbsp;
            <label style="font-size: 9pt;" class="link" @click="showEventAddons">Zusatzoptionen</label>
            <a style="font-size: 9pt;" class="link" :href="'/budget/' + props.data.event.costUnit.id">Budget bearbeiten</a>
            <a style="font-size: 9pt;" class="link" :href="'/cost-unit/' + props.data.event.costUnit.id">Ausgabenübersicht</a>
            <a v-if="!dynamicProps.event.registrationAllowed && !dynamicProps.event.archived" style="color: #ff0000; font-size: 9pt;" class="link" @click="archiveEvent">Archivieren</a>
        </div>
    </div>

    <Modal title="Veranstaltungsdetails" v-if="showEventData" :show="showEventData" @close="showEventData = false">

        <table>
            <tr>
                <th>Beginn</th>
                <td>{{ dynamicProps.event.eventBegin }}</td>
            </tr>

            <tr>
                <th>Ende</th>
                <td>{{ dynamicProps.event.eventEnd }}</td>
            </tr>

            <tr>
                <th>Anmeldeschluss</th>
                <td>{{dynamicProps.event.earlyBirdEnd.formatted}}</td>
            </tr>

            <tr>
                <th>Nachmeldeschluss</th>
                <td>{{dynamicProps.event.registrationFinalEnd.formatted}}</td>
            </tr>

            <tr>
                <th>Anmelde-URL</th>
                <td>
                    {{dynamicProps.event.url}}<br />
                    <img :src="'/print-event-code/' + dynamicProps.event.identifier" alt="Event Code" style="width: 150px; height: 150px; margin-top: 20px;" />
                </td>
            </tr>
        </table>
    </Modal>

    <FullScreenModal
        :show="mailCompose"
        title="E-Mail senden"
        @close="mailCompose = false"
    >
        <MailCompose @closeComposer="mailCompose = false" :event="dynamicProps.event" mailToType="all" recipientIdentifier="Alle Teilnehmenden" />
    </FullScreenModal>

</template>

<style>
.event-flexbox {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 95%;
    margin: 20px auto 0;
}

.event-flexbox-row {
    display: flex;
    gap: 10px; /* Abstand zwischen den Spalten */
}

.event-flexbox-row.top .actions-left {
    flex: 0 0 calc(100% - 300px);
    padding: 10px;
}

.event-flexbox-row.top .actions-right {
    flex: 0 0 200px;
    padding: 10px;
}

.event-flexbox-row.bottom {

    padding: 10px;
}

.event-flexbox-row.top .actions-right input[type="button"] {
    width: 100% !important;
    margin-bottom: 10px;
}

.smartphone-actions {
    display: none;
}

/* ─── Smartphone ─── */
@media (max-width: 639px) {
    .smartphone-actions {
        display: block;
        width: 100%;
        text-align: center;
    }

    .event-flexbox {
        display: none;
    }
}


</style>
