<style scoped>
.bg-color {
  background-color: #fffbdd;
  height: 100%;
  overflow: auto;
}
h1 {
  font-size: 1.8rem;
}
table {
  min-width: 600px;
  font-size: 1rem;
}
table tbody tr {
  border: 2px #bbbbbb solid;
}
table th,
td {
  border: 0;
  vertical-align: middle;
}
 table th {
  background-color: transparent;
}
.system-statistics table thead tr th:first-child {
  width: 10%;
}
.inside-border-color {
  border-color: #0c4e82 !important;
  background-color: #fff;
  font-size: 0.8rem;
}
.btn-option {
  color: #fff;
  background-color: #707070;
  font-size: 1rem;
  font-weight: bold;
  border-radius: 0.5rem;
  transition: 0.3s;
}
.btn-option.active,
.btn-option:hover {
  background-color: #ff7600;
}
.pagination {
  font-size: 1rem;
}
.sub-title {
  font-size: 1.3rem;
  font-weight: bold;
}
.date-range-container {
  display: flex;
  align-items: center;
  gap: 8px;
}
.date-range-container span {
  white-space: nowrap;
  font-size: 1rem;
  font-weight: bold;
}
.date-range-container .form-control {
  width: 180px;
}
.btn-search {
  color: #fff;
  background-color: #12a5bc;
  font-size: 1rem;
  font-weight: bold;
  border-radius: 0.5rem;
  transition: 0.3s;
}
.btn-search:hover {
  background-color: #0d7e8f;
}
a {
  color: blue;
  text-decoration: underline;
}
</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.activation_statistics') }}</li>
        </ol>
      </nav>
    </div>
    <h1>{{ $t('sidebar.activation_statistics') }}</h1>
  </div>
  <div class="p-4 mt-2 bg-color">
    <div class="date-range-container">
      <span>{{ $t('backend.statistics.date_range') }}</span>
      <input class="form-control" type="date" v-model="startDate" />
      <span>{{ $t('backend.statistics.to') }}</span>
      <input class="form-control" type="date" v-model="endDate" :min="startDate != '' ? startDate : null" />
      <button class="btn btn-search" @click="searchData">{{ $t('global.search') }}</button>
    </div>

    <div class="system-statistics mt-3">
      <p class="sub-title">{{ $t('backend.statistics.plan_activation_statistics') }}</p>

      <div class="py-3 ms-4">
        <button
          v-for="subSystem in filteredSubSystems" :key="subSystem.id"
          class="btn-option px-4 py-2 mx-1"
          :class="{ active: optionType == subSystem.name }"
          @click="optionType = subSystem.name"
        >
          {{ subSystem.name }}
        </button>
      </div>

      <table class="table table-hover w-50 ms-5" id="table" ref="table" v-if="filteredSubSystems.length > 0">
        <thead>
          <tr>
            <th class="text-center">{{ $t('global.serial_number') }}</th>
            <th class="text-center">{{ $t('global.system') }}</th>
            <th class="text-center">{{ $t('global.plan') }}</th>
            <th class="text-center">{{ $t('backend.statistics.activation_count') }}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(data, index) in filteredData" :key="data.id">
            <td class="text-center">{{ index + 1 }}</td>
            <td class="text-center">{{ optionType }}</td>
            <td class="text-center">{{ data.name }}</td>
            <td class="text-center">
              <router-link :to="`/statistics/detail/${data.sub_system_id}/${data.id}`">
                {{ data.active_num }}
              </router-link>
            </td>
          </tr>
        </tbody>
      </table>
      <p class="text-center" v-else>{{ $t('backend.statistics.no_systems_available') }}</p>
    </div>

    <hr class="mt-5 mb-3" />

    <div class="permission-statistics">
      <p class="sub-title">{{ $t('backend.statistics.account_permission_statistics') }}</p>

      <table class="table table-hover w-50 ms-5" id="table" ref="table">
        <thead>
          <tr>
            <th class="text-center w-50">{{ $t('backend.statistics.account_permission') }}</th>
            <th class="text-center w-50">{{ $t('global.count') }}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="data in permissions" :key="data.permission">
            <td class="text-center">{{ data.name }}</td>
            <td class="text-center">{{ data.num }}</td>
          </tr>
          <tr v-if="permissions.length === 0">
            <td colspan="2" class="text-center">{{ $t('global.none') }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<script>
import { api } from "@/global/axios";
import { sendFailedSwal } from "@/global/swal";
import { isAdmin, systemRole } from "@/global/request";
export default {
  data() {
    return {
      datas: [],
      isAdmin: isAdmin(),
      systemRole: systemRole(),
      dataTable: null,
      subSystems: [],
      permissions: [],
      optionType: this.$t('global.none'),
      startDate: "",
      endDate: "",
      newData: [],
    };
  },
  computed: {
    filteredSubSystems() {
      let filterList = this.subSystems.filter((s) => this.systemRole[s.id]) || [];
      this.optionType = filterList.length > 0 ? filterList[0].name : this.$t('global.none');
      return filterList;
    },
    filteredSystem() {
      return this.datas.find((s) => s.name == this.optionType) || null;
    },
    filteredData() {
      let filterList = this.filteredSystem?.plans || [];
      return filterList;
    },
  },
  mounted() {
    const vm = this;
    vm.fetchData();
  },
  methods: {
    fetchData: async function () {
      const vm = this;
      await api
        .get(`/api/subSystem`)
        .then((res) => {
          vm.subSystems = res.data.data;
        })
        .catch(sendFailedSwal);

      vm.searchData();
    },
    searchData: async function () {
      const vm = this;
      await api
        .post(`/api/getSubSystemWithStatistics`, {
          startDate: vm.startDate,
          endDate: vm.endDate
        })
        .then((res) => {
          vm.datas = res.data.data;
        })
        .catch(sendFailedSwal);

      await api
        .post(`/api/getUserPermissionStatistics`, {
          startDate: vm.startDate,
          endDate: vm.endDate
        })
        .then((res) => {
          vm.permissions = res.data.data;
        })
        .catch(sendFailedSwal);

      await api
        .post(`/api/getSubSystemWithStatisticsDetail`, {
          plan_id: 4,
          sub_system_id: 2
        })
        .then((res) => {
          vm.newData = res.data.data;
        })
        .catch(sendFailedSwal);
    },
  },
};
</script>