<style scoped>
.bg-color {
  background-color: #fffbdd;
  height: 100%;
  overflow: auto;
}
table {
  min-width: 600px;
}
table tbody tr {
  border: 2px #bbbbbb solid;
}
table th,
td {
  border: 0;
  vertical-align: middle;
}
table th {
  background-color: transparent;
}
.inside-border-color {
  border-color: #0c4e82 !important;
  background-color: #fff;
  font-size: 0.8rem;
}
</style>
<template>
  <div class="main-view px-4 pt-2">
    <div class="d-flex align-items-center mb-3">
      <button class="btn-goback me-2" @click="$router.back()">
        <i class="bi bi-chevron-left me-1"></i>{{ $t('global.go_back') }}
      </button>
      <nav style="--bs-breadcrumb-divider: '>'" aria-label="breadcrumb">
        <ol class="breadcrumb m-0">
          <li class="breadcrumb-item"><a href="#">{{ $t('global.homepage') }}</a></li>
          <li class="breadcrumb-item active" aria-current="page">{{ $t('sidebar.backend_permission_group_settings') }}</li>
        </ol>
      </nav>
    </div>
    <h1>{{ $t('sidebar.backend_permission_group_settings') }}</h1>
    <div class="text-end">
      <button
        type="button"
        class="btn btn-primary mb-2"
        data-bs-toggle="modal"
        data-bs-target="#groupModal"
        @click="groupId = ''"
      >
        {{ $t('backend.group.add_permission_group') }}
      </button>
    </div>
  </div>
  <div class="p-4 bg-color">
    <div class="input-group w-50 mb-3">
      <input
        type="search"
        class="form-control border border-2 border-end-0 inside-border-color"
        placeholder="Search..."
      />
      <button
        class="btn btn-light border border-2 border-start-0 inside-border-color"
        type="button"
      >
        <i class="bi bi-search"></i>
      </button>
    </div>
    <table class="table table-hover" id="table">
      <thead>
        <tr>
          <th class="text-center">{{ $t('global.serial_number') }}</th>
          <th>{{ $t('backend.group.permission_group_name') }}</th>
          <th>{{ $t('global.creation_date') }}</th>
          <th class="text-center">{{ $t('global.operation') }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(data, index) in datas" :key="data.id">
          <td class="text-center">{{ index + 1 }}</td>
          <td>{{ data.name }}</td>
          <td>{{ data.created_at }}</td>
          <td class="text-center">
            <button
              type="button"
              class="btn btn-success mx-1"
              data-bs-toggle="modal"
              data-bs-target="#groupModal"
              @click="groupId = data.id"
            >
              {{ $t('global.modify') }}
            </button>
            <button class="btn btn-danger mx-1" @click="del(data.id)">{{ $t('global.delete') }}</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div
    class="modal fade"
    id="groupModal"
    tabindex="-1"
    role="dialog"
    aria-labelledby="exampleModalLabel"
    aria-hidden="true"
    data-bs-backdrop="static"
    data-bs-keyboard="false"
  >
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title fw-bold" id="exampleModalLabel">
            {{ groupId ? $t('global.edit') : $t('global.add') }}{{ $t('backend.group.permission_group') }}
          </h5>
          <button
            type="button"
            class="btn-close"
            data-bs-dismiss="modal"
            aria-label="Close"
          ></button>
        </div>
        <div class="modal-body">
          <GroupAdd v-if="!groupId" />
          <GroupUpd v-if="groupId" :groupId="groupId" :key="groupId" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { api } from "@/global/axios";
import GroupAdd from "./Add.vue";
import GroupUpd from "./Upd.vue";
import { sendSuccessSwal, sendFailedSwal, swalDelete } from "@/global/swal";
import { isAdmin } from "@/global/request";
export default {
  components: {
    GroupAdd,
    GroupUpd,
  },
  data() {
    return {
      isAdmin: isAdmin(),
      datas: [],
      groupId: "",
      dataTable: null,
    };
  },
  mounted() {
    const vm = this;
    vm.fetchData().then(() => {
      vm.$nextTick(() => {
        vm.dataTable = $("#table").DataTable();
      });
    }).then(() => {
      $("input[type='search']").on("keyup input", function () {
        vm.dataTable.search(this.value).draw();
      });
    });
  },
  methods: {
    fetchData: async function () {
      const vm = this;
      await api
        .get(`/api/adminGroup`)
        .then((res) => {
          vm.datas = res.data.data;
        })
        .catch(sendFailedSwal);
    },
    del: function (id) {
      swalDelete((res) => {
        if (res.value) {
          api
            .delete(`/api/adminGroup/${id}`)
            .then((resp) => {
              sendSuccessSwal(() => window.location.reload());
            })
            .catch(sendFailedSwal);
        }
      });
    },
  },
};
</script>
