<script setup>
import NavBarNotifications from '@/layouts/components/NavBarNotifications.vue';
import axios from "@axios";
import upgradeBannerDark from "@images/pro/upgrade-banner-dark.png";
import upgradeBannerLight from "@images/pro/upgrade-banner-light.png";
import VerticalNavLayout from "@layouts/components/VerticalNavLayout.vue";
import VerticalNavLink from "@layouts/components/VerticalNavLink.vue";
import { useRoute, useRouter } from "vue-router";
import { useTheme } from "vuetify";
import { useStore } from "vuex";
const isConferncePage = computed(
    () => store.getters.getCurrentPage === "/provider/telehealth"
);
const isConferncePageForPatient = computed(
    () => store.getters.getCurrentPage === "/queue"
);
const router = useRouter();
const route = useRoute();
const store = useStore();
const queueUsers = ref([]);
const usertime = ref(null);
const isMuted = ref(false);
const isMicrophoneAllowed = ref(null);

const isCameraAllowed = ref(false);
const currentUser = ref(localStorage.getItem("user_role"));
const toggelUserValue = ref(null);
const isMobile = ref(window.innerWidth <= 768);
const isLoadingVisible = ref(false);
const patientName = ref();
const profileData = ref(null);
const profileName = ref(null);

// Components
import Footer from "@/layouts/components/Footer.vue";
import QueueComponent from "@/layouts/components/QueueComponent.vue";
import UserProfile from "@/layouts/components/UserProfile.vue";
import { computed } from "vue";
const vuetifyTheme = useTheme();
const userRole = localStorage.getItem("user_role"); // Fetch user role from local storage
const isPatient = computed(() => userRole.toLowerCase() === "patient");
const isAgent = computed(() => userRole.toLowerCase() === "agent");
//const currentRout = computed(() => localStorage.getItem('getCurrentPage'));queue');

const patient = ref();
const upgradeBanner = computed(() => {
    return vuetifyTheme.global.name.value === "light"
        ? upgradeBannerLight
        : upgradeBannerDark;
});
const isCameraPermissionGranted = ref(false);
const isMicrophonePermissionGranted = ref(false);
const getIsTonalSnackbarVisible = ref(false);
const errorMessage = ref(null);
const isMenu = ref(false);

const checkMobile = () => {
    isMobile.value = window.innerWidth <= 768;
};

const items = [
    {
        title: 'Orders', icon: 'mdi-shopping-cart', to: '/orders-list'

    },
    {
        title: 'Subscriptions', icon: 'mdi-refresh-circle', to: '/subscriptions',
    },
    { title: 'Schedules', icon: 'tabler-clock', to: '/schedules' },
    {
        title: 'Complete', icon: 'mdi-success-circle',
        to: '/complete'
    },
];

const locations = [
    'top',
    'bottom',
    'start',
    'end',
    'center',
];
const location = ref('bottom');
onMounted(async () => {
    window.addEventListener("resize", checkMobile);
    const access_token = localStorage.getItem("access_token");
    if (currentUser.value == "agent") {
        await store.dispatch("getAgentProfile");
        profileData.value = store.getters.getAgentProfile.ai_switch;
        profileName.value = profileData.value.name;
        console.log("profileData", profileData.value);
    }
    if (currentUser.value == "patient") {
        await loadGoogleAnalytics();
        // console.log("patient", currentUser.value);
        patient.value = localStorage.getItem("patient_id");
        await axios
            .post("/api/get-patient-detail/" + patient.value, {
                headers: {
                    Authorization: `Bearer ${access_token}`,
                },
            })
            .then((response) => {
                // console.log('Response:', response.data);
                if (response.data) {
                    let patientData = response.data.patient;
                    profileName.value =
                        patientData.first_name + " " + patientData.last_name;
                    console.log("data", profileName.value);
                } else {
                    isLoadingVisible.value = false;
                }
            })
            .catch((error) => {
                console.error("Error:", error);
            });
    }

    //   await checkPermissions();
});
const loadGoogleAnalytics = async () => {
  const script = document.createElement('script')
  script.async = true
  script.src = 'https://www.googletagmanager.com/gtag/js?id=G-0VZR7VCVWD'
  document.head.appendChild(script)

  window.dataLayer = window.dataLayer || []
  function gtag(){dataLayer.push(arguments)}
  gtag('js', new Date())
  gtag('config', 'G-0VZR7VCVWD')
}
const logout = () => {
    // const currentUser = localStorage.getItem('user_role');
    localStorage.removeItem("isLogin");
    localStorage.removeItem("patient_id");
    localStorage.removeItem("user_role");
    localStorage.removeItem("access_token");
    localStorage.removeItem("userAbilities");
    localStorage.removeItem("agent_id");
    localStorage.removeItem("appiontment-id");
    localStorage.removeItem("patient_appointment_id");
    localStorage.removeItem("cominguser");
    localStorage.removeItem("currentPage");
    localStorage.removeItem("profileCompleted");
    localStorage.removeItem("category_name");
    localStorage.removeItem("selectedSidebarMenu");
    localStorage.removeItem("plan_name");
    localStorage.removeItem("plan_price");
    if (currentUser.value == "agent") {
        router.push("/provider/login");
    } else {
        router.push("/login");
    }
};
const openNotesModel = ref(false);
const patientNotes = ref(null);
const openNotes = async () => {
    await store.dispatch("getAgentPatientNotes");
    patientNotes.value = store.getters.getPatientNotes;
    openNotesModel.value = true;
};
const iconName = ref('mdi-chevron-down');
const changeIcon = () => {
    if (iconName.value == 'mdi-chevron-down') {
        iconName.value = 'mdi-chevron-right';
        isMenu.value = false;
    } else {
        iconName.value = 'mdi-chevron-down';
        isMenu.value = true;
    }

}
</script>

