<template>
	<div class="d-flex align-center flex-column">
		<v-card width="800">
			<v-card-title>Medical Slip</v-card-title>
			<v-card-text>
				<v-row justify="end">
					<v-col cols="12" sm="6">
						<v-text-field label="Date" readonly :model-value="slipStore.getSlipDate"></v-text-field>
					</v-col>
					<v-col cols="12" sm="6"><v-text-field label="Usage Count" readonly :model-value="slipStore.getSlipCount" outlined></v-text-field></v-col>
				</v-row>
				<v-row>
					<v-col cols="12"><v-text-field label="Client" :model-value="slipStore.getClientName" readonly></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 slipStore.getDetails" :key="item.medicinename">
									<td>{{ item.medicinename }}</td>
									<td>{{ item.quantity }}</td>
									<td>{{ item.details }}</td>
								</tr>
							</tbody>
						</v-table>
						<br /><br />
					</v-col>
					<v-divider></v-divider>
				</v-row>
				<v-row>
					<v-col><v-textarea label="Additional Details" :model-value="slipStore.getInstructions"></v-textarea></v-col>
				</v-row>
			</v-card-text>
		</v-card>
	</div>
</template>

<script setup>
import { useSlipStore } from "~~/stores/slips";

definePageMeta({
	layout: "default",
});

let clientName = ref("");

// Declare Access to Nuxt Env Object 
const runtimeConfig = useRuntimeConfig();
// Get Parameters from URL
const { searchid } = useRoute().params;
// Declare the Use of the Store
const slipStore = useSlipStore();
// Accessing GETTERS, STATE and ACTIONS
slipStore.getSlipDetails(searchid, runtimeConfig.CMS_BASE_URL);
</script>
