<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; width: 700px"
        >

          <!-- header -->
          <div class="popup-body">
            <form class="popup-forms">
              <div class="row">
                <!-- input -->

                <img :src="templateImage" />

                <!-- input -->

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

            </form>
          </div>
          <div class="clearfix"></div>
        </div>
        <!-- add profile -->
      </div>
      <!-- profile -->

      <!-- profile -->

      <div class="container-fluid inner-wrp" style="background: transparent">

        <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"
                  style="cursor: pointer"
                  @click="listPage('/casestudy')"
                  >Case Study List</a
                >

              </li>
              <li class="nav-item active">

                <a
                  class="nav-link"
                  style="cursor: pointer"
                  @click="listPage('/insight')"
                  >Create Insight</a
                >

              </li>
            </ul>
          </div>

          <div class="">
            <a href="javascript:void(0);" @click="logout">Log Out </a>

          </div>

        </nav>
        <!-- menu wrapper -->
        <div class="row profile-tab-spc-top">

          <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
            <div class="user-profile">
              <div class="form-group floating-label">
                <select
                  class="form-control"
                  v-model="userData"
                  v-on:change="selectUser(userData)"

                  :disabled="editMode"

                >
                  <option value="null">Select User</option>
                  <option v-for="(user, i) in userList" :key="i" :value="i">
                    {{ user.name }} ({{ user.email }})
                  </option>
                </select>
              </div>

            </div>

          </div>
        </div>

        <div class="row">
          <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item active">
                <h5 class="nav-link">Intro Screen Record</h5>
              </li>
            </ul>
          </div>
        </div>

  
        <div class="row">
          <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
            <div class="form-group floating-label">
              <label for="lname" class="lname">Select Intro Screen</label>
              <select
                class="form-control"
                v-model="caseStudy.caseStudyDetails.intro.templateId"
                @change="changeIntroScreen()"
              >
                <option value="intro-1">Intro Screen 1</option>
                <option value="intro-2">Intro Screen 2</option>
              </select>
            </div>
          </div>
        </div>

        <!-- 1st row -->
        <div class="row">
          <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
            <div class="form-group floating-label">
              <label for="lname" class="lname">Case Study Name</label>
              <input
                type="text"
                class="form-control"
                value=""
                placeholder=" "
                v-model="caseStudy.caseStudyDetails.intro.name"
              />
            </div>
          </div>
          <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
            <div class="form-group floating-label">
              <label for="lname" class="lname">App Name</label>
              <input
                type="text"
                class="form-control"
                value=""
                placeholder=" "
                v-model="caseStudy.caseStudyDetails.intro.app"
              />
            </div>
          </div>

          <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4" v-if="caseStudy.caseStudyDetails.intro.templateId == 'intro-2'">

           <div class="form-group floating-label">

              <label for="lname" class="lname">Designation</label>

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

                v-model="caseStudy.caseStudyDetails.intro.designation"

              />

            </div>

          </div>

  
          <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
            <div class="form-group floating-label">
              <label for="lname" class="lname"> App logo</label>
              <img
                v-if="caseStudy.caseStudyDetails.intro.logoURL"
                style="width: 40px; height: 40px"
                :src="caseStudy.caseStudyDetails.intro.logoURL"
              />
              <input
                @change="createImage('logo')"
                type="file"
                name="photso"
                id="logo"
                accept="image/*"
              />
            </div>

          </div>
        </div>
        <!-- 1st row end -->
  
        <!-- 2nd row -->
        <div class="row">
          <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
            <div class="form-group floating-label">
              <label for="lname" class="lname">Case Study Type</label>
              <select
                class="form-control"
                v-model="caseStudy.caseStudyDetails.intro.type"
              >
                <option value="null">Select Case Type</option>
                <option value="Retake">Retake</option>
                <option value="Behind-the-scenes">Behind-the-scenes</option>
                <option value="Critique">Critique</option>
                <option value="Juxtapose">Juxtapose</option>
              </select>
            </div>
          </div>
          <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
            <div class="form-group floating-label">
              <label for="lname" class="lname">Platform</label>

              <!-- <input

                type="text"
                class="form-control"
                value=""
                placeholder=" "
                v-model="caseStudy.caseStudyDetails.intro.platForm"

              /> -->
              <select
                class="form-control"
                v-model="selectPlatform"
                @change="addInsight('platform')"
              >
                <option value="null">Select Insight Tag</option>
                <option value="Ios">Ios</option>
                <option value="Web">Web</option>
                <option value="Android">Android</option>
              </select>

            </div>
          </div>

          <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
            <div class="form-group floating-label">

              <label for="lname" class="lname"></label>
              <label for="lname" class="lname"></label>
              <ul class="interests">
                <!-- v-for="(interest, i) in caseStudy.caseStudyDetails
                          .insightTags"
                        :key="i" -->
  
                <li v-if="caseStudy.caseStudyDetails.intro.platForm">
                  <span>{{ caseStudy.caseStudyDetails.intro.platForm }}</span>
                  <a
                    href="javascript:void(0);"
                    @click="removeInsight(0, 'platform')"
                    class="cat-minus"
                    ><img src="../assets/images/minus.svg"
                  /></a>
                </li>
              </ul>

            </div>
          </div>
        </div>
        <!-- 2nd row -->

        <!-- 3rd row -->`

        <div class="row">
          <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
            <div class="form-group floating-label">
              <label for="lname" class="lname"></label>
              <ul class="interests">

                <li>

                  <input
                    class=""
                    placeholder="Add Focus Areas"
                    v-model="focusName"

                    v-on:keyup.enter="addInsight('focus')"

                  />
                  <a href="javascript:void(0);" @click="addInsight('focus')"
                    ><img src="../assets/images/plus-circle.svg"
                  /></a>

                </li>

  
                <li
                  v-for="(interest, i) in caseStudy.caseStudyDetails.focusAreas"
                  :key="i"
                >
                  <span>{{ interest }}</span>
                  <a
                    href="javascript:void(0);"
                    @click="removeInsight(i, 'focus')"
                    class="cat-minus"
                    ><img src="../assets/images/minus.svg"
                  /></a>

                </li>

              </ul>

            </div>
          </div>

  
          <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
            <div class="form-group floating-label">

              <label for="lname" class="lname">Select Insight Tags</label>
              <select
                class="form-control"
                v-model="insightName"
                @change="addInsight('insight')"
              >
                <option value="null">Select Insight Tag</option>
                <option value="Design">Design</option>
                <option value="Product">Product</option>
                <option value="Marketing">Marketing</option>
                <option value="Pricing">Pricing</option>
                <option value="Psychology">Psychology</option>
              </select>
            </div>
          </div>
          <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
            <div class="form-group floating-label">

              <label for="lname" class="lname"></label>
              <ul class="interests">

                <li
                  v-for="(interest, i) in caseStudy.caseStudyDetails.insightTags"
                  :key="i"
                >
                  <span>{{ interest }}</span>
                  <a
                    href="javascript:void(0);"
                    @click="removeInsight(i, 'insight')"
                    class="cat-minus"
                    ><img src="../assets/images/minus.svg"
                  /></a>

                </li>
              </ul>
            </div>

          </div>

        </div>

        <!-- 3rd row end -->
  
        <!-- outdor -->
        <div class="row profile-tab-spc-top">
          <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item active">
                <h5 class="nav-link">Outro Screen Record</h5>

              </li>

            </ul>
          </div>

        </div>

         <div class="row">
          <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
            <div class="form-group floating-label">
              <label for="lname" class="lname">Select Outro Screen</label>
              <select
                class="form-control"
                v-model="caseStudy.caseStudyDetails.outro.templateId"
              
              >
                <option value="outro-1">Outro Screen 1</option>
                <option value="outro-2">Outro Screen 2</option>
              </select>
            </div>
          </div>
        </div>

        <!-- 1st row -->
        <div class="row">

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

            <div class="form-group floating-label">
              <label for="lname" class="lname">Designer Name</label>
              <input
                type="text"
                class="form-control"
                value=""
                placeholder=" "
                v-model="caseStudy.caseStudyDetails.outro.designer"
              />
            </div>
          </div>
  
          <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
            <div class="form-group floating-label">
              <label for="lname" class="lname">Illustrations Name</label>
              <input
                type="text"
                class="form-control"
                value=""
                placeholder=" "
                v-model="caseStudy.caseStudyDetails.outro.illustrations"
              />
            </div>
          </div>
  
          <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
            <div class="form-group floating-label">
              <label for="lname" class="lname"> Author Image</label>

              <img
                v-if="caseStudy.caseStudyDetails.outro.authorImage[0]"
                style="width: 40px; height: 40px"
                :src="caseStudy.caseStudyDetails.outro.authorImage[0]"
              />

              <input
                @change="createImage('outdor')"
                type="file"
                name="photos"
                id="outdor"
                accept="image/*"
              />
            </div>
          </div>
        </div>
        <!-- 1st row -->
        <!-- outdoor ends -->
  
        <!-- outdor -->
        <div class="row profile-tab-spc-top">
          <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item active">
                <h5 class="nav-link">Add SLides</h5>

              </li>
            </ul>
          </div>
        </div>

        <!-- case study  slides-->
        <div
          class="row profile-tab-spc-top"
          v-for="(slide, i) in caseStudy.slides"
          :key="i"
        >
          <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item active">
                <p class="nav-link">
                  <b>Screen {{ i + 1 }}</b>

                  <a

                    style="cursor: pointer; color: red; font-size: 0.8rem"
                    @click="removeSlide(i)"

                  >

                    Remove</a

                  >

                  <a
                    style="cursor: pointer; color: blue; font-size: 0.8rem"
                    @click="addProfileDialog(slide)"
                  >
                    View</a
                  >

                </p>
              </li>

              <li class="nav-item active" v-if="slide.insight">

                <div class="form-group floating-label">

                  <label for="lname" class="lname">Insight</label>
                  <select
                    class="form-control"
                    v-model="insightId"
                    v-on:change="insightSelected(slide)"
                  >
                    <option value="null">Select Insight</option>
                    <option
                      v-for="(insight, i) in insightList"
                      :key="i"
                      :value="insight._id"
                    >
                      {{ insight.title }}
                    </option>
                  </select>
                </div>

              </li>

            </ul>
          </div>
  
          <div class="row">
            <div
              class="col-sm-4 col-md-4 col-lg-4 col-xl-4"
              v-for="(field, j) in slide.metaData.fields"
              :key="j"
            >
              <div
                class="form-group floating-label"
                v-if="field.fieldType == 'text'"
              >
                <label for="lname" class="lname">{{ field.displayName }}</label>
                <input
                  type="text"

                  class="form-control"
                  value=""
                  placeholder=" "
                  v-model="field.fieldValue"
                />
              </div>
              <div
                class="form-group floating-label"
                v-if="field.fieldType == 'Number'"
              >
                <label for="lname" class="lname">{{ field.displayName }}</label>
                <input
                  type="text"

                  class="form-control"
                  value=""
                  placeholder=" "
                  v-model="field.fieldValue"
                />
              </div>
  
              <div
                class="form-group floating-label"
                v-if="field.fieldType == 'image'"
              >
                <label for="lname" class="lname"> {{ field.displayName }}</label>

                <img
                  v-if="field.fieldValue"
                  style="width: 40px; height: 40px"
                  :src="field.fieldValue"
                />

                <input
                  @change="fieldcreateImage(i, j)"
                  type="file"
                  name="photo"
                  :id="i + '' + j"
                  accept="image/*"
                />

              </div>
            </div>

          </div>

  
          <div class="row">
            <div

              v-for="(cum, j) in slide.metaData.comments"
              :key="j"
            >
              <div class="form-group floating-label">
                <label for="lname" class="lname">Comment Box {{ j + 1 }}</label>
                <input
                  type="text"
                  class="form-control"
                  value=""
                  placeholder=" "
                  v-model="cum.comment"

                  v-on:blur="updateComment(cum)"

                />

              </div>

            </div>
          </div>

        </div>

        <!-- 1st row -->
        <div class="row">
          <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
            <div class="form-group floating-label">
              <label for="lname" class="lname">Slides Name</label>
              <select
                class="form-control"
                v-model="slideId"
                v-on:change="slideSelected(slideId)"
              >
                <option value="null">Select Slide</option>
                <option v-for="(template, i) in templateList" :key="i" :value="i">
                  {{ template.name }}
                </option>
              </select>
            </div>
          </div>
        </div>
        <!-- 1st row -->

        <!-- 1st row end -->
        <!-- case study ends -->
        <div class="clearfix"></div>
  
        <!-- users land image -->
        <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
          <div class="form-layout signup-frm-spc">
            <form>
              <a
                href="javascript:void(0);"
                class="btn btn-lg sb-button"
                type="submit"
                @click="submit"
              >
                <img src="../assets/images/key.svg" /> submit
              </a>
            </form>
          </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 {

        object: null,

        loggedinFlag: false,

        templateImage: null,

        caseId: null,
        editMode: false,

        userData: null,

        usertoken: null,

        insightName: null,
        focusName: null,
        slideId: null,
        userList: [],
        templateList: [],

        insightList: [],

        insightId: null,

        caseStudy: {
          caseStudyDetails: {
            userId: [],
            intro: {
              name: null,
              logoURL: null,
              app: null,
              type: null,

              readTime: null,
              platForm: null,

              designation: null,

              templateId: "intro-1",

              authors: [],
            },
            outro: {
              authorImage: [],
              authors: [],
              designer: null,

              templateId: "outro-1",

              illustrations: null,
            },
            insightTags: [],
            focusAreas: [],
          },
          slides: [],
        },

        selectPlatform: "",

      };
    },

    mounted() {

      if (this.$route.fullPath.split("?").length == 2) {
        this.editMode = true;
        this.caseId = this.$route.fullPath.split("?")[1];
        var introData = localStorage.getItem("spotlight_caseStudy" + this.caseId);
        if (introData) {
          introData = JSON.parse(introData);
          console.log("introData", introData);

          if (introData.intro.focus) {

            delete introData.intro.focus;
          }

          this.caseStudy.caseStudyDetails.intro = introData.intro;
          this.caseStudy.caseStudyDetails.userId = introData.userId;
          this.caseStudy.caseStudyDetails.outro = introData.outro;
          this.caseStudy.caseStudyDetails.insightTags = introData.insightTags;
          this.caseStudy.caseStudyDetails.focusAreas = introData.focusAreas;

          this.selectPlatform = introData.intro.platForm;
          console.log("this.selectPlatform", this.selectPlatform);

        }
      }

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

        this.getUserList();
        this.getTemplateList();

        this.getInsightList();

      }

    },

    methods: {

      changeIntroScreen(){
  
      },

      selectUser(i) {
        this.userList[i];
        this.caseStudy.caseStudyDetails.intro.authors.push(this.userList[i].name);
        this.caseStudy.caseStudyDetails.outro.authors.push(this.userList[i].name);
        this.caseStudy.caseStudyDetails.userId.push(this.userList[i]._id);
        console.log("-", this.caseStudy);

      },

      logout() {
        this.$router.push("/");
      },

      addInsight(type) {
        if (type == "focus") {
          this.caseStudy.caseStudyDetails.focusAreas.push(this.focusName);
          this.focusName = null;
        } else if (type == "insight") {
          this.caseStudy.caseStudyDetails.insightTags.push(this.insightName);
          this.insightName = null;

        } else if (type == "platform") {
          this.caseStudy.caseStudyDetails.intro.platForm = this.selectPlatform;
          // this.selectPlatform = null;

        }

      },

      removeInsight(i, type) {
        if (type == "focus") {
          this.caseStudy.caseStudyDetails.focusAreas.splice(i, 1);
        } else if (type == "insight") {
          this.caseStudy.caseStudyDetails.insightTags.splice(i, 1);

        } else if (type == "platform") {
          this.caseStudy.caseStudyDetails.intro.platForm = "";
          this.selectPlatform = null;

        }
      },

  
      async slideSelected(i) {
        console.log("id is", this.templateList[i]);

        this.object = JSON.parse(JSON.stringify(this.templateList[i]));

        // var keys = Object.keys(this.templateList[i]);
        // keys.forEach(element => {

        //   obj[element] = this.templateList[i][element];

        // });

        console.log("obj", this.object);

        // slideMetadata = await this.getMeatda(this.templateList[i]._id);
        this.slideId = null;
        // this.templateList[i].metaData = slideMetadata.metaData;

        this.caseStudy.slides.push(this.object);
        this.templateList[i].metaData.fields.forEach((fields_) => {
          fields_.fieldValue == null;
        });
        if (this.templateList[i].metaData.comments) {
          this.templateList[i].metaData.comments.forEach((coments_) => {
            coments_.comment == null;

          });

        }

        console.log("this.caseStudy.slides", this.caseStudy.slides);

      },

      async insightSelected(data) {

        // this.caseStudy.slides.push(this.templateList[i]);

  
        console.log("data", data);

        data.insightId = this.insightId;

        // this.insightId = null;

      },

  
      removeSlide(i) {
        this.caseStudy.slides.splice(i, 1);

      },

      createImage(type) {
        var that = this;
        console.log(document.getElementById(type));
        var file = document.getElementById(type).files[0];
        console.log("file", file);
        var reader = new FileReader();
        reader.onload = function (e) {
          console.log("e.target.result  ", e.target.result);
          that.uploadImage(type, e.target.result);
        };
        reader.onerror = function (error) {
          alert(error);
        };
        if (file) {
          reader.readAsDataURL(file);
        }

      },

      uploadImage(type, base64) {
        console.log("type", type);
        var obj = {
          image: base64,
        };

        axios

          .post("/superAdmin/uploadImage", obj, {

            headers: {
              Authorization: "Bearer " + this.usertoken,
            },
          })
          .then((response) => {

            if (type == "logo") {

              setTimeout(
                () =>
                  (this.caseStudy.caseStudyDetails.intro.logoURL =
                    response.data.data),
                99
              );

            } else if (type == "outdor") {
              this.caseStudy.caseStudyDetails.outro.authorImage = [];

              setTimeout(
                () =>
                  this.caseStudy.caseStudyDetails.outro.authorImage.push(
                    response.data.data
                  ),
                99
              );

            }

            console.log(response.data.data);

            console.log(this.caseStudy);

          })

          .catch((error) => {
            if (error.response) {
              this.$toaster.error(error.response.data.message);
            }
          });

      },

  
      fieldcreateImage(i, j) {
        console.log("i", i);
        console.log("j", j);
        var that = this;
        var id = i + "" + j;
        console.log(document.getElementById(id));
        var file = document.getElementById(id).files[0];
        // var file = document.querySelector("input[type=file]").files[0];
        console.log("file", file);
        var reader = new FileReader();
        reader.onload = function (e) {
          // console.log("e.target.result  ",e.target.result  )
          that.fielduploadImage(i, j, e.target.result);
        };
        reader.onerror = function (error) {
          alert(error);
        };
        if (file) {
          reader.readAsDataURL(file);
        }
      },
      fielduploadImage(i, j, base64) {
        var obj = {
          image: base64,
        };

        axios

          .post("/superAdmin/uploadImage", obj, {

            headers: {
              Authorization: "Bearer " + this.usertoken,
            },
          })
          .then((response) => {

            setTimeout(
              () =>
                (this.caseStudy.slides[i].metaData.fields[j].fieldValue =
                  response.data.data),
              10
            );

            console.log(response.data.data);

            console.log(this.caseStudy);

          })

          .catch((error) => {
            if (error.response) {
              this.$toaster.error(error.response.data.message);
            }
          });

      },

  
      getUserList() {
        axios
          .get("/superAdmin/users", {
            headers: {
              Authorization: "Bearer " + this.usertoken,
            },
          })
          .then((response) => {
            response.data.data.forEach((element) => {
              if (element.name) {
                this.userList.push(element);
              }
            });
            console.log("response", this.userList);
          })
          .catch((error) => console.log(error));

      },

  
      getTemplateList() {
        axios
          .get("/superAdmin/templates", {
            headers: {
              Authorization: "Bearer " + this.usertoken,
            },
          })
          .then((response) => {
            response.data.data.forEach((temp) => {
              if (
                temp._id != "INTRO_oqkdMOVDrwRptsdWJ6Ye" &&
                temp._id != "OUTRO_oqkdMOVDrwRptsdWJ6Ye"
              ) {
                if (temp.bounceBoard) {
                  for (var i = 0; i < temp.commentBox; i++) {
                    temp.metaData.comments.push({
                      userId: null,
                      slideId: null,
                      caseStudyId: null,
                      comment: null,
                    });
                  }
                }
                this.templateList.push(temp);
              }
            });

            if (this.editMode) {
              this.getSLideData();
            }

            console.log("templates", this.templateList);
          })
          .catch((error) => console.log(error));

      },

      getInsightList() {
        axios
          .get("/superAdmin/insight", {
            headers: {
              Authorization: "Bearer " + this.usertoken,
            },
          })
          .then((response) => {
            this.insightList = response.data.data;

            console.log("insight", response.data.data);
          })
          .catch((error) => console.log(error));
      },

      getSLideData() {
        axios
          .get("/superAdmin/caseStudySlides?caseStudyId=" + this.caseId, {
            headers: {
              Authorization: "Bearer " + this.usertoken,
            },
          })
          .then((response) => {
            var finalArray = [];

            console.log("1");

            response.data.data.forEach((template_) => {

              console.log("template_", template_);

              var keys = [];
              var i = this.templateList.findIndex(
                (temp_) => temp_._id == template_.templateId
              );
              var obj = {
                _id: this.templateList[i]._id,
                bounceBoard: this.templateList[i].bounceBoard,
                insight: this.templateList[i].insight,

                slideId: template_._id,

                // commentBox: this.templateList[i].commentBox,
                metaData: {
                  fields: [],
                  comments: [],
                },
              };

              console.log("2");

              if (this.templateList[i].bounceBoard) {
                obj.commentBox = this.templateList[i].commentBox;

                obj.metaData.comments = template_.comments;

              }

              if (this.templateList[i].insight) {
                obj.insightId = template_.insightId;
              }

              var fieldArray = [];

              console.log("3");

              this.templateList[i].metaData.fields.forEach((element) => {
                var fieldobj = {
                  fieldName: element.fieldName,
                  displayName: element.displayName,
                  fieldValue: template_.metaData[element.fieldName],
                  fieldType: element.fieldType,
                };
                obj.metaData.fields.push(fieldobj);
              });

              console.log("4");

              finalArray.push(obj);

              if (template_.insight) {

                this.insightId = template_.insight._id;
              }

            });

            console.log("5");

            this.caseStudy.slides = finalArray;
            console.log("----", finalArray);
            console.log(this.templateList, "getSLideData==>");
          })
          .catch((error) => console.log(error));
      },

      submit() {
        const latest = Object.create(this.caseStudy);
  
        var slidArray = [];
        latest.slides.forEach((slides) => {

          console.log("slides", slides);

          var slideData = {};
          slideData.templateId = slides._id;
          slideData.bounceBoard = slides.bounceBoard;
          slideData.insight = slides.insight;

          if (slides.slideId) {

            slideData.slideId = slides.slideId;

          }

          if (slides.insightId) {

            slideData.insightId = slides.insightId;

          }

          if (slides.metaData.comments && slides.metaData.comments.length > 0) {
            slideData.comments = slides.metaData.comments;
            // this.getSLideData();
          }

          // var comments = [];
          // if (slides.bounceBoard) {
          //   slides.metaData.comments.forEach((element) => {
          //     comments.push(element.comment);
          //   });
          //   slideData.comments = comments;
          // }
  
          slides.metaData.fields.forEach((fields_) => {
            slideData[fields_.fieldName] = fields_.fieldValue;
          });
          slidArray.push(slideData);
          // delete slides.metaData.fields;
        });
  
        console.log("slideData", slidArray);

        if (this.editMode) {
          this.updateProfile(slidArray);

        } else {

          this.saveProfile(slidArray);
        }

      },

      updateComment(cmnt) {
        if (!cmnt._id) {

          return;
        }

        console.log("cmnts", cmnt);

        var obj = {

          slideId: cmnt.slideId,
          commentId: cmnt._id,
          comment: cmnt.comment,

        };
        axios
          .put("/superAdmin/comment", obj, {
            headers: {
              Authorization: "Bearer " + this.usertoken,
            },
          })
          .then((response) => {

            console.log(response);
          })

          .catch((error) => {});

      },

  
      saveProfile(slides) {
        var obj = {};
        obj.caseStudyDetails = this.caseStudy.caseStudyDetails;
        obj.caseStudyDetails.intro.readTime = Math.round(
          slides.length / 3
        ).toString();
        obj.slides = slides;
        axios
          .post("/superAdmin/caseStudy", obj, {
            headers: {
              Authorization: "Bearer " + this.usertoken,
            },
          })
          .then((response) => {
            // this.userData = response.data.data;
            this.$toaster.success("Case Study Created");

            this.$router.go(this.$router.currentRoute);

  
            console.log(response);
          })
          .catch((error) => {
            if (error.response) {
              this.$toaster.error(error.response.data.message);
            }
          });

      },

      updateProfile(slides) {
        var obj = {};

        (obj.caseStudyId = this.caseId),
          (obj.caseStudyDetails = this.caseStudy.caseStudyDetails);

        obj.caseStudyDetails.intro.readTime = Math.round(
          slides.length / 3
        ).toString();
        obj.slides = slides;

        delete obj.caseStudyDetails.intro.focus;

        axios
          .put("/superAdmin/caseStudy", obj, {
            headers: {
              Authorization: "Bearer " + this.usertoken,
            },
          })
          .then((response) => {
            // this.userData = response.data.data;
            this.$toaster.success("Case Study Updated");

            this.$router.go(this.$router.currentRoute);

  
            console.log(response);
          })
          .catch((error) => {
            if (error.response) {
              this.$toaster.error(error.response.data.message);
            }
          });
      },

      listPage(url) {
        this.$router.push(url);

      },

      addProfileDialog(slide) {

        console.log("slide", slide);

        this.templateImage = slide.templateImage;
        $(".inner-wrp").addClass("body-blur");
        $("#add-social-links").hide();
        $(".popup-wrp, #add-profile").show();
      },
  
      closeDialog() {
        this.templateImage = null;
        $(".popup-wrp").hide();
        $(".inner-wrp").removeClass("body-blur");
        // this.saveProfile();
      },
      hideDialog() {
        this.templateImage = null;
        $(".popup-wrp").hide();
        $(".inner-wrp").removeClass("body-blur");
      },

      async getMeatda(tempId) {
        var obj = [
          {
            tempId: "T1_RoeMG8130Xko1DvhC3Ou",
            metaData: {
              fields: [
                {
                  fieldName: "authorImage",
                  displayName: "Author Image",
                  fieldValue: null,
                  fieldType: "image",
                },
                {
                  fieldName: "mobileImage",
                  displayName: "Mobile Image",
                  fieldValue: null,
                  fieldType: "image",
                },
                {
                  fieldName: "textBox",
                  displayName: "Text Box",
                  fieldValue: null,
                  fieldType: "text",
                },
              ],
            },
          },
          {
            tempId: "T2_ROsUOEy3vxsRAiQ72XdI",
            metaData: {
              fields: [
                {
                  fieldName: "authorImage",
                  displayName: "Author Image",
                  fieldValue: null,
                  fieldType: "image",
                },
              ],
              comments: [{ comment: null }, { comment: null }, { comment: null }],
            },
          },
          {
            tempId: "T3_cqNIf7tuqL4jyON63dA7",
            metaData: {
              fields: [
                {
                  fieldName: "authorImage",
                  displayName: "Author Image",
                  fieldValue: null,
                  fieldType: "image",
                },
                {
                  fieldName: "mobileImage",
                  displayName: "Mobile Image",
                  fieldValue: null,
                  fieldType: "image",
                },
              ],
              comments: [
                { comment: null },
                { comment: null },
                { comment: null },
                { comment: null },
              ],
            },
          },
        ];
        var i = obj.findIndex((obj_) => obj_.tempId == tempId);
        return obj[i];

      },

    },
  };
  </script>