<template>
    <VDialog v-model="openNotesModel" refs="myDialog" persistent width="500">
        <!-- <template v-slot:default="{ isActive }"> -->
        <v-card>
            <v-card-text>
                <div class="mt-2 mb-2">
                    <h4>Patient Notes.</h4>
                </div>
                <p v-for="note in patientNotes" :key="note.id">
                    {{ note.note }}
                </p>
            </v-card-text>

            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn text="Close" @click="openNotesModel = false"></v-btn>
            </v-card-actions>
        </v-card>
        <!-- </template> -->
    </VDialog>
    <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>
    <VSnackbar v-model="getIsTonalSnackbarVisible" :timeout="5000" location="top end" variant="flat" color="red">
        {{ errorMessage }}
    </VSnackbar>
    <VerticalNavLayout>
        <!-- 👉 navbar -->
        <template #navbar="{ toggleVerticalOverlayNavActive }">
            <div class="d-flex h-100 align-center">
                <!-- 👉 Vertical nav toggle in overlay mode -->
                <IconBtn class="ms-n3 d-lg-none" @click="toggleVerticalOverlayNavActive(true)">
                    <VIcon icon="bx-menu" />
                </IconBtn>

                <!-- 👉 Search -->
                <div class="d-flex align-center cursor-pointer" style="user-select: none">
                    <!-- 👉 Search Trigger button -->
                    <!-- <IconBtn>
            <VIcon icon="bx-search" />
          </IconBtn> -->

                    <!-- <span class="d-none d-md-flex align-center text-disabled">
            <VCol cols="12" md="12">

              <VCardText class="px-0">
                <h3 class="mb-0"> Welcome, {{ profileName }} </h3>
              </VCardText>


            </VCol>
          </span> -->
                </div>

                <VSpacer />

                <!-- <IconBtn class="me-2" href="https://github.com/themeselection/sneat-vuetify-vuejs-admin-template-free"
                    target="_blank" rel="noopener noreferrer">

                </IconBtn> -->



                <!-- <NavbarThemeSwitcher class="me-2" /> -->
                <NavBarNotifications class="me-2" />
                <UserProfile />
            </div>
        </template>

        <template #vertical-nav-content>
            <div v-if="!isConferncePageForPatient">
                <VerticalNavLink v-if="isPatient" :item="{
        title: 'Overview',
        icon: 'mdi-view-dashboard',
        to: '/overview',
    }" />
                <!-- <VerticalNavLink v-if="isPatient" :item="{
        title: 'Tele Health',
        icon: 'mdi-content-paste',
        to: '/treatment-plan',
    }" />
                <VerticalNavLink v-if="isPatient" :item="{
        title: 'Membership',
        icon: 'mdi-cached',
        to: '/membership',
    }" />

                <VerticalNavLink v-if="isPatient" :item="{
        title: 'Labs',
        icon: 'bx-table',
        to: '/labs',
    }" /> -->
                <!-- <VerticalNavLink v-if="isPatient" :item="{
        title: 'Doctor Appiontment',
        icon: 'bx-add-to-queue',
        to: '/doctor-appiontments',
    }" /> -->

                <!-- <VerticalNavLink v-if="isPatient" :item="{
        title: 'Prescriptions',
        icon: 'tabler-prescription',
        to: '/prescriptions',
    }" /> -->

                <VerticalNavLink v-if="isPatient" :item="{
        title: 'Orders',
        icon: 'mdi-shopping-cart',
        to: '/orders-list',
    }" />
                <!-- <VerticalNavLink v-if="isPatient" :item="{
        title: 'Subscriptions',
        icon: 'mdi-refresh-circle',
        to: '/subscriptions',
    }" /> -->
                <!--    <VerticalNavLink v-if="isPatient" :item="{
        title: 'Orders',
        icon: 'mdi-shopping-cart',
        children: [
            {
                title: 'Orders',
                icon: 'mdi-shopping-cart',
                to: '/orders-list',
            },
            {
                title: 'Subscriptions',
                icon: 'mdi-refresh-circle',
                to: '/subscriptions',

            },

        ],
    }" />-->
                <VerticalNavLink v-if="isPatient" :item="{
        title: 'Appointments',
        icon: 'bx-add-to-queue',
        to: '/complete',
        // children: [

        //     {
        //         title: 'Schedules',
        //         icon: 'tabler-clock',
        //         to: '/schedules',
        //     },
        //     {
        //         title: 'Complete',
        //         icon: 'mdi-success-circle',
        //         to: '/complete',
        //     },
        // ],
    }" />

            </div>
            <QueueComponent v-if="!isMobile" :isVisable="true" />

            <!-- <VerticalNavLink v-if="isPatient" :item="{
      title: 'Labs Kits',
      icon: 'bx-table',
      to: '/lab-kits',
    }" /> -->
            <!-- <VerticalNavLink v-if="isPatient" :item="{
      title: 'Profile',
      icon: 'bx-table',
      to: '/profile',
    }" /> -->
            <!-- <VerticalNavLink v-if="isPatient" :item="{
      title: 'TeleHealth ',
      icon: 'bx-table',
      to: '/telehealth',
    }" /> -->
            <!-- <VerticalNavLink v-if="isPatient" :item="{
      title: 'Description',
      icon: 'bx-table',
      to: '/description',
    }" /> -->
            <!-- <VerticalNavLink v-if="isPatient" :item="{
      title: 'Follow up',
      icon: 'bx-table',
      to: '/followup',
    }" /> -->
            <!-- <VerticalNavLink v-if="isPatient" :item="{
      title: 'Account Settings',
      icon: 'mdi-account',
      to: '/account-settings',
    }" /> -->
            <!-- <VerticalNavLink v-if="isPatient" :item="{
      title: 'Forms',
      icon: 'mdi-clipboard-text-multiple',

    }" /> -->
            <!-- <VerticalNavLink v-if="isPatient" :item="{
      title: 'Contact Us',
      icon: 'mdi-at',
      to: '/contactus',

    }" /> -->

            <!-- <VerticalNavLink v-if="isAgent" :item="{
      title: 'Appointments',
      icon: 'bx-table',
      to: '/provider/appointments',
    }" /> -->

            <!-- <VerticalNavLink v-if="isAgent" :item="{
      title: 'Doctor Appiontment',
      icon: 'bx-add-to-queue',
      to: '/provider/doctor-appiontments',
    }" /> -->

            <!-- <VerticalNavLink
        :item="{
          title: 'New Slot',
          icon: 'bx-add-to-queue',
          to: '/book-slot',
        }"
      /> -->
            <!-- <VerticalNavLink v-if="isAgent" :item="{
      title: 'Users',
      icon: 'bx-add-to-queue',
      to: '/provider/queue-users',
    }" /> -->
            <VerticalNavLink v-if="isAgent" :item="{
        title: 'Dashboard',
        icon: 'bx-home',
        to: '/provider/dashboard',
    }" />
            <VerticalNavLink v-if="isAgent" :item="{
        title: 'Prescriptions',
        icon: 'tabler-prescription',
        to: '/provider/orders-list',
    }" />
            <!--   <VerticalNavLink v-if="isAgent" :item="{
        title: 'Meeting History',
        icon: 'tabler-clock',
        to: '/provider/meeting-history',
    }" /> -->

            <VerticalNavLink @click="logout()" v-if="isPatient" :item="{
        title: 'Logout',
        icon: 'bx-log-out',
    }" />
            <QueueComponent v-if="isMobile" :isVisable="true" />
            <!-- 👉 Pages -->
            <!-- <VerticalNavSectionTitle
        :item="{
          heading: 'Pages',
        }"
      />
      <VerticalNavLink
        :item="{
          title: 'Login',
          icon: 'bx-log-in',
          to: '/login',
        }"
      /> -->
            <!-- <VerticalNavLink
        :item="{
          title: 'Register',
          icon: 'bx-user-plus',
          to: '/register',
        }"
      />
      <VerticalNavLink
        :item="{
          title: 'Error',
          icon: 'bx-info-circle',
          to: '/no-existence',
        }"
      /> -->

            <!-- 👉 User Interface -->
            <!-- <VerticalNavSectionTitle
        :item="{
          heading: 'User Interface',
        }"
      /> -->
            <!-- <VerticalNavLink
        :item="{
          title: 'Typography',
          icon: 'mdi-alpha-t-box-outline',
          to: '/typography',
        }"
      />
      <VerticalNavLink
        :item="{
          title: 'Icons',
          icon: 'bx-show',
          to: '/icons',
        }"
      />
      <VerticalNavLink
        :item="{
          title: 'Cards',
          icon: 'bx-credit-card',
          to: '/cards',
        }"
      />
      <VerticalNavLink
        :item="{
          title: 'Tables',
          icon: 'bx-table',
          to: '/tables',
        }"
      />
      <VerticalNavLink
        :item="{
          title: 'Form Layouts',
          icon: 'mdi-form-select',
          to: '/form-layouts',
        }"
      /> -->
        </template>

        <!-- 👉 Pages -->
        <slot />

        <!-- 👉 Footer -->
        <template #footer>
            <Footer />
        </template>
    </VerticalNavLayout>
