<template>
  <div>
    <h4 class="text-center">All Books</h4>
    <br />
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Author</th>
          <th>Created At</th>
          <th>Updated At</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="book in books" :key="book.id">
          <td>{{ book.id }}</td>
          <td>{{ book.name }}</td>
          <td>{{ book.author }}</td>
          <td>{{ book.created_at }}</td>
          <td>{{ book.updated_at }}</td>
          <td>
            <div class="btn-group" role="group">
              <router-link
                :to="{ name: 'editbook', params: { id: book.id } }"
                class="btn btn-primary"
                >Edit
              </router-link>
              <button class="btn btn-danger" @click="deleteBook(book.id)">
                Delete
              </button>
            </div>
          </td>
        </tr>
      </tbody>
    </table>

    <button
      type="button"
      class="btn btn-info"
      @click="this.$router.push('/books/add')"
    >
      Add Book
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      books: [],
    };
  },
  created() {
    this.$Progress.start();
    this.$axios.get("/sanctum/csrf-cookie").then((response) => {
      this.$axios
        .get("/api/books")
        .then((response) => {
          this.books = response.data;
          this.$Progress.finish();
        })
        .catch(function (error) {
          console.error(error);
        });
    });

    this.$axios.get(`/api/users/checkauth`).then((response) => { if (!response.data.isLogin) { window.location.href = "/"; } });
  },
  methods: {
    deleteBook(id) {
      this.$Progress.start();

      this.$axios.get("/sanctum/csrf-cookie").then((response) => {
        this.$axios
          .delete(`/api/books/delete/${id}`)
          .then((response) => {
            let i = this.books.map((item) => item.id).indexOf(id); // find index of your object
            this.books.splice(i, 1);
            this.$Progress.finish();
          })
          .catch(function (error) {
            console.error(error);
          });
      });
    },
  },
  beforeRouteEnter(to, from, next) {
    if (!window.Laravel.isLoggedin) {
      window.location.href = "/";
    }
    next();
  },
};
</script>