<template>
  <div class="row">
    <div class="col-lg-12">
      <div class="card">
        <div class="card-body">
          <div class="crud-container">
            <div class="crud-display" :class="{ empty: !displayMode }">
              <template v-if="displayMode">
                <div class="row">
                  <div class="col-12">
                    <div class="mb-3">
                      <h3>
                        {{ $trans("Users") }}
                        <span class="text-muted fw-normal ms-2"
                          >({{ totalRows }})</span
                        >
                      </h3>
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="d-flex justify-content-start">
                      <select
                        name="action"
                        class="form-control bulk-options form-select"
                        v-model="bulkAction"
                      >
                        <option :value="null">Bulk Actions</option>
                        <option value="suspend">{{ $trans("Suspend") }}</option>
                        <option value="delete">{{ $trans("Delete") }}</option>
                      </select>
                      <button
                        class="btn-primary btn btn-icon ms-1"
                        type="button"
                        :disabled="!bulkAction"
                        @click="handleBulkAction"
                      >
                        {{ $trans("Apply") }}
                      </button>
                      <button
                        class="btn-primary btn btn-icon ms-1"
                        type="button"
                        :disabled="!rows.length"
                        @click="handleExcelExport(null)"
                      >
                        <svg
                          height="18px"
                          viewBox="0 0 16 16"
                          xmlns="http://www.w3.org/2000/svg"
                          fill="currentColor"
                        >
                          <path
                            fill-rule="evenodd"
                            d="M2 2a2 2 0 0 1 2-2h5.293A1 1 0 0 1 10 .293L13.707 4a1 1 0 0 1 .293.707V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2zm7.5 1.5v-2l3 3h-2a1 1 0 0 1-1-1zM5.884 6.68a.5.5 0 1 0-.768.64L7.349 10l-2.233 2.68a.5.5 0 0 0 .768.64L8 10.781l2.116 2.54a.5.5 0 0 0 .768-.641L8.651 10l2.233-2.68a.5.5 0 0 0-.768-.64L8 9.219l-2.116-2.54z"
                          ></path>
                        </svg>
                      </button>
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div
                      class="d-flex flex-wrap align-items-start justify-content-md-end mt-2 mt-md-0 gap-2 mb-3"
                    >
                      <div></div>
                      <div>
                        <a
                          v-if="this.hasPermissionTo('C')"
                          href="javascript:void(0)"
                          class="btn btn-primary"
                          @click.prevent="toggleCrudMode"
                          ><i class="uil uil-plus me-1"></i>
                          {{ $trans("Add New") }}</a
                        >
                      </div>
                      <div class="dropdown">
                        <a
                          class="text-dark dropdown-toggle shadow-none"
                          href="javascript:void(0)"
                          role="button"
                          data-bs-toggle="dropdown"
                          aria-expanded="false"
                        >
                          <i class="uil uil-filter fs-2"></i>
                        </a>

                        <ul class="dropdown-menu dropdown-menu-end" style="">
                          <li>
                            <a
                              class="dropdown-item"
                              href="javascript:void(0)"
                              >{{ $trans("All") }}</a
                            >
                          </li>
                          <li>
                            <a
                              class="dropdown-item"
                              href="javascript:void(0)"
                              >{{ $trans("Active") }}</a
                            >
                          </li>
                          <li>
                            <a
                              class="dropdown-item"
                              href="javascript:void(0)"
                              >{{ $trans("Suspended") }}</a
                            >
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="table-responsive">
                  <table
                    class="table align-middle table-light table-hover table-striped table-nowrap table-check"
                    id="pagination-table"
                  >
                    <thead>
                      <tr>
                        <th class="check" scope="col" style="width: 50px">
                          <div class="form-check font-size-16">
                            <input
                              type="checkbox"
                              class="form-check-input"
                              id="checkAll"
                              @click="handleCheckAll"
                            />
                            <label
                              class="form-check-label"
                              for="checkAll"
                            ></label>
                          </div>
                        </th>
                        <th scope="col">{{ $trans("Name") }}</th>
                        <th scope="col">{{ $trans("Email") }}</th>
                        <th scope="col">{{ $trans("Phone") }}</th>
                        <th scope="col" v-if="currentUser.company_id">
                          {{ $trans("Department") }}
                        </th>
                        <th scope="col" v-else>{{ $trans("Company") }}</th>
                        <th scope="col">{{ $trans("Role") }}</th>
                        <th scope="col">{{ $trans("Status") }}</th>
                        <th scope="col">{{ $trans("Last Login") }}</th>
                        <th style="width: 80px; min-width: 80px" class="action">
                          Action
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr v-for="(user, i) in rows" :key="user.id">
                        <th class="check" scope="row">
                          <div class="form-check font-size-16">
                            <input
                              type="checkbox"
                              class="form-check-input"
                              :value="user.id"
                              :id="'checkbox-' + i"
                              v-model="checkedRows"
                            />
                            <label
                              class="form-check-label"
                              :for="'checkbox-' + i"
                            ></label>
                          </div>
                        </th>
                        <td>
                          <div class="d-flex align-items-center">
                            <img
                              src="/img/avatar.png"
                              :alt="user.name"
                              class="avatar-sm me-2"
                            />
                            <span class="fw-bolder">{{ user.name.toUpperCase() }}</span>
                          </div>
                        </td>
                        <td>{{ user.email || "N/A" }}</td>
                        <td>{{ user.phone || "N/A" }}</td>
                        <td v-if="currentUser.company_id">
                          <a
                            href="javascript:void(0)"
                            class="text-body fw-medium ms-1"
                            >{{
                              user.department ? user.department.name : "N/A"
                            }}</a
                          >
                        </td>
                        <td v-else>
                          <a
                            href="javascript:void(0)"
                            class="text-body fw-medium ms-1"
                            >{{ user.company ? user.company.name : "HQ" }}</a
                          >
                        </td>
                        <td>
                          <span>{{ user.role ? user.role.name : "N/A" }}</span>
                        </td>
                        <td>
                          <div
                            class="badge bg-success font-size-12"
                            v-if="user.status == 1"
                          >
                            {{ $trans("Active") }}
                          </div>
                          <div class="badge bg-danger font-size-12" v-else>
                            {{ $trans("Suspended") }}
                          </div>
                        </td>
                        <td>
                          <span v-if="last_login">{{
                            $helper.formatDate(user.last_login)
                          }}</span>
                          <span v-else>N/A</span>
                        </td>
                        <td class="action">
                          <div>
                            <button
                              class="btn btn-light btn-sm dropdown-toggle"
                              type="button"
                              data-bs-toggle="dropdown"
                              aria-expanded="false"
                            >
                              <i class="uil uil-ellipsis-h"></i>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-end">
                              <li v-if="this.hasPermissionTo('U')">
                                <a
                                  class="dropdown-item"
                                  @click.prevent="handleEdit(user)"
                                  href="javascript:void(0)"
                                  >{{ $trans("Edit") }}</a
                                >
                              </li>
                              <li v-if="this.hasPermissionTo('D')">
                                <a
                                  class="dropdown-item"
                                  @click.prevent="handleDestroy(user, i)"
                                  href="javascript:void(0)"
                                  >{{ $trans("Delete") }}</a
                                >
                              </li>
                              <li v-if="this.hasPermissionTo('U')">
                                <a
                                  class="dropdown-item"
                                  href="javascript:void(0)"
                                  >{{ $trans("Suspend") }}</a
                                >
                              </li>
                            </ul>
                          </div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <paginations
                  :to="recordsTo"
                  :from="recordsFrom"
                  :current_page="currentPage"
                  :row_count_page="rowCountPage"
                  @page-update="handlePagination"
                  :total_records="totalRows"
                  :page_range="pageRange"
                ></paginations>
              </template>
              <template v-else>
                <div class="crud-display-line">
                  <button
                    class="btn-back crud-back"
                    type="button"
                    @click="toggleCrudMode"
                  >
                    <svg
                      height="18px"
                      xmlns="http://www.w3.org/2000/svg"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                    >
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M10 19l-7-7m0 0l7-7m-7 7h18"
                      ></path>
                    </svg>
                  </button>
                  <div class="crud-links"></div>
                </div>
              </template>
            </div>
            <div class="crud-create" :class="{ 'd-none': displayMode }">
              <div class="col-xxl-5 col-xl-6 col-lg-8 col-12">
                <user-creator
                  @saved="handleSavedRow"
                  v-if="!displayMode"
                  :user="selectedUser"
                ></user-creator>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { tableMixin } from "@/helpers/tables.mixin";
