<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;
}
input[type="radio"] {
  height: 1rem;
  width: 1rem;
  vertical-align: sub;
}
@media only screen and (max-width: 991px) {
  .mobile-mb {
    margin-bottom: 10px;
  }
}
.text {
  color: #000;
  font-size: 1rem;
  font-weight: bold;
}
</style>
<template>
  <form action="javascript:void(0)" @submit="saveData">
    <div class="container pb-3">
      <div class="mb-3" v-if="Object.keys(validationErrors).length > 0">
        <div class="alert alert-danger">
          <ul class="mb-0">
            <li class="text" v-for="(value, key) in validationErrors" :key="key">
              {{ value[0] }}
            </li>
          </ul>
        </div>
      </div>
      <div class="row gy-sm-3">
        <div class="col-12">
          <h5 class="title mobile-mb flex-v-center">{{ $t('global.basic_information') }}</h5>
        </div>

        <div class="col-1"></div>
        <label for="name" class="col-md-2 col-form-label flex-v-center">{{ $t('global.name') }}</label>
        <div class="col-md-9 mobile-mb flex-v-center">
          <input
            type="text"
            v-model="user.name"
            name="name"
            id="name"
            class="form-control"
            required
          />
        </div>

        <div class="col-1"></div>
        <label for="email" class="col-md-2 col-form-label flex-v-center">{{ $t('global.email') }}</label>
        <div class="col-md-9 mobile-mb flex-v-center">
          <input
            type="email"
            v-model="user.email"
            name="email"
            id="email"
            class="form-control"
            required
          />
        </div>

        <div class="col-1"></div>
        <label for="password" class="col-md-2 col-form-label flex-v-center">{{ $t('global.password') }}</label>
        <div class="col-md-9 mobile-mb flex-v-center">
          <input
            type="password"
            v-model="user.password"
            name="password"
            id="password"
            class="form-control"
            autocomplete="off"
            required
          />
        </div>

        <div class="col-1"></div>
        <label for="password_confirmation" class="col-md-2 col-form-label flex-v-center"
          >{{ $t('global.confirm_password') }}</label
        >
        <div class="col-md-9 mobile-mb flex-v-center">
          <input
            type="password"
            v-model="user.password_confirmation"
            name="password_confirmation"
            id="password_confirmation"
            class="form-control"
            autocomplete="off"
            required
          />
        </div>
      </div>

      <div class="row gy-sm-3 mt-2">
        <div class="col-12">
          <h5 class="title mobile-mb flex-v-center">{{ $t('backend.admin.permission_settings') }}</h5>
        </div>

        <div class="col-1"></div>
        <label for="contact_name" class="col-md-2 col-form-label flex-v-center"
          >{{ $t('backend.admin.select_permission') }}</label
        >
        <div class="col-md-9 mobile-mb flex-v-center">
          <select class="form-select" v-model="user.group_id" required>
            <option disabled selected value>{{ $t('backend.admin.please_select_permission') }}</option>
            <option
              v-for="group in adminGroup"
              :key="group.id"
              :value="group.id"
            >
              {{ group.name }}
            </option>
          </select>
        </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.create') }}</button>
    </div>
  </form>
</template>
<script>
import { api } from "@/global/axios";
import { sendSuccessSwal, sendFailedSwal } from "@/global/swal";
export default {
  data() {
    return {
      adminGroup: [],
      user: {
        name: "",
        email: "",
        password: "",
        password_confirmation: "",
        permission: "111",
        phone: "",
        group_id: "",
      },
      validationErrors: {},
    };
  },
  mounted() {
    const vm = this;
    vm.fetchData();
  },
  methods: {
    fetchData: async function () {
      const vm = this;
      await api
        .get(`/api/adminGroup`)
        .then((res) => {
          vm.adminGroup = res.data.data;
        })
        .catch(sendFailedSwal);
    },
    saveData: function () {
      api
        .post(`/api/user`, this.user)
        .then(() => {
          sendSuccessSwal(() => window.location.reload());
        })
        .catch((err) => {
          sendFailedSwal(err);
          if (err.response.status == 500)
            this.validationErrors = err.response.data.errors;
        });
    },
  },
};
</script>
