update database
This commit is contained in:
Phuoc Nguyen
733
html/payment-detail.html
Normal file
733
html/payment-detail.html
Normal file
@@ -0,0 +1,733 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="vi">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Chi tiết Hóa đơn - EuroTile Worker</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="assets/css/style.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<style>
|
||||
.detail-container {
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
background: #f8fafc;
|
||||
min-height: calc(100vh - 120px);
|
||||
}
|
||||
|
||||
.detail-card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.invoice-header {
|
||||
text-align: center;
|
||||
margin-bottom: 24px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.invoice-id {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.invoice-date {
|
||||
color: #6b7280;
|
||||
font-size: 14px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
padding: 8px 16px;
|
||||
border-radius: 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.status-overdue {
|
||||
background: #fee2e2;
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.status-unpaid {
|
||||
background: #fef3c7;
|
||||
color: #d97706;
|
||||
}
|
||||
|
||||
.status-paid {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
}
|
||||
|
||||
.status-partial {
|
||||
background: #e0e7ff;
|
||||
color: #3730a3;
|
||||
}
|
||||
|
||||
.payment-summary {
|
||||
background: #f8fafc;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.summary-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.summary-row:last-child {
|
||||
margin-bottom: 0;
|
||||
padding-top: 12px;
|
||||
border-top: 2px solid #e5e7eb;
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.remaining-amount {
|
||||
color: #dc2626;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.product-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: 16px;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: #f3f4f6;
|
||||
border-radius: 8px;
|
||||
margin-right: 16px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.product-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
margin-bottom: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.product-sku {
|
||||
font-size: 12px;
|
||||
color: #6b7280;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.product-details {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.product-quantity {
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.product-price {
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.payment-history {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.history-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.history-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 16px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.history-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.history-title {
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.history-details {
|
||||
font-size: 12px;
|
||||
color: #6b7280;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.history-date {
|
||||
font-size: 12px;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.history-amount {
|
||||
text-align: right;
|
||||
font-weight: 600;
|
||||
color: #065f46;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
flex: 1;
|
||||
padding: 14px 20px;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
border: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: white;
|
||||
color: #374151;
|
||||
border: 2px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
border-color: #2563eb;
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
.btn-download {
|
||||
background: #f3f4f6;
|
||||
color: #374151;
|
||||
border: 1px solid #d1d5db;
|
||||
}
|
||||
|
||||
.btn-download:hover {
|
||||
background: #e5e7eb;
|
||||
}
|
||||
|
||||
.download-section {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-history {
|
||||
text-align: center;
|
||||
padding: 40px 20px;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.empty-history i {
|
||||
font-size: 32px;
|
||||
margin-bottom: 12px;
|
||||
color: #d1d5db;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.detail-container {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.detail-card {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.product-details {
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.summary-row {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.summary-row:last-child {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page-wrapper">
|
||||
<!-- Header -->
|
||||
<div class="header">
|
||||
<a href="payments.html" class="back-button">
|
||||
<i class="fas fa-arrow-left"></i>
|
||||
</a>
|
||||
<h1 class="header-title">Chi tiết Hóa đơn</h1>
|
||||
<button class="icon-button" onclick="shareInvoice()">
|
||||
<i class="fas fa-share-alt"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="detail-container">
|
||||
<!-- Invoice Header -->
|
||||
<div class="detail-card">
|
||||
<div class="invoice-header">
|
||||
<h2 class="invoice-id" id="invoice-id">#INV001</h2>
|
||||
<div class="invoice-date" id="invoice-date">Đơn hàng: #SO001 | Ngày đặt: 15/10/2024</div>
|
||||
<span class="status-badge" id="status-badge">Quá hạn</span>
|
||||
</div>
|
||||
|
||||
<!-- Payment Summary -->
|
||||
<div class="payment-summary">
|
||||
<div class="summary-row">
|
||||
<span>Tổng tiền hóa đơn:</span>
|
||||
<span id="total-amount">85.000.000đ</span>
|
||||
</div>
|
||||
<div class="summary-row">
|
||||
<span>Đã thanh toán:</span>
|
||||
<span id="paid-amount">25.000.000đ</span>
|
||||
</div>
|
||||
<div class="summary-row">
|
||||
<span>Còn lại:</span>
|
||||
<span class="remaining-amount" id="remaining-amount">60.000.000đ</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Customer Info -->
|
||||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px;">
|
||||
<div>
|
||||
<div style="font-size: 12px; color: #6b7280; margin-bottom: 4px;">Ngày đặt hàng</div>
|
||||
<div style="font-weight: 600;" id="order-date">15/10/2024</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="font-size: 12px; color: #6b7280; margin-bottom: 4px;">Hạn thanh toán</div>
|
||||
<div style="font-weight: 600; color: #dc2626;" id="due-date">30/10/2024</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="padding: 16px; background: #f8fafc; border-radius: 8px;">
|
||||
<div style="font-size: 14px; font-weight: 600; margin-bottom: 8px;">Thông tin khách hàng</div>
|
||||
<div style="font-size: 14px; color: #4b5563;" id="customer-info">
|
||||
Công ty TNHH Xây Dựng Minh An<br>
|
||||
Địa chỉ: 123 Nguyễn Văn Linh, Quận 7, TP.HCM<br>
|
||||
SĐT: 0901234567 | Email: contact@minhan.com
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Product Details -->
|
||||
<div class="detail-card">
|
||||
<h3 class="section-title">
|
||||
<i class="fas fa-box" style="color: #2563eb;"></i>
|
||||
Danh sách sản phẩm
|
||||
</h3>
|
||||
|
||||
<div class="products-list" id="products-list">
|
||||
<div class="product-item">
|
||||
<div class="product-image">
|
||||
<i class="fas fa-image"></i>
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<div class="product-name">Gạch Granite Eurotile Premium 60x60</div>
|
||||
<div class="product-sku">SKU: GT-PR-6060-001</div>
|
||||
<div class="product-details">
|
||||
<span class="product-quantity">Số lượng: 150 m²</span>
|
||||
<span class="product-price">450.000đ/m²</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="product-item">
|
||||
<div class="product-image">
|
||||
<i class="fas fa-image"></i>
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<div class="product-name">Gạch Ceramic Cao Cấp 30x60</div>
|
||||
<div class="product-sku">SKU: CE-CC-3060-002</div>
|
||||
<div class="product-details">
|
||||
<span class="product-quantity">Số lượng: 80 m²</span>
|
||||
<span class="product-price">280.000đ/m²</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="product-item">
|
||||
<div class="product-image">
|
||||
<i class="fas fa-image"></i>
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<div class="product-name">Keo dán gạch chuyên dụng</div>
|
||||
<div class="product-sku">SKU: KD-CD-001</div>
|
||||
<div class="product-details">
|
||||
<span class="product-quantity">Số lượng: 20 bao</span>
|
||||
<span class="product-price">85.000đ/bao</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Payment History -->
|
||||
<div class="detail-card">
|
||||
<h3 class="section-title">
|
||||
<i class="fas fa-history" style="color: #2563eb;"></i>
|
||||
Lịch sử thanh toán
|
||||
</h3>
|
||||
|
||||
<div class="payment-history" id="payment-history">
|
||||
<div class="history-item">
|
||||
<div class="history-icon">
|
||||
<i class="fas fa-check"></i>
|
||||
</div>
|
||||
<div class="history-content">
|
||||
<div class="history-title">Thanh toán lần 1</div>
|
||||
<div class="history-details">Chuyển khoản | Ref: TK20241020001</div>
|
||||
<div class="history-date">20/10/2024 - 14:30</div>
|
||||
</div>
|
||||
<div class="history-amount">25.000.000đ</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Download Section -->
|
||||
<div class="detail-card download-section">
|
||||
<h3 class="section-title">
|
||||
<i class="fas fa-download" style="color: #2563eb;"></i>
|
||||
Tải chứng từ
|
||||
</h3>
|
||||
|
||||
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px;">
|
||||
<button class="btn btn-download" onclick="downloadPDF('invoice')">
|
||||
<i class="fas fa-file-pdf"></i>
|
||||
Hóa đơn PDF
|
||||
</button>
|
||||
<button class="btn btn-download" onclick="downloadPDF('receipt')">
|
||||
<i class="fas fa-receipt"></i>
|
||||
Phiếu thu PDF
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="action-buttons">
|
||||
<button class="btn btn-secondary" onclick="contactSupport()">
|
||||
<i class="fas fa-comments"></i>
|
||||
Liên hệ hỗ trợ
|
||||
</button>
|
||||
<button class="btn btn-primary" onclick="makePayment()" id="pay-button">
|
||||
<i class="fas fa-credit-card"></i>
|
||||
Thanh toán
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Invoice data mapping
|
||||
const invoiceDatabase = {
|
||||
'INV001': {
|
||||
id: 'INV001',
|
||||
orderId: 'SO001',
|
||||
orderDate: '15/10/2024',
|
||||
dueDate: '30/10/2024',
|
||||
status: 'overdue',
|
||||
statusText: 'Quá hạn',
|
||||
totalAmount: 85000000,
|
||||
paidAmount: 25000000,
|
||||
remainingAmount: 60000000,
|
||||
customer: {
|
||||
name: 'Công ty TNHH Xây Dựng Minh An',
|
||||
address: '123 Nguyễn Văn Linh, Quận 7, TP.HCM',
|
||||
phone: '0901234567',
|
||||
email: 'contact@minhan.com'
|
||||
},
|
||||
products: [
|
||||
{
|
||||
name: 'Gạch Granite Eurotile Premium 60x60',
|
||||
sku: 'GT-PR-6060-001',
|
||||
quantity: 150,
|
||||
unit: 'm²',
|
||||
price: 450000
|
||||
},
|
||||
{
|
||||
name: 'Gạch Ceramic Cao Cấp 30x60',
|
||||
sku: 'CE-CC-3060-002',
|
||||
quantity: 80,
|
||||
unit: 'm²',
|
||||
price: 280000
|
||||
},
|
||||
{
|
||||
name: 'Keo dán gạch chuyên dụng',
|
||||
sku: 'KD-CD-001',
|
||||
quantity: 20,
|
||||
unit: 'bao',
|
||||
price: 85000
|
||||
}
|
||||
],
|
||||
paymentHistory: [
|
||||
{
|
||||
date: '20/10/2024',
|
||||
time: '14:30',
|
||||
amount: 25000000,
|
||||
method: 'Chuyển khoản',
|
||||
reference: 'TK20241020001',
|
||||
title: 'Thanh toán lần 1'
|
||||
}
|
||||
]
|
||||
},
|
||||
'INV002': {
|
||||
id: 'INV002',
|
||||
orderId: 'SO002',
|
||||
orderDate: '25/10/2024',
|
||||
dueDate: '09/11/2024',
|
||||
status: 'unpaid',
|
||||
statusText: 'Chưa thanh toán',
|
||||
totalAmount: 42500000,
|
||||
paidAmount: 0,
|
||||
remainingAmount: 42500000,
|
||||
customer: {
|
||||
name: 'Anh Nguyễn Văn Minh',
|
||||
address: '456 Lê Văn Việt, Quận 9, TP.HCM',
|
||||
phone: '0987654321',
|
||||
email: 'minh.nguyen@email.com'
|
||||
},
|
||||
paymentHistory: []
|
||||
}
|
||||
};
|
||||
|
||||
// Initialize page
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const invoiceId = urlParams.get('id') || 'INV001';
|
||||
|
||||
loadInvoiceDetail(invoiceId);
|
||||
});
|
||||
|
||||
function loadInvoiceDetail(invoiceId) {
|
||||
const invoice = invoiceDatabase[invoiceId];
|
||||
if (!invoice) return;
|
||||
|
||||
// Update basic info
|
||||
document.getElementById('invoice-id').textContent = '#' + invoice.id;
|
||||
document.getElementById('invoice-date').textContent = `Đơn hàng: #${invoice.orderId} | Ngày đặt: ${invoice.orderDate}`;
|
||||
document.getElementById('order-date').textContent = invoice.orderDate;
|
||||
document.getElementById('due-date').textContent = invoice.dueDate;
|
||||
|
||||
// Update amounts
|
||||
document.getElementById('total-amount').textContent = formatCurrency(invoice.totalAmount);
|
||||
document.getElementById('paid-amount').textContent = formatCurrency(invoice.paidAmount);
|
||||
document.getElementById('remaining-amount').textContent = formatCurrency(invoice.remainingAmount);
|
||||
|
||||
// Update status
|
||||
const statusBadge = document.getElementById('status-badge');
|
||||
statusBadge.textContent = invoice.statusText;
|
||||
statusBadge.className = `status-badge status-${invoice.status}`;
|
||||
|
||||
// Update customer info
|
||||
const customerInfo = document.getElementById('customer-info');
|
||||
customerInfo.innerHTML = `
|
||||
${invoice.customer.name}<br>
|
||||
Địa chỉ: ${invoice.customer.address}<br>
|
||||
SĐT: ${invoice.customer.phone} | Email: ${invoice.customer.email}
|
||||
`;
|
||||
|
||||
// Update products
|
||||
if (invoice.products) {
|
||||
updateProductsList(invoice.products);
|
||||
}
|
||||
|
||||
// Update payment history
|
||||
updatePaymentHistory(invoice.paymentHistory);
|
||||
|
||||
// Update pay button
|
||||
const payButton = document.getElementById('pay-button');
|
||||
if (invoice.remainingAmount <= 0) {
|
||||
payButton.innerHTML = '<i class="fas fa-check-circle"></i> Đã hoàn tất';
|
||||
payButton.className = 'btn btn-success';
|
||||
payButton.style.background = '#10b981';
|
||||
payButton.disabled = true;
|
||||
}
|
||||
|
||||
// Update page title
|
||||
document.title = `${invoice.id} - Chi tiết Hóa đơn`;
|
||||
}
|
||||
|
||||
function updateProductsList(products) {
|
||||
const productsList = document.getElementById('products-list');
|
||||
|
||||
if (!products || products.length === 0) {
|
||||
productsList.innerHTML = '<p style="text-align: center; color: #6b7280;">Không có sản phẩm</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
productsList.innerHTML = products.map(product => `
|
||||
<div class="product-item">
|
||||
<div class="product-image">
|
||||
<i class="fas fa-image"></i>
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<div class="product-name">${product.name}</div>
|
||||
<div class="product-sku">SKU: ${product.sku}</div>
|
||||
<div class="product-details">
|
||||
<span class="product-quantity">Số lượng: ${product.quantity} ${product.unit}</span>
|
||||
<span class="product-price">${formatCurrency(product.price)}/${product.unit}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
function updatePaymentHistory(history) {
|
||||
const historyContainer = document.getElementById('payment-history');
|
||||
|
||||
if (!history || history.length === 0) {
|
||||
historyContainer.innerHTML = `
|
||||
<div class="empty-history">
|
||||
<i class="fas fa-receipt"></i>
|
||||
<h4>Chưa có lịch sử thanh toán</h4>
|
||||
<p>Hóa đơn này chưa được thanh toán</p>
|
||||
</div>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
historyContainer.innerHTML = history.map((payment, index) => `
|
||||
<div class="history-item">
|
||||
<div class="history-icon">
|
||||
<i class="fas fa-check"></i>
|
||||
</div>
|
||||
<div class="history-content">
|
||||
<div class="history-title">${payment.title}</div>
|
||||
<div class="history-details">${payment.method} | Ref: ${payment.reference}</div>
|
||||
<div class="history-date">${payment.date} - ${payment.time}</div>
|
||||
</div>
|
||||
<div class="history-amount">${formatCurrency(payment.amount)}</div>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
function makePayment() {
|
||||
// In real app, open payment modal or navigate to payment gateway
|
||||
alert('Mở cổng thanh toán...\n\nTrong ứng dụng thực tế, đây sẽ chuyển đến trang thanh toán hoặc mở ví điện tử.');
|
||||
}
|
||||
|
||||
function contactSupport() {
|
||||
// Navigate to support chat
|
||||
if (confirm('Liên hệ hỗ trợ về hóa đơn này?')) {
|
||||
window.location.href = 'chat-list.html';
|
||||
}
|
||||
}
|
||||
|
||||
function downloadPDF(type) {
|
||||
const invoiceId = document.getElementById('invoice-id').textContent.replace('#', '');
|
||||
|
||||
// Simulate PDF download
|
||||
const filename = type === 'invoice' ? `Hoa-don-${invoiceId}.pdf` : `Phieu-thu-${invoiceId}.pdf`;
|
||||
|
||||
// In real app, this would trigger actual PDF download
|
||||
alert(`Đang tải ${filename}...\n\nTrong ứng dụng thực tế, file PDF sẽ được tải về thiết bị.`);
|
||||
}
|
||||
|
||||
function shareInvoice() {
|
||||
const invoiceId = document.getElementById('invoice-id').textContent;
|
||||
|
||||
if (navigator.share) {
|
||||
navigator.share({
|
||||
title: `Hóa đơn ${invoiceId}`,
|
||||
text: `Chi tiết hóa đơn ${invoiceId}`,
|
||||
url: window.location.href
|
||||
}).catch(console.error);
|
||||
} else {
|
||||
// Fallback: copy URL to clipboard
|
||||
navigator.clipboard.writeText(window.location.href).then(() => {
|
||||
showToast('Đã sao chép link chia sẻ!');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function showToast(message) {
|
||||
const toast = document.createElement('div');
|
||||
toast.className = 'fixed top-20 left-1/2 transform -translate-x-1/2 bg-green-500 text-white px-4 py-2 rounded-lg z-50 transition-all duration-300';
|
||||
toast.textContent = message;
|
||||
document.body.appendChild(toast);
|
||||
|
||||
setTimeout(() => {
|
||||
toast.style.opacity = '0';
|
||||
setTimeout(() => {
|
||||
if (document.body.contains(toast)) {
|
||||
document.body.removeChild(toast);
|
||||
}
|
||||
}, 300);
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
function formatCurrency(amount) {
|
||||
return new Intl.NumberFormat('vi-VN', {
|
||||
style: 'currency',
|
||||
currency: 'VND',
|
||||
minimumFractionDigits: 0
|
||||
}).format(amount);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user