<template>
	<div class="d-flex align-center flex-column">
		<v-card width="800">
			<v-card-title>Create New Medical Slip</v-card-title>
			<v-card-text>
				<v-row justify="end">
					<v-col cols="12" sm="6">
						<v-text-field label="Date" v-model="picked"></v-text-field>						
					</v-col>
					<v-col cols="12" sm="6"><v-text-field label="Usage Count" v-model="usageCount"></v-text-field></v-col>
				</v-row>
				<v-row>
					<v-col cols="12" sm="6"><v-text-field v-model="lname" label="Family Name"></v-text-field></v-col>
					<v-col cols="12" sm="6"><v-text-field v-model="fname" label="First Name"></v-text-field></v-col>
					<v-divider></v-divider>
				</v-row>
				<v-row>
					<v-col>
						<v-table>
							<thead>
								<tr>
									<th class="text-left">Medicine</th>
									<th class="text-left">Quantity</th>
									<th class="text-left">Details</th>
								</tr>
							</thead>
							<tbody>
								<tr v-for="item in slipMedicine" :key="item.medicinename">
									<td>{{ item.medicinename }}</td>
									<td>{{ item.quantity }}</td>
									<td>{{ item.details }}</td>
								</tr>
							</tbody>
						</v-table>
						<br /><br />
						<v-row>
							<v-dialog v-model="dialog" width="600" height="600" persistent>
								<template v-slot:activator="{ props }">
									<v-btn block color="blue" v-bind="props">Add Medicine</v-btn>
								</template>

								<v-card>
									<v-card-title>Add Medicine</v-card-title>
									<v-divider></v-divider>
									<v-card-text>
										<v-row>
											<v-col cols="12" md="4">
												<v-text-field v-model="medName" label="Medicine Name" required></v-text-field>
											</v-col>
											<v-col cols="12" md="4">
												<v-text-field v-model="medQty" label="Quantity" required></v-text-field>
											</v-col>
											<v-col cols="12" md="4">
												<v-text-field v-model="medDetail" label="Details" required></v-text-field>
											</v-col>
										</v-row>
									</v-card-text>
									<v-card-actions>
										<v-row>
											<v-col cols="12" md="6"><v-btn block color="error" @click="dialog = false">Close Dialog</v-btn></v-col>
											<v-col cols="12" md="6"><v-btn block color="success" @click="addMedicineToList(medName, medQty, medDetail)">Add</v-btn></v-col>
										</v-row>
									</v-card-actions>
								</v-card>
							</v-dialog>
						</v-row>
					</v-col>
					<v-divider></v-divider>
				</v-row>
				<v-row>
					<v-col><v-textarea label="Additional Instructions" v-model="instructions"></v-textarea></v-col>
				</v-row>
			</v-card-text>
			<v-card-actions>
				<v-btn block variant="tonal" color="green" @click="saveMedicalSlip">Save</v-btn>
			</v-card-actions>
		</v-card>
	</div>
</template>
<script setup>
import axios from "axios";
import { useToast } from "vue-toastification";
const runtimeConfig = useRuntimeConfig();
const router = useRouter();
const toast = useToast();
definePageMeta({
	layout: "default",
});

let slipMedicine = ref([]);
let usageCount = ref(0);
let fname = ref("");
let lname = ref("");
let medName = ref("");
let medQty = ref(0);
let medDetail = ref("");
let dialog = ref(false);
let instructions = ref("");
let menu2 = ref(false);
let dateVal = ref();
let myDate = new Date();
let picked = ref(myDate.toDateString());

function addMedicineToList(medicine, qty, detail) {
	slipMedicine.value.push({ medicinename: medicine, quantity: qty, details: detail });
	medName.value = "";
	medQty.value = "";
	medDetail.value = "";
	dialog.value = false;
}

async function saveMedicalSlip() {
	try {
		let myPayload = {
			data: {
				slipdate: picked.value,
				clientname: `${lname.value}, ${fname.value}`,
				availability: usageCount.value,
				slipmeta: slipMedicine.value,
				description: instructions.value,
			},
		};

		const myResult = await axios.post(`${runtimeConfig.CMS_BASE_URL}/api/slips`, myPayload);
		if (myResult) {
			toast.success("Successfully Created Medicine Slip");			
			router.push({ path: `/create/${myResult.data.data.attributes.publicid}` });
		}
	} catch (err) {
		console.log(err);
	}
}
</script>
