new Vue({
  el: "#app",
  data: {
    url: '/xuly_dulieu/xuly_napthe.php',
    form: {
      tentk: '',
      loaithe: '',
      menhgia: '',
      seri: '',
      mathe: '',
      recaptcha_token: '',
    },
    user: null,
    showUser: false,
    msgError: null,
    msgButton: false,
    status: false,
    error: false, 
    showNotification: false,  // Điều khiển việc hiển thị thông báo
    notificationType: '',     // Lưu loại thông báo ('error' hoặc 'success')
    notificationMessage: '',  // Nội dung thông báo
    notificationTimeout: 5000 // Thời gian ẩn thông báo (3 giây)
  },

  mounted() {
    this.user = localStorage.getItem('user');
  },

  methods: {
    loadRecaptchaScript() {
      const script = document.createElement('script');
      script.src = 'https://www.google.com/recaptcha/api.js?render=6LdrW5EqAAAAALnZ5Jg6-I6vSTFBlsGRF0rht5aQ';
      document.head.appendChild(script);
    },
    
    async getRecaptchaToken() {
      return new Promise((resolve, reject) => {
        grecaptcha.ready(() => {
          grecaptcha.execute('6LdrW5EqAAAAALnZ5Jg6-I6vSTFBlsGRF0rht5aQ', { action: 'submit' })
            .then(token => {
              resolve(token);
            })
            .catch(error => {
              reject(error);
            });
        });
      });
    },

async napthe() {
  try {
    // Kiểm tra điều kiện tối thiểu cho 'mathe' và 'seri'
    if (this.form.mathe.length < 8) {
      this.notificationMessage = "Mã thẻ phải có ít nhất 8 ký tự.";
      this.notificationType = 'error';
      this.showNotification = true;
      return; // Dừng nếu không thỏa mãn
    }

    if (this.form.seri.length < 8) {
      this.notificationMessage = "Số seri phải có ít nhất 8 ký tự.";
      this.notificationType = 'error';
      this.showNotification = true;
      return; // Dừng nếu không thỏa mãn
    }

    // Gửi dữ liệu từ form lên server PHP
    let data = new FormData();
    data.append('loaithe', this.form.loaithe);
    data.append('menhgia', this.form.menhgia);
    data.append('seri', this.form.seri);
    data.append('mathe', this.form.mathe);
    // Thêm token recaptcha nếu có
    data.append('recaptcha_token', this.form.recaptcha_token);

    // Gửi yêu cầu POST đến server PHP
    axios.post(this.url, data)
      .then(response => {
        let data = response.data;
        this.msgButton = false;

        if (data.check === "error") {
          this.notificationMessage = data.code;
          this.notificationType = 'error';
          this.showNotification = true;

          // Ẩn thông báo sau một khoảng thời gian
          setTimeout(() => {
            this.showNotification = false;
            this.reloadPage();  // Tải lại trang sau khi ẩn thông báo
          }, this.notificationTimeout);
        } else {
          this.notificationMessage = data.code;
          this.notificationType = 'error';
          this.showNotification = true;

          // Ẩn thông báo sau một khoảng thời gian
          setTimeout(() => {
            this.showNotification = false;
            this.reloadPage();  // Tải lại trang sau khi ẩn thông báo
          }, this.notificationTimeout);
        }
      })
      .catch(error => {
        console.error(error);
        this.notificationMessage = "Có lỗi xảy ra, vui lòng thử lại.";
        this.notificationType = 'error';
        this.showNotification = true;

        // Ẩn thông báo sau một khoảng thời gian
        setTimeout(() => {
          this.showNotification = false;
          this.reloadPage();  // Tải lại trang sau khi ẩn thông báo lỗi
        }, this.notificationTimeout);
      });
  } catch (error) {
    console.error(error);
    this.notificationMessage = "Lỗi khi xử lý yêu cầu. Vui lòng thử lại.";
    this.notificationType = 'error';
    this.showNotification = true;

    // Ẩn thông báo sau một khoảng thời gian
    setTimeout(() => {
      this.showNotification = false;
      this.reloadPage();  // Tải lại trang sau khi ẩn thông báo lỗi
    }, this.notificationTimeout);
  }
},



    // Hàm hiển thị popup thông báo lỗi
    showErrorPopup(message) {
      alert(message);
      this.reloadPage();  // Reload the page after showing the error message
    },

    // Hàm hiển thị popup thông báo thành công
    showSuccessPopup(message) {
      alert(message);
      this.reloadPage();  // Reload the page after showing the success message
    },

    // Reload the page
    reloadPage() {
      setTimeout(() => {
        location.reload();  // Reload the page after a short delay (to allow user to see the message)
      }, 100);  // Delay of 2 seconds before reloading
    },

    modal() {
      if (this.user === null) {
        this.msgButton = false;
        this.msgError = 'Chưa nhập ID Game';
        this.status = false;
      } else {
        $("#thanhtoan").modal('show');
      }
    },

    addUser() {
      if (this.user === null) {
        this.showUser = null;
      } else {
        localStorage.setItem('user', this.user);
        this.user = localStorage.getItem('user');
        this.form.tentk = this.user;
        console.log(this.form.tentk);
        if (this.showUser === false) {
          this.showUser = true;
        } else {
          this.showUser = false;
        }
      }
    },

    addLoaithe(e) {
      this.form.loaithe = e;
      console.log(this.form.loaithe);
    },

    addMenhgia(e) {
      this.form.menhgia = e;
      console.log(this.form.menhgia);
    },

    formatPrice(value) {
      let val = (value / 1).toFixed(0).replace(',', '.');
      return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    }
  }
});