<template>
  <div id="form-user">
    <h4 class="Textual Inputs mb-4">
  
      <span v-if="supplier && supplier.name">{{ $trans("Edit") }} {{ supplier.name }}</span>
      <span v-else>{{ $trans("Create a new supplier") }}</span>
    </h4>
    <div class="mb-3 row">
      <label class="col-md-4 col-form-label required">{{ $trans("Name") }}</label>
      <div class="col-md-8">
        <input
          class="form-control"
          type="text"
          placeholder="Supplier Name"
          v-model="newSupplier.name"
        />
      </div>
    </div>
    <div class="mb-3 row">
      <label class="col-md-4 col-form-label required">{{ $trans("TIN Number") }}</label>
      <div class="col-md-8">
        <input
          class="form-control"
          type="number"
          placeholder="TIN"
          v-model="newSupplier.tin_number"
        />
      </div>
    </div>
    <div class="mb-3 row">
      <label for="email" class="col-md-4 col-form-label">{{ $trans("Email") }}</label>
      <div class="col-md-8">
        <input
          class="form-control"
          type="text"
          placeholder="Email Address"
          id="email"
          v-model="newSupplier.email"
        />
      </div>
    </div>
    <div class="mb-3 row">
      <label class="col-md-4 col-form-label required">{{ $trans("Phone") }}</label>
      <div class="col-md-8">
        <input
          class="form-control"
          type="text"
          placeholder="Phone Number"
          v-model="newSupplier.phone"
        />
      </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="newSupplier.address"
        />
      </div>
    </div>

    <!--<div class="row" v-if="validationErrors.length">
      <div class="col-md-4"></div>
      <div class="col-md-8">
        <ul class="text-danger">
          <li v-for="(error, i) in validationErrors" class="fw-bolder" :key="i">
            {{ error }}
          </li>
        </ul>
      </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"
          :disabled="submitDisabled"
        >
          <template #caption>{{ $trans("Save") }}</template>
        </loading-button>
      </div>
    </div>
  </div>
</template>
<script>
import LoadingButton from "@/components/LoadingButton.vue";
export default {
  name: "SupplierCreator",
  props: ["supplier"],
  emits: ["saved"],
  components: {
    LoadingButton,
  },
  data: () => ({
    newSupplier: {},
    errors: {},
  }),
  created() {
    if (this.supplier) {
      this.newSupplier = { ...this.supplier };
    }
  },
  computed: {
    submitDisabled() {
      return !this.newSupplier.name || !this.newSupplier.phone;
    },
    computed: {
      validationErrors() {
        let errors = Object.values(this.errors);
        errors = errors.flat();
        return errors || [];
      },
    },
  },
  methods: {
    handleSave() {
      this.$http
        .post("stock/suppliers/store", this.$helper.generateFormData(this.newSupplier))
        .then((response) => {
          if (response.data.status) {
            this.$emit("saved", response.data.row);
            this.$notify({
              type: "success",
              message: response.data.message,
            });
          }
        })
        .catch((error) => {
          console.log(error);
          if (error.response.status == 400 || error.response.status == 422) {
            this.errors = error.response.data.errors;
            this.$notify({
              type: "error",
              message: "Form contains validation errors",
            });
          }
        });
    },
  },
};
</script>
