<template>
  <main class="landing-page">
    <div class="container-fluid episode-intro">
      <nav class="navbar navbar-expand-sm spotLight-nav">
        <a class="navbar-brand" href="javascript: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="user-profile-photo insights-profile">
          <a href="javascript:void(0);"><img src="../assets/images/user.png" /></a>
        </div>
      </nav>
      <!-- menu wrapper -->
      <div class="intro-startup">
        <div class="thanks-wrapper">
          <div class="thanks-l-wrp">
            <div class="thanks-pay-wrp">
              <!-- <img src="../assets/images/thanks.svg" class="thanks-img" /> -->
              <img
                :src="currentSlideData.payload.metaData.authorImage[0]"
                class="thanks-img"
              />
              <div class="blacktext-wrp">
                CHeck out other case studies here
                <img src="../assets/images/arrow-bottom.svg" />
              </div>
              <ul class="">
                <li v-for="(study, i) in caseStudies" :key="i">
                  <a href="javascript:void(0);">
                    <img :src="study.intro.logoURL" />
                    <span
                      ><img src="../assets/images/p-eye.svg" /> 0 Views</span
                    >
                  </a>
                </li>

                <!-- <li class="payments-spc-57">
                  <a href="javascript:void(0);">
                    <img src="../assets/images/g-pay.svg" />
                    <span
                      ><img src="../assets/images/p-eye.svg" /> 19.4k
                      Views</span
                    >
                  </a>
                </li>
                <li>
                  <a href="javascript:void(0);">
                    <img src="../assets/images/bb.svg" />
                    <span
                      ><img src="../assets/images/p-eye.svg" /> 19.4k
                      Views</span
                    >
                  </a>
                </li> -->
              </ul>
              <!-- payments options -->
              <!-- <ul class="">
                <li>
                  <a href="javascript:void(0);">
                    <img src="../assets/images/payment.svg" />
                    <span
                      ><img src="../assets/images/p-eye.svg" /> 19.4k
                      Views</span
                    >
                  </a>
                </li>
                <li class="payments-spc-57">
                  <a href="javascript:void(0);">
                    <img src="../assets/images/uc.svg" />
                    <span
                      ><img src="../assets/images/p-eye.svg" /> 19.4k
                      Views</span
                    >
                  </a>
                </li>
              </ul> -->
              <!-- payments options -->
            </div>
            <!-- thanks pay wrp -->
            <img
              src="../assets/images/spot-light-bt.svg"
              class="payment-spot-light-bt"
            />
          </div>
          <!-- thanks left wrp -->
          <div class="thanks-r-section">
            <div class="logo-common-wrp">
              <a href="javascript:void(0);"
                ><img src="../assets/images/ps-growth.svg" />
                <span>Product Growth</span>
              </a>
            </div>
            <!-- logo wrp -->
            <div class="clearfix"></div>
            <p>
              Don’t forget to <strong> join the discussion </strong> by
              scrolling back and adding your comments!
            </p>
            <div class="clearfix"></div>
            <a href="javascript:void(0);" class="back-bt" @click="goToProfile">
              <span class="s1"></span>
              <span class="s2"></span>
              <span class="s3"></span>
              <span class="s4"></span>
              <img src="../assets/images/refresh.svg" /> Back to home
            </a>
            <ul class="rating-section">
              <li>
                <p>
                  Excited to <strong> create case studies</strong> or help build
                  Product Growth?
                </p>
                <a href="javascript:void(0);" class="publish">Publish</a>
              </li>
              <li>
                <p class="wdth">How would you rate this case study?</p>
                <span class="rating-list">
                  <star-rating @rating-selected ="updateRating" v-bind:star-size="30" v-model="rating" active-color="#514da6">
                  </star-rating>
                  <!-- <a href="javascript:void(0);"
                    ><img src="../assets/images/f-review.svg"
                  /></a>
                  <a href="javascript:void(0);"
                    ><img src="../assets/images/f-review.svg"
                  /></a>
                  <a href="javascript:void(0);"
                    ><img src="../assets/images/e-review.svg"
                  /></a> -->
                </span>
              </li>
            </ul>
            <div class="follow-us-py">
              <span>Follow us at</span>
              <ul class="p-follows">
                <li>
                  <a href="javascript:void(0);">
                    <img src="../assets/images/p-rss.svg" />
                  </a>
                </li>
                <li>
                  <a href="javascript:void(0);">
                    <img src="../assets/images/p-linkedin.svg" />
                  </a>
                </li>
                <li>
                  <a href="javascript:void(0);">
                    <img src="../assets/images/p-twitter.svg" />
                  </a>
                </li>
              </ul>
            </div>
            <!-- <star-rating v-model="rating"></star-rating> -->

            <!-- follow us -->
            <div class="p-users">
              <span>Author</span>
              <h1>{{ currentSlideData.payload.metaData.authors[0] }}</h1>
              <!-- <span>Author</span>
              <h1>Pramod</h1>
              <span>Author</span>
              <h1>Sarthak</h1> -->
              <span v-if="currentSlideData.payload.metaData.designer"
                >Designer</span
              >
              <h1>{{ currentSlideData.payload.metaData.designer }}</h1>
              <span v-if="currentSlideData.payload.metaData.illustrations"
                >Illustrations</span
              >
              <h1>{{ currentSlideData.payload.metaData.illustrations }}</h1>
            </div>
            <!-- users -->
          </div>
          <!-- thanks payment right section -->
        </div>
        <!--- thanks wrapper -->
        <div class="footer-nav">
          <div class="footer-top">
            <ul class="top-intro-bt ps_right">
              <li>
                <a href="javascript:void(0);" @click="goBack"
                  ><img src="../assets/images/skip-prev.svg" /> Prev</a
                >
              </li>
            </ul>
          </div>
          <!-- footer top -->
          <div class="footer-bottom">
            <ul>
              <li class="active"></li>
              <li class="active"></li>
            </ul>
          </div>
          <!-- footer top -->
        </div>
        <!-- footer -->
      </div>
      <!-- body wrapper -->
    </div>
    <!-- main wrapper -->
  </main>
