315 lines
14 KiB
HTML
315 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="vi">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Thanh toá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">
|
|
</head>
|
|
<body>
|
|
<div class="page-wrapper">
|
|
<!-- Header -->
|
|
<div class="header">
|
|
<a href="cart.html" class="back-button">
|
|
<i class="fas fa-arrow-left"></i>
|
|
</a>
|
|
<h1 class="header-title">Thanh toán</h1>
|
|
<div style="width: 32px;"></div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<!-- Delivery Info -->
|
|
<div class="card">
|
|
<h3 class="card-title">Thông tin giao hàng</h3>
|
|
<div class="form-group">
|
|
<label class="form-label">Họ và tên người nhận</label>
|
|
<input type="text" class="form-input" value="La Nguyen Quynh">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Số điện thoại</label>
|
|
<input type="tel" class="form-input" value="0983441099">
|
|
</div>
|
|
|
|
<!--<div class="form-group">
|
|
<label class="form-label">Địa chỉ giao hàng</label>
|
|
<textarea class="form-input" rows="3">123 Nguyễn Trãi, Quận 1, TP.HCM</textarea>
|
|
</div>-->
|
|
<div class="form-group">
|
|
<label class="form-label">Tỉnh/Thành phố</label>
|
|
<select class="form-input" id="provinceSelect">
|
|
<option value="">Chọn tỉnh/thành phố</option>
|
|
<option value="hcm" selected>TP. Hồ Chí Minh</option>
|
|
<option value="hanoi">Hà Nội</option>
|
|
<option value="danang">Đà Nẵng</option>
|
|
<option value="binhduong">Bình Dương</option>
|
|
<option value="dongai">Đồng Nai</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Xã/Phường</label>
|
|
<select class="form-input" id="wardSelect">
|
|
<option value="">Chọn xã/phường</option>
|
|
<option value="ward1" selected>Phường 1</option>
|
|
<option value="ward2">Phường 2</option>
|
|
<option value="ward3">Phường 3</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Địa chỉ cụ thể</label>
|
|
<input type="text" class="form-input" value="123 Nguyễn Trãi" placeholder="Số nhà, tên đường">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Ngày lấy hàng</label>
|
|
<input type="date" class="form-input" id="pickupDate">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">Ghi chú</label>
|
|
<input type="text" class="form-input" placeholder="Ví dụ: Thời gian yêu cầu giao hàng">
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Invoice Information -->
|
|
<div class="card">
|
|
<div class="form-group" style="height:24px;">
|
|
<label class="checkbox-label" style="font-size:16px;">
|
|
<input type="checkbox" id="invoiceCheckbox" onchange="toggleInvoiceInfo()">
|
|
<span class="checkmark"></span>
|
|
Phát hành hóa đơn
|
|
</label>
|
|
</div>
|
|
|
|
<div id="invoiceInfoCard" class="invoice-info-card" style="display: none;">
|
|
<h4 class="invoice-title">Thông tin hóa đơn</h4>
|
|
<div class="form-group">
|
|
<label class="form-label">Tên Người Mua</label>
|
|
<input type="text" class="form-input" id="buyerName" placeholder="Họ và tên người mua">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Mã số thuế</label>
|
|
<input type="text" class="form-input" id="taxCode" placeholder="Mã số thuế công ty">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Tên công ty</label>
|
|
<input type="text" class="form-input" id="companyName" placeholder="Tên công ty/tổ chức">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Địa chỉ</label>
|
|
<input type="text" class="form-input" id="companyAddress" placeholder="Địa chỉ công ty">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Email nhận hóa đơn</label>
|
|
<input type="email" class="form-input" id="invoiceEmail" placeholder="email@company.com">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Số điện thoại</label>
|
|
<input type="tel" class="form-input" id="invoicePhone" placeholder="Số điện thoại liên hệ">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Payment Method -->
|
|
<div class="card">
|
|
<h3 class="card-title">Phương thức thanh toán</h3>
|
|
<label class="list-item" style="cursor: pointer;">
|
|
<input type="radio" name="payment" checked style="margin-right: 12px;">
|
|
<div class="list-item-icon">
|
|
<i class="fas fa-money-check-alt"></i>
|
|
</div>
|
|
<div class="list-item-content">
|
|
<div class="list-item-title">Chuyển khoản ngân hàng</div>
|
|
<div class="list-item-subtitle">Thanh toán qua tài khoản ngân hàng</div>
|
|
</div>
|
|
</label>
|
|
<label class="list-item" style="cursor: pointer;">
|
|
<input type="radio" name="payment" style="margin-right: 12px;">
|
|
<div class="list-item-icon">
|
|
<i class="fas fa-hand-holding-usd"></i>
|
|
</div>
|
|
<div class="list-item-content">
|
|
<div class="list-item-title">Thanh toán khi nhận hàng</div>
|
|
<div class="list-item-subtitle">COD - Trả tiền mặt cho tài xế</div>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
|
|
<!-- Order Summary -->
|
|
<div class="card">
|
|
<h3 class="card-title">Tóm tắt đơn hàng</h3>
|
|
<div class="d-flex justify-between mb-2">
|
|
<div>
|
|
<div>Gạch men cao cấp</div>
|
|
<div class="text-small text-muted">10 m² (28 viên / 10.08 m²)</div>
|
|
</div>
|
|
<span>4.536.000đ</span>
|
|
</div>
|
|
<div class="d-flex justify-between mb-2">
|
|
<div>
|
|
<div>Gạch granite nhập khẩu 1200x1200</div>
|
|
<div class="text-small text-muted">(11 viên / 15.84 m²)</div>
|
|
</div>
|
|
<span>10.771.200đ</span>
|
|
</div>
|
|
<div class="d-flex justify-between mb-2">
|
|
<div>
|
|
<div>Gạch mosaic trang trí</div>
|
|
<div class="text-small text-muted">(5 viên / 5.625 m²)</div>
|
|
</div>
|
|
<span>1.800.000đ</span>
|
|
</div>
|
|
<hr style="margin: 12px 0;">
|
|
<div class="d-flex justify-between mb-2">
|
|
<span>Tạm tính</span>
|
|
<span>17.107.200đ</span>
|
|
</div>
|
|
<div class="d-flex justify-between mb-2">
|
|
<span>Giảm giá Diamond</span>
|
|
<span class="text-success">-2.566.000đ</span>
|
|
</div>
|
|
<div class="d-flex justify-between mb-2">
|
|
<span>Phí vận chuyển</span>
|
|
<span>Miễn phí</span>
|
|
</div>
|
|
<hr style="margin: 12px 0;">
|
|
<div class="d-flex justify-between">
|
|
<span class="text-bold" style="font-size: 16px;">Tổng thanh toán</span>
|
|
<span class="text-bold text-primary" style="font-size: 18px;">14.541.120đ</span>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Price Negotiation -->
|
|
<div class="negotiation-checkbox">
|
|
<label class="checkbox-label">
|
|
<input type="checkbox" id="negotiationCheckbox" onchange="toggleNegotiation()">
|
|
<span>Yêu cầu đàm phán giá</span>
|
|
</label>
|
|
<div class="negotiation-info">
|
|
Chọn tùy chọn này nếu bạn muốn đàm phán giá với nhân viên bán hàng trước khi thanh toán.
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Place Order Button -->
|
|
<div style="margin-bottom: 24px;">
|
|
<a href="payment-qr.html" class="btn btn-primary btn-block">
|
|
<i class="fas fa-check-circle"></i> Hoàn tất đặt hàng
|
|
</a>
|
|
<p class="text-center text-small text-muted mt-2">
|
|
Bằng cách đặt hàng, bạn đồng ý với
|
|
<a href="#" class="text-primary">Điều khoản & Điều kiện</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.invoice-info-card {
|
|
margin-top: 16px;
|
|
padding: 16px;
|
|
background: #f8f9fa;
|
|
border-radius: 8px;
|
|
border: 1px solid #e5e7eb;
|
|
}
|
|
|
|
.invoice-title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
margin-bottom: 16px;
|
|
color: #374151;
|
|
}
|
|
|
|
.checkbox-label {
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.checkbox-label input[type="checkbox"] {
|
|
margin-right: 8px;
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.negotiation-checkbox {
|
|
margin: 16px 0;
|
|
padding: 16px;
|
|
background: #fef3c7;
|
|
border: 1px solid #f59e0b;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.negotiation-info {
|
|
font-size: 13px;
|
|
color: #92400e;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.payment-method-section.hidden {
|
|
display: none;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
// Set default pickup date to tomorrow
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const tomorrow = new Date();
|
|
tomorrow.setDate(tomorrow.getDate() + 1);
|
|
const dateString = tomorrow.toISOString().split('T')[0];
|
|
document.getElementById('pickupDate').value = dateString;
|
|
});
|
|
|
|
function toggleInvoiceInfo() {
|
|
const checkbox = document.getElementById('invoiceCheckbox');
|
|
const invoiceCard = document.getElementById('invoiceInfoCard');
|
|
|
|
if (checkbox.checked) {
|
|
invoiceCard.style.display = 'block';
|
|
} else {
|
|
invoiceCard.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
function toggleNegotiation() {
|
|
const checkbox = document.getElementById('negotiationCheckbox');
|
|
const paymentSection = document.querySelector('.card:has(.list-item)'); // Payment method section
|
|
const submitBtn = document.querySelector('.btn-primary');
|
|
|
|
if (checkbox.checked) {
|
|
paymentSection.classList.add('hidden');
|
|
submitBtn.innerHTML = '<i class="fas fa-handshake"></i> Gửi Yêu cầu & Đàm phán';
|
|
} else {
|
|
paymentSection.classList.remove('hidden');
|
|
submitBtn.innerHTML = '<i class="fas fa-check-circle"></i> Hoàn tất đặt hàng';
|
|
}
|
|
}
|
|
|
|
function toggleNegotiation() {
|
|
const checkbox = document.getElementById('negotiationCheckbox');
|
|
const paymentMethods = document.querySelectorAll('.card')[2]; // Payment method section is 3rd card
|
|
const submitBtn = document.querySelector('.btn-primary');
|
|
|
|
if (checkbox.checked) {
|
|
paymentMethods.style.display = 'none';
|
|
submitBtn.innerHTML = '<i class="fas fa-handshake"></i> Gửi Yêu cầu & Đàm phán';
|
|
submitBtn.href = '#'; // Don't redirect to order success
|
|
submitBtn.onclick = function(e) {
|
|
e.preventDefault();
|
|
alert('Yêu cầu đàm phán đã được gửi! Nhân viên bán hàng sẽ liên hệ với bạn sớm.');
|
|
window.location.href = 'order-dam-phan.html';
|
|
};
|
|
} else {
|
|
paymentMethods.style.display = 'block';
|
|
submitBtn.innerHTML = '<i class="fas fa-check-circle"></i> Hoàn tất đặt hàng';
|
|
submitBtn.href = 'payment-qr.html';
|
|
submitBtn.onclick = null;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html> |