<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="../assets/images/m-user.svg" />
            </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);"

                  ><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-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="closeDialog" 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);" 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="../assets/images/m-user.svg" /></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="../assets/images/m-user.svg" class="" />
            </div>
            <!-- user profile -->

            <div class="user-profile">

              <h1>
                {{ userData.firstName }} {{ userData.lastName }}

                <a href="javasript:void(0);" class="tags">{{ userData.role }}</a>

              </h1>

              <ul class="joined-info">
                <li>

                  <a href="javascript:void(0);" @click="addProfileDialog"
                    >Add your work</a
                  >

                  <img src="../assets/images/u-info-icon.png" /> <span></span>
                </li>

                <li>

                  <a href="javasript:void(0);">{{ userData.karmaPoints }} Karma</a> <span></span>

                </li>
                <li>

                  <a href="javasript:void(0);"

                    >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">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">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() {
      return {
        loggedinFlag: false,

        usertoken: null,

        userData: {},

        caseStudies: [],

        interestName: null,
        oldId: null,

        socialLink: null,
        currentSocialLinkName: null,

      };
    },

    mounted() {

      this.userData = {};
      this.socialLink = [];
      this.userData.interests = [];
      this.userData.socialMediaProfiles = {};
      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) => {
            this.userData = response.data.data;

            if (!this.userData.socialMediaProfiles) {

              this.userData.socialMediaProfiles = {};
            }

            this.oldId = this.userData.bgColor;
            console.log(this.oldId, "this.userData.", this.userData.bgColor);

  
            this.assignClass();
            console.log(response.data.data);
          })
          .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;
        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");

            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();
      },

    },
  };
  </script>