<template>
    <div class="custom-fade modal fade" :id="modalId" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="alertModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content rounded-4">
          <div class="modal-header border-0">
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body text-center">
            <div class="mb-4">
              <i class="fa-regular fa-circle-question fa-2x p-4 text-warning rounded-circle bg-body-tertiary"></i>
            </div>
            <h4 class="mb-3">សូមផ្ទៀងផ្ទាត់ការបង់ប្រាក់!</h4>
            <p><strong>អតិថិជនឈ្មោះ: {{client_name}}</strong></p>
            <p class="mb-5">តើលោកអ្នកចង់ធ្វើការបង់ប្រាក់ចំនួន <strong>{{ currency }}{{ amount_pay | numberFomartValue}}</strong>?</p>
            <div class="d-flex justify-content-center">
              <button type="button" class="btn w-100 btn-danger mx-1" data-bs-dismiss="modal">{{ $t('No') }}</button>
              <button type="button" :disabled="isSubmitting || params.busy" class="btn w-100 btn-primary mx-1" @click="submitAction">{{ $t('Yes') }}</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    props: {
      modalId: {
        type: String,
        required: true
      },
      amount_pay:0,
      currency:'',
      client_name:'',
    },
    data() {
      return {
        isSubmitting: false,
        params: {}
      };
    },
    methods: {
      submitAction() {
        if (this.isSubmitting) return;

        this.isSubmitting = true;

        this.$emit('submit');

        setTimeout(() => {
          this.isSubmitting = false;
        }, 2000); 
      },
    }
  }
</script>
  
<style scoped>
  .custom-fade.modal.fade .modal-dialog {
    transition: transform 0.15s ease-out, opacity 0.15s ease-out;
    transform: scale(0.7);
    opacity: 0;
  }
  .custom-fade.modal.fade.show .modal-dialog {
    transform: scale(1);
    opacity: 1;
  }
</style>