</template>

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

export default {
  name: "Outro",

  data() {
    return {
      caseStudies: [],
      allSlide: [],
      currentSlideIndex: null,
      currentSlideData: null,
      rating: 0,
    };
  },
  mounted() {
    var allSlideData = localStorage.getItem(
      "spotlight_slide" + this.$route.params.caseStudyId
    );
    if (allSlideData) {
      this.allSlide = JSON.parse(allSlideData);
      this.getCurrentSlideData();
      this.getCaseStudies();
      this.getRating();
    }
  },
  methods: {
    getCurrentSlideData() {
      var i = this.allSlide.findIndex(
        (slide_) => slide_.slideId == this.$route.params.slideId
      );
      this.currentSlideIndex = i;
      this.currentSlideData = this.allSlide[i];
      console.log("currentSlideData", this.currentSlideData);
    },
    goNext() {
      this.currentSlideIndex++;
      this.$router.push({
        name: this.allSlide[this.currentSlideIndex].ur,
        params: {
          caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
          slideId: this.allSlide[this.currentSlideIndex].slideId,
        },
      });
    },
    goBack() {
      this.currentSlideIndex--;
      this.$router.push({
        name: this.allSlide[this.currentSlideIndex].ur,
        params: {
          caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
          slideId: this.allSlide[this.currentSlideIndex].slideId,
        },
      });
    },

    getCaseStudies() {
      var userdata = localStorage.getItem("spotlight_usertoken");
      if (userdata) {
        userdata = JSON.parse(userdata);
        axios
          .get("/caseStudy/all", {
            headers: {
              Authorization: "Bearer " + userdata.token,
            },
          })
          .then((response) => {
            console.log(response.data.data.caseStudies);
            this.caseStudies = response.data.data.caseStudies;
          })
          .catch((error) => console.log(error));
      }
    },

    getRating() {
      var userdata = localStorage.getItem("spotlight_usertoken");
      if (userdata) {
        userdata = JSON.parse(userdata);
        axios
          .get("/caseStudy/rating?caseStudyId="+this.$route.params.caseStudyId, {
            headers: {
              Authorization: "Bearer " + userdata.token,
            },
          })
          .then((response) => {
            this.rating = response.data.data.Avgrating;
          })
          .catch((error) => console.log(error));
      }
    },
    updateRating() {
      var userdata = localStorage.getItem("spotlight_usertoken");
      if (userdata) {
        userdata = JSON.parse(userdata);
        var obj = {
          "caseStudyId":this.$route.params.caseStudyId,
          "rating":this.rating
        }
        axios
          .post("/caseStudy/rating",obj, {
            headers: {
              Authorization: "Bearer " + userdata.token,
            },
          })
          .then((response) => {
            console.log("response",response)
            // this.rating = response.data.data.Avgrating;
          })
          .catch((error) => console.log(error));
      }
    },
    goToLogin() {
      this.$router.push("/login");
    },
    goToSignUp() {
      this.$router.push("/");
    },
    goToProfile() {
      this.$router.push("/profile");
    },
  },
};
</script>
<style>
.vue-star-rating-rating-text[data-v-fde73a0c] {
    margin-left: 7px;
    display: none;
}
</style>