<template>
  <main class="landing-page">
    <!-- profile -->
    <div class="popup-wrp" style="display: none">
      <div class="overlay"></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.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>
                    <a href="#" class="cat-minus"
                      ><img src="../assets/images/minus.svg"
                    /></a>
                  </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 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> Linkdin</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="linkedin.com/vamsikrishna" placeholder=" " id="">
      
    </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>Medium</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="">
    </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>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="#">Edit Profile</a></li>
               <li><a href="#">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.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 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(3)</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" 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 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 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:{},
    };
  },
  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));

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