<template>
  <main class="landing-page">
    <!-- profile -->
    <div class="popup-wrp" style="display: none">
      <div class="overlay" @click="hideDialog"></div>
      <div class="popup-set" id="add-profile" style="display: none">
        <div class="popup-header">
          <div class="user-photo common_color">
            <img :src="userData.profilePic" />
          </div>
          <!-- header user -->

          <ul>
            <li>
              <a href="javasript:void(0);"
                ><img src="../assets/images/replace.svg" /><span
                  >Replace Avatar</span
                ></a
              >
            </li>
            <li>
              <a href="javasript:void(0);"
                @click="getRandomAvatar()"><img src="../assets/images/randomise.svg" /><span
                  >Randomise Avatar</span
                ></a
              >
            </li>
          </ul>
        </div>
        <!-- header -->
        <div class="popup-body">
          <form class="popup-forms">
            <div class="row">
              <div class="col-sm-6 col-md-6 col-lg-6 col-xl-6">
                <div class="form-group floating-label">
                  <input
                    type="text"
                    class="form-control"
                    v-model="userData.firstName"
                    placeholder=" "
                    id="fname"
                  />
                  <label for="fname">First Name</label>
                </div>
              </div>
              <!-- input -->
              <div class="col-sm-6 col-md-6 col-lg-6 col-xl-6">
                <div class="form-group floating-label">
                  <input
                    type="text"
                    class="form-control"
                    value=""
                    placeholder=" "
                    id="lname"
                    v-model="userData.lastName"
                  />
                  <label for="lname" class="lname">Last Name</label>
                </div>
              </div>
              <!-- input -->
              <div class="col-sm-5 col-md-5 col-lg-5 col-xl-5">
                <div class="form-group floating-label">
                  <input
                    type="text"
                    class="form-control"
                    value=""
                    v-model="userData.designation"
                    placeholder=" "
                    id="designation"
                  />
                  <label for="designation">Designation</label>
                </div>
              </div>
              <!-- input -->
              <div class="col-sm-7 col-md-7 col-lg-7 col-xl-7">
                <div class="form-group floating-label">
                  <input
                    type="text"
                    class="form-control"
                    v-model="userData.organisation"
                    id="company"
                    placeholder=" "
                  />
                  <label for="company">Company</label>
                </div>
              </div>
              <!-- input -->
              <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
                <div class="form-group floating-label">
                  <textarea
                    type="text"
                    class="form-control"
                    value=""
                    v-model="userData.bio"
                    id="yourself"
                    placeholder=" "
                  ></textarea>
                  <label for="yourself"
                    >Tell others a little about yourself</label
                  >
                </div>
              </div>
              <!-- input -->
              <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
                <p class="things">Three things that you talk more about</p>

                <ul class="interests">
                  <li v-for="(interest, i) in userData.interests" :key="i">
                    <span>{{ interest }}</span>
                    <a
                      href="javascript:void(0);"
                      @click="removeInterest(i)"
                      class="cat-minus"
                      ><img src="../assets/images/minus.svg"
                    /></a>
                  </li>
                  <li>
                    <input
                      class=""
                      placeholder="Add interest"
                      v-on:keyup.enter="addInterest" 
                      v-model="interestName"
                    />
                    <a href="javascript:void(0);" @click="addInterest()"
                      ><img src="../assets/images/plus-circle.svg"
                    /></a>
                  </li>
                </ul>
              </div>
              <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
                <p class="things">Choose Background color</p>

                <ul class="colors">
                  <li>
                    <a
                      href="javascript:void(0);"
                      id="#C4C4C4"
                      class="silver"
                      @click="changeColor('#C4C4C4')"
                    ></a>
                  </li>
                  <li>
                    <a
                      href="javascript:void(0);"
                      id="#FFF6D7"
                      class="milk-punch"
                      @click="changeColor('#FFF6D7')"
                    ></a>
                  </li>
                  <li>
                    <a
                      href="javascript:void(0);"
                      id="#BDDBFF"
                      class="french-pass"
                      @click="changeColor('#BDDBFF')"
                    ></a>
                  </li>
                  <li>
                    <a
                      href="javascript:void(0);"
                      id="#C0FAFE"
                      class="cyan-french-pass"
                      @click="changeColor('#C0FAFE')"
                    ></a>
                  </li>
                  <li>
                    <a
                      href="javascript:void(0);"
                      id="#FFDBDC"
                      class="cosmos"
                      @click="changeColor('#FFDBDC')"
                    ></a>
                  </li>
                  <li>
                    <a
                      href="javascript:void(0);"
                      id="#FEE6AC"
                      class="cape-Honey"
                      @click="changeColor('#FEE6AC')"
                    ></a>
                  </li>
                  <li>
                    <a
                      href="javascript:void(0);"
                      id="#E5DFF0"
                      class="snuff"
                      @click="changeColor('#E5DFF0')"
                    ></a>
                  </li>
                  <li>
                    <a
                      href="javascript:void(0);"
                      id="#DFE7EF"
                      class="catskillWhite"
                      @click="changeColor('#DFE7EF')"
                    ></a>
                  </li>
                  <li>
                    <a
                      href="javascript:void(0);"
                      id="#FFF"
                      class="white"
                      @click="changeColor('#FFF')"
                    ></a>
                  </li>
                </ul>
              </div>
              <div class="col-lg-12 mt-50">
                <p class="notifications">
                  Recieve notifications when you recieve a comment/ Upvote
                </p>
                <div class="switch-bt-wrp">
                  <label class="switch-btn">
                    <input type="checkbox" class="toggle-btn" />
                    <span class="rounded-toggle"></span>
                  </label>
                  <span class="onoff">on/off</span>
                </div>
              </div>
              <div class="col-lg-12">
                <p class="add-socail-ch">
                  Add your social Channels <span></span>
                </p>
              </div>
              <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
                <div class="form-group floating-label">
                  <select class="form-group">
                    <option value="Facebook">Facebook</option>
                  </select>
                  <span class="select-arrow"
                    ><img src="../assets/images/chevron-down.svg"
                  /></span>
                </div>
              </div>
              <!-- input -->
              <div class="col-sm-8 col-md-8 col-lg-8 col-xl-8">
                <div class="form-group floating-label">
                  <input
                    type="text"
                    class="form-control"
                    value=""
                    placeholder="Paste your profile URL here"
                    id=""
                    v-model="userData.socialMediaProfiles.facebook"
                  />
                </div>
              </div>
              <!-- input -->
              <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
                <div class="form-group floating-label">
                  <select class="form-group">
                    <option value="Linkedin">Linkedin</option>
                  </select>
                  <span class="select-arrow"
                    ><img src="../assets/images/chevron-down.svg"
                  /></span>
                </div>
              </div>
              <!-- input -->
              <div class="col-sm-8 col-md-8 col-lg-8 col-xl-8">
                <div class="form-group floating-label">
                  <input
                    type="text"
                    class="form-control"
                    value=""
                    placeholder="Paste your profile URL here"
                    id=""
                    v-model="userData.socialMediaProfiles.linkedin"
                  />
                </div>
              </div>
              <!-- input -->

              <!-- input -->
              <!-- <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
                <div class="form-group floating-label">
                  <select class="form-group">
                    <option @click="addSocialLink">Add another</option>
                  </select>
                  <span class="select-arrow"
                    ><img src="../assets/images/chevron-down.svg"
                  /></span>
                </div>
              </div> -->
              <!-- input -->
            </div>
            <a href="javascript:void(0);" @click="saveProfile" class="next-bt"
              >Save</a
            >
          </form>
        </div>
        <div class="clearfix"></div>
      </div>
      <!-- add profile -->
    </div>
    <!-- profile -->
    <div class="container-fluid inner-wrp">
      <nav class="navbar navbar-expand-sm spotLight-nav">
        <a class="navbar-brand" href="javasript:void(0);"
          ><img src="../assets/images/logo.png"
        /></a>
        <button
          class="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarsExample03"
          aria-controls="navbarsExample03"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
          <span class="navbar-toggler-icon"></span>
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarsExample03">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="javasript:void(0);">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="javasript:void(0);">Masterclass</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="javasript:void(0);">Stories</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="javasript:void(0);">Library</a>
            </li>
          </ul>
        </div>
          <a href="javasript:void(0);"  @click="addProfileDialog" class="update_profile"><span></span> Update Profile</a>
        <div class="">
        
          <a href="javascript:void(0);" class="user-profile-photo common_color" @click="userprofileshowDialog"><img :src="userData.profilePic" /></a>
          <div class="sub-menu-user" id="userprofileshow" style="display: none">
            <ul>
              <li>
                <a href="javascript:void(0);" @click="addProfileDialog"
                  >Edit Profile</a
                >
              </li>
              <li><a href="javascript:void(0);" @click="logout">Log Out</a></li>
            </ul>
          </div>
        </div>
      </nav>
      <!-- menu wrapper -->
      <div class="row profile-tab-spc-top">
        <div class="col-sm-8 col-md-12 col-lg-8 col-xl-8">
          <div class="inner-profile-ps common_color">
            <img :src="userData.profilePic" class="" />
          </div>
          <!-- user profile -->

          <div class="user-profile">
            <h1>
              {{ userData.firstName }} {{ userData.lastName }}
              <a href="javasript:void(0);" class="tags no-cursor">{{ userData.role }}</a>
            </h1>
            <ul class="joined-info">
              <li>
                <a href="javascript:void(0);" v-if="userData.designation.length == 0 && userData.organisation.length == 0" @click="addProfileDialog"
                  >Add your work</a
                >
                <a  class="no-cursor" href="javascript:void(0);" v-if="userData.designation.length != 0" 
                  >{{userData.designation}}</a
                >
                <a  class="no-cursor" href="javascript:void(0);" v-if="userData.designation.length != 0 && userData.organisation.length != 0" 
                  >at</a
                >
                <a  class="no-cursor" href="javascript:void(0);" v-if="userData.organisation.length != 0" 
                  >{{userData.organisation}}</a
                >
                <img src="../assets/images/u-info-icon.png" /> <span></span>
              </li>
              <li>
                <a href="javasript:void(0);" content="Karma Points" v-tippy> {{ userData.karmaPoints }} Karma</a> <span></span>
              </li>
              <li>
                <a href="javasript:void(0);"
                  class="no-cursor">Joined on
                  {{ moment(userData.createdAt).format("MMM YYYY") }}</a
                >
              </li>
            </ul>
            <p>{{ userData.bio }}</p>
          </div>
        </div>
        <!-- user profile -->
        <div class="col-sm-4 col-md-12 col-lg-4 col-xl-4">
          <div class="list-style-group" v-if="userData.awards">
            <p>Awards</p>
            <ul class="list-style">
              <li>
                <a href="javascript:void(0);"
                  ><img src="../assets/images/icon-1.png"
                /></a>
              </li>
            </ul>
          </div>
          <!-- list style -->
        </div>
      </div>
      <div class="clearfix"></div>
      <div class="row top-brd profile-tab-spc-top">
        <div class="col-sm-8 col-md-8 col-lg-8 col-xl-8">
          <ul class="profile-tab">
            <li class="active c-0">
              <a href="javascript:void(0);" @click="caseDialog"
                >Case-studies({{ caseStudies.length }})</a
              >
            </li>
            <li class="rp-all">
              <a href="javascript:void(0);" @click="repliesDialog"
                >Comments/Replies(0)</a
              >
            </li>
          </ul>
        </div>
        <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
          <ul class="social-connects">
            <li><span>Follow</span></li>
            <li>
              <a
                href="javascript:void(0);"
                @click="addProfileDialog"
                class="active"
                ><img src="../assets/images/plus.png"
              /></a>
              <span class="connect-social-channel"
                >Connect your social channels</span
              >
            </li>
          </ul>
        </div>
      </div>
      <!-- tab style -->
      <div class="profile-data-wrp">
        <div class="container-fluid data-wrp" id="case-study-0">
          <div class="row" v-if="caseStudies.length == 0">
             <div class="col-6 col-lg-6">
               <div class="full-w-height-profile ex-light seats_bg" >
                   <a href="javasript:void(0);" class="profile-md-bt center-and-spc bt-spc-top" @click="openUrl('https://www.productgrowth.org/spotlight')">Explore Spotlights</a>
  <p>Explore the spotlights others has put together</p>
                 </div><!-- full width -->
             </div><!-- col 6 -->
                  <div class="col-6 col-lg-6">
               <div class="full-w-height-profile ex-light spotlight_bg">
                 <img src="../assets/images/add-role.svg" class="add-role" />
                 <div class="clearfix"></div><!-- clearfix -->
                   <a href="javasript:void(0);" class="profile-md-bt center-and-spc" @click="openUrl('https://www.productgrowth.org/spotlight#typeform-spotlight')">Publish Spotlight</a>
  <p>Share your own insights through Spotlight</p>
                 </div><!-- full width -->
             </div><!-- col 6 -->
         
          </div>

          <div class="profile-data-wrp" v-if="caseStudies.length != 0">
            <div class="container-fluid data-wrp">
              <div class="row">
                <div class="" v-for="(study, i) in caseStudies" :key="i">
                  <div class="card-warpper" @click="openStudy(study)">
                    <div class="company-detail">
                      <div class="c-logo">
                        <!-- <img src="../assets/images/image 46.png" /> -->
                        <img :src="study.intro.logoURL" />
                      </div>
                      <div class="c-tag">
                        <img src="../assets/images/retake-blue.svg" v-if="study.intro.type == 'Retake'"/>
                        <img src="../assets/images/behind-blue.svg" v-if="study.intro.type == 'Behind-the-scenes'"/>
                        <img src="../assets/images/critique-blue.svg" v-if="study.intro.type == 'Critique'"/>
                        <img src="../assets/images/juxtapose-blue.svg" v-if="study.intro.type == 'Juxtapose'"/>
                      </div>
                    </div>
                    <!-- company detail-->
                    <h1>{{ study.intro.name }}</h1>
                    <div class="u-detail">
                      <img src="../assets/images/user-2.png" />
                      <h2 v-for="(name, j) in study.intro.authors" :key="j">
                        {{ name }}
                      </h2>
                    </div>
                    <!-- user detail -->
                    <p>
                      <span v-for="(area, j) in study.focusAreas" :key="j">
                        {{ area }}
                      </span>
                    </p>
                    <ul class="tags-list" >
                      <li v-for="(tags, j) in study.insightTags" :key="j">
                        <a href="javasript:void(0);" class="insight-design" v-if="tags == 'Design'" >Design</a>
                        <a href="javasript:void(0);" class="insight-product" v-if="tags == 'Product'">Product</a>
                        <a href="javasript:void(0);" class="insight-marketing" v-if="tags == 'Marketing'">Marketing</a>
                        <a href="javasript:void(0);" class="insight-pricing" v-if="tags == 'Pricing'">Pricing</a>
                        <a href="javasript:void(0);" class="insight-psychology" v-if="tags == 'Psychology'">Psychology</a>
                      </li>
                      <!-- <li><a href="javasript:void(0);" class="rose-bud">Marketing</a></li>
                      <li><a href="javasript:void(0);" class="pattens-blue">Product</a></li> -->
                    </ul>
                    <div class="clearfix"></div>
                  </div>
                  <!-- card wrpper -->
                  <!-- card wrpper -->
                </div>
                <!-- all card wrpper -->
              </div>
            </div>
          </div>
          <!-- data wrp -->
        </div>
        <!-- case study 0 -->
        <div
          class="container-fluid data-wrp"
          id="all-replies"
          style="display: none"
        >
          <div class="row">
            <div class="replies col-md-12">
              <div class="replies-wrp">
                <!-- <h1>PhonePe vs GooglePay <span>Critique</span></h1>
                <ul class="joined-info">
                  <li><a href="javasript:void(0);">37D</a> <span></span></li>
                  <li><img src="../assets/images/heart.png" /></li>
                  <li><a href="javasript:void(0);"> 4</a></li>
                  <li class="comment-spc">
                    <img src="../assets/images/comment.svg" />
                  </li>
                  <li><a href="javasript:void(0);"> 6</a></li>
                </ul>
                <p>
                  I wonder what the difference between “<strong>
                    Assistant</strong
                  >” and “<strong>Pickup and Drop</strong>” are. If they are the
                  same, there are two “call to actions” for the same workflow
                </p> -->
              </div>
              <!-- replies wrapper -->
            </div>
            <!-- all card wrpper -->
          </div>
        </div>
        <!-- all Relpies -->
      </div>
      <!-- data wrp -->
      <!-- body wrapper -->
    </div>
  </main>
