<template>
  <div>
    <div class="intro-y flex flex-col sm:flex-row items-center mt-8">
      <h2 class="text-lg font-medium mr-auto">Datatable</h2>
      <div class="w-full sm:w-auto flex mt-4 sm:mt-0">
        <button class="button text-white bg-theme-1 shadow-md mr-2">
          Add New Product
        </button>
        <div class="dropdown relative ml-auto sm:ml-0">
          <button
            class="dropdown-toggle button px-2 box text-gray-700 dark:text-gray-300"
          >
            <span class="w-5 h-5 flex items-center justify-center">
              <PlusIcon class="w-4 h-4" />
            </span>
          </button>
          <div class="dropdown-box mt-10 absolute w-40 top-0 right-0 z-20">
            <div class="dropdown-box__content box dark:bg-dark-1 p-2">
              <a
                href=""
                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
              >
                <FilePlusIcon class="w-4 h-4 mr-2" /> New Category
              </a>
              <a
                href=""
                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
              >
                <UsersIcon class="w-4 h-4 mr-2" /> New Group
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- BEGIN: Datatable -->
    <div class="intro-y box p-5 mt-5">
      <div class="flex flex-wrap">
        <input
          v-model="filter.name"
          type="text"
          class="input border mr-2"
          placeholder="Search products..."
          @keyup.enter="onFilter"
        />
        <button
          class="button w-16 mr-2 bg-theme-1 text-white"
          @click="onFilter"
        >
          Go
        </button>
        <button
          class="button w-16 border text-gray-700 dark:bg-dark-5 dark:text-gray-300"
          @click="resetFilter"
        >
          Reset
        </button>
        <select
          v-model="filter.status"
          class="input border ml-auto"
          @change="onFilter"
        >
          <option value="">Filter status</option>
          <option value="1">Active</option>
          <option value="0">Inactive</option>
        </select>
      </div>
      <Vuetable
        ref="vuetable"
        api-url="http://api.left4code.com/"
        :fields="fields"
        :css="{
          tableClass:
            'table table-report table-report--bordered display datatable w-full mt-5'
        }"
        row-class="odd:bg-gray-200"
        pagination-path=""
        :append-params="filter"
        @vuetable:pagination-data="onPaginationData"
      >
        <div slot="product-name" slot-scope="props">
          <div class="font-medium whitespace-no-wrap">
            {{ props.rowData.name }}
          </div>
          <div class="text-gray-600 text-xs whitespace-no-wrap">
            {{ props.rowData.category }}
          </div>
        </div>
        <div slot="images" slot-scope="props">
          <div class="flex sm:justify-center">
            <div class="intro-x w-10 h-10 image-fit">
              <img
                alt="Midone Tailwind HTML Admin Template"
                class="rounded-full"
                :src="require(`@/assets/images/${props.rowData.images[0]}`)"
              />
            </div>
            <div class="intro-x w-10 h-10 image-fit -ml-5">
              <img
                alt="Midone Tailwind HTML Admin Template"
                class="rounded-full"
                :src="require(`@/assets/images/${props.rowData.images[1]}`)"
              />
            </div>
            <div class="intro-x w-10 h-10 image-fit -ml-5">
              <img
                alt="Midone Tailwind HTML Admin Template"
                class="rounded-full"
                :src="require(`@/assets/images/${props.rowData.images[2]}`)"
              />
            </div>
          </div>
        </div>
        <div slot="remaining-stock" slot-scope="props">
          {{ props.rowData.stock }}
        </div>
        <div slot="status" slot-scope="props">
          <div
            class="flex items-center sm:justify-center"
            :class="{
              'text-theme-9': props.rowData.status,
              'text-theme-6': !props.rowData.status
            }"
          >
            <CheckSquareIcon class="w-4 h-4 mr-2" />
            {{ props.rowData.status ? "Active" : "Inactive" }}
          </div>
        </div>
        <div slot="action">
          <div class="flex sm:justify-center items-center">
            <a class="flex items-center mr-3" href="">
              <CheckSquareIcon class="w-4 h-4 mr-1" /> Edit
            </a>
            <a class="flex items-center text-theme-6" href="">
              <Trash2Icon class="w-4 h-4 mr-1" /> Delete
            </a>
          </div>
        </div>
      </Vuetable>
      <!-- BEGIN: Pagination -->
      <div class="mt-5 flex flex-wrap sm:flex-row sm:flex-no-wrap items-center">
        <VuetablePaginationInfo
          ref="paginationInfo"
          :css="{
            infoClass: 'mr-auto'
          }"
          info-template="Showing {from} to {to} of {total} entries"
        ></VuetablePaginationInfo>
        <VuetablePagination
          ref="pagination"
          :css="{
            wrapperClass: 'vuetable-pagination',
            activeClass: 'vuetable-pagination__link--active',
            disabledClass: '',
            pageClass: 'vuetable-pagination__link',
            linkClass: 'vuetable-pagination__link',
            paginationClass: '',
            paginationInfoClass: '',
            dropdownClass: '',
            icons: {
              first:
                'vuetable-pagination__icon vuetable-pagination__icon--first',
              prev: 'vuetable-pagination__icon vuetable-pagination__icon--prev',
              next: 'vuetable-pagination__icon vuetable-pagination__icon--next',
              last: 'vuetable-pagination__icon vuetable-pagination__icon--last'
            }
          }"
          @vuetable-pagination:change-page="onChangePage"
        ></VuetablePagination>
      </div>
      <!-- END: Pagination -->
    </div>
    <!-- END: Datatable -->
  </div>
</template>

<script>
import Vuetable from "vuetable-2/src/components/Vuetable";
import VuetablePagination from "vuetable-2/src/components/VuetablePagination";
import VuetablePaginationInfo from "vuetable-2/src/components/VuetablePaginationInfo";

export default {
  components: {
    Vuetable,
    VuetablePagination,
    VuetablePaginationInfo
  },
  data() {
    return {
      filter: {
        name: "",
        status: ""
      },
      fields: [
        {
          name: "__slot:product-name",
          titleClass: "border-t-2 border-b-2 uppercase",
          dataClass: "border-b",
          title: "Product Name",
          sortField: "product_name"
        },
        {
          name: "__slot:images",
          titleClass: "text-center border-t-2 border-b-2 uppercase",
          dataClass: "border-b",
          title: "Images"
        },
        {
          name: "__slot:remaining-stock",
          titleClass: "text-center border-t-2 border-b-2 uppercase",
          dataClass: "border-b text-center",
          title: "Remaining Stock",
          sortField: "remaining_stock"
        },
        {
          name: "__slot:status",
          titleClass: "w-40 text-center border-t-2 border-b-2 uppercase",
          dataClass: "border-b",
          title: "Status",
          sortField: "status"
        },
        {
          name: "__slot:action",
          titleClass: "w-5 text-center border-t-2 border-b-2 uppercase",
          dataClass: "border-b",
          title: "Actions"
        }
      ]
    };
  },
  methods: {
    onFilter() {
      this.$nextTick(() => this.$refs.vuetable.refresh());
    },
    resetFilter() {
      this.filter.name = "";
      this.filter.status = "";
      this.$nextTick(() => this.$refs.vuetable.refresh());
    },
    onPaginationData(paginationData) {
      this.$refs.pagination.setPaginationData(paginationData);
      this.$refs.paginationInfo.setPaginationData(paginationData);
    },
    onChangePage(page) {
      this.$refs.vuetable.changePage(page);
    }
  }
};
</script>
