<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" style="cursor:pointer">Create Case Study</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)"
              >
                <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" >
                  <span style="cursor:pointer"  >Case Study List</span></h5>
            </li>
          </ul>
        </div>
      </div>
      <div class="row">
        <table>
          <tr>
            <th>Name</th>
            <th>App</th>
            <th>Authors</th>
            <th>Action</th>
          </tr>
          <tr v-for="(study, j) in caseStudyList"
            :key="j"> 
            <td>{{study.intro.name}}</td>
            <td>{{study.intro.app}}</td>
            <td>{{study.intro.authors[0]}}</td>
            <td><a style="cursor:pointer" @click="edit(study)">Edit</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: "CaseStudy",

  data() {
    return {
      loggedinFlag: false,
      usertoken: null,
      userData: {},
      caseStudyList:[],
    };
  },
  mounted() {
  
    var userdata = localStorage.getItem("spotlight_usertoken");
    if (userdata) {
      userdata = JSON.parse(userdata);
      this.usertoken = userdata.token;
      this.getCaseSTudies();
    }
  },
  methods: {
    getCaseSTudies() {
      axios
        .get("/superAdmin/caseStudies", {
          headers: {
            Authorization: "Bearer " + this.usertoken,
          },
        })
        .then((response) => {
          this.caseStudyList = response.data.data.caseStudies;
          console.log("response", response.data.data.caseStudies);
        })
        .catch((error) => console.log(error));
    },
    edit(payload){
        console.log("study",payload)
        localStorage.setItem('spotlight_caseStudy'+payload._id, JSON.stringify(payload))
        this.$router.push("/profile?"+payload._id);
    },
    create(){
         this.$router.push("/profile");
    },
    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>
