<template>
 <div class="row mb-5">
 <div class="col">
 <div class="card card-stretch mb-5">
 <div class="card-body px-9 py-5">
 <div class="mb-5">
 <span class="svg-icon svg-icon-3x m-0">
 <inline-svg src="media/icons/duotune/general/mail-open.svg" />
 </span>
 </div>
 <div class="fw-bolder font-28 line-h-34 text-black-400">267</div>
 <div class="fw-bold font-12 line-h-15 text-black-500">Urgent</div>
 </div>
 </div>
 </div>
 <div class="col">
 <div class="card card-stretch mb-5">
 <div class="card-body px-9 py-5">
 <div class="mb-5">
 <span class="svg-icon svg-icon-3x m-0 text-black-100">
 <inline-svg src="media/icons/duotune/general/user.svg" />
 </span>
 </div>
 <div class="fw-bolder font-28 line-h-34 text-black-400">31</div>
 <div class="fw-bold font-12 line-h-15 text-black-500">
 New Opportunities
 </div>
 </div>
 </div>
 </div>
 <div class="col">
 <div class="card card-stretch mb-5">
 <div class="card-body px-9 py-5">
 <div class="mb-5">
 <span class="svg-icon svg-icon-3x m-0 text-black-100">
 <inline-svg src="media/icons/duotune/general/gen016.svg" />
 </span>
 </div>
 <div class="fw-bolder font-28 line-h-34 text-black-400">89</div>
 <div class="fw-bold font-12 line-h-15 text-black-500">
 Unassigned Opportunities
 </div>
 </div>
 </div>
 </div>
 <div class="col">
 <div class="card card-stretch mb-5">
 <div class="card-body px-9 py-5">
 <div class="mb-5">
 <span class="svg-icon svg-icon-3x m-0">
 <inline-svg src="media/icons/duotune/general/chat.svg" />
 </span>
 </div>
 <div class="fw-bolder font-28 line-h-34 text-black-400">54</div>
 <div class="fw-bold font-12 line-h-15 text-black-500">
 Follow-Ups Today
 </div>
 </div>
 </div>
 </div>
 <div class="col">
 <div class="card card-stretch mb-5">
 <div class="card-body px-9 py-5">
 <div class="mb-5">
 <span class="svg-icon svg-icon-3x m-0">
 <inline-svg src="media/icons/duotune/general/chat.svg" />
 </span>
 </div>
 <div class="fw-bolder font-28 line-h-34 text-black-400">183</div>
 <div class="fw-bold font-12 line-h-15 text-black-500">
 Follow-Ups Overdue
 </div>
 </div>
 </div>
 </div>
 </div>
 <div class="card">
 <div class="card-body pt-0">
 <el-skeleton class="pt-5" :rows="5" animated v-if="loading" />
 <Datatable
 :data="tableData"
 :header="tableHeader"
 v-if="!loading"
 :enable-items-per-page-dropdown="true"
 >
 <template v-slot:user_name="{ row: item }">
 <div
 class="d-flex align-items-center flex-row-fluid position-relative ms-4"
 >
 <span class="font-14 line-h-17 fw-bolder text-black-100 me-2">
 {{ item.user_name }}
 </span>
 <span
 class="badge me-2 rounded bg-gold-100 fw-bolder text-black-300 font-11 line-h-13 px-2 py-1"
 >
 {{ item.opportunity_count }}
 </span>
 <span
 class="position-absolute top-0 start-0 translate-middle badge rounded fw-bolder text-black-300 font-11 line-h-13 px-2 py-1"
 :class="
 item.user_type_name === "Lead" ? "bg-blue-100" : "bg-gold-200"
 "
 >
 {{ item.user_type_name === "Lead" ? "L" : "C" }}
 </span>
 </div>
 <div class="d-flex mt-2 ms-4">
 <span class="font-13 line-h-16 text-black-300 fw-semibold me-2">
 {{ item.contact_no }}
 </span>
 <span
 class="font-10 line-h-12 text-black-300 fw-semibold badge bg-transaparent border px-2 py-1"
 >{{ item.branch_name }}</span
 >
 </div>
 </template>
 <template v-slot:source_name="{ row: item }">
 <span
 class="badge bg-gray-100 font-11 line-h-13 text-black-300 fw-semibold px-2 py-1"
 >
 {{ item.source_name }}
 </span>
 </template>
 <template v-slot:responsible="{ row: item }">
 <span
 class="badge bg-gray-100 font-11 line-h-13 text-black-300 fw-semibold px-2 py-1"
 v-if="item.responsible"
 >
 {{ getInitials(item.responsible.name) }}
 </span>
 </template>
 <template v-slot:treatments="{ row: item }">
 <template v-for="(val, index) in item.treatments" :key="index">
 <div
 class="badge bg-gray-100 font-11 line-h-13 text-black-300 fw-semibold px-2 py-1 ms-2"
 >
 {{ val.name }}
 </div>
 </template>
 </template>
 <template v-slot:enquiry_date="{ row: item }">
 <div class="d-flex flex-column">
 <span class="font-13 line-h-16 fw-semibold text-black-300 mb-1">{{
 dateFormat(item.enquiry_date)
 }}</span>
 <span class="d-flex font-13 line-h-16 fw-bold text-black-300"
 >{{ dateFormat(item.follow_up_date) }}
 <span class="svg-icon svg-icon-2 text-black-100 m-0 ms-1">
 <inline-svg src="media/icons/duotune/arrows/arr050.svg" />
 </span>
 </span>
 </div>
 </template>
 <template v-slot:updated_at="{ row: item }">
 <div class="d-flex flex-column">
 <span class="font-13 line-h-16 fw-semibold text-black-300 mb-1">{{
 dateFormat(item.updated_at)
 }}</span>
 <div class="d-flex">
 <span
 class="badge bg-gray-100 fw-semibold text-black-300 font-11 line-h-13 px-2 py-1"
 >
 <span class="svg-icon svg-icon-5 m-0 me-1">
 <inline-svg src="media/icons/comment.svg" />
 </span>
 2
 </span>
 <span
 class="badge bg-gray-100 fw-semibold text-black-300 font-11 line-h-13 px-2 py-1 ms-2"
 >
 <span class="svg-icon svg-icon-5 m-0 me-1">
 <inline-svg src="media/icons/phone.svg" />
 </span>
 2
 </span>
 </div>
 </div>
 </template>
 <template v-slot:status="{ row: item }">
 <template v-for="(val, index) in statusTags">
 <span
 class="badge fw-semibold text-black-300 font-11 line-h-13 px-2 py-1"
 :style="
 val.outline
 ? `border: 1px solid ${val.color}`
 : `background: ${val.color}`
 "
 :key="index"
 v-if="item.status === val.id"
 >{{ val.name }}</span
 >
 </template>
 </template>
 <template v-slot:actions="{ row: item }">
 <div class="d-flex justify-content-end">
 <a
 class="btn btn-icon me-2 w-32px h-32px"
 :class="item.status === 20 ? "bg-red-100" : "bg-gray-100""
 @click="flagStatus(item.id)"
 ><span
 class="svg-icon svg-icon-2"
 :class="item.status === 20 ? "text-white" : "text-black-100""
 >
 <inline-svg src="media/icons/duotune/maps/map001.svg" /> </span
 ></a>
 <a
 class="btn btn-icon bg-gray-100 w-32px h-32px"
 @click="editItem(item.id)"
 >
 <span class="svg-icon svg-icon-2 text-black-100">
 <inline-svg
 src="media/icons/duotune/general/gen055.svg"
 /> </span
 ></a>
 <a ></a>
 </div>
 </template>
 </Datatable>
 </div>
 </div>
 <editOpportunity></editOpportunity>
