<script setup>
import API from '@/api';
import { PROVIDER_FILTER_LIST_API } from '@/constants';
import AddProvider from '@/pages/providers/AddProvider-step.vue';
import EditProvider from '@/pages/providers/EditProvider-step.vue';
import DataTablesCore from 'datatables.net';
import DataTable from 'datatables.net-vue3';
import debounce from 'lodash.debounce';
import { onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
DataTable.use(DataTablesCore);
const isAddCustomerDrawerOpen = ref(false)
const isEditCustomerDrawerOpen = ref(false)
const store = useStore()
const editDialog = ref(false)
const deleteDialog = ref(false)
const search = ref('')
const defaultItem = ref({
  id: -1,
  avatar: '',
  name: '',
  email: '',
  // dob: '',
  phone_no: '',

})
const router = useRouter()
const editedItem = ref(defaultItem.value)
const editedIndex = ref(-1)
const providersList = ref([])
const isLoading=ref(false)
// status options
const selectedOptions = [
  {
    text: 'Active',
    value: 1,
  },
  {
    text: 'InActive',
    value: 2,
  },
  
]

    const refVForm = ref(null)


const formatPhoneNumber = () => {
  console.log(editedItem.value)
  // Remove non-numeric characters from the input
  const numericValue = editedItem.value.phone_no.replace(/\D/g, '');

  // Apply formatting logic
  if (numericValue.length <= 10) {
    editedItem.value.phone_no = numericValue.replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3');
  } else {
    // Limit the input to a maximum of 14 characters
    const truncatedValue = numericValue.slice(0, 10);
    editedItem.value.phone_no = truncatedValue.replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3');
  }
};
// headers

const resolveStatusVariant = status => {
  if (status === 1)
    return {
      color: 'primary',
      text: 'Current',
    }
  else if (status === 2)
    return {
      color: 'success',
      text: 'Professional',
    }
  else if (status === 3)
    return {
      color: 'error',
      text: 'Rejected',
    }
  else if (status === 4)
    return {
      color: 'warning',
      text: 'Resigned',
    }
  else
    return {
      color: 'info',
      text: 'Applied',
    }
}

const editItem = async (item) => {
  isEditCustomerDrawerOpen.value = true
  
  await store.dispatch('providerGETBYID', {
    id: item.id,
  })
  
  editedItem.value = store.getters.getSingleProvider
  console.log(store.getters.getSingleProvider)
 // editDialog.value = true
}

const deleteItem = item => {
  editedIndex.value = providersList.value.indexOf(item)
  editedItem.value = { ...item }
  deleteDialog.value = true
}

const close = () => {
  editDialog.value = false
  editedIndex.value = -1
  editedItem.value = { ...defaultItem.value }
}

const closeDelete = () => {
  deleteDialog.value = false
  editedIndex.value = -1
  editedItem.value = { ...defaultItem.value }
}

const save = async () => {
  const { valid } = await refVForm.value.validate()
  console.log(valid)
  if (valid) {
    if (editedIndex.value > -1){
      await store.dispatch('providerUpdate',{
        id: editedItem.value.id,
        first_name: editedItem.value.first_name,
        last_name: editedItem.value.last_name,
        email: editedItem.value.email,
      })
      Object.assign(providersList.value[editedIndex.value], editedItem.value)
    }else{
      providersList.value.push(editedItem.value)
    }
  close()
  }
 
  
}
const states = ref([
    
    { name: 'Alabama', abbreviation: 'AL' },
    { name: 'Alaska', abbreviation: 'AK' },
    { name: 'Arizona', abbreviation: 'AZ' },
    { name: 'Arkansas', abbreviation: 'AR' },
    { name: 'Howland Island', abbreviation: 'UM-84' },
    { name: 'Delaware', abbreviation: 'DE' },
    { name: 'Maryland', abbreviation: 'MD' },
    { name: 'Baker Island', abbreviation: 'UM-81' },
    { name: 'Kingman Reef', abbreviation: 'UM-89' },
    { name: 'New Hampshire', abbreviation: 'NH' },
    { name: 'Wake Island', abbreviation: 'UM-79' },
    { name: 'Kansas', abbreviation: 'KS' },
    { name: 'Texas', abbreviation: 'TX' },
    { name: 'Nebraska', abbreviation: 'NE' },
    { name: 'Vermont', abbreviation: 'VT' },
    { name: 'Jarvis Island', abbreviation: 'UM-86' },
    { name: 'Hawaii', abbreviation: 'HI' },
    { name: 'Guam', abbreviation: 'GU' },
    { name: 'United States Virgin Islands', abbreviation: 'VI' },
    { name: 'Utah', abbreviation: 'UT' },
    { name: 'Oregon', abbreviation: 'OR' },
    { name: 'California', abbreviation: 'CA' },
    { name: 'New Jersey', abbreviation: 'NJ' },
    { name: 'North Dakota', abbreviation: 'ND' },
    { name: 'Kentucky', abbreviation: 'KY' },
    { name: 'Minnesota', abbreviation: 'MN' },
    { name: 'Oklahoma', abbreviation: 'OK' },
    { name: 'Pennsylvania', abbreviation: 'PA' },
    { name: 'New Mexico', abbreviation: 'NM' },
    { name: 'American Samoa', abbreviation: 'AS' },
    { name: 'Illinois', abbreviation: 'IL' },
    { name: 'Michigan', abbreviation: 'MI' },
    { name: 'Virginia', abbreviation: 'VA' },
    { name: 'Johnston Atoll', abbreviation: 'UM-67' },
    { name: 'West Virginia', abbreviation: 'WV' },
    { name: 'Mississippi', abbreviation: 'MS' },
    { name: 'Northern Mariana Islands', abbreviation: 'MP' },
    { name: 'United States Minor Outlying Islands', abbreviation: 'UM' },
    { name: 'Massachusetts', abbreviation: 'MA' },
    { name: 'Connecticut', abbreviation: 'CT' },
    { name: 'Florida', abbreviation: 'FL' },
    { name: 'District of Columbia', abbreviation: 'DC' },
    { name: 'Midway Atoll', abbreviation: 'UM-71' },
    { name: 'Navassa Island', abbreviation: 'UM-76' },
    { name: 'Indiana', abbreviation: 'IN' },
    { name: 'Wisconsin', abbreviation: 'WI' },
    { name: 'Wyoming', abbreviation: 'WY' },
    { name: 'South Carolina', abbreviation: 'SC' },
    { name: 'Arkansas', abbreviation: 'AR' },
    { name: 'South Dakota', abbreviation: 'SD' },
    { name: 'Montana', abbreviation: 'MT' },
    { name: 'North Carolina', abbreviation: 'NC' },
    { name: 'Palmyra Atoll', abbreviation: 'UM-95' },
    { name: 'Puerto Rico', abbreviation: 'PR' },
    { name: 'Colorado', abbreviation: 'CO' },
    { name: 'Missouri', abbreviation: 'MO' },
    { name: 'New York', abbreviation: 'NY' },
    { name: 'Maine', abbreviation: 'ME' },
    { name: 'Tennessee', abbreviation: 'TN' },
    { name: 'Georgia', abbreviation: 'GA' },
    { name: 'Louisiana', abbreviation: 'LA' },
    { name: 'Nevada', abbreviation: 'NV' },
    { name: 'Iowa', abbreviation: 'IA' },
    { name: 'Idaho', abbreviation: 'ID' },
    { name: 'Rhode Island', abbreviation: 'RI' },
    { name: 'Washington', abbreviation: 'WA' },
    { name: 'Ohio', abbreviation: 'OH' },
    { name: 'All', abbreviation: 'All' }
    // ... (add the rest of the states)
]);

const sortedStates = computed(() => {
    const sorted = states.value.slice().sort((a, b) => {
        // Move "All" to the beginning
        if (a.name === 'All') return -1;
        if (b.name === 'All') return 1;
        // Sort other states alphabetically
        return a.name.localeCompare(b.name);
    });
    return sorted;
});
const getMettings = (Item) => {
  router.push('/admin/provider/meetings/'+Item.id);
}
const deleteItemConfirm = async() => {
  console.log('editedIndex.value',editedIndex.value,editedItem.value.id)
  await store.dispatch('providerDelete',{
    id: editedItem.value.id
  })
loadItems({ page: 1, itemsPerPage: itemsPerPage.value, sortBy: [] });
  closeDelete()
}
// const getprovidersList = computed(async () => {
//   providersList.value = [];
//   console.log('getprovidersFilterList',store.getters.getProvidersList)
//     let list = store.getters.getProvidersList
//     store.dispatch('updateIsLoading', false)
//   providersList.value = list
//      providersList.value.sort((a, b) => {
//         return b.id - a.id;
//     });
//     return providersList.value
// });

const getProviderFilter = async() => {
  store.dispatch('updateIsLoading', true)
  await store.dispatch('providersFilterList',{
    gender: filter.value.gender.toLowerCase(),
    state: filter.value.state,
    availabilityFrom: filter.value.availabilityFrom,
    availabilityTo:filter.value.availabilityTo,

  })

   store.dispatch('updateIsLoading', false)
 }


const serverItems = ref([]);
const loading = ref(true);
const totalItems = ref(0);


onMounted(async() => {
  
})
const filter = ref({
  practics_state:'',
    gender: 'All',
    state: 'All',
    specialty:'',
    availabilityFrom:'All',
    availabilityTo:'All'
    // plan: '',
})
// const onSubcriptionChange = async(newvalue)=> {
//   filter.value.plan = newvalue;
//   console.log("Plan",filter.value.plan );
//   await getPatientFilter();

// }

const onSpecialty = async(newvalue)=> {
  if(newvalue.length > 3){
    filter.value.specialty = newvalue;
    console.log("onSpecialty",filter.value.specialty);
  }
  
  // await getPatientFilter();

}

const onGenderChange = async(newvalue)=> {
  filter.value.gender = newvalue;
  console.log("gender",filter.value.gender);
 loadItems({ page: 1, itemsPerPage: itemsPerPage.value, sortBy: [] });

}

const onStateChange = async(newvalue)=> {
  filter.value.state = newvalue;
  console.log("state",filter.value.state);
   loadItems({ page: 1, itemsPerPage: itemsPerPage.value, sortBy: [] });

}
const onAvailabilityFromChange = async(newvalue)=> {
  filter.value.availabilityFrom = newvalue;
  console.log("frmo",filter.value.availabilityFrom);
  loadItems({ page: 1, itemsPerPage: itemsPerPage.value, sortBy: [] });

}
const onAvailabilityToChange = async(newvalue)=> {
  filter.value.availabilityTo = newvalue;
  console.log("to",filter.value.availabilityTo);
  loadItems({ page: 1, itemsPerPage: itemsPerPage.value, sortBy: [] });

}

const onPracticsStateChange = async(newvalue)=> {
  filter.value.practics_state = newvalue;
  console.log("state",filter.value.practics_state);
  await getProviderFilter();

}
const onDateRangeChange = async(newvalue)=> {
  filter.value.date_range = newvalue;
  console.log("Length", newvalue.length);
}

const timeOptions = computed(() => {
  const options = ['All'];

  // Loop through the hours from 12 to 23 (for 12:00 PM to 11:00 PM)
  for (let hour = 12; hour <= 23; hour++) {
    // Loop through the minutes (0 and 30)
    for (let minute of [0, 30]) {
      // Construct the time string
      const timeString = `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
      options.push(timeString);
    }
  }

  // Add the time option for 24:00 (midnight)
  options.push('24:00');

  return options;
});

const handleProviderAdded = async (msg) => {
  if (msg == 'success') {
  console.log('save============================')
      store.dispatch('updateIsLoading', true)
      loadItems({ page: 1, itemsPerPage: itemsPerPage.value, sortBy: [] });
    store.dispatch('updateIsLoading', false)
      
  }
  
}

const headers = [
{
    title: 'ID',
    key: 'id',
  },
  {
    title: 'NAME',
    key: 'name',
    align: 'start',
  },
  {
    title: 'EMAIL',
    key: 'email',
  },
  {
    title: 'Gender',
    key: 'gender',
  },
  {
    title: 'State',
    key: 'state',
  },
  
  // {
  //   title: 'Date Of Birth',
  //   key: 'dob',
  // },
  {
    title: 'Phone',
    key: 'phone_number',
  },
  {
    title: 'Availabilty From',
    key: 'availability_from',
  },
  {
    title: 'Availabilty To',
    key: 'availability_to',
  },
  {
    title: 'Total order Meetings',
    key: 'meeting_count',
  },
  
 
  {
    title: 'ACTIONS',
    key: 'actions',
    searchable:false
  },
]

const itemsPerPage = ref(30);
// Method to load items
const loadItems = debounce( async ( { page,  itemsPerPage, sortBy }) =>  {
  const payload = {
    page,
    itemsPerPage,
    sortBy,
    filters:{
        gender: filter.value.gender,
        state: filter.value.state,
        availability_from: filter.value.availabilityFrom,
        availability_to: filter.value.availabilityTo,
    },
    search:search.value,
  }
  console.log("records",page, itemsPerPage, sortBy);
  loading.value = true;
  const data = await API.getDataTableRecord(PROVIDER_FILTER_LIST_API, payload, headers);
  serverItems.value   = data.items;
  totalItems.value = data.total;
  loading.value = false;  
},500);

</script>

<template>
  <v-row>
    <v-col cols="12" md="12">
    <VCard title="Providers">
      <VCardText >
          <VRow>
            
            <VCol
              cols="12"
              
              md="2"
            >
            
          <VSelect
                  v-model="filter.gender"
                  label="Gender"
                  placeholder="Gender"
                  density="compact"
                  :items="['All','Male', 'Female']"
                  @update:model-value="onGenderChange"
                  
          />
          
          </VCol>
          <VCol
              cols="12"
              
              md="3"
            >
             <VAutocomplete
                  v-model="filter.state"
                  label="State"
                 density="compact"
                  :items="sortedStates"
                  item-title="name"
                  item-value="abbreviation"
                  @update:model-value="onStateChange"
                  
          />
          
           </VCol>
           
             
            <VCol
              cols="12"
              md="3"
            >
                 <VSelect density="compact" @update:model-value="onAvailabilityFromChange" v-model="filter.availabilityFrom" label="Availability From" :items="timeOptions"  />
              </VCol>
               <VCol
              cols="12"
              md="3"
            >
                <VSelect density="compact" @update:model-value="onAvailabilityToChange" v-model="filter.availabilityTo" label="Availability To" :items="timeOptions" 
               />

              </VCol>
               <VCol
              cols="12"
              md="3"
            >
              <VTextField
                v-model="search"
                label="Search"
                density="compact"
                placeholder="Search ..."
                append-inner-icon="ri-search-line"
                single-line
                hide-details
                dense
                outlined
              />
            </VCol>
            <VCol
              cols="12"
              v-if="$can('read', 'Provider Add')"
              md="3"
            >
            <VBtn
              prepend-icon="ri-add-line"
              @click="isAddCustomerDrawerOpen = !isAddCustomerDrawerOpen"
              
            >
              Add Provider
            </VBtn>
            </VCol>
          </VRow>
        </VCardText>
        <v-data-table-server
        v-model:items-per-page="itemsPerPage"
        :headers="headers"
        :items="serverItems"
        :items-length="totalItems"
        :loading="loading"
        :search="search"
        :item-value="name"
        @update:options="loadItems"
      >
      <template #item.name="{ item }">
          <div class="d-flex align-center" style="width:150px">
           
            <VAvatar
              size="32"
              :color="item.avatar ? '' : 'primary'"
              :class="item.avatar ? '' : 'v-avatar-light-bg primary--text'"
              :variant="!item.avatar ? 'tonal' : undefined"
            >
              <VImg
                v-if="item.avatar"
                :src="item.avatar"
              />
              <span
                v-else
                class="text-sm"
              >{{ avatarText(item.name) }}</span>
            </VAvatar>

            <div class="d-flex flex-column ms-3">
              <router-link
                :to="{ name: 'admin-provider-profile', params: { id: item.id } }"
                class=" highlighted"
              >
                <span class="d-block font-weight-medium  text-truncate">{{ item.name }}</span>
              </router-link>
              <small>{{ item.post }}</small>
            </div>
          </div>
        </template>

       
        <template #item.status="{ item }">
          <VChip
            :color="resolveStatusVariant(item.status).color"
            density="comfortable"
          >
            {{ resolveStatusVariant(item.status).text }}
          </VChip>
        </template>

        
         <template #item.phone_number="{ item }">
          <span class="d-flex align-center" style="width: 150px;"> {{  item.phone_number }}</span>
        </template>
        <template #item.actions="{ item }">
          <div class="d-flex gap-1">
            <IconBtn
              size="small"
              @click="editItem(item)"
              v-if="$can('read', 'Provider Edit')"
            >
              <VIcon icon="ri-pencil-line" />
            </IconBtn>
            <IconBtn
              size="small"
              @click="deleteItem(item)"
               v-if="$can('read', 'Provider Delete')"
          >
              <VIcon icon="ri-delete-bin-line" />
            </IconBtn>
             <IconBtn
                size="small"
                @click="getMettings(item)"
                style="display: none;"
              >
              <VIcon icon="ri-time-line" />
            </IconBtn>
          </div>
        </template>
      </v-data-table-server>
      
      
    </VCard>  
    </v-col>
    <AddProvider v-model:is-drawer-open="isAddCustomerDrawerOpen"     @providerAdded="handleProviderAdded" />
   <EditProvider v-model:is-drawer-open="isEditCustomerDrawerOpen"  :user-data="store.getters.getSingleProvider"    @providerAdded="handleProviderAdded" />
  </v-row>
  <!-- 👉 Edit Dialog  -->
  <VDialog
    v-model="editDialog"
    max-width="600px"
  >
  <VForm ref="refVForm" >
    <VCard>
      <VCardTitle>
        <span class="headline">Edit Provider</span>
      </VCardTitle>

      <VCardText>
        <VContainer >
         
          <VRow>
            <!-- fullName -->
            <VCol cols="12" md="6">
              <VTextField
                v-model="editedItem.first_name"
                label="First Name"
                :rules="[requiredFirstName]"
              />
            </VCol>
            <VCol cols="12" md="6">
              <VTextField
                v-model="editedItem.last_name"
                label="Last Name"
                :rules="[requiredLastName]"
              />
            </VCol>

            <!-- email -->
            <VCol cols="12" sm="6" md="12">
              <VTextField
                v-model="editedItem.email"
                label="Email"
                :rules="[requiredEmail, emailValidator]"
              />
            </VCol>

         
            <!-- <VCol cols="12" sm="6" md="12">
              <VTextField
                v-model="editedItem.dob"
                label="Date Of Birth"
              />
            </VCol> -->
            <VCol cols="12" sm="6" md="12">
              <VTextField v-model="editedItem.phone_no" label="Phone Number" pattern="^\(\d{3}\) \d{3}-\d{4}$"
                :rules="[requiredPhone, validUSAPhone]" placeholder="i.e. (000) 000-0000"
                @input="formatPhoneNumber" max="14" density="comfortable" />
            </VCol>
            

         

            <!-- status -->
            <VCol
              cols="12"

              md="12"
            >
              <VSelect
                v-model="editedItem.status"
                :items="selectedOptions"
                item-title="text"
                item-value="value"
                label="Status"
                variant="outlined"
              />
            </VCol>
          </VRow>
        </VContainer>
      </VCardText>

      <VCardActions>
        <VSpacer />

        <VBtn
          color="error"
          variant="outlined"
          @click="close"
        >
          Cancel
        </VBtn>

        <VBtn
          color="success"
          variant="elevated"
          @click="save"
        >
          Save
        </VBtn>
        
      </VCardActions>
    </VCard>
    </VForm>
  </VDialog>

  <!-- 👉 Delete Dialog  -->
  <VDialog
    v-model="deleteDialog"
    max-width="500px"
  >
    <VCard>
      <VCardTitle>
        Are you sure you want to delete this item?
      </VCardTitle>

      <VCardActions>
        <VSpacer />

        <VBtn
          color="error"
          variant="outlined"
          @click="closeDelete"
        >
          Cancel
        </VBtn>

        <VBtn
          color="success"
          variant="elevated"
          @click="deleteItemConfirm"
        >
          OK
        </VBtn>

        <VSpacer />
      </VCardActions>
    </VCard>
  </VDialog>
</template>
<!-- <style scoped>

</style> -->
<style>
.highlighted {
  /* Add your desired highlighting styles here */
  font-weight: bold;
  color: #a169ff; /* or any other color you prefer */
}
table>thead>tr>th{
  height: 56px;
  font-weight: 500;
  -webkit-user-select: none;
  user-select: none;
  text-align: center;
  padding: 0 20px;
  transition-duration: .28s;
  transition-property: height;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
  border-bottom: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
  /* background: rgb(var(--v-table-header-color)) !important; */
  border-block-end: none !important;
  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !important;
  font-size: .8125rem;
  letter-spacing: .2px;
  line-height: 24px;
  text-transform: uppercase;
}
table>tbody>tr>td{
  text-align: center;
  height: 50px;
  border-bottom: 1px solid #e2dfdf;
}
.dt-layout-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom:10px;
}
.dt-layout-table{
  display: block !important;
  width: 100%;
}
.dt-layout-cell {
  display: flex;
  align-items: center;
}
.dt-input{
  border: 1px solid silver;
    border-radius: 5px;
    padding: 7px;
    text-align: center;
    margin-left:5px;
    background: rgb(var(--v-table-header-color)) !important;
}
.dt-length,
.dt-search {
  display: flex;
  align-items: center;
}

.dt-length label,
.dt-search label {
  margin-left: 5px;
}

.dt-layout-start {
  flex: 1;
}

.dt-layout-end {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}
.dt-paging-button{
  cursor: pointer;
      border: 1px solid silver;
    border-radius: 22px;
    padding: 9px 15px 6px 15px;
    margin-left: 3px;
}
.first,.previous,.next,.last{
  cursor: pointer;
  border: 0px solid silver;
    border-radius: 22px;
    padding: 9px 5px 6px 5px;
    margin-left: 3px;
}
.current{
  background: #8c57ff;
    color: white;
}
</style>
