const template = html`
  <div class="widget widget-classic ng-scope">
    <div class="widget-content">
      <div class="headline">
        <h4><i class="fa fa-plane"></i> Holiday Requests</h4>
      </div>

      <p>
        <small>
          <requestholiday :userId="userId"></requestholiday>
        </small>
      </p>

      <table class="table table-condensed">
        <thead class="table-header">
          <tr>
            <th>Description</th>
            <th>From</th>
            <th>To</th>
            <th class="centered">Days</th>
            <th class="centered">Paid</th>
            <th>Status</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in paginatedData()" class="ng-scope">
            <td class="">{{ item.description }} - {{item.id}}</td>
            <td class="">{{ item.start | dateLength}}</td>
            <td class="">{{ item.end | dateLength }}</td>
            <td class="centered ">{{ item.total_days }}</td>
            <td class="centered">
              <i class="fa fa-check" v-if="item.paid == '1'"></i>
            </td>
            <td>
              <span
                class="label  label-success"
                v-if="item.status == 'approved'"
                >approved</span
              >
              <span class="label label-danger" v-if="item.status == 'declined'"
                >declined</span
              >
              <span class="label label-warning" v-if="item.status == 'pending'"
                >pending</span
              >
            </td>
            <td>
              <editholiday
                :id="item.id"
                :userId="userId"
                v-if="item.status == 'pending'"
              ></editholiday>
            </td>
          </tr>
        </tbody>
      </table>
      <div class="text-center">
        <ul class="pagination">
          <li class="page-item">
            <a class="page-link" @click="prevPage()">Previous</a>
          </li>
          <li
            class="page-item"
            v-for="i in pageCount()"
            :class="{active:pageNumber==i-1}"
          >
            <a class="page-link" @click="pageNumber = i-1">
              {{i}}
            </a>
          </li>
          <li class="page-item">
            <a class="page-link" @click="nextPage()">Next</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
`;
import requestholiday from "./requestholiday.js";
import editholiday from "./editholiday.js";
import api from "../../api.js";
export default {
  props: ["userId"],
  data: function() {
    return {
      pageNumber: 0,
      pageSize: 5,
      holiday: { data: [] }
    };
  },
  components: {
    requestholiday,
    editholiday
  },
  filters: {
    // takeout the 00-00-00 from dates
    dateLength: function(val) {
      return val.substring(0, 10);
    }
  },
  created() {
    this.load();
  },
  watch: {
    userId(val, oldVal) {
      this.load();
    }
  },
  methods: {
    async load() {
      state.sub(`hr/holiday/${this.userId}`, value => (this.holiday = value));
      const holiday = await api.get["hr/holiday"]({ user_id: this.userId });
      state.set(`hr/holiday/${this.userId}`, holiday);
    },

    nextPage() {
      if (this.pageNumber == this.pageCount() - 1) return;
      this.pageNumber++;
    },
    prevPage() {
      if (this.pageNumber == 0) return;
      this.pageNumber--;
    },
    pageCount() {
      let l = this.holiday.data.length,
        s = this.pageSize;
      return Math.ceil(l / s);
    },
    paginatedData() {
      const start = this.pageNumber * this.pageSize,
        end = start + this.pageSize;
      return this.holiday.data.slice(start, end);
    }
  },
  template
};
