<template>
  <div>
    <b-card class="main-card mb-4">
      <b-row class="mb-2" no-gutters>
        <b-col md="6">
            <button type="button" class="btn btn-primary" @click="filterToggle">
              <i class="fa fa-filter"></i>
            </button>
            <div v-if="filter_status" class="filter dropdown-menu show">
              <admin-filter
                :form="form"
                @clicked="filterSubmit"
                @reset="FilterReset"
              ></admin-filter>
            </div>
        </b-col>
        <b-col md="6"  v-if="permission_list.includes('add admin')" class="text-right">
          <router-link 
            class="btn btn-primary" 
            to="create" 
            tag="button"
          >
            <i class="fa fa-plus"></i>
          </router-link>
        </b-col>
      </b-row>
      <table class="table table-striped">
        <thead>
          <paginate-nav
            v-if="admin_list.page"
            :colspan="colspan"
            :pervious_page="admin_list.page.pervious_page"
            :next_page="admin_list.page.next_page"
            @clicked="dataHandler"
          ></paginate-nav>
          <tr>
              <th>#</th>
              <th>Profile</th>
              <th style="width: 25%">Details</th>
              <th>Role</th>
              <th>Status</th>
              <th>Created</th>
              <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr v-if="admin_list.data" v-for="(admin, $index) in admin_list.data" :key="$index">
            <td>{{ $index + 1 }}</td>
            <td>
              <img class="img-fluid pointer-cursor" 
                :src="admin.img[0].file_info.original.file" width="60px" height="60px"
                @click="ImgPopModalToggle(admin.img)"
              >
            </td>
            <td>
              <div><b>Name</b>: {{ admin.name }}</div>
              <div><b>Email</b>: {{ admin.email }}</div>
              <div><b>Country</b>: {{ admin.country_list[0].name }}</div>
            </td>
            <td>
              {{ admin.role_list[0].name }}
            </td>
            <td>
                <span :class="'badge badge-' + admin.status[0].color">{{ admin.status[0].name }}</span>
            </td>
            <td>
              {{ admin.created_at }}
            </td>
            <td>
              <router-link  
                  v-if="permission_list.includes('edit admin')"
                  :to="'edit/' + admin.hash_id" 
                  class="btn btn-xs btn-light" 
                  title="Edit"
                >
                  <i class="fa fa-edit"></i>
              </router-link>
            </td>
          </tr>
          <tr v-if="!admin_list.data || !admin_list.data[0]">
            <td class="text-center" :colspan="colspan">
              <vue-element-loading v-if="loading" :active="true" spinner="line-scale" color="var(--primary)"></vue-element-loading>
              <span v-if="!loading">Empty</span>
            </td>
          </tr>
        </tbody>
        <tfoot v-if="admin_list.page">
          <paginate-nav
            :colspan="colspan"
            :pervious_page="admin_list.page.pervious_page"
            :next_page="admin_list.page.next_page"
            @clicked="dataHandler"
          >
          </paginate-nav>
          <tr>
            <td class="text-right" :colspan="colspan">
              <small>Total: {{ admin_list.total }}</small>
            </td>
          </tr>
        </tfoot>
      </table>
    </b-card>
    <img-pop-modal
      :label="'Profile'"
      :img="selected_img"
    >
    </img-pop-modal>
  </div>
</template>

<script>
  import AdminFilter from "./Filter";
  import ImgPopModal from "../../components/modals/ImgPopModal";
  import PaginateNav from '../../components/paginations/NextPerviousPagination';

  export default {
    components: {
      AdminFilter,
      ImgPopModal,
      PaginateNav
    },
    data() {
      return {
        form: new Form({
            name: General.getURLParam('name'),
            email: General.getURLParam('email'),
            status: General.returnAray(General.getURLParam('status[]')),
            page: General.getURLParam('page')
        }),
        colspan: 7,
        filter_status: false,
        loading: true,
        admin_list: [],
        selected_img: [],
        permission_list: []
      }
    },
    methods: {
      ImgPopModalToggle(img) {
        let vm = this;
        vm.selected_img = img;
        vm.$bvModal.show('img-pop-modal');
      },
      getPermissionList() {
        let vm = this;
        let url = 'admin/self';
        let form = new Form({});
        General.getCall(url, form).then(response => {
            vm.permission_list = response.data.permission_list;
        });
      },
      getAdminList() {
        let vm = this;
        let url = 'admin/list';
        vm.tableCall(url);
      },
      tableCall(url) {
        let vm = this;
        vm.loading = true;
        General.tableCall(url, vm.form).then(response => {
          vm.loading = false;
          vm.admin_list = response;
          vm.form.page = General.getURLParam('page');
          vm.convertStatus();
        });
      },
      convertStatus() {
        let vm = this;  
        vm.admin_list.data.forEach(function(element, index) {
            element.status = General.initFormArray(Constants.admin_status, [element.status]);
        });
      },
      dataHandler(url) {
        let vm = this;
        vm.form.page = General.getStringParam('page', url);
        vm.tableCall('admin/list');
      },
      filterToggle() {
        let vm = this;
        vm.filter_status = !vm.filter_status;
      },
      filterCloseClick(e) {
        let vm = this;
        if (!vm.$el.contains(e.target) && !e.target.classList.contains('filter')) {
          vm.filter_status = false;
        }
      },
      filterSubmit() {
        let vm = this;
        let url = 'admin/list';
        vm.form.page = '';
        vm.tableCall(url);
        vm.filterToggle();
      },
      FilterReset() {
        let vm = this;
        vm.form.reset();
        vm.filterSubmit();
      }
    },
    mounted() {
      let vm = this;
      document.addEventListener('click', vm.filterCloseClick);
    },
    created() {
      let vm = this;
      vm.getPermissionList();
      vm.getAdminList();
    }
  }
</script>
