<script setup>
import axios from '@axios';
// import { VideoPlayer } from '@videojs-player/vue';
// import 'video.js/dist/video-js.css';
const appiontmentDetail = ref();
const patientAddress = ref();
const labAddress = ref();
const labName = ref();
const labDistance = ref();
const labContact = ref();
const labBookDate = ref();
const labBookTime = ref();
const video_url = ref();
const selectedLab = ref();
const labDetail = ref();
const questionAnswer = ref([]);
const appiontmentDate = ref();
onMounted(() => {
    const userRole = localStorage.getItem('user_role');
    const patient_id = localStorage.getItem('patient_id');
    const access_token = localStorage.getItem('access_token');
    const appiontment_id = localStorage.getItem('appiontment-id');
    if (userRole == 'patient') {
        console.log('patient');
        axios.post('/api/appointment-detail/' + appiontment_id, {
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${access_token}`
            }
        })
            .then(response => {
                console.log(response.data);
                video_url.value = response.data.video_url;
                appiontmentDetail.value = response.data;
                let patientData = response.data.patient
                patientAddress.value = (patientData.address ? patientData.address + ', ' : '') +
                    (patientData.city ? patientData.city + ', ' : '') +
                    (patientData.state ? patientData.state + ' ' : '') +
                    (patientData.zip_code ? patientData.zip_code + ', ' : '') +
                    (patientData.country ? patientData.country : '');

                // Remove trailing comma and space if present
                patientAddress.value = patientAddress.value.replace(/,\s*$/, '');
                console.log(patientAddress.value)
                selectedLab.value = appiontmentDetail.value.lab;
                // labName.value = appiontmentDetail.value.lab.lab_name;
                // labAddress.value = appiontmentDetail.value.lab.lab_address;
                // labDistance.value = appiontmentDetail.value.lab.lab_distance;
                // labContact.value = appiontmentDetail.value.lab.lab_contact_no;
                appiontmentDate.value = appiontmentDetail.value.doctor_appointment.appointment_date + ' ' + appiontmentDetail.value.doctor_appointment.appointment_time;
            })
            .catch(error => {
                console.error(error);
                appiontmentDetail.value = [];
                questionAnswer.value = [];
                patientAddress.value = '';
            });

        axios.get('/api/patient-book-lab/get/' + appiontment_id, {
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${access_token}`
            }
        })
            .then(response => {
                console.log("patient lab detail", response.data);
                let data = response.data;
                selectedLab.value = appiontmentDetail.value.lab;
                labName.value = data.lab_name;
                labAddress.value = data.lab_address;
                labDistance.value = data.lab_distance;
                labContact.value = data.lab_contact_no;
                labBookDate.value = data.slot_date;
                labBookTime.value = data.slot_time;
                // localStorage.setItem('patient_id', response.data);
            })

            .catch(error => {
                console.error(error);
            });


    } else {
        axios.post('/agent/api/appointment-detail/' + appiontment_id, {
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${access_token}`
            }
        })
            .then(response => {
                console.log(response.data);
                localStorage.setItem('patient_id', response.data.patient.id);
                video_url.value = response.data.video_url;
                appiontmentDetail.value = response.data;
                let patientData = response.data.patient
                patientAddress.value = (patientData.address ? patientData.address + ', ' : '') +
                    (patientData.city ? patientData.city + ', ' : '') +
                    (patientData.state ? patientData.state + ' ' : '') +
                    (patientData.zip_code ? patientData.zip_code + ', ' : '') +
                    (patientData.country ? patientData.country : '');

                // Remove trailing comma and space if present
                patientAddress.value = patientAddress.value.replace(/,\s*$/, '');
                console.log(patientAddress.value)
                selectedLab.value = appiontmentDetail.value.lab;
                // labName.value = appiontmentDetail.value.lab.lab_name;
                // labAddress.value = appiontmentDetail.value.lab.lab_address;
                // labDistance.value = appiontmentDetail.value.lab.lab_distance;
                // labContact.value = appiontmentDetail.value.lab.lab_contact_no;
                appiontmentDate.value = appiontmentDetail.value.doctor_appointment.appointment_date + ' ' + appiontmentDetail.value.doctor_appointment.appointment_time;
            })

            .catch(error => {
                console.error(error);
                appiontmentDetail.value = [];
                patientAddress.value = '';
            });

        axios.post('/agent/api/patient-book-lab/get/' + appiontment_id, {
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${access_token}`
            }
        })
            .then(response => {
                console.log("lab detail", response.data);
                let data = response.data;
                selectedLab.value = appiontmentDetail.value.lab;
                labName.value = data.lab_name;
                labAddress.value = data.lab_address;
                labDistance.value = data.lab_distance;
                labContact.value = data.lab_contact_no;
                labBookDate.value = data.slot_date;
                labBookTime.value = data.slot_time;
                // localStorage.setItem('patient_id', response.data);
            })

            .catch(error => {
                console.error(error);
                labDetail.value = [];
            });


        axios.post('/agent/api/get-question-answer/' + patient_id + '/' + appiontment_id, {
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${access_token}`
            }
        })
            .then(response => {
                console.log(response.data);
                questionAnswer.value = response.data.questions;
            })

            .catch(error => {
                console.error(error);
                questionAnswer.value = [];
                patientAddress.value = '';
            });


    }
})
</script>
<template>
    <v-row>
        <!-- First Column -->
        <v-col cols="12" md="8">
            <video-player :src="video_url" controls :loop="true" :volume="0.6" responsive="true" width="820"
                height="400" aspectRatio="16:9" />
        </v-col>

        <!-- Second Column -->
        <v-col cols="12" md="4">

            <v-list style="height:auto">
                <v-list-item-group v-if="labName || labDistance || labAddress || labContact">
                    <v-list-item>
                        <v-list-item-content class="lab_address">
                            <v-list-item-title style="font-size: 20px;" v-if="labName">{{ labName }}</v-list-item-title>
                            <v-list-item-title class="text-wrap lab-icon-detail" v-if="labDistance">
                                <v-icon icon="mdi-map-marker" style="font-size: 25px; margin-top: 5px;"></v-icon>
                                <span class="lab-detail">{{
                labDistance }} away from your location </span>
                            </v-list-item-title>
                            <v-list-item-title class="text-wrap lab-icon-detail" v-if="labAddress">
                                <v-icon icon="mdi-home" style="font-size: 25px; margin-top: 5px;"></v-icon>
                                <span class="lab-detail">
                                    {{ labAddress }} </span>
                            </v-list-item-title>
                            <v-list-item-title class="text-wrap lab-icon-detail" v-if="labContact">
                                <v-icon icon="mdi-phone" style="font-size: 25px; margin-top: 5px;"></v-icon>
                                <span class="lab-detail">
                                    {{ labContact }} </span>
                            </v-list-item-title>

                            <!-- <v-list-item-subtitle v-if="labContact"><v-icon icon="mdi-phone"
                                    style="font-size: 25px; margin:5px 5px" /> {{
                                        labContact }}</v-list-item-subtitle> -->
                        </v-list-item-content>
                    </v-list-item>
                </v-list-item-group>
                <v-list-item-group>
                    <v-list-item v-if="labBookDate || labBookTime">
                        <v-list-item-content class="pt-2 lab_address">
                            <v-list-item-subtitle>
                                <b>Lab Appiontment:</b>
                            </v-list-item-subtitle>
                            <v-list-item-subtitle>
                                {{ labBookDate }} {{ labBookTime }}
                            </v-list-item-subtitle>
                        </v-list-item-content>
                    </v-list-item>
                    <v-list-item>
                        <v-list-item-content class="pt-2 lab_address">
                            <v-list-item-subtitle>
                                <b>Doctor Appiontment:</b>
                            </v-list-item-subtitle>
                            <v-list-item-subtitle>
                                {{ appiontmentDate }}
                            </v-list-item-subtitle>
                        </v-list-item-content>
                    </v-list-item>
                </v-list-item-group>
                <v-list-item-group v-if="patientAddress">
                    <v-list-item>
                        <v-list-item-subtitle><b>Address</b></v-list-item-subtitle>
                        <v-list-item-title class="text-wrap" style="font-size: 13px;color:#939393">
                            {{ patientAddress }}
                        </v-list-item-title>
                    </v-list-item>
                </v-list-item-group>
            </v-list>


        </v-col>
    </v-row>

    <br><br>
    <VCardTitle v-if="questionAnswer.length > 0">Questionaries</VCardTitle>
    <VRow class="mt-5 mb-5 px-3 ps-4" v-if="questionAnswer.length > 0">
        <VCol cols="6 " v-for="(ans, index) in questionAnswer">
            <VLabel>{{ ans.question }}</VLabel>
            <VTextField :type="ans.type" :value="ans.answer" size="500" disabled="" :style="{ color: 'black' }" />
        </VCol>
    </VRow>
</template>
<style>
.lab_address div {

    margin-bottom: 5px;
}

.lab-detail {
    margin-left: 10px;
    margin-top: 3px;
    font-size: 14px;
    flex: 1;
    overflow: hidden;
    word-wrap: break-word;
}

.lab-icon-detail {
    color: #939393;
    display: flex;
    align-items: flex-start;
}
</style>
