<template>
  <main class="landing-page">
    <!-- profile -->
    <div class="popup-wrp" style="display: none">
      <div class="overlay"></div>
      <div class="popup-set">
        <div class="popup-header">
          <img src="../assets/images/user.png" />
          <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.name" 
                    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"
                  />
                  <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"
                  />
                  <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"
                  ></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><span>Cats</span></li>
                  <li>
                    <input class="" placeholder="Add interest" />
                    <a href="#"
                      ><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="#" class="silver"></a></li>
                  <li><a href="#" class="milk-punch active"></a></li>
                  <li><a href="#" class="french-pass"></a></li>
                  <li><a href="#" class="cyan-french-pass"></a></li>
                  <li><a href="#" class="cosmos"></a></li>
                  <li><a href="#" class="cape-Honey"></a></li>
                  <li><a href="#" class="snuff"></a></li>
                  <li><a href="#" class="catskillWhite"></a></li>
                  <li><a href="#" class="white"></a></li>
                </ul>
              </div>
            </div>
            <a @click="closeDialog" class="next-bt">Next</a>
          </form>
        </div>
        <div class="clearfix"></div>
      </div>
    </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">
          <a href="#"><img src="../assets/images/user.png" /></a>
        </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">
          <img src="../assets/images/user.png" class="inner-profile-ps" />
          <div class="user-profile">
            <h1>{{userData.name}} <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="#">34772 Karma</a> <span></span></li>
              <li><a href="#">Joined on {{moment(userData.createdAt).format('MMM YYYY')}}</a></li>
            </ul>
            <p>Tell others a little about yourself</p>
          </div>
        </div>
        <!-- user profile -->
        <div class="col-sm-4 col-md-12 col-lg-4 col-xl-4">
          <div class="list-style-group">
            <p>Awards</p>
            <ul class="list-style">
              <li>
                <a href="#"><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"><a href="#">Case-studies(0)</a></li>
            <li><a href="#">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="#" 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">
          <div class="row">
            <div class="col-lg-12">
              <div class="profile-buttons">
                <a
                  class="profile-sm-bt center-and-spc bt-active"
                  @click="openDialog"
                  >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>
      </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:{},
    };
  },
  mounted() {
    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");
    },
    getProfile() {
      axios
      .get("/profile", {
        headers: {
          Authorization: "Bearer " + this.usertoken,
        },
      })
      .then((response) => {
        this.userData = response.data.data;
        console.log(response.data.data);
      })
      .catch((error) => console.log(error));
    },
    saveProfile(){
      var obj = {};
      obj = Object.assign(obj, this.userData);
        delete obj.awards;
        delete obj.createdAt;
        delete obj.email;
        delete obj.role;
        delete obj.verified;
        delete obj.updatedAt;
        delete obj.__v;
        delete obj._id;
        axios
        .put("/profile", obj,{
          headers: {
            Authorization: "Bearer " + this.usertoken,
          },
        })
        .then((response) => {
          // this.userData = response.data.data;
          console.log(response.data.data);
        })
        .catch((error) => console.log(error));

    },
    openDialog() {
      $(".inner-wrp").addClass("body-blur");
      $(".popup-wrp").show();
    },
    closeDialog() {
      this.saveProfile();
      $(".inner-wrp").removeClass("body-blur");
      $(".popup-wrp").hide();
    },
  },
};
</script>