import { permissionsHandler } from "@/helpers/permissions-handler";
import UserCreator from "./UserCreator.vue";
export default {
  name: "Users",
  mixins: [tableMixin, permissionsHandler],
  components: {
    UserCreator,
  },
  data: () => ({
    dataUrl: "users",
    selectedUser: null,
  }),
  computed: {
    currentUser() {
      return this.$store.state.user || {};
    },
  },
  methods: {
    handleEdit(user) {
      this.selectedUser = user;
      this.toggleCrudMode();
    },
    handleDestroy(user, i) {
      this.$confirm({
        title: "Deleting",
        content: `Are you sure you want to delete ${user.name} from list of users?`,
        actionText: "Yes, Continue",
        closeText: "Discard",
        classes: "btn btn-danger",
        action: () => {
          this.$http.get(`users/destroy/${user.id}`).then((response) => {
            if (response.data.status) {
              this.rows.splice(i, 1);
              this.$notify({
                type: "success",
                message: response.data.message,
              });
            }
          });
        },
      });
    },
    handleSavedRow(row) {
      if (this.selectedUser) {
        let index = this.rows.findIndex(
          (item) => item.id == this.selectedUser.id
        );
        this.rows[index] = row;
        this.selectedUser = null;
      } else {
        this.rows.unshift(row);
      }
      this.toggleCrudMode();
    },
    handleBulkAction() {
      switch (this.bulkAction) {
        case "delete":
          this.handleBulkDelete();
          break;
        default:
          console.log(this.bulkAction);
      }
    },
    handleBulkDelete() {
      if (!this.checkedRows.length) {
        this.$notify({
          type: "error",
          message: "Please select multiple rows and continue",
        });
      } else {
        this.$confirm({
          title: "Delete users",
          content: "Are you sure you want to proceed?",
          actionText: "Yes",
          closeText: "Cancel",
          classes: "btn btn-danger",
          action: () => {
            this.$http
              .get(`users/bulk-destroy/${this.checkedRows.join(",")}`)
              .then((response) => {
                if (response.data.status) {
                  this.checkedRows.forEach((id) => {
                    let index = this.rows.findIndex((item) => item.id == id);
                    this.rows.splice(index, 1);
                  });
                  this.$notify({
                    type: "success",
                    message: "Users deleted successfully",
                  });
                }
              });
          },
        });
      }
    },
  },
};
</script>
