<script>
import LoadingButton from "@/components/LoadingButton.vue";
import { tableMixin } from "@/helpers/tables.mixin";
import { permissionsHandler } from "@/helpers/permissions-handler";
export default {
  name: "Customer",
  mixins: [tableMixin, permissionsHandler],
  components: { LoadingButton },
  data: () => ({
    newClient: {},
    modal: null,
    selectedRow: {},
    dataUrl: "stock/clients",
    selectedProduct: null,
    progressBarWidth: 0,
    percentageCount: 0,
    isUploading: false,
  }),
  mounted() {
    this.modal = new bootstrap.Modal(
      document.getElementById("client-modal"),
      {}
    );
  },
  methods: {
    handleSave() {
      this.$http
        .post(
          "stock/clients/store",
          this.$helper.generateFormData(this.newClient)
        )
        .then((response) => {
          if (response.data.status) {
            if (!this.newClient.id) {
              this.rows.unshift(response.data.row);
            } else {
              let index = this.rows.findIndex(
                (row) => row.id == this.newClient.id
              );
              this.rows[index] = response.data.row;
            }

            this.modal.hide();
            this.newClient = {};
            this.$notify({
              type: "success",
              message: response.data.message,
            });
          }
        });
    },
    selectRow(row) {
      this.selectedRow = row;
    },
    handleEdit(client) {
      this.newClient = { ...client };
      this.selectRow(client);
      this.modal.show();
    },

    handleDestroy(client, i) {
      this.$confirm({
        title: "Deleting",
        content: `Are you sure you want to delete ${client.name} from list of Clients?`,
        actionText: "Yes, Continue",
        closeText: "Discard",
        classes: "btn btn-danger",
        action: () => {
          this.$http
            .get(`stock/clients/destroy/${client.id}`)
            .then((response) => {
              if (response.data.status) {
                this.rows.splice(i, 1);
                this.$notify({
                  type: "success",
                  message: "Client Suspend successfully",
                });
              }
            });
        },
      });
    },
  },
};
</script>
<template>
  <div class="row justify-content-center">
    <div class="col-md-12">
      <div class="card">
        <div class="card-body">
          <div class="row">
            <div class="col-6">
              <div class="mb-3">
                <h4>
                  {{ $trans("Clients List") }}
                  <span class="text-muted fw-normal ms-2"
                    >({{ totalRows }})</span
                  >
                </h4>
              </div>
            </div>
            <div class="col-md-6">
              <div class="d-flex align-items-center mb-2">
                <button
                  data-bs-toggle="modal"
                  data-bs-target="#client-modal"
                  class="btn btn-primary ms-auto"
                  v-if="this.hasPermissionTo('C')"
                >
                  <i class="uil uil-plus me-1"></i>
                  {{ $trans("Add New Client") }}
                </button>
                <button
                  class="btn-success btn btn-icon ms-1"
                  type="button"
                  :disabled="!rows.length"
                  @click="handleExcelExport('#clientList', 'Clients List')"
                >
                  <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>
                <button
                  class="btn-dark btn btn-icon ms-1"
                  type="button"
                  :disabled="!rows.length"
                  @click="handlePrint('#clientList', 'Clients List')"
                >
                  <svg
                    height="18px"
                    viewBox="0 0 16 16"
                    xmlns="http://www.w3.org/2000/svg"
                    fill="currentColor"
                  >
                    <path
                      d="M11 2H5a1 1 0 0 0-1 1v2H3V3a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2h-1V3a1 1 0 0 0-1-1zm3 4H2a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h1v1H2a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2h-1v-1h1a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1z"
                    ></path>
                    <path
                      fill-rule="evenodd"
                      d="M11 9H5a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1zM5 8a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H5z"
                    ></path>
                    <path d="M3 7.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0z"></path>
                  </svg>
                </button>
              </div>
            </div>
          </div>
          <div class="table-responsive">
            <table
              class="table align-middle table-light table-hover table-striped table-nowrap table-check"
              id="clientList"
            >
              <thead>
                <tr>
                  <th
                    class="check d-print-none"
                    scope="col"
                    style="width: 50px"
                  >
                    <div class="form-check font-size-16">
                      <input type="checkbox" class="form-check-input" />
                      <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("Phone") }}</th>
                  <th scope="col">{{ $trans("Email") }}</th>
                  <th scope="col">{{ $trans("Discount") }}</th>
                  <th scope="col">{{ $trans("Address") }}</th>
                  <th class="d-print-none">Action</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(client, i) in rows" :key="client.id">
                  <th class="check d-print-none" scope="row">
                    <div class="form-check font-size-16">
                      <input
                        type="checkbox"
                        class="form-check-input"
                        :value="client.id"
                        :id="'checkbox-' + i"
                      />
                      <label
                        class="form-check-label"
                        :for="'checkbox-' + i"
                      ></label>
                    </div>
                  </th>
                  <td>
                    <div class="d-flex align-items-center">
                      <div class="me-2">
                        <img
                          src="/img/avatar.png"
                          class="d-print-none avatar-sm img-thumbnail h-auto rounded-circle"
                          alt="Customer"
                        />
                      </div>
                      <div>
                        <a href="#" class="text-reset fw-bold">{{
                          client.name.toUpperCase()
                        }}</a>
                      </div>
                    </div>
                  </td>
                  <td>{{ client.tinnumber || "N/A" }}</td>
                  <td>{{ client.phone || "N/A" }}</td>
                  <td>{{ client.email || "N/A" }}</td>
                  <td>{{ client.discount || "N/A" }}</td>
                  <td>{{ client.address || "N/A" }}</td>
                  <td class="d-print-none">
                    <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>
                          <a
                            class="dropdown-item"
                            @click.prevent="handleEdit(client)"
                            href="javascript:void(0)"
                            v-if="this.hasPermissionTo('U')"
                            ><i class="uil uil-edit fs-5 me-3"></i>
                            {{ $trans("Edit") }}</a
                          >
                        </li>
                        <li>
                          <a
                            class="dropdown-item"
                            @click.prevent="handleDestroy(client, i)"
                            href="javascript:void(0)"
                            v-if="this.hasPermissionTo('D')"
                            ><i class="uil uil-ban fs-5 me-3"></i>
                            {{ $trans("Suspend") }}</a
                          >
                        </li>
                      </ul>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <paginations
        :to="recordsTo"
        :from="recordsFrom"
        :current_page="currentPage"
        :row_count_page="rowCountPage"
        @page-update="handlePagination"
        :total_records="totalRows"
        :page_range="pageRange"
      ></paginations>
    </div>
  </div>

  <div
    class="modal fade"
    tabindex="-1"
    id="client-modal"
    aria-labelledby="mySmallModalLabel"
    aria-hidden="true"
    style="display: none"
  >
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">
            {{
              newClient.id
                ? $trans("Edit Client")
                : $trans("Create a new Client")
            }}
          </h5>
          <button
            type="button"
            class="btn-close"
            data-bs-dismiss="modal"
            aria-label="Close"
          ></button>
        </div>
        <div class="modal-body">
          <div class="mb-3 row">
            <label class="col-md-4 col-form-label required">{{
              $trans("Name")
            }}</label>
            <div class="col-md-8">
              <input
                class="form-control"
                type="text"
                placeholder="Name"
                v-model="newClient.name"
              />
            </div>
          </div>
          <div class="mb-3 row">
            <label class="col-md-4 col-form-label required">{{
              $trans("TIN Number")
            }}</label>
            <div class="col-md-8">
              <input
                class="form-control"
                type="number"
                placeholder="TIN Number"
                v-model="newClient.tinnumber"
              />
            </div>
          </div>
          <div class="mb-3 row">
            <label class="col-md-4 col-form-label required">{{
              $trans("Phone")
            }}</label>
            <div class="col-md-8">
              <input
                class="form-control"
                type="number"
                placeholder="Phone"
                v-model="newClient.phone"
              />
            </div>
          </div>
          <div class="mb-3 row">
            <label class="col-md-4 col-form-label">{{ $trans("Email") }}</label>
            <div class="col-md-8">
              <input
                class="form-control"
                type="email"
                placeholder="Email"
                v-model="newClient.email"
              />
            </div>
          </div>
          <div class="mb-3 row">
            <label class="col-md-4 col-form-label"
              >{{ $trans("Discount") }} (%)</label
            >
            <div class="col-md-8">
              <input
                class="form-control"
                type="number"
                placeholder="Discount"
                v-model="newClient.discount"
              />
            </div>
          </div>
          <div class="mb-3 row">
            <label class="col-md-4 col-form-label">{{
              $trans("Address")
            }}</label>
            <div class="col-md-8">
              <input
                class="form-control"
                type="text"
                placeholder="Address"
                v-model="newClient.address"
              />
            </div>
          </div>
          <div class="row">
            <div class="col-md-4"></div>
            <div class="col-md-8">
              <loading-button
                task="CREATING_CLIENT"
                class="btn btn-primary"
                type="button w-100"
                @clicked="handleSave"
                :disabled="
                  !newClient.name || !newClient.tinnumber || !newClient.phone
                "
              >
                <template #caption>{{ $trans("Save and Close") }}</template>
              </loading-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
