<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">
                      <h4 class="card-title">
                        {{ $trans("Companies") }}
                        <span class="text-muted fw-normal ms-2"
                          >({{ totalRows }})</span
                        >
                      </h4>
                    </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">{{ $trans("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
                          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-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("TIN Number") }}</th>
                        <th scope="col">{{ $trans("Email") }}</th>
                        <th scope="col">{{ $trans("Phone") }}</th>
                        <th scope="col">{{ $trans("Address") }}</th>
                        <th scope="col">{{ $trans("Joined At") }}</th>
                        <th scope="col">{{ $trans("Created By") }}</th>
                        <th style="width: 80px; min-width: 80px" class="action">
                          Action
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr v-for="(company, i) in rows" :key="company.id">
                        <th scope="row">
                          <div class="form-check font-size-16">
                            <input
                              type="checkbox"
                              class="form-check-input"
                              :value="company.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="company.logo"
                              :alt="company.name"
                              class="avatar-sm me-2"
                              v-if="company.logo && company.logo!='null'"
                            />
                            <svg
                              v-else
                              height="14px"
                              viewBox="0 0 16 16"
                              xmlns="http://www.w3.org/2000/svg"
                              fill="currentColor"
                            >
                              <path
                                fill-rule="evenodd"
                                d="M14.763.075A.5.5 0 0 1 15 .5v15a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5V14h-1v1.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V10a.5.5 0 0 1 .342-.474L6 7.64V4.5a.5.5 0 0 1 .276-.447l8-4a.5.5 0 0 1 .487.022zM6 8.694L1 10.36V15h5V8.694zM7 15h2v-1.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 .5.5V15h2V1.309l-7 3.5V15z"
                              ></path>
                              <path
                                d="M2 11h1v1H2v-1zm2 0h1v1H4v-1zm-2 2h1v1H2v-1zm2 0h1v1H4v-1zm4-4h1v1H8V9zm2 0h1v1h-1V9zm-2 2h1v1H8v-1zm2 0h1v1h-1v-1zm2-2h1v1h-1V9zm0 2h1v1h-1v-1zM8 7h1v1H8V7zm2 0h1v1h-1V7zm2 0h1v1h-1V7zM8 5h1v1H8V5zm2 0h1v1h-1V5zm2 0h1v1h-1V5zm0-2h1v1h-1V3z"
                              ></path>
                            </svg>
                            <a
                              href="javascript:void(0)"
                              class="text-body fw-medium ms-1"
                              >{{ company.name }}</a
                            >
                          </div>
                        </td>
                        <td>{{ company.tin_number }}</td>
                        <td>{{ company.email || "N/A" }}</td>
                        <td>{{ company.phone || "N/A" }}</td>
                        <td>
                          <span>{{ company.address_line }}</span>
                        </td>
                        <td>
                          <span>{{
                            $helper.formatDate(company.created_at)
                          }}</span>
                        </td>
                        <td>
                          <a href="javascript:void(0)">{{
                            company.creator ? company.creator.name : "Admin"
                          }}</a>
                        </td>
                        <td class="action">
                          <div class="">
                            <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>
                                <a
                                  class="dropdown-item"
                                  @click.prevent="handleEdit(company)"
                                  href="javascript:void(0)"
                                  >{{ $trans("Edit") }}</a
                                >
                              </li>
                              <li>
                                <a
                                  class="dropdown-item"
                                  @click.prevent="handleDestroy(company, i)"
                                  href="javascript:void(0)"
                                  >{{ $trans("Delete") }}</a
                                >
                              </li>
                              <li>
                                <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">
                <creator
                  @saved="handleSavedRow"
                  v-if="!displayMode"
                  :company="selectedCompany"
                ></creator>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { tableMixin } from "@/helpers/tables.mixin";
import Creator from "./Creator.vue";
export default {
  name: "Index",
  mixins: [tableMixin],
  components: {
    Creator,
  },
  data: () => ({
    dataUrl: "companies",
    selectedCompany: null,
  }),
  methods: {
    handleEdit(company) {
      this.selectedCompany = company;
      this.toggleCrudMode();
    },
    handleDestroy(company, i) {
      this.$confirm({
        title: "Deleting",
        content: `Are you sure you want to delete ${company.name} from list of companies?`,
        actionText: "Yes, Continue",
        closeText: "Discard",
        classes: "btn btn-danger",
        action: () => {
          this.$http.get(`companies/destroy/${company.id}`).then((response) => {
            if (response.data.status) {
              this.rows.splice(i, 1);
              this.$notify({
                type: "success",
                message: response.data.message,
              });
            }
          });
        },
      });
    },
    handleSavedRow(row) {
      if (this.selectedCompany) {
        let index = this.rows.findIndex(
          (item) => item.id == this.selectedCompany.id
        );
        this.rows[index] = row;
        this.selectedCompany = 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 companies",
          content: "Are you sure you want to proceed?",
          actionText: "Yes",
          closeText: "Cancel",
          classes: "btn btn-danger",
          action: () => {
            this.$http
              .get(`companies/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: "Companies deleted successfully",
                  });
                }
              });
          },
        });
      }
    },
  },
};
</script>