</template>

import { defineComponent, ref, onMounted, inject } from "vue";
import Datatable from "@/components/kt-datatable/KTDataTable.vue";
import { setCurrentPageTitle } from "@/core/helpers/breadcrumb";
import editOpportunity from "@/forms/opportunities/editOpportunity.vue";
import ApiService from "@/core/services/ApiService";
import statusTags from "@/composables/Status";
import { getInitials, dateFormat } from "@/composables/General";
export default defineComponent({
 name: "Opportunities-screen",
 components: {
 Datatable,
 editOpportunity,
 },
 setup() {
 const emitter = inject("emitter");
 let loading = ref(false);
 const payload = ref({});
 const tableData = ref([]);
 const tableHeader = ref([
 {
 columnName: "Name",
 columnLabel: "user_name",
 sortEnabled: true,
 },
 {
 columnName: "Source",
 columnLabel: "source_name",
 sortEnabled: true,
 },
 {
 columnName: "Treatments",
 columnLabel: "treatments",
 sortEnabled: true,
 },
 {
 columnName: "Staff",
 columnLabel: "responsible",
 sortEnabled: true,
 },
 {
 columnName: "Enquiry",
 columnLabel: "enquiry_date",
 sortEnabled: true,
 },
 {
 columnName: "Updated",
 columnLabel: "updated_at",
 sortEnabled: true,
 },
 {
 columnName: "Status",
 columnLabel: "status",
 sortEnabled: true,
 },
 {
 columnName: "Actions",
 columnLabel: "actions",
 sortEnabled: false,
 },
 ]);

 emitter.on("refreshOpportunities", (value) => {
 fetchOpportunities();
 });

 async function fetchOpportunities() {
 loading.value = true;
 await ApiService.setHeader();
 await ApiService.post("opportunity/get", payload)
 .then((resource) => {
 loading.value = false;
 tableData.value = resource.data.data.data;
 })
 .catch((error) => {
 console.log(error);
 });
 }

 async function editItem(id) {
 document.getElementById("kt_edit_opportunity_toggle").click();
 emitter.emit("editOpportunityItem", id);
 }

 async function flagStatus(id) {
 await ApiService.setHeader();
 await ApiService.post("opportunity/update-status", { id: id, status: 20 })
 .then((resource) => {
 if (resource.data.result === "success") {
 fetchOpportunities();
 }
 })
 .catch((error) => {
 console.log(error);
 });
 }

 onMounted(() => {
 setCurrentPageTitle("Opportunities");
 fetchOpportunities();
 });
 return {
 tableHeader,
 tableData,
 loading,
 editItem,
 statusTags,
 flagStatus,
 getInitials,
 dateFormat,
 emitter,
 };
 },
});

tableData.value = resource.data.data.data;

tableData.value.splice(0, tableData.value.length, ...resource.data.data.data.value);