</template>

<script>
import Vue from "vue";
import router from "../router";
import $ from "jquery";
import axios from "axios";

export default {
  name: "Profile",
data: () =>({
        loggedinFlag: false,
      usertoken: null,
      userData: {
        "verified": null,
		"bgColor": null,
		"interests": [],
		"karmaPoints": null,
		"socialLogin": null,
		"notification": null,
		"profilePic": null,
		"role": null,
		"name":null,
		"email": null,
		"firstName":null,
		"lastName":null,
		"createdAt": null,
		"bio": null,
		"designation": "",
		"organisation": "",
		"socialMediaProfiles": {'facebook':null,'linkedin':null}
      },
      caseStudies: [],
      interestName: null,
      oldId: null,
      socialLink: null,
      currentSocialLinkName: null,
      showCompany:false,
      showDesignation:false,
     }),

  mounted() {
    this.userData = {};
    this.socialLink = [];
    this.userData.interests = [];
    this.userData.socialMediaProfiles = {};
    this.userData.designation = ""; 
    this.userData.organisation = "";
    this.userData.socialMediaProfiles.facebook = null;
    this.userData.socialMediaProfiles.linkedin = null;
    var userdata = localStorage.getItem("spotlight_usertoken");
    if (userdata) {
      userdata = JSON.parse(userdata);
      this.usertoken = userdata.token;
      this.getProfile();
      this.getCaseStudies();
    }
  },
  methods: {
    goToSignUp() {
      this.$router.push("/signup");
    },
    goToReset() {
      this.$router.push("/reset");
    },
    logout() {
      this.$router.push("/");
    },
    addSocialLink(obj) {
      this.socialLink.push();
    },
    addInterest() {
      console.log(this.userData.interests.length, "called", this.interestName);
      if (this.userData.interests.length <= 2) {
        this.userData.interests.push(this.interestName);
        this.interestName = null;
      } else {
        this.$toaster.info("Only 3 interest are allowed");
      }
    },
    removeInterest(i) {
      this.userData.interests.splice(i, 1);
    },
    assignClass() {
      var element = document.getElementById(this.userData.bgColor);
      element.classList.add("active");
      var cols = document.getElementsByClassName("common_color");
      for (var i = 0; i < cols.length; i++) {
        cols[i].style.backgroundColor = this.userData.bgColor;
      }
    },
    changeColor(clr) {
      console.log(this.oldId, "clr", clr);
      var element = document.getElementById(clr);
      element.classList.add("active");
      var removeelement = document.getElementById(this.oldId);
      removeelement.classList.remove("active");
      this.oldId = clr;
      var cols = document.getElementsByClassName("common_color");
      for (var i = 0; i < cols.length; i++) {
        cols[i].style.backgroundColor = clr;
      }
      this.userData.bgColor = clr;
    },
    getProfile() {
      axios
        .get("/profile", {
          headers: {
            Authorization: "Bearer " + this.usertoken,
          },
        })
        .then((response) => {
          if (!response.data.data.socialMediaProfiles) {
              this.userData.socialMediaProfiles = {};
          }
          this.userData = Object.assign(this.userData, response.data.data)
          
          // this.userData = response.data.data;
          this.oldId = this.userData.bgColor;
          console.log(this.oldId, "this.userData.", this.userData);
         this.showDesignation =  this.userData.designation.length == 0?true:false; 
         this.showCompany =  this.userData.organisation.length == 0?true:false; 
          this.assignClass();
          console.log(response.data.data);
        })
        .catch((error) => console.log(error));
    },
    getRandomAvatar() {
      axios
        .get("/randomAvatar", {
          headers: {
            Authorization: "Bearer " + this.usertoken,
          },
        })
        .then((response) => {
         this.userData.profilePic = response.data.imageURL;
          console.log(response.data.imageURL);
        })
        .catch((error) => console.log(error));
    },
    getCaseStudies() {
      axios
        .get("/caseStudy/all", {
          headers: {
            Authorization: "Bearer " + this.usertoken,
          },
        })
        .then((response) => {
          console.log(response.data.data.caseStudies);
          this.caseStudies = response.data.data.caseStudies;
        })
        .catch((error) => console.log(error));
    },
    openStudy(payload) {
      console.log("payload-", payload);
      payload.intro.date = payload.createdAt;
      payload.intro.focusPoint = payload.createdAt;
      axios
        .get("/caseStudy/slides?caseStudyId=" + payload._id, {
          headers: {
            Authorization: "Bearer " + this.usertoken,
          },
        })
        .then((response) => {
          this.createSlide(payload, response.data.data);
        })
        .catch((error) => console.log(error));
    },

    createSlide(payload, slides) {
      var finalSlides = [];
      slides.forEach((slides_) => {
        var url = this.assignRoutes(slides_.templateId);
        var obj = {
          forward: true,
          backward: true,
          ur: url,
          slideId: slides_._id,
          caseStudyId: slides_.caseStudyId,
          payload: {
            metaData: slides_.metaData,
            comments: slides_.comments,
            insight: slides_.insight?slides_.insight:null,
          },
        };
        // slides_
        finalSlides.push(obj);
      });
      console.log("payload", payload);
      // add first slide at begining
      finalSlides.unshift({
        forward: true,
        backward: false,
        ur: "EpisodeIntro",
        slideId: "INTRO_oqkdMOVDrwRptsdWJ6Ye",
        caseStudyId: payload._id,
        payload: {
          metaData: payload.intro,
          comments: [],
        },
      });
      finalSlides.push({
        forward: true,
        backward: false,
        ur: "Outro",
        slideId: "OUTRO_oqkdMOVDrwRptsdWJ6Ye",
        caseStudyId: payload._id,
        payload: {
          metaData: payload.outro,
          comments: [],
        },
      });

      console.log(finalSlides);
      localStorage.setItem('spotlight_slide'+payload._id, JSON.stringify(finalSlides))
      this.$router.push({
        name: "EpisodeIntro",
        params: {
          caseStudyId: finalSlides[0].caseStudyId,
          slideId: finalSlides[0].slideId,
        },
      });
    },
    assignRoutes(tempId) {
      // /episode-intro
      // /outro
      var routes = [
        {
          url: "AuthorIntro",
          tempId: "T1_RoeMG8130Xko1DvhC3Ou",
        },
        {
          url: "NoScreenshotSingleAuthor",
          tempId: "T2_ROsUOEy3vxsRAiQ72XdI",
        },
        {
          url: "SingleMobileScreenInsightTwo",
          tempId: "T3_cqNIf7tuqL4jyON63dA7",
        },
        {
          url: "TwoScreenWithoutInsight",
          tempId: "T4_4QC8W7kIYnJtZ26Jt0Go",
        },
        {
          url: "noscreenshotSingleautho",
          tempId: "T5_za3c3sYgx7bVvtKz5r0e",
        },
        {
          url: "SingleMobileScreenInsightOne",
          tempId: "T6_za3c3sYgx7bVvtKz5sgf",
        },
        {
          url: "TwoScreenWithInsight",
          tempId: "T7_za3c3sYgx7bVvtKzasdf",
        },
      ];
      var i = routes.findIndex((routes_) => routes_.tempId == tempId);
      return routes[i].url;
    },
    saveProfile() {
      var obj = {};
      this.userData.name =
        this.userData.firstName + " " + this.userData.lastName;
      obj = Object.assign(obj, this.userData);
      // if(!obj.socialMediaProfiles){
      //   obj.socialMediaProfiles = {};
      // }
      delete obj.createdAt;
      delete obj.email;
      delete obj.role;
      delete obj.verified;
      delete obj.updatedAt;
      delete obj.__v;
      delete obj._id;
      delete obj.karmaPoints;
      delete obj.awards;
      delete obj.socialLogin;
      axios
        .put("/profile", obj, {
          headers: {
            Authorization: "Bearer " + this.usertoken,
          },
        })
        .then((response) => {
          // this.userData = response.data.data;
          this.$toaster.success("Profile Updated");
          this.closeDialog();
          console.log(response.data.data);
        })
        .catch((error) => {
          if (error.response) {
            this.$toaster.error(error.response.data.message);
          }
        });
    },
    addProfileDialog() {
      $(".inner-wrp").addClass("body-blur");
      $("#add-social-links").hide();
      $(".popup-wrp, #add-profile").show();
    },
    nextProfileDialog() {
      $("#add-profile").hide();
      $("#add-social-links").show();
      this.saveProfile();
    },
    closeDialog() {
      $(".popup-wrp").hide();
      $(".inner-wrp").removeClass("body-blur");
      // this.saveProfile();
    },
    hideDialog() {
      $(".popup-wrp").hide();
      $(".inner-wrp").removeClass("body-blur");
    },
    ///
    caseDialog() {
      $(".rp-all").removeClass("active");
      $(".c-0").addClass("active");
      $("#all-replies").hide();
      $("#case-study-0").show();
    },
    repliesDialog() {
      $(".c-0").removeClass("active");
      $(".rp-all").addClass("active");
      $("#case-study-0").hide();
      $("#all-replies").show();
    },

    userprofileshowDialog() {
      $("#userprofileshow").toggle();
    },
    openUrl(url){
      window.open(url);
    },
  },
};
</script>
<style>
.no-cursor{
  cursor: default !important;
}
</style>
