<style scoped>
.flex-v-center {
  display: flex;
  align-items: center;
  font-size: 1.1rem;
}
.col-form-label {
  font-weight: bold;
  font-size: 1.1rem;
  padding-top: 0;
  padding-bottom: 0;
}
.title {
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 0.5;
}
.title::before {
  display: flex;
  align-items: baseline;
  content: "\2022";
  margin-right: 8px;
  color: #0ea1b8;
  font-size: 3rem;
}
@media only screen and (max-width: 991px) {
  .mobile-mb {
    margin-bottom: 10px;
  }
}
.form-check-label {
  font-size: 1rem;
}
.form-switch.form-switch-md .form-check-input {
  height: 1.5rem;
  width: calc(2rem + 0.75rem);
  border-radius: 3rem;
}
</style>
<template>
  <form action="javascript:void(0)" @submit="saveData">
    <div class="container pb-3">
      <div class="row gy-sm-3">
        <label for="name" class="col-md-3 col-form-label title flex-v-center">{{ $t('backend.group.permission_group_name') }}</label>
        <div class="col-md-9 mobile-mb flex-v-center">
          <input
            type="text"
            v-model="data.name"
            name="name"
            id="name"
            class="form-control"
            required
          />
        </div>

        <label for="gender" class="col-md-12 col-form-label title flex-v-center">{{ $t('backend.admin.permission_settings') }}</label>
        <div class="row mt-3">
          <div class="col-1"></div>
          <label for="gender" class="col-md-2 col-form-label">
            {{ $t('global.product_website') }}
          </label>
          <div class="row ms-2 col-md-9 mobile-mb">
            <div class="form-check col-6 col-sm-4" v-for="(group, index) in product_groups" :key="index">
              <input class="form-check-input" type="checkbox" :id="'product_group'+index" v-model="checkboxes[index]" >
              <label class="form-check-label" :for="'product_group'+index">
                {{ group }}
              </label>
            </div>
          </div>
        </div>
        <div class="row mt-3" v-for="item in data.items" :key="item.id">
          <div class="col-1"></div>
          <label for="gender" class="col-md-2 col-form-label flex-v-center">
            {{ item.sub_system.name }}
          </label>
          <div class="row ms-2 col-md-9 mobile-mb">
            <div class="form-check form-switch form-switch-md col-6 col-sm-4">
              <input class="form-check-input" type="checkbox" :id="'state'+item.id" v-model="item.state">
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="modal-footer pb-0">
      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
        {{ $t('global.cancel') }}
      </button>
      <button type="submit" class="btn btn-primary">{{ $t('global.save') }}</button>
    </div>
  </form>
</template>
<script>
import { api } from "@/global/axios";
import { sendSuccessSwal, sendFailedSwal } from "@/global/swal";
export default {
  props: ["groupId"],
  data() {
    return {
      product_groups: [
        this.$t('sidebar.plan_management'), 
        this.$t('sidebar.activation_statistics'), 
        this.$t('sidebar.feedback_reply'), 
        this.$t('sidebar.remittance_reply'), 
        this.$t('sidebar.announcement_settings'), 
        this.$t('sidebar.contact_tracking'), 
        this.$t('sidebar.account_data_management'), 
        this.$t('sidebar.member_service_activation'), 
        this.$t('sidebar.admin_account_management'), 
        this.$t('sidebar.backend_permission_group_settings')
      ],
      data: {},
      checkboxes: [],
    };
  },
  mounted() {
    const vm = this;
    vm.fetchData();
  },
  methods: {
    fetchData: async function () {
      const vm = this;
      await api
        .get(`/api/adminGroup/${vm.groupId}`)
        .then((res) => {
          vm.data = res.data.data;
          vm.checkboxes = vm.data.product_group.split('').map(char => char === '1');
        })
        .catch(sendFailedSwal);
      
    },
    saveData: function () {
      const vm = this;
      let binaryString = vm.checkboxes.map(checked => checked ? '1' : '0').join('');
      vm.data.product_group = binaryString;
      
      api
        .put(`/api/adminGroup/${vm.groupId}`, vm.data)
        .then(() => {
          sendSuccessSwal(() => window.location.reload());
        })
        .catch((err) => {
          sendFailedSwal(err);
        });
    },
  },
};
</script>