</template>

<style lang="scss" scoped>
.meta-key {
    border: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
    border-radius: 6px;
    block-size: 1.5625rem;
    line-height: 1.3125rem;
    padding-block: 0.125rem;
    padding-inline: 0.25rem;
}

::v-deep .custom-menu {
    position: relative;
}

::v-deep .custom-menu::before {
    content: "" !important;
    position: absolute !important;
    transform: translateY(-50%);
    top: 50% !important;
    left: -8px !important;
    border-left: 8px solid transparent !important;
    border-right: 8px solid transparent !important;
    border-bottom: 8px solid #fff !important;
}

// Styles for the VList component

.more .v-list-item-title {
    color: rgb(106 109 255);
}

.more .menu-item:hover {
    cursor: pointer;
}

.slide-enter-active,
.slide-leave-active {
    transition: transform 0.3s ease;
}

.slide-enter,
.slide-leave-to {
    transform: translateX(-100%);
}

.start-call-btn {
    opacity: 0;
    display: none;
    transition: opacity 0.3s ease;
}

.button_margin {
    margin: 2px;
}

.dialog_padding {
    padding: 5px;
}

.custom-menu .v-menu__content {
    background-color: #333;
    color: #fff;
    border-radius: 4px;
    padding: 8px 0;
}

.user-info {
    display: flex;
    flex-direction: column;
    transition: opacity 0.3s ease;
}

