<template>
    <main class="landing-page">

      <!-- 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">Case Study List</a>
              </li>
              <li class="nav-item active">
                  <a class="nav-link" style="cursor:pointer">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>
        <!-- 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">
            <div class="form-group floating-label">
              <label for="lname" class="lname">Focus</label>
              <input
                type="text"
                class="form-control"
                value=""
                placeholder=" "
                v-model="caseStudy.caseStudyDetails.intro.focus"
              />
            </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"
              />
            </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"> Insight 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>
        <!-- 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"
                  />
                  <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>
  
        <!-- 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>

  
        <!-- 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._id }}
                </option>
              </select>
            </div>
          </div>
        </div>
        <!-- 1st row -->
  
        <!-- 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

                  >

                </p>
              </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 == '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
              class="col-sm-4 col-md-4 col-lg-4 col-xl-4"
              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"
                />

              </div>

            </div>
          </div>

        </div>

  
        <!-- 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 {
        loggedinFlag: false,

        caseId: null,
        editMode: false,

        userData: null,

        usertoken: null,

        insightName: null,
        focusName: null,
        slideId: null,
        userList: [],
        templateList: [],
        caseStudy: {
          caseStudyDetails: {
            userId: [],
            intro: {
              name: null,
              logoURL: null,
              app: null,
              type: null,
              focus: null,
              readTime: null,
              platForm: null,
              authors: [],
            },
            outro: {
              authorImage: [],
              authors: [],
              designer: null,
              illustrations: null,
            },
            insightTags: [],
            focusAreas: [],
          },
          slides: [],
        },

      };
    },

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

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

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

      }

    },

    methods: {

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

      },

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

        }
      },

  
      async slideSelected(i) {
        console.log("id is", this.templateList[i]);
        var slideMetadata = {};
        // slideMetadata = await this.getMeatda(this.templateList[i]._id);
        this.slideId = null;
        // this.templateList[i].metaData = slideMetadata.metaData;
        this.caseStudy.slides.push(this.templateList[i]);
        console.log("this.caseStudy.slides", this.caseStudy.slides);

      },

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

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

              setTimeout(() => this.caseStudy.caseStudyDetails.outro.authorImage.push(

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

      },

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

      },

      getSLideData() {
        axios
          .get("/superAdmin/caseStudySlides?caseStudyId=" + this.caseId, {
            headers: {
              Authorization: "Bearer " + this.usertoken,
            },
          })
          .then((response) => {
            var finalArray = [];
            response.data.data.forEach((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,
                // commentBox: this.templateList[i].commentBox,
                metaData: {
                  fields: [],
                  comments: [],
                },
              };
              if (this.templateList[i].bounceBoard) {
                obj.commentBox = this.templateList[i].commentBox;
              }
              var fieldArray = [];
              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);
              });
              finalArray.push(obj);
            });
            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.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);
        }

      },

  
      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");
  
            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;
        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(){
           this.$router.push("/casestudy");
      },

      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>