purityselect/resources/js/pages/agent-call.vue

<script setup>
import leaftmap from '@/pages/leaftmap.vue';
import { ref } from 'vue';
const count = ref(5);
const showIframe = ref(true);
const activeTab1 = ref('info');
const overlay = ref(false);
const userAbout = ref('');
const userStatus = ref('active');
const settingsGroup = ref([]);
const twoStepVerification = ref(true);
const editLocation = ref('');
const editAddress = ref('');
const editCity = ref('');

const picker = ref();
const isDialogVisible = ref(false)
const isLoadingVisible = ref(false)
const isSuccessVisible = ref(false)
const selectedDate = ref();
const isDisabled = ref(true)
const chooseDate = ref([]);

const closeSidebar = () => {
  // Implement close sidebar logic
};

const logout = () => {
  // Implement logout logic
};

const findLab = () => {
  console.log('Test');
  activeTab1.value = 'lab_locator';
  // Implement find lab logic
};

const editInfo = () => {
  // Implement edit info logic
  activeTab1.value = 'edit_form';
};

const updateInfo = () => {
  // Implement update info logic
};

const backToInfo = () => {
  // Implement back to info logic
  activeTab1.value = 'info';
};

const backToLabLoc = () => {
  // Implement back to lab locator logic
  activeTab1.value = 'info';
};

const responseUrl = ref(localStorage.getItem('meeting-url'));

const datepick = () => {
  console.log("ppicker",picker.value);
  // isLoadingVisible.value = true;
  chooseDate.value = '';
  selectedDate.value = '';

  if (picker.value) {
    const selectedDate = new Date(picker.value);
    const dateWithoutTime = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), selectedDate.getDate());
    // Format the date as needed
    const formattedDate = dateWithoutTime.toISOString().slice(0, 10);
    console.log("formattedDate",formattedDate);

    // if (formattedDate) {
    //   console.log('in');
    //   axios.get('/api/available-slots/' + formattedDate)
    //     .then(response => {
    //       console.log("Data", response.data.available_slots);
    //       chooseDate.value = Object.values(response.data.available_slots);
    //       // isLoadingVisible.value = false;
    //       // console.log(chooseDate);
    //     })
    //     .catch(error => {
    //       console.error(error.response.data);
    //     });
    // } else {
    //   chooseDate.value = [];
    // }

  }
}

const isBookSlotDisabled = computed(() => {
  // Check if a date is selected
  return !selectedDate.value;
});

const bookSlot = () => {
  isLoadingVisible.value = true;
  console.log("selectedData", selectedDate.value);
  if (selectedDate.value) {
    const userData = localStorage.getItem('userData');
    isLoadingVisible.value = false;
    axios.post('/api/book-appointment/', {
      patient_id: userData,
      appointment_time: selectedDate.value
    })
      .then(response => {
        console.log(response.data.message);
        isDialogVisible.value = true;
        isSuccessVisible.value = true;
        chooseDate.value = '';
        selectedDate.value = '';
      })
      .catch(error => {
        console.error(error.response.data);
        isLoadingVisible.value = false;
      });
  }
}

const done = () => {
  isDialogVisible.value = false;
  isLoadingVisible.value = true;
  router.replace(route.query.to && route.query.to != '/login' ? String(route.query.to) : '/appointments')
}



</script>


<template>
  <VRow>
    <VCol cols="12" md="8">
      <VCard class="text-center text-sm-start rounded-0">




        <!-- Show the iframe when countdown reaches 1 -->
        <iframe v-if="showIframe" ref="myIframe" :src="responseUrl" width="100%" height="400" style="border:0"></iframe>
        <div v-else>
          Loading iframe...
        </div>
      </VCard>

    </VCol>



    <!-- 👉 Profit -->
    <VCol cols="4">
      <VRow>
        <VCol cols="12">
          <VCard rounded="0">
            <!-- About User -->
            <v-col v-if="activeTab1 === 'info'">
              <VList col="4">

                <v-list-item class="m-0">
                  <span class="text-heading"><b>Location:</b></span> <span>Court Street 78</span>
                </v-list-item>
                <v-list-item>
                  <span class="text-heading"><b>Address:</b></span> <span>Court Street 78</span>
                </v-list-item>
                <v-list-item>
                  <span class="text-heading"><b>City:</b></span> <span>Court Street 78</span>
                </v-list-item>



              </VList>
              <!-- Add other user info here -->

              <VRow>
                <v-col>
                  <v-btn @click="findLab" class="btn btn-primary waves-effect waves-light">
                    Find Lab
                  </v-btn>
                </v-col>
                <v-col>
                  <v-btn @click="editInfo" class="btn btn-primary waves-effect waves-light">
                    Edit Info
                  </v-btn>
                </v-col>
              </VRow>


            </v-col>
            <v-col xs="12" v-else-if="activeTab1 === 'edit_form'" id="edit_form">

              <v-form @submit.prevent="updateInfo">

                <v-text-field class="mb-3" v-model="editLocation" label="Location"></v-text-field>
                <v-text-field class="mb-3" v-model="editAddress" label="Address"></v-text-field>
                <v-text-field class="mb-3" v-model="editCity" label="City"></v-text-field>
                <v-btn type="submit" class="btn btn-primary waves-effect waves-light mr-2">Update</v-btn>
                <v-btn @click="backToInfo">Back</v-btn>
              </v-form>

            </v-col>
            <v-col xs="12" v-else-if="activeTab1 === 'lab_locator'" style="display: block;" id="lab_locator">
              <small class="text-uppercase">Lab Locate</small>
              <!-- Leaflet Map goes here -->

              <leaftmap></leaftmap>
              <v-btn @click="backToLabLoc">Back</v-btn>
            </v-col>
          </VCard>
        </VCol>
        <VCol cols="12">
          <v-date-picker v-model="selectedDate" @update:modelValue="datepick"></v-date-picker>
          <VCard rounded="0">
            
            <div class="ml-3 mr-3">
              <v-flex xs12 sm6 d-flex>
                <v-select v-model="selectedDate" :items="chooseDate" label="Slots" width="1000"></v-select>
              </v-flex>
              <div class="text-right mt-5 mb-4">
                <v-btn outline color="primary" @click=bookSlot :disabled="isBookSlotDisabled">
                  Book Slot
                </v-btn>
              </div>
            </div>
          </VCard>
        </VCol>
      </VRow>
    </VCol>
    <!-- 👉 Sales -->


  </VRow>
</template>
<style scoped>
.v-list-item--density-default.v-list-item--one-line {
  min-height: 30px;
}
</style>