update order detail
This commit is contained in:
Phuoc Nguyen
@@ -16,14 +16,16 @@
|
||||
<i class="fas fa-arrow-left"></i>
|
||||
</a>
|
||||
<h1 class="header-title">Chi tiết đơn hàng</h1>
|
||||
<div class="header-actions">
|
||||
<div style="width: 32px;"></div>
|
||||
|
||||
<!--<div class="header-actions">
|
||||
<button class="header-action-btn" onclick="shareOrder()">
|
||||
<i class="fas fa-share"></i>
|
||||
</button>
|
||||
<button class="header-action-btn" onclick="printOrder()">
|
||||
<i class="fas fa-print"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>-->
|
||||
</div>
|
||||
|
||||
<div class="order-detail-content" style="padding-bottom: 0px;">
|
||||
@@ -46,22 +48,33 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item completed">
|
||||
<div class="timeline-icon">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
|
||||
</div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-title">Xác nhận đơn hàng</div>
|
||||
<div class="timeline-date">03/08/2023 - 10:15</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item active">
|
||||
<div class="timeline-icon">
|
||||
<i class="fas fa-cog fa-spin"></i>
|
||||
</div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-title">Đã xác nhận đơn hàng</div>
|
||||
<div class="timeline-date">03/08/2023 - 10:15 (Đang xử lý)</div>
|
||||
<div class="timeline-title">Xử lý</div>
|
||||
<div class="timeline-date">Chuẩn bị hàng và vận chuyển</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item pending">
|
||||
<div class="timeline-icon">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
<i class="fas fa-box-open"></i>
|
||||
</div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-title">Đã hoàn thành</div>
|
||||
<div class="timeline-title">Hoàn thành</div>
|
||||
<div class="timeline-date">Dự kiến: 07/08/2023</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -69,11 +82,11 @@
|
||||
</div>
|
||||
|
||||
<!-- Delivery Information Card -->
|
||||
<div class="delivery-info-card">
|
||||
<!--<div class="delivery-info-card">
|
||||
<h3><i class="fas fa-shipping-fast"></i> Thông tin giao hàng</h3>
|
||||
|
||||
<div class="delivery-details">
|
||||
<!--<div class="delivery-method">
|
||||
<div class="delivery-method">
|
||||
<div class="delivery-method-icon">
|
||||
<i class="fas fa-truck"></i>
|
||||
</div>
|
||||
@@ -81,16 +94,16 @@
|
||||
<div class="method-name">Giao hàng tiêu chuẩn</div>
|
||||
<div class="method-description">Giao trong 3-5 ngày làm việc</div>
|
||||
</div>
|
||||
</div>-->
|
||||
</div>
|
||||
|
||||
<div class="delivery-dates">
|
||||
<!--<div class="date-item">
|
||||
<div class="date-item">
|
||||
<div class="date-label">
|
||||
<i class="fas fa-calendar-alt"></i>
|
||||
Ngày xuất kho
|
||||
</div>
|
||||
<div class="date-value confirmed">05/08/2023</div>
|
||||
</div>-->
|
||||
</div>
|
||||
|
||||
<div class="date-item">
|
||||
<div class="date-label">
|
||||
@@ -120,55 +133,179 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>-->
|
||||
|
||||
<!-- Customer Information -->
|
||||
<div class="customer-info-card">
|
||||
<h3><i class="fas fa-user-circle"></i> Thông tin khách hàng</h3>
|
||||
<div class="customer-details">
|
||||
<div class="customer-row">
|
||||
<span class="customer-label">Tên khách hàng:</span>
|
||||
<span class="customer-value">Nguyễn Văn A</span>
|
||||
<!--<div class="customer-info-card">
|
||||
<h3><i class="fas fa-user-circle"></i> Thông tin khách hàng</h3>-->
|
||||
<div class="delivery-info-card">
|
||||
<h3><i class="fas fa-shipping-fast"></i> Thông tin giao hàng</h3>
|
||||
<!-- Address Section -->
|
||||
<!--<div class="mb-4">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">
|
||||
Địa chỉ nhận hàng
|
||||
</label>
|
||||
<a href="addresses.html" class="block border border-gray-200 rounded-lg p-3 hover:border-blue-500 hover:bg-blue-50 transition group">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<div class="font-semibold text-gray-900 mb-1">Hoàng Minh Hiệp</div>
|
||||
<div class="text-sm text-gray-600 mb-1">0347302911</div>
|
||||
<div class="text-sm text-gray-600">
|
||||
123 Đường Võ Văn Ngân, Phường Linh Chiểu,
|
||||
Thành phố Thủ Đức, TP.HCM
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>-->
|
||||
|
||||
|
||||
<!-- Address Section -->
|
||||
<div class="mb-4">
|
||||
|
||||
<!-- Label + Button -->
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<label class="block text-sm font-medium text-gray-700">
|
||||
Địa chỉ nhận hàng
|
||||
</label>
|
||||
|
||||
<a href="addresses.html"
|
||||
class="text-blue-600 text-sm font-medium hover:underline px-3 py-1 border rounded-lg hover:bg-blue-50">
|
||||
Cập nhật
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Address Box -->
|
||||
<a href="addresses.html"
|
||||
class="block border border-gray-200 rounded-lg p-3 hover:border-blue-500 hover:bg-blue-50 transition group">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<div class="font-semibold text-gray-900 mb-1">Hoàng Minh Hiệp</div>
|
||||
<div class="text-sm text-gray-600 mb-1">0347302911</div>
|
||||
<div class="text-sm text-gray-600">
|
||||
123 Đường Võ Văn Ngân, Phường Linh Chiểu,
|
||||
Thành phố Thủ Đức, TP.HCM
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!--<div class="customer-row">
|
||||
<span class="customer-label">Ngày lấy hàng:</span>
|
||||
<span class="customer-value">07/08/2025</span>
|
||||
</div>
|
||||
<div class="customer-row">
|
||||
<span class="customer-label">Số điện thoại:</span>
|
||||
<span class="customer-value">0901234567</span>
|
||||
</div>
|
||||
<div class="customer-row">
|
||||
<span class="customer-label">Email:</span>
|
||||
<span class="customer-value">nguyenvana@email.com</span>
|
||||
<span class="customer-label">Ghi chú:</span>
|
||||
<span class="customer-value">Giao hàng trong giờ hành chính. Vui lòng gọi trước 30 phút khi đến giao hàng.</span>
|
||||
</div>
|
||||
<div class="customer-row">
|
||||
<span class="customer-label">Loại khách hàng:</span>
|
||||
<span class="customer-badge vip">DIAMOND</span>
|
||||
</div>-->
|
||||
<!-- Pickup Date -->
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">
|
||||
Ngày lấy hàng
|
||||
</label>
|
||||
<div class="font-semibold text-gray-900 mb-1" style="font-weight: 450;">07/08/2025</div>
|
||||
|
||||
|
||||
</div>
|
||||
<!-- Pickup Date -->
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">
|
||||
Ghi chú
|
||||
</label>
|
||||
<div class="font-semibold text-gray-900 mb-1" style="font-weight: 450;">Giao hàng trong giờ hành chính. Vui lòng gọi trước 30 phút khi đến giao hàng</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- Invoice Information -->
|
||||
<div class="customer-info-card">
|
||||
<h3><i class="fas fa-file-invoice"></i> Thông tin hóa đơn</h3>
|
||||
<div class="customer-details">
|
||||
<!-- Title + Update Button -->
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<h3 class="flex items-center gap-2" style=" margin-bottom: 0px;">
|
||||
<i class="fas fa-file-invoice"></i>
|
||||
Thông tin hóa đơn
|
||||
</h3>
|
||||
|
||||
<a href="addresses.html"
|
||||
class="text-blue-600 text-sm font-medium hover:underline px-3 py-1 border rounded-lg hover:bg-blue-50">
|
||||
Cập nhật
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="border-t border-gray-200 pt-4">
|
||||
<a href="addresses.html" class="block border border-gray-200 rounded-lg p-3 hover:border-blue-500 hover:bg-blue-50 transition group">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<div class="font-semibold text-gray-900 mb-1">Công ty TNHH Xây dựng Minh Long</div>
|
||||
<div class="text-sm text-gray-600 mb-0.5">Mã số thuế: 0134000687</div>
|
||||
<div class="text-sm text-gray-600 mb-0.5">Số điện thoại: 0339797979</div>
|
||||
<div class="text-sm text-gray-600 mb-0.5">Email: minhlong.org@gmail.com</div>
|
||||
<div class="text-sm text-gray-600">
|
||||
Địa chỉ: 11 Đường Hoàng Hữu Nam, Phường Linh Chiểu,
|
||||
Thành phố Thủ Đức, TP.HCM
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!--<div class="customer-details">
|
||||
<div class="customer-row">
|
||||
<span class="customer-label">Tên công ty:</span>
|
||||
<span class="customer-value">Công ty TNHH Xây dựng ABC</span>
|
||||
<span class="customer-value">Công ty TNHH Xây dựng Minh Long</span>
|
||||
</div>
|
||||
<div class="customer-row">
|
||||
<span class="customer-label">Mã số thuế:</span>
|
||||
<span class="customer-value">0123456789</span>
|
||||
<span class="customer-value">0134000687</span>
|
||||
</div>
|
||||
<div class="customer-row">
|
||||
<span class="customer-label">Địa chỉ công ty:</span>
|
||||
<span class="customer-value">123 Nguyễn Trãi, Quận 1, TP.HCM</span>
|
||||
<span class="customer-label">Địa chỉ:</span>
|
||||
<span class="customer-value">11 Đường Hoàng Hữu Nam, Phường Linh Chiểu, Thành phố Thủ Đức, TP.HCM</span>
|
||||
</div>
|
||||
<div class="customer-row">
|
||||
<span class="customer-label">Email nhận hóa đơn:</span>
|
||||
<span class="customer-value">ketoan@abc.com</span>
|
||||
<span class="customer-value">minhlong.org@gmail.com</span>
|
||||
</div>
|
||||
<div class="customer-row">
|
||||
<span class="customer-label">Số điện thoại:</span>
|
||||
<span class="customer-value">0339797979</span>
|
||||
</div>
|
||||
<div class="customer-row">
|
||||
<span class="customer-label">Loại hóa đơn:</span>
|
||||
<span class="customer-badge" style="background: #d1ecf1; color: #0c5460;">Hóa đơn VAT</span>
|
||||
</div>
|
||||
</div>-->
|
||||
</div>
|
||||
<!-- Invoices List Block (NEW) -->
|
||||
<div class="delivery-info-card">
|
||||
<h3><i class="fas fa-file-invoice-dollar text-blue-600"></i> Hóa đơn đã xuất</h3>
|
||||
|
||||
<div class="invoices-list">
|
||||
<!-- Invoice Card 1 -->
|
||||
<div class="invoice-item" onclick="window.location.href='invoice-detail.html?id=INV20240001'">
|
||||
<div class="invoice-item-icon">
|
||||
<i class="fas fa-file-invoice"></i>
|
||||
</div>
|
||||
<div class="invoice-item-content">
|
||||
<div class="invoice-item-title">#INV20240001</div>
|
||||
<div class="invoice-item-subtitle">Ngày xuất: 03/08/2024 - 10:00</div>
|
||||
</div>
|
||||
<div class="invoice-item-amount">12.771.000đ</div>
|
||||
<i class="fas fa-chevron-right invoice-item-arrow"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -249,10 +386,11 @@
|
||||
<i class="fas fa-credit-card"></i>
|
||||
Phương thức thanh toán:
|
||||
</div>
|
||||
<div class="payment-value">Chuyển khoản ngân hàng</div>
|
||||
<div class="payment-value">Thanh toán một phần</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="order-notes">
|
||||
<!--<div class="order-notes">
|
||||
<div class="notes-label">
|
||||
<i class="fas fa-sticky-note"></i>
|
||||
Ghi chú đơn hàng:
|
||||
@@ -260,9 +398,71 @@
|
||||
<div class="notes-content">
|
||||
Giao hàng trong giờ hành chính. Vui lòng gọi trước 30 phút khi đến giao hàng.
|
||||
</div>
|
||||
</div>-->
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Payment History -->
|
||||
<div class="detail-container">
|
||||
<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" style ="margin-bottom: 0px;" id="payment-history">
|
||||
<!-- Payment Card 1 (Clickable for modal) -->
|
||||
<div class="history-item" onclick="openPaymentModal('PAY20240001', '6.385.500đ', 'Chuyển khoản', '03/08/2024 - 14:30', 'TK20241020001', 'https://placehold.co/600x400/E8F4FD/005B9A/png?text=Bi%C3%AAn+lai+thanh+to%C3%A1n')">
|
||||
<div class="history-icon">
|
||||
<i class="fas fa-check"></i>
|
||||
</div>
|
||||
<div class="history-content">
|
||||
<div class="history-title">#PAY20240001</div>
|
||||
<!--<div class="history-details">Chuyển khoản | Ref: TK20241020001</div>-->
|
||||
<div class="history-date">03/08/2024 - 14:30</div>
|
||||
</div>
|
||||
<div class="history-amount">6.385.500đ</div>
|
||||
<i class="fas fa-chevron-right" style="color: #9ca3af; margin-left: 8px;"></i>
|
||||
</div>
|
||||
|
||||
<!-- Payment Card 2 -->
|
||||
<div class="history-item" onclick="openPaymentModal('PAY20240002', '6.385.500đ', 'Tiền mặt', '05/08/2024 - 09:15', 'CASH-20240805-001', '')">
|
||||
<div class="history-icon">
|
||||
<i class="fas fa-check"></i>
|
||||
</div>
|
||||
<div class="history-content">
|
||||
<div class="history-title">#PAY20240002</div>
|
||||
<!--<div class="history-details">Tiền mặt | Ref: CASH-20240805-001</div>-->
|
||||
<div class="history-date">05/08/2024 - 09:15</div>
|
||||
</div>
|
||||
<div class="history-amount">6.385.500đ</div>
|
||||
<i class="fas fa-chevron-right" style="color: #9ca3af; margin-left: 8px;"></i>
|
||||
</div>
|
||||
<!-- Payment Summary -->
|
||||
<div class="summary-row">
|
||||
<span>Còn lại:</span>
|
||||
<span class="remaining-amount" id="remaining-amount">10.000.000đ</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="action-buttons">
|
||||
<button class="btn btn-primary" onclick="makePayment()" id="pay-button">
|
||||
<i class="fas fa-credit-card"></i>
|
||||
Thanh toán
|
||||
</button>
|
||||
<button class="btn btn-secondary" onclick="contactSupport()">
|
||||
<i class="fas fa-comments"></i>
|
||||
Liên hệ hỗ trợ
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<!--<div class="order-actions">
|
||||
@@ -276,11 +476,11 @@
|
||||
</button>
|
||||
</div>-->
|
||||
<!-- Floating Action Button -->
|
||||
<a href="chat-list.html" class="fab-link">
|
||||
<!--<a href="chat-list.html" class="fab-link">
|
||||
<button class="fab">
|
||||
<i class="fas fa-comments"></i>
|
||||
</button>
|
||||
</a>
|
||||
</a>-->
|
||||
<!--<a href="chat-list.html" class="fab">-->
|
||||
<!--<button class="fab">-->
|
||||
<!--<i class="fas fa-comments"></i>-->
|
||||
@@ -683,6 +883,14 @@
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.detail-card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* Action Buttons */
|
||||
.order-actions {
|
||||
position: fixed;
|
||||
@@ -731,6 +939,200 @@
|
||||
}
|
||||
|
||||
/* Mobile Responsiveness */
|
||||
/* Invoices List Styles */
|
||||
.invoices-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.invoice-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.invoice-item:hover {
|
||||
border-color: var(--primary-blue);
|
||||
background: #F0F7FF;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
|
||||
}
|
||||
|
||||
.invoice-item-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
|
||||
color: white;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.invoice-item-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.invoice-item-title {
|
||||
font-weight: 600;
|
||||
color: var(--text-dark);
|
||||
font-size: 14px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.invoice-item-subtitle {
|
||||
font-size: 12px;
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.invoice-item-amount {
|
||||
font-weight: 700;
|
||||
color: #dc2626;
|
||||
font-size: 14px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.invoice-item-arrow {
|
||||
color: var(--text-light);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.history-item {
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.history-item:hover {
|
||||
background: #f8fafc;
|
||||
border-radius: 8px;
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
/* Payment Modal Styles */
|
||||
.payment-modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 1000;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.payment-modal.active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.payment-modal-content {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
max-width: 500px;
|
||||
width: 100%;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
animation: slideUp 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.payment-modal-header {
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.payment-modal-header h3 {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.payment-modal-close {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: #f3f4f6;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.payment-modal-close:hover {
|
||||
background: #e5e7eb;
|
||||
}
|
||||
|
||||
.payment-modal-body {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.payment-detail-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
}
|
||||
|
||||
.payment-detail-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.payment-detail-label {
|
||||
color: #6b7280;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.payment-detail-value {
|
||||
color: #1f2937;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.payment-detail-value.amount {
|
||||
color: #065f46;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.payment-receipt-image {
|
||||
margin-top: 20px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.payment-receipt-image img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.status-timeline-card,
|
||||
.delivery-info-card,
|
||||
@@ -763,7 +1165,7 @@
|
||||
.date-item,
|
||||
.customer-row,
|
||||
.summary-row {
|
||||
flex-direction: column;
|
||||
/*flex-direction: column;*/
|
||||
align-items: flex-start;
|
||||
gap: 4px;
|
||||
}
|
||||
@@ -775,10 +1177,393 @@
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.payment-modal-content {
|
||||
margin: 20px;
|
||||
max-height: calc(100vh - 40px);
|
||||
}
|
||||
|
||||
.invoice-item-amount {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.detail-container {
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.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>
|
||||
|
||||
<!-- Payment Detail Modal -->
|
||||
<div id="paymentModal" class="payment-modal">
|
||||
<div class="payment-modal-content">
|
||||
<div class="payment-modal-header">
|
||||
<h3>Chi tiết thanh toán</h3>
|
||||
<button class="payment-modal-close" onclick="closePaymentModal()">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="payment-modal-body">
|
||||
<div class="payment-detail-row">
|
||||
<span class="payment-detail-label">Mã giao dịch:</span>
|
||||
<span class="payment-detail-value" id="modal-transaction-id"></span>
|
||||
</div>
|
||||
<div class="payment-detail-row">
|
||||
<span class="payment-detail-label">Thời gian:</span>
|
||||
<span class="payment-detail-value" id="modal-datetime"></span>
|
||||
</div>
|
||||
<div class="payment-detail-row">
|
||||
<span class="payment-detail-label">Phương thức:</span>
|
||||
<span class="payment-detail-value" id="modal-method"></span>
|
||||
</div>
|
||||
<div class="payment-detail-row">
|
||||
<span class="payment-detail-label">Mã tham chiếu:</span>
|
||||
<span class="payment-detail-value" id="modal-reference"></span>
|
||||
</div>
|
||||
<div class="payment-detail-row">
|
||||
<span class="payment-detail-label">Số tiền:</span>
|
||||
<span class="payment-detail-value amount" id="modal-amount"></span>
|
||||
</div>
|
||||
<div id="modal-receipt-container" class="payment-receipt-image" style="display: none;">
|
||||
<img id="modal-receipt-image" src="" alt="Biên lai thanh toán">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function openPaymentModal(transactionId, amount, method, datetime, reference, receiptImage) {
|
||||
document.getElementById('modal-transaction-id').textContent = transactionId;
|
||||
document.getElementById('modal-amount').textContent = amount;
|
||||
document.getElementById('modal-method').textContent = method;
|
||||
document.getElementById('modal-datetime').textContent = datetime;
|
||||
document.getElementById('modal-reference').textContent = reference;
|
||||
|
||||
const receiptContainer = document.getElementById('modal-receipt-container');
|
||||
const receiptImg = document.getElementById('modal-receipt-image');
|
||||
|
||||
if (receiptImage && receiptImage !== '') {
|
||||
receiptImg.src = receiptImage;
|
||||
receiptContainer.style.display = 'block';
|
||||
} else {
|
||||
receiptContainer.style.display = 'none';
|
||||
}
|
||||
|
||||
document.getElementById('paymentModal').classList.add('active');
|
||||
document.body.style.overflow = 'hidden';
|
||||
}
|
||||
|
||||
function closePaymentModal() {
|
||||
document.getElementById('paymentModal').classList.remove('active');
|
||||
document.body.style.overflow = 'auto';
|
||||
}
|
||||
|
||||
// Close modal when clicking outside
|
||||
document.getElementById('paymentModal')?.addEventListener('click', function(e) {
|
||||
if (e.target === this) {
|
||||
closePaymentModal();
|
||||
}
|
||||
});
|
||||
|
||||
function shareOrder() {
|
||||
if (navigator.share) {
|
||||
navigator.share({
|
||||
|
||||
Reference in New Issue
Block a user