<script lang="ts" setup>
import AdminNavbar from "../../components/admin/AdminNavbar.vue";
import { useRoute } from "vue-router";
import { ref } from "vue";
import RitzenbergenLib from "../../ritzenbergenlib.ts";
import InputP from "../../components/admin/InputP.vue";

const route = useRoute();

const token = ref(route.params.token);

async function submit(myevent) {
	const url = new URL(
		RitzenbergenLib.RitzenbergenLib.api("/admin/events/editEvent.php")
	);
	return fetch(url, {
		headers: {
			Authorization: "Bearer " + token.value,
		},
		body: JSON.stringify(myevent),
		method: "POST"
	});
}

const events = ref([]);

async function getEvents() {
	return fetch(RitzenbergenLib.RitzenbergenLib.api("/get_events.php"))
		.then((res) => res.json())
		.then((res) => {
			events.value = res;
			console.log(events.value);
			return res;
		});
}

getEvents();
</script>
<template>
	<AdminNavbar />
	<br />
	<br />
	<br />
	<br />
	<br />
	<h1>Events</h1>
	<table>
		<thead>
			<tr>
				<td>Name</td>
				<td>Datum</td>
				<td>Typ</td>
				<td>Inhalt</td>
				<td>Link</td>
				<td>Foto</td>
				<td>Minitext</td>
				<td>Formular</td>
				<td></td>
			</tr>
		</thead>
		<tbody>
			<tr v-for="event in events" :key="event.id">
				<td>
					<InputP
						v-model="event.eventname"
						:nullable="false"
						inputtype="text"
					/>
				</td>
				<td>
					<InputP
						v-model="event.datum"
						:nullable="false"
						inputtype="date"
					/>
				</td>
				<td>
					<select v-model="event.type">
						<option value="link">Link</option>
						<option value="markdown">Markdown</option>
						<option value="dlink">Download-Link</option>
						<option value="html">HTML</option>
						<option value="fotos">Fotos</option>
					</select>
				</td>
				<td>
					<textarea v-model="event.content"></textarea>
				</td>
				<td>
					<InputP
						v-model="event.link"
						:nullable="true"
						inputtype="text"
					/>
				</td>
				<td>
					<InputP
						v-model="event.foto"
						:nullable="false"
						inputtype="text"
					/>
				</td>
				<td>
					<InputP
						v-model="event.minitext"
						:nullable="false"
						inputtype="text"
					/>
				</td>
				<td>
					<select v-model="event.formular">
						<option :value="null"></option>
						<option :value="1">testformular-2</option>
					</select>
				</td>
				<td>
					<button @click="submit(event)">Speichern</button>
				</td>
			</tr>
		</tbody>
	</table>
</template>
<style scoped lang="scss">
@import "../../assets/css/bulitipp2.css";
h1 {
	text-align: center;
}
</style>
