<template>
  <div id="form-company">
    <h4 class="Textual Inputs mb-4">
      <span v-if="company && company.name">{{ $trans("Edit") }} {{ company.name }}</span>
      <span v-else>{{ $trans("Create a new company") }}</span>
    </h4>
    <div class="mb-3 row">
      <label for="name" class="col-md-4 col-form-label required">{{ $trans("Name") }}</label>
      <div class="col-md-8">
        <input
          class="form-control"
          type="text"
          placeholder="Company Name"
          id="name"
          v-model="newCompany.name"
        />
      </div>
    </div>
    <div class="mb-3 row">
      <label for="email" class="col-md-4 col-form-label required"> {{ $trans("Email") }}</label>
      <div class="col-md-8">
        <input
          class="form-control"
          type="text"
          placeholder="Email Address"
          id="email"
          v-model="newCompany.email"
        />
      </div>
    </div>
    <div class="mb-3 row">
      <label for="phone" class="col-md-4 col-form-label required">{{ $trans("Phone") }}</label>
      <div class="col-md-8">
        <input
          class="form-control"
          type="number"
          placeholder="Phone Number"
          id="phone"
          v-model="newCompany.phone"
        />
      </div>
    </div>
    <div class="mb-3 row">
      <label class="col-md-4 col-form-label">TIN</label>
      <div class="col-md-8">
        <input
          class="form-control"
          type="number"
          placeholder="Tin Number"
          v-model="newCompany.tin_number"
        />
      </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 Line"
          v-model="newCompany.address_line"
        />
      </div>
    </div>
    <div class="row">
      <div class="col-md-4"></div>
      <div class="col-md-8">
        <loading-button
          task="CREATING_COMPANY"
          class="btn btn-primary w-100"
          type="button w-100"
          @clicked="handleSave"
        >
          <template #caption>{{ $trans("Save") }}</template>
        </loading-button>
      </div>
    </div>
  </div>
</template>
<script>
import LoadingButton from "@/components/LoadingButton.vue";
export default {
  name: "Creator",
  props: ["company"],
  emits: ["saved"],
  components: {
    LoadingButton,
  },
  data: () => ({
    newCompany: {
      name: null,
      phone: null,
      email: null,
      tin_number: null,
      address_line: null,
    },
  }),
  created() {
    if (this.company) {
      this.newCompany = { ...this.company };
    }
  },
  methods: {
    handleSave() {
      this.$http
        .post("companies/store", this.$helper.generateFormData(this.newCompany))
        .then((response) => {
          if (response.data.status) {
            this.$emit("saved", response.data.row);
            this.$notify({
              type: "success",
              message: response.data.message,
            });
          }
        });
    },
  },
};
</script>
