<script setup>
import LabKit from '@/views/pages/overview/LabKit.vue';
import axios from '@axios';
import { useStore } from 'vuex';
const isLoadingVisible = ref(false);
const loginuser = ref('');
const scheduleDate = ref('');
const scheduleTime = ref('');
const timeZone = ref('');
const timeDifference = ref();
const timeUntilMeeting = ref('');
const labKitStatus = ref();
const store = useStore()
onMounted(async () => {
    localStorage.setItem('isLogin', true);
    const patient_id = localStorage.getItem('patient_id')
    const access_token = localStorage.getItem('access_token');
    isLoadingVisible.value = true;

    await store.dispatch('getLabKitOrderStatus')
    labKitStatus.value = store.getters.getLabOrderStatus.cart.status;
    console.log("labkit", labKitStatus.value);
    axios.post('/api/agent-last-appointment-detail/' + patient_id, {
        headers: {
            'Authorization': `Bearer ${access_token}`,
        }
    })
        .then(response => {
            console.log('Response:', response.data);
            if (response.data) {
                let diffInMinutes = response.data.time_diff;
                let appointmentData = response.data.appointment
                let patientData = response.data.patient
                loginuser.value = patientData.first_name + ' ' + patientData.last_name;
                scheduleTime.value = appointmentData.appointment_time;
                timeZone.value = appointmentData.timezone;
                timeDifference.value = diffInMinutes;
                console.log(scheduleTime.value);
                const appointment_date = new Date(appointmentData.appointment_date);
                const formattedDate = new Intl.DateTimeFormat('en-US', {
                    year: 'numeric',
                    month: 'long',
                    day: 'numeric',
                }).format(appointment_date);
                console.log('formattedDate', formattedDate)
                scheduleDate.value = formattedDate;
                isLoadingVisible.value = false;
            } else {
                isLoadingVisible.value = false;
            }
        })
        .catch(error => {
            console.error('Error:', error);
        });

});






</script>

<template>
    <VContainer>
        <VDialog v-model="isLoadingVisible" width="110" height="150" color="primary">
            <VCardText class="" style="color: white !important;">
                <div class="demo-space-x">
                    <VProgressCircular :size="40" color="primary" indeterminate />
                </div>
            </VCardText>

        </VDialog>
        <VRow>
            <VCol cols="12" md="7">
                <LabKit :itemProps="labKitStatus"></LabKit>
            </VCol>
            <VCol cols="12" md="5">
                <VCard>
                    <VCardTitle><b>Tips</b></VCardTitle>
                    <VCardText>
                        <ul class="ml-5">
                            <li> Drink a glass of water in the hour before you take your sample
                                relax</li>
                            <li> Take a hot shower or bath just before.</li>
                            <li> Stay standing and
                                Keep your arm
                                straight, with your hand below your waist</li>
                            <li>
                                Push the lancet firmly against your finger </li>
                            <li> Aim for the side of the tip of your finger,
                                not too close to your finger nail</li>
                            <li> If you're nervous, talk to us or ask someone to help</li>
                        </ul>




                    </VCardText>
                </VCard>
            </VCol>


        </VRow>
    </VContainer>
</template>