.list-item-hover {
    transition: background-color 0.3s ease;

    &:hover {
        background-color: rgba(var(--v-theme-primary), 0.1);

        .start-call-btn {
            opacity: 1;
            display: block;
            position: relative;
            left: -35px;
        }

        .user-info {
            opacity: 0;
            display: none;
        }
    }
}

.pop_card {
    overflow: hidden !important;
    padding: 10px;
}

.v-overlay__content {
    max-height: 706.4px;
    max-width: 941.6px;
    min-width: 24px;
    --v-overlay-anchor-origin: bottom left;
    transform-origin: left top;
    top: 154.4px !important;
    left: 204px !important;
}

.button_margin {
    margin-top: 10px;
    font-size: 10px;
}

/* Responsive Styles */
@media screen and (max-width: 768px) {
    .pop_card {
        max-width: 100%;
        margin: 0 auto;
    }
}

.container_img {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
}

.image {
    order: 2;
    /* Change the order to 2 in mobile view */
}

.text {
    order: 1;
    /* Change the order to 1 in mobile view */
}

/* Media query for mobile view */
@media (max-width: 768px) {
    .container_img {
        flex-direction: row;
        margin-top: 10px;
    }

    .button_margin_mobile {
        width: 100%;
    }

    .image {
        width: 20%;
        padding: 0 10px;
    }

    .text {
        width: 80%;
        /* Each takes 50% width */
        padding: 0 10px;
        /* Optional padding */
    }
}

::-webkit-scrollbar {
    width: 10px;
    /* Width of the scrollbar */
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
    /* Color of the track */
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
    /* Color of the handle */
    border-radius: 5px;
    /* Roundness of the handle */
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
    /* Color of the handle on hover */
}

/* Container for the content */
.scroll-container {
    max-height: 191px;
    /* Maximum height of the scrollable content */
    overflow-y: scroll;
    /* Enable vertical scrolling */
}

/* Content within the scroll container */
.scroll-content {
    padding: 20px;
}

/* Example of additional styling for content */
.scroll-content p {
    margin-bottom: 20px;
}

.cross button {
    padding: 0px;
    margin: 0px;
    /* font-size: 10px; */
    background: none;
    border: none;
    box-shadow: none;
    height: 23px;
}

.v-data-table-header {
    display: table-header-group;
}

button.v-btn.v-btn--elevated.v-theme--light.bg-primary.v-btn--density-default.v-btn--size-default.v-btn--variant-elevated.text-capitalize {
    letter-spacing: 1.15px;
    font-size: 15px;
}
</style>
