<template>
  <div>
    <div
      class="flex bg-white p-4 text-lg border-b border-gray-300 h-20 items-center"
    >
      <div class="flex-1 font-semibold">{{ trans("Settings") }}</div>
    </div>
    <a-form class="p-6">
      <div class="flex space-x-4">
        <a-form-item :label="trans('Local price')" class="w-1/2">
          <a-input
            v-model="form.local_price"
            :placeholder="trans('Local price')"
            class="w-full"
            addon-after="TMT"
          />
        </a-form-item>
        <a-form-item :label="trans('Inter price')" class="w-1/2">
          <a-input
            v-model="form.int_price"
            :placeholder="trans('Inter price')"
            class="w-full"
            addon-after="USD"
          />
        </a-form-item>
      </div>
      <a-form-item :colon="false">
        <div slot="label">
          {{ trans("Exports text") }}
          <a-radio-group v-model="locale" button-style="solid" class="ml-2">
            <a-radio-button value="tm"> Türkmençe </a-radio-button>
            <a-radio-button value="ru"> Русский </a-radio-button>
            <a-radio-button value="en"> English </a-radio-button>
          </a-radio-group>
        </div>
        <a-textarea v-model="form.text[locale]" :rows="6" auto-size style="min-height: 90px" class="mt-2">
        </a-textarea>
      </a-form-item>
      <a-button type="primary" @click="submit">{{ trans("Save") }}</a-button>
    </a-form>
  </div>
</template>

<script>
export default {
  props: ["settings"],

  metaInfo() {
    return {
      title: this.trans("Settings"),
    };
  },

  data() {
    return {
      locale: this.$page.props.locale || 'tm',
      form: this.$inertia.form({
        text: {
          tm: this.settings.text.tm,
          ru: this.settings.text.ru,
          en: this.settings.text.en,
        },
        local_price: this.settings.local_price,
        int_price: this.settings.int_price,
      }),
    };
  },

  methods: {
    submit() {
      this.form.post(this.route("settings.store"), {
        onSuccess: () => {
          this.$message.success(this.trans("Success message"));
        },
      });
    },
  },
};
</script>
