payment/payment_headend/index.js

document.addEventListener('DOMContentLoaded', () => {
    const options = document.querySelectorAll('.el-radio');
    options.forEach(option => {
        option.addEventListener('click', selectAmount);
    });

    function selectAmount(event) {
        const options = document.querySelectorAll('.el-radio.is-checked');
        options.forEach(option => {
            option.classList.remove('is-checked');
            option.querySelector('.el-radio__input').classList.remove('is-checked');
        });

        event.currentTarget.classList.add('is-checked');
        event.currentTarget.querySelector('.el-radio__input').classList.add('is-checked');

        // 获取选中的输入值并更新到 id="amount" 的元素
        document.getElementById('amount').value = event.currentTarget.querySelector('input').value; // 显示金额
    }

    // Modal functionality
    const closeAddress = document.getElementById('closeAddress');
    closeAddress.addEventListener('click', () => {
        document.getElementById('wallet').focus()
        document.getElementById('addressModal').style.display = 'none';
    });
    const closePayment = document.getElementById('closePayment');
    closePayment.addEventListener('click', () => {
        document.getElementById('paymentModal').style.display = 'none';
    });
    const completeBtn = document.getElementById('completeBtn');
    completeBtn.addEventListener('click', () => {
        closePaymentModal();
        finishOrder();
    });

    // Close modal when clicking outside the modal content
    document.getElementById('addressModal').addEventListener('click', closeModalOnClickOutside);
    document.getElementById('paymentModal').addEventListener('click', closeModalOnClickOutside);
});

function finishOrder() {
    const orderID = localStorage.getItem('currentOrderID'); // 获取订单 ID
    if (!orderID) {
        console.error('Order ID is not available.');
        handleError('Order ID is not available. Please create an order first.');
        return;
    }

    const url = `/finishOrder?orderID=${orderID}`;

    return fetch(url, {
        method: 'GET'
    })
        .then(response => {
            if (!response.ok) {
                throw new Error(`Network response was not ok: ${response.statusText}`);
            }
            return response.json();
        })
        .then(data => {
            console.log('Response data:', data);
            return data;
        })
        .catch(error => {
            console.error('There was a problem with the GET request:', error);
            throw error;
        });
}


function handleOrderSuccess(orderId, amount, orderCreateTimestamp, orderExpirationTime) {
    openPaymentModal(orderId, amount, orderCreateTimestamp, orderExpirationTime);
}

// Function to show the modal with addresses
function handleMultipleAddresses(walletAddresses) {
    // Find the modal and the modal body
    const addressList = document.getElementById('addressList');
    addressList.innerHTML = ''; // 清空当前内容

    // Create a list of wallet addresses
    walletAddresses.forEach(address => {
        const div = document.createElement('div');
        div.className = 'address-option';
        div.textContent = address;
        div.addEventListener('click', () => {
            document.getElementById('wallet').value = address;
            closeAddressModal();
            handleSubmit();
        });
        addressList.appendChild(div);
    });

    openAddressModal();
}

// Function to show the modal with an image
function showImageModal(imageUrl, walletAddress) {
    // Find the modal and modal body
    const modal = document.getElementById('modal');
    const modalBody = document.getElementById('modalBody');

    // Clear any previous content
    modalBody.innerHTML = '';

    // Create an image element
    const imageElement = document.createElement('img');
    imageElement.src = imageUrl;
    imageElement.alt = 'Image';
    imageElement.style.maxWidth = '100%';
    imageElement.style.maxHeight = '80vh'; // Limit the height for better UX

    // Create a div to display the wallet address
    const addressDiv = document.createElement('div');
    addressDiv.textContent = walletAddress;
    addressDiv.style.marginTop = '10px';
    addressDiv.style.fontSize = '16px';
    addressDiv.style.color = '#333';

    // Add image and address to modal body
    modalBody.appendChild(imageElement);
    modalBody.appendChild(addressDiv);

    openAddressModal();
}

