<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"
                @click="create('/profile')"
                style="cursor: pointer"
                >Create Case Study</a
              >
            </li>
            <li class="nav-item active">
              <a
                class="nav-link"
                @click="create('/casestudy')"
                style="cursor: pointer"
                >Case Study List</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-3 col-md-3 col-lg-3 col-xl-3">
          <div class="user-profile">
            <div class="form-group floating-label">
              <select
                class="form-control"
                v-model="userData"
                v-on:change="selectUser(userData)"
              >
                <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> -->

      <!-- 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 Type</label>
            <select
              class="form-control"
              v-model="userData.tag"
            >
              <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-6 col-md-6 col-lg-6 col-xl-6">
          <div class="form-group floating-label">
            <label for="lname" class="lname">Title</label>
            <input
              type="text"
              class="form-control"
              value=""
              placeholder=" "
              v-model="userData.title"
            />
          </div>
        </div>

      
      </div>
      <!-- 1st row -->
      <!-- 2nd row -->
      <div class="row">
        <div class="col-sm-8 col-md-8 col-lg-8 col-xl-8">
          <div class="form-group floating-label">
            <label for="lname" class="lname">Description</label>
            <input
              type="text"
              class="form-control"
              value=""
              placeholder=" "
              v-model="userData.description"
            />
          </div>
        </div>

      
      </div>
      <!-- 2nd row -->
      <!-- 3rd row -->
      <div class="row">
        <div class="form-layout signup-frm-spc" style="margin-top:10px">
          <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>
      <!-- 3rd row -->

      <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">
                <span style="cursor: pointer">Insight List</span>
              </h5>
            </li>
          </ul>
        </div>
      </div>
      <div class="row">
        <table>
          <tr>
            <th>Id</th>
            <th>Tag</th>
            <th>Title</th>
            <th>Action</th>
          </tr>
          <tr v-for="(insight, j) in insightList" :key="j">
            <td>{{ insight._id }}</td>
            <td>{{ insight.tag }}</td>
            <td>{{ insight.title }}</td>
            <td><a style="cursor: pointer">Delete</a></td>
          </tr>
        </table>
      </div>
      <!-- 1st row -->
    </div>
  </main>
</template>

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

export default {
  name: "Insight",

  data() {
    return {
      loggedinFlag: false,
      usertoken: null,
      userData: {
        tag: null,
        title: null,
        description:
          null,
        furtherReading: [],
      },
      insightList: [],
    };
  },
  mounted() {
    var userdata = localStorage.getItem("spotlight_usertoken");
    if (userdata) {
      userdata = JSON.parse(userdata);
      this.usertoken = userdata.token;
      this.getInsight();
    }
  },
  methods: {
    getInsight() {
      axios
        .get("/superAdmin/insight", {
          headers: {
            Authorization: "Bearer " + this.usertoken,
          },
        })
        .then((response) => {
          this.insightList = response.data.data;
          console.log("response", response.data.data);
        })
        .catch((error) => console.log(error));
    },
    submit() {
      axios
        .post("/superAdmin/insight", this.userData, {
          headers: {
            Authorization: "Bearer " + this.usertoken,
          },
        })
        .then((response) => {
          // this.userData = response.data.data;
          this.$toaster.success("Insight Created");
          this.$router.go(this.$router.currentRoute)

          console.log(response);
        })
        .catch((error) => {
          if (error.response) {
            this.$toaster.error(error.response.data.message);
          }
        });
    },
    create(url) {
      this.$router.push(url);
    },
    logout() {
      this.$router.push("/");
    },
  },
};
</script>
<style>
.light-font-weight {
  font-weight: 300 !important;
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #000;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
</style>