<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">

          <!-- chat box -->

          <div class="bounce-board-wrp" id="cht_box_close">
            <div class="inner-wrp-bc">
              <div class="bc-top-head">
                <span class="bc-head">
                  <img src="../assets/images/bounce-icon.svg" /> Bounce Board
                </span>
                <div class="action-sort">
                  <span class="sort-by">SORT BY</span>
                  <div class="btn-group">
                    <button
                      type="button"
                      class="bc-sort-list dropdown-toggle"

                      data-toggle="dropdown"
                      aria-haspopup="true"
                      aria-expanded="false"
                    >
                      BEST
                    </button>
                    <div class="dropdown-menu short_by">

                      <a class="dropdown-item" href="javasript:void(0);"
                        >BEST 1</a
                      >
                      <a class="dropdown-item" href="javasript:void(0);"
                        >BEST 2</a
                      >
                      <a class="dropdown-item" href="javasript:void(0);"
                        >BEST 3</a
                      >

                    </div>
                  </div>
                  <a
                    href="javasript:void(0);"
                    @click="chtbox_close"
                    class="close_chat_bx"
                    ><img src="../assets/images/close.png" alt="close" /></a
                  ><!-- close -->
                </div>
                <!-- action sort -->
              </div>
              <!-- top head -->
              <div class="bounce-board-body">

                <!-- all user comments -->
                <ul class="bounced-user-comments">

                  <li class="bc_border" v-for="(cmnt, j) in commentList" :key="j">

                    <div class="bc_brd_l"></div>
                    <!-- border -->
                    <div class="parent-full-width">
                      <div class="full-width">
                        <div class="b-user-head">

                          <img :src="cmnt.user.profilePic" />
                          <span class="head-content">{{ cmnt.user.name }} </span>

                          <ul>
                            <li>
                              <span></span

                              ><img src="../assets/images/u-info-icon.png" />{{
                                cmnt.user.karmaPoints
                              }}pts

                            </li>

                            <li><span></span>{{dateGenerator(cmnt.createdAt)}}days ago</li>

                          </ul>
                        </div>
                        <!-- header -->
                        <p>

                          {{ cmnt.comment }}

                        </p>
                        <div class="joined_wrapper">
                          <ul class="joined-info info_bc_spc">
                            <li>
                              <img src="../assets/images/purple-heart.png" />
                            </li>

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

                            <li class="comment-spc">
                              <img src="../assets/images/purple-comment.png" />
                            </li>

                            <li><a href="javasript:void(0);"> {{cmnt.children.length}}</a></li>

                          </ul>

                          <div class="add_rply" v-if="!cmnt.childInput">
                            <input
                              type="text"
                              @click="eachRply(cmnt)"
                              class="add_Rply_C"
                              placeholder="Add your reply"
                            />

                          </div>
                          <!-- rly form -->
                        </div>
                        <!-- joined wrapper -->
                      </div>
                      <!-- full width -->
                    </div>

                    <div class="comments-footer each-ft" v-if="cmnt.childInput">
                      <textarea v-model="comment"></textarea>
                      <div class="comments-footer-wrp">
                        <a
                          @click="createChildComment(cmnt)"
                          href="javasript:void(0);"
                          class="add_comments_chat reply-Wdth"
                          >Reply</a
                        >
                        <a href="javasript:void(0);" class="discard_bt"
                          @click="discardRply(cmnt)"><img src="../assets/images/discard.svg"
                        /></a>
                      </div>
                    </div>

                    <!-- parent -->

                    <div class="child-full-width" v-for="(childCmnt, i) in cmnt.children" :key="i">

                      <div class="full-width">
                        <div class="b-user-head">

                          <img :src="childCmnt.user.profilePic" />
                          <span class="head-content">{{childCmnt.user.name }} </span>

                          <ul>
                            <li>
                              <span></span

                              ><img src="../assets/images/u-info-icon.png" />{{childCmnt.user.karmaPoints}}pts

                            </li>

                            <li><span></span>{{dateGenerator(childCmnt.createdAt)}}days ago</li>

                          </ul>
                        </div>
                        <p>

                          {{childCmnt.comment}}

                        </p>
                        <div class="joined_wrapper">
                          <ul class="joined-info info_bc_spc">
                            <li>
                              <img src="../assets/images/purple-heart.png" />
                            </li>

                            <li><a href="javasript:void(0);"> {{childCmnt.likes.length}}</a></li>
                            

                          </ul>

                        </div>
                      </div>

                    </div>
                    <!-- eree -->

                    <!-- comments footer -->

                  </li>
                </ul>
              </div>
              <!-- bounce board body -->

              <div class="comments-footer" v-if="parentInput">
                <textarea v-model="comment"></textarea>

                <div class="comments-footer-wrp">

                  <a
                    href="javasript:void(0);"
                    class="add_comments_chat"
                    @click="createComment"

                    ><img src="../assets/images/add-comment.svg" /> Comment</a
                  >
                </div>
              </div>
              <!-- comments footer -->
            </div>
          </div>
          <!-- bounceboard wrp -->
          <!-- chat box -->

          <div class="single-mobileInsight">

             <div class="top-area-blank"></div>

            <!-- <img src="../assets/images/slide.png" class="slide-img" /> -->

            <img
              :src="currentSlideData.payload.metaData.mobileImage"
              class="m-screen"
            />

            <div class="single-left-Insight-comments">
              <div class="author-thoughts">

                <img src="../assets/images/thoughts-upper.svg" class="upper-th" />

                <img

                  :src="currentSlideData.payload.metaData.authorImage"
                  class="dynamic-thoughts"
                />
              </div>
              <!-- user thoughts -->

              <div class="single-author-li-comments">
                <div class="a-intro-comments custom-c-style">
                  <!-- <p>
                    I wonder what the difference between “
                    <strong>Dunzo 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> -->

                  <p>{{ currentSlideData.payload.comments[0].comment }}</p>

                  <ul class="rly-comment-set">
                    <li>
                      <img src="../assets/images/color-heart.svg" />
                      <a href="javascript:void(0);">0</a>
                    </li>
                    <li>
                      <img src="../assets/images/rply.svg" />

                      <a href="javascript:void(0);" @click="open_ct_box">Reply</a>

                    </li>
                  </ul>
                </div>
                <!-- comments box -->
              </div>
              <!-- single author comments -->
              <div class="single-author-li-comments">
                <div class="a-intro-comments custom-c-style">
                  <p>

                    {{ currentSlideData.payload.comments[1].comment }}

                  </p>
                  <ul class="rly-comment-set">
                    <li>
                      <img src="../assets/images/color-heart.svg" />
                      <a href="javascript:void(0);">0</a>
                    </li>
                    <li>
                      <img src="../assets/images/rply.svg" />
                      <a href="javascript:void(0);" @click="open_ct_box">Reply</a>
                    </li>
                  </ul>
                </div>
                <!-- comments box -->
              </div>
              <!-- single author comments -->
            </div>
            <!-- single mobile Left insight  -->
            <div class="c-product-insight-wrp two-screen-spc-top">

              <div class="single-author-li-comments">
                <div class="a-intro-comments">

                  <p>

                    {{ currentSlideData.payload.comments[2].comment }}

                  </p>
                  <ul class="rly-comment-set">
                    <li>
                      <img src="../assets/images/color-heart.svg" />
                      <a href="javascript:void(0);">0</a>
                    </li>
                    <li>
                      <img src="../assets/images/rply.svg" />
                      <a href="javascript:void(0);" @click="open_ct_box">Reply</a>
                    </li>
                  </ul>
                </div>
                <!-- comments box -->
              </div>

              <div class="single-author-li-comments">

                <div class="a-intro-comments">
                  <p>

                    {{ currentSlideData.payload.comments[3].comment }}

                  </p>
                  <ul class="rly-comment-set">
                    <li>
                      <img src="../assets/images/color-heart.svg" />
                      <a href="javascript:void(0);">0</a>
                    </li>
                    <li>
                      <img src="../assets/images/rply.svg" />
                      <a href="javascript:void(0);" @click="open_ct_box">Reply</a>
                    </li>
                  </ul>
                </div>
                <!-- comments box -->
              </div>
              <!-- single author comments -->
            </div>
            <!-- single mobile Right insight  -->
          </div>

           <!-- single author comments -->
          <div class="footer-nav">

            <div class="footer-top white-bg">
              <div class="row">
                <div class="col-6 col-sm-6 col-md-6 col-lg-6 c_hide">
                  <div class="row h-100p">

                    <div
                      class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bord-r"
                    >
                      <div class="ft-comments-group testi-photos-ct">
                        <div class="c-with-photos">
                          <span class="count-comments"
                            >{{ commentList.length - 1 }}+ Comments</span
                          ><!-- count commets -->
                          <ul class="comments-photos">
                            <li><img src="../assets/images/c-photo-1.png" /></li>
                            <li><img src="../assets/images/c-photo-2.png" /></li>
                            <li><img src="../assets/images/c-photo-3.png" /></li>
                          </ul>
                          <!-- comment photos -->

                        </div>

                        <div class="comments-detail all-c-space">
                          <span
                            >{{ commentList[commentList.length - 1].user.name }}
                            <a href="javascript:void(0);" @click="open_ct_box"
                              >View All</a
                            ></span
                          >
                          <p>
                            <!-- I wonder what the difference between “Dunzo Assistant”
                            and “Pickup and Drop... -->
                            {{ commentList[commentList.length - 1].comment }}
                          </p>
                        </div>
                        <!-- comments detail -->

                      </div>
                      <!-- comments Group -->
                    </div>
                  </div>
                </div>
                <div class="col-4 col-sm-4 col-md-4 col-lg-4 c_hide">
                  <div class="comment-frm no-c-frm">
                    <div class="row">
                      <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">
                        <div class="form-group frm-wdth addfrm-spc">

                          <input
                            type="text"
                            class="form-control"

                            placeholder="Kathy, Something on your mind?"
                            id="open_ct_box"
                            v-model="comment"

                          />
                        </div>
                      </div>
                      <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">

                        <a
                          href="javascript:void(0);"
                          @click="createComment"
                          class="add-comment"

                          ><img src="../assets/images/add-comment.svg" />
                          Comment</a
                        >
                      </div>
                    </div>
                    <!-- comment from -->
                  </div>
                </div>

                <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
                  <ul class="top-intro-bt">
                    <li>
                      <a href="javascript:void(0);" @click="goBack"
                        ><img src="../assets/images/skip-prev.svg" /> Prev</a
                      >
                    </li>
                    <li>
                      <a href="javascript:void(0);" @click="goNext"
                        ><img src="../assets/images/skip-next.svg" /> Skip to next
                        slide</a
                      >
                    </li>
                  </ul>
                </div>
                <!-- buttons list -->

              </div>
            </div>
            <!-- footer top -->
            <div class="footer-bottom">
              <ul>
                <li class="active"></li>
                <li></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";
  import moment from 'moment';

  
  export default {
    name: "SingleMobileScreenInsightTwo",
  
    data() {
      return {
        allSlide: [],
        currentSlideIndex: null,
        currentSlideData: null,

        //
        usertoken: null,
        commentList: [],
        comment: null,
        parentInput: true,

      };
    },
    mounted() {
      var allSlideData = localStorage.getItem(
        "spotlight_slide" + this.$route.params.caseStudyId
      );
      if (allSlideData) {
        this.allSlide = JSON.parse(allSlideData);
        this.getCurrentSlideData();
      }

      var userdata = localStorage.getItem("spotlight_usertoken");
      if (userdata) {
        userdata = JSON.parse(userdata);
        this.usertoken = userdata.token;
        this.getComment();
      }

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

      createComment() {
        console.log("===", this.comment);
        var obj = {
          caseStudyId: this.currentSlideData.caseStudyId,
          slideId: this.currentSlideData.slideId,
          comment: this.comment,
         
        };
        axios
          .post("/bounceBoard/comment", obj, {
            headers: {
              Authorization: "Bearer " + this.usertoken,
            },
          })
          .then((response) => {
            this.comment = null;
            this.getComment();
            console.log(response);
          })
          .catch((error) => {
            if (error.response) {
              this.$toaster.error(error.response.data.message);
            }
          });
      },
    createChildComment(cmnt) {
        console.log(cmnt,"===", this.comment);
        var obj = {
          caseStudyId: this.currentSlideData.caseStudyId,
          slideId: this.currentSlideData.slideId,
          comment: this.comment,
          parentId: cmnt._id,
         
        };
        axios
          .post("/bounceBoard/comment", obj, {
            headers: {
              Authorization: "Bearer " + this.usertoken,
            },
          })
          .then((response) => {
            this.comment = null;
            this.discardRply(cmnt);
            this.getComment();
            console.log(response);
          })
          .catch((error) => {
            if (error.response) {
              this.$toaster.error(error.response.data.message);
            }
          });
      },
      getComment() {
        axios
          .get(
            `/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`,
            {
              headers: {
                Authorization: "Bearer " + this.usertoken,
              },
            }
          )
          .then((response) => {
            console.log(response.data);
            var comments = [];
           var keys = Object.keys(response.data.data)
            response.data.data
            keys.forEach((key_) => {
              comments.push(response.data.data[key_])
            });
            comments.forEach((coment_)=>{
              coment_.childInput = false;
            });
            console.log("comments",comments)
            this.commentList = comments;
          })
          .catch((error) => console.log(error));
      },
      dateGenerator(curreDate){
         var todayDate = moment(new Date(), "DD.MM.YYYY");
          var endDate = moment(new Date(curreDate), "DD.MM.YYYY");
          var result = todayDate.diff(endDate, 'days');
          return result;
      },

      goToLogin() {

        this.$router.push("/login");

      },
      goToSignUp() {

        this.$router.push("/");

      },
      chtbox_close() {
        $("#cht_box_close").removeClass("cht_close");
        $("#open_ct_box, .c_hide").show();
        $(".footer-top").addClass("white-bg");
      },
      open_ct_box() {
        $("#cht_box_close").addClass("cht_close");
        $("#open_ct_box, .c_hide").hide();
        $(".footer-top").removeClass("white-bg");
      },

      eachRply(cmnt) {
        cmnt.childInput = true;
        this.parentInput = false;
      },
      discardRply(cmnt) {
        cmnt.childInput = false;
        this.parentInput = true;
  
      },

    },
  };

  //

  </script>