function openPaymentModal(orderId, amount, orderCreateTimestamp, orderExpirationTime) {
    document.getElementById('paymentModal').style.display = 'flex';

    // 显示订单ID
    const orderInfoElement = document.getElementById('orderInfo');
    orderInfoElement.innerHTML = `<p>Order ID: ${orderId}</p>`;

    // 计算剩余支付时间 (以秒为单位)
    const expirationTime = orderCreateTimestamp + orderExpirationTime; // 10 分钟后的时间戳（单位：毫秒）
    const updateRemainingTime = () => {
        const now = new Date().getTime();
        const remainingTime = Math.max(0, expirationTime - now);
        const minutes = Math.floor((remainingTime / 1000 / 60) % 60);
        const seconds = Math.floor((remainingTime / 1000) % 60);

        // 更新剩余时间
        orderInfoElement.innerHTML = `<p>Order ID: ${orderId}, You need to pay <span style="color: red">${amount}</span>USDT.</p>`;
        orderInfoElement.innerHTML += `<p style="color: red">Time remaining: ${minutes} minutes ${seconds} seconds</p>`;

        // 如果时间到了，停止更新
        if (remainingTime <= 0) {
            clearInterval(interval);
            orderInfoElement.innerHTML = `<p style="color: red">Order ${orderId} has expired, please place a new order.</p>`;
        }
    };

    // 开始倒计时
    const interval = setInterval(updateRemainingTime, 1000);
    updateRemainingTime(); // 立即更新一次
}


function closePaymentModal() {
    document.getElementById('paymentModal').style.display = 'none';
}

function openAddressModal() {
    document.getElementById('addressModal').style.display = 'flex';
}

function closeAddressModal() {
    document.getElementById('addressModal').style.display = 'none';
}

function closeModalOnClickOutside(event) {
    const modals = document.querySelectorAll('.modal');
    modals.forEach(modal => {
        const modalContent = modal.querySelector('.modal-content');
        if (!modalContent.contains(event.target) && modal.style.display === 'flex') {
            modal.style.display = 'none';
        }
    });
}

function promptUserForPaymentMethod() {
    handleError('Unsupported payment method. Currently, only USDT payments are supported.');
}

function handleError(message) {
    const errorDiv = document.getElementById('error');
    errorDiv.innerText = `错误：${message}`;
    errorDiv.classList.remove('hidden');
    document.getElementById('message').classList.add('hidden');
    document.getElementById('addresses').classList.add('hidden');
}

function promptUserForAddress() {
    const address = prompt('No payment address associated with this phone number was found. Please enter a payment address or provide additional information.');
    if (address && address.trim() !== "") {
        createOrder(null, null, address.trim());
    } else {
        handleError('No payment address associated with you was found. Please provide a payment address.');
    }
}

async function createOrder(amount, name, phone, email, wallet_address, paymentMethod) {
    try {
        const response = await fetch('http://127.0.0.1:5000/createOrder', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({amount, name, phone, email, wallet_address, paymentMethod})
        });

        const data = await response.json(); // 确保正确解析响应

        if (response.ok) {
            if (data.orderID) {
                localStorage.setItem('currentOrderID', data.orderID); // 保存订单 ID 到 localStorage
                handleOrderSuccess(data.orderID, amount, data.orderCreateTimestamp, data.orderExpirationTime);
            } else if (data.wallet_addresses && Array.isArray(data.wallet_addresses)) {
                handleMultipleAddresses(data.wallet_addresses);
            }
        } else {
            if (data.message === "wrong payment method") {
                promptUserForPaymentMethod();
            } else if (data.message === "empty wallet address") {
                promptUserForAddress();
            } else {
                handleError(data.message || 'Unknown error.');
            }
        }
    } catch (error) {
        console.error('Network or server error:', error);
        handleError('Network or server error. Please try again later.');
    }
}

// 绑定表单提交事件
function handleSubmit() {
    const amount = document.getElementById('amount').value.trim();
    const name = document.getElementById('nickname').value.trim();
    const phone = document.getElementById('phone').value.trim();
    const email = document.getElementById('email').value.trim();
    const payment_address = document.getElementById('wallet').value.trim();

    // 清除之前的消息
    // document.getElementById('message').classList.add('hidden');

    // 调用createOrder函数
    createOrder(amount, name, phone, email, payment_address, "USDT");
}