<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="#"
                  ><img src="../assets/images/replace.svg" /><span
                    >Replace Avatar</span
                  ></a
                >
              </li>
              <li>
                <a href="#"
                  ><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="#"
            ><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="#">About</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Masterclass</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Stories</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Library</a>
              </li>
            </ul>
          </div>

          <div class="user-profile-photo common_color">

            <a href="javascript:void(0);" @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="#" class="tags">{{ userData.role }}</a>
              </h1>

              <ul class="joined-info">
                <li>
                  <a href="#">Add your work</a>
                  <img src="../assets/images/u-info-icon.png" /> <span></span>
                </li>

                <li>
                  <a href="#">{{ userData.karmaPoints }} Karma</a> <span></span>
                </li>
                <li>
                  <a href="#"
                    >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(0)</a
                >
              </li>
              <li class="rp-all">
                <a href="javascript:void(0);" @click="repliesDialog"
                  >Comments/Replies(1)</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">
              <div class="col-lg-12">
                <div class="profile-buttons">

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

                    class="profile-sm-bt center-and-spc bt-active"

                    @click="addProfileDialog"

                    >Update Profile</a
                  >
                  <a href="#" class="profile-md-bt center-and-spc"
                    >Explore Case-studies</a
                  >
                  <a href="#" class="profile-lg-bt">Publish Your Case Study</a>
                </div>
              </div>
            </div>

          </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="#">37D</a> <span></span></li>
                    <li><img src="../assets/images/heart.png" /></li>
                    <li><a href="#"> 4</a></li>
                    <li class="comment-spc">
                      <img src="../assets/images/comment.svg" />
                    </li>
                    <li><a href="#"> 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: {},
        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();
      }

    },

    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;
             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));

      },

      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>