exchange/resources/js/Components/CreateRequestModal.vue

<template>
  <a-modal
    v-model="visible"
    :title="trans('Create request')"
    :after-close="() => $emit('close')"
    :destroy-on-close="true"
    :width="960"
  >
    <a-form
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 20 }"
      label-align="left"
      @keypress.enter.native="submit"
    >
      <div class="flex space-x-3">
        <div class="w-8/12">
          <a-form-item
            :label="trans('Your name')"
            :validateStatus="formStatus('name')"
            :help="formHelp('name')"
          >
            <a-input v-model="form.name" :placeholder="trans('Your name')" />
          </a-form-item>
          <a-form-item
            :label="trans('Phone')"
            :validateStatus="formStatus('phone')"
            :help="formHelp('phone')"
          >
            <a-input v-model="form.phone" :placeholder="trans('Phone')" />
          </a-form-item>
          <a-form-item
            :label="trans('Email')"
            :validateStatus="formStatus('email')"
            :help="formHelp('email')"
          >
            <a-input v-model="form.email" :placeholder="trans('Email')" />
          </a-form-item>
          <a-form-item :label="trans('Type')">
            <a-radio-group v-model="type" button-style="solid">
              <a-radio-button value="local">
                {{ trans("Local") }}
              </a-radio-button>
              <a-radio-button value="int">
                {{ trans("Inter") }}
              </a-radio-button>
            </a-radio-group>
          </a-form-item>
        </div>
        <div class="w-2/12"></div>
      </div>
      <div
        class="flex relative space-x-3"
        v-for="(item, index) in form.items"
        :key="item.id"
      >
        <div class="absolute bottom-8 -left-3 w-5 text-right">
          {{ index + 1 }}.
        </div>
        <a-form-item
          class="w-full"
          :label-col="{ span: 24 }"
          :wrapper-col="{ span: 24 }"
          label-align="left"
          :validateStatus="formStatus(`items.${index}.title`)"
          :help="formHelp(`items.${index}.title`)"
        >
          <a-input :value="item.title" disabled />
        </a-form-item>
        <!-- <a-form-item
          class="w-3/12"
          :label="index === 0 ? 'Mukdary' : ''"
          :label-col="{ span: 24 }"
          :wrapper-col="{ span: 24 }"
          label-align="left"
          :validateStatus="formStatus(`items.${index}.count`)"
        >
          <a-input v-model.number="item.count" :addon-after="item.unit" />
        </a-form-item> -->
      </div>
    </a-form>
    <div class="border-t pt-4 border-gray-300 text-right">
      <span class="font-bold"
        >{{ trans("Total") }}: {{ selectedItems.length }} x {{ price }}
        {{ currency }} =</span
      >
      <span class="font-bold text-primary"
        >{{ totalPrice }} {{ currency }}</span
      >
    </div>
    <div slot="footer" class="flex items-center justify-end">
      <google-re-captcha-v3
        ref="captcha"
        v-model="form.captcha"
        inline
        action="create_request"
      />
      <a-button
        type="primary"
        class="ml-5"
        size="large"
        @click="submit"
        :loading="form.processing"
        >{{ trans("Create") }}</a-button
      >
    </div>
  </a-modal>
</template>

<script>
import GoogleReCaptchaV3 from "./GoogleReCaptchaV3";
export default {
  props: {
    selectedItems: { type: Array, default: () => [] },
  },

  components: {
    GoogleReCaptchaV3,
  },

  data() {
    return {
      visible: true,
      type: "local",
      form: this.$inertia.form({
        name: undefined,
        phone: undefined,
        email: undefined,
        captcha: undefined,
        items: [
          {
            id: undefined,
            title: undefined,
            // count: undefined,
          },
        ],
      }),
    };
  },

  computed: {
    currency() {
      return this.type === "local" ? "TMT" : "USD";
    },

    price() {
      const { local_price, int_price } = this.$page.props;
      return this.type === "local" ? local_price : int_price;
    },

    totalPrice() {
      return this.selectedItems.length * this.price;
    },
  },

  mounted() {
    this.fill();
  },

  beforeDestroy() {
    window.location.reload();
  },

  methods: {
    fill() {
      this.form = {
        ...this.form,
        items: this.selectedItems.map((item) => ({
          ...item,
          // count: undefined,
        })),
      };
    },

    submit() {
      this.form.post(this.route('requests.store'), {
        onSuccess: () => {
          this.visible = false;
          this.$message.success(this.trans("Success message"));
          this.$refs.captcha.execute();
        },
        onError: (error) => {
          if (error && error.captcha) {
            this.$message.error('Invalid captcha');
          }
          this.$refs.captcha.execute();
        },
      });
    },
  },
};
</script>