403 lines
20 KiB
HTML
403 lines
20 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="vi">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Đặt hàng - 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 class="bg-gray-50">
|
|
<div class="page-wrapper">
|
|
<!-- Header -->
|
|
<!-- Header -->
|
|
<div class="header">
|
|
<a href="cart.html" class="back-button">
|
|
<i class="fas fa-arrow-left"></i>
|
|
</a>
|
|
<h1 class="header-title">Đặt hàng</h1>
|
|
<div style="width: 32px;"></div>
|
|
</div>
|
|
|
|
<div class="container max-w-4xl mx-auto px-4 py-6" style="padding-bottom: 120px;">
|
|
|
|
<!-- Card 1: Thông tin giao hàng -->
|
|
<div class="bg-white rounded-lg shadow-sm p-4 mb-4">
|
|
<h3 class="text-base font-semibold text-gray-900 mb-4 flex items-center gap-2">
|
|
<i class="fas fa-shipping-fast text-blue-600"></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>
|
|
<i class="fas fa-chevron-right text-gray-400 group-hover:text-blue-600 mt-1"></i>
|
|
</div>
|
|
</a>
|
|
</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="relative">
|
|
<i class="fas fa-calendar-alt absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
|
|
<input type="date"
|
|
id="pickupDate"
|
|
class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Note -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">
|
|
Ghi chú
|
|
</label>
|
|
<textarea id="orderNote"
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition resize-none"
|
|
rows="2"
|
|
placeholder="Ví dụ: Thời gian yêu cầu giao hàng, lưu ý đặc biệt..."></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 2: Phát hành hóa đơn -->
|
|
<div class="bg-white rounded-lg shadow-sm p-4 mb-4">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h3 class="text-base font-semibold text-gray-900 flex items-center gap-2">
|
|
<i class="fas fa-file-invoice text-blue-600"></i>
|
|
Phát hành hóa đơn
|
|
</h3>
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input type="checkbox"
|
|
id="invoiceCheckbox"
|
|
class="sr-only peer"
|
|
onchange="toggleInvoiceInfo()">
|
|
<div class="w-11 h-6 bg-gray-300 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
|
|
</label>
|
|
</div>
|
|
|
|
<!-- Invoice Information (Hidden by default) -->
|
|
<div id="invoiceInfoCard" class="hidden">
|
|
<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>
|
|
<i class="fas fa-chevron-right text-gray-400 group-hover:text-blue-600 mt-1"></i>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 3: Phương thức thanh toán -->
|
|
<div class="bg-white rounded-lg shadow-sm p-4 mb-4" id="paymentMethodCard">
|
|
<h3 class="text-base font-semibold text-gray-900 mb-4 flex items-center gap-2">
|
|
<i class="fas fa-credit-card text-blue-600"></i>
|
|
Phương thức thanh toán
|
|
</h3>
|
|
|
|
<label class="flex items-center p-3 border border-gray-200 rounded-lg mb-3 cursor-pointer hover:border-blue-500 hover:bg-blue-50 transition">
|
|
<input type="radio" name="payment" value="full" checked class="w-4 h-4 text-blue-600 focus:ring-blue-500">
|
|
<div class="ml-3 flex-1">
|
|
<div class="flex items-center gap-2">
|
|
<i class="fas fa-money-check-alt text-gray-600"></i>
|
|
<div class="font-medium text-gray-900">Thanh toán hoàn toàn</div>
|
|
</div>
|
|
<div class="text-sm text-gray-500 mt-0.5">Thanh toán qua tài khoản ngân hàng</div>
|
|
</div>
|
|
</label>
|
|
|
|
<label class="flex items-center p-3 border border-gray-200 rounded-lg cursor-pointer hover:border-blue-500 hover:bg-blue-50 transition">
|
|
<input type="radio" name="payment" value="partial" class="w-4 h-4 text-blue-600 focus:ring-blue-500">
|
|
<div class="ml-3 flex-1">
|
|
<div class="flex items-center gap-2">
|
|
<i class="fas fa-hand-holding-usd text-gray-600"></i>
|
|
<div class="font-medium text-gray-900">Thanh toán một phần</div>
|
|
</div>
|
|
<div class="text-sm text-gray-500 mt-0.5">Trả trước (≥20%), còn lại thanh toán trong vòng 30 ngày</div>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
|
|
<!-- Card 4: Mã giảm giá -->
|
|
<div class="bg-white rounded-lg shadow-sm p-4 mb-4">
|
|
<h3 class="text-base font-semibold text-gray-900 mb-3 flex items-center gap-2">
|
|
<i class="fas fa-ticket-alt text-blue-600"></i>
|
|
Mã giảm giá
|
|
</h3>
|
|
|
|
<div class="flex gap-2 mb-3">
|
|
<input type="text"
|
|
class="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"
|
|
placeholder="Nhập mã giảm giá">
|
|
<button class="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition">
|
|
Áp dụng
|
|
</button>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2 p-3 bg-green-50 border border-green-200 rounded-lg text-green-800 text-sm">
|
|
<i class="fas fa-check-circle"></i>
|
|
<span>Bạn được giảm 15% (hạng Diamond)</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 5: Tóm tắt đơn hàng -->
|
|
<div class="bg-white rounded-lg shadow-sm p-4 mb-4">
|
|
<h3 class="text-base font-semibold text-gray-900 mb-4 flex items-center gap-2">
|
|
<i class="fas fa-shopping-cart text-blue-600"></i>
|
|
Tóm tắt đơn hàng
|
|
</h3>
|
|
|
|
<!-- Product Items -->
|
|
<div class="space-y-3 mb-4">
|
|
<div class="flex justify-between items-start pb-3 border-b border-gray-100">
|
|
<div class="flex-1">
|
|
<div class="font-medium text-gray-900">Gạch men cao cấp 60x60</div>
|
|
<div class="text-sm text-gray-500 mt-0.5">10 m² (28 viên / 10.08 m²)</div>
|
|
</div>
|
|
<div class="font-semibold text-gray-900">4.536.000đ</div>
|
|
</div>
|
|
|
|
<div class="flex justify-between items-start pb-3 border-b border-gray-100">
|
|
<div class="flex-1">
|
|
<div class="font-medium text-gray-900">Gạch granite nhập khẩu 1200x1200</div>
|
|
<div class="text-sm text-gray-500 mt-0.5">15 m² (11 viên / 15.84 m²)</div>
|
|
</div>
|
|
<div class="font-semibold text-gray-900">10.771.200đ</div>
|
|
</div>
|
|
|
|
<div class="flex justify-between items-start pb-3 border-b border-gray-100">
|
|
<div class="flex-1">
|
|
<div class="font-medium text-gray-900">Gạch mosaic trang trí 750x1500</div>
|
|
<div class="text-sm text-gray-500 mt-0.5">5 m² (5 viên / 5.625 m²)</div>
|
|
</div>
|
|
<div class="font-semibold text-gray-900">1.800.000đ</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Summary -->
|
|
<div class="space-y-2 pt-3 border-t border-gray-200">
|
|
<div class="flex justify-between text-sm">
|
|
<span class="text-gray-600">Tạm tính</span>
|
|
<span class="text-gray-900">17.107.200đ</span>
|
|
</div>
|
|
<div class="flex justify-between text-sm">
|
|
<span class="text-gray-600">Giảm giá Diamond</span>
|
|
<span class="text-green-600 font-medium">-2.566.000đ</span>
|
|
</div>
|
|
<div class="flex justify-between text-sm">
|
|
<span class="text-gray-600">Phí vận chuyển</span>
|
|
<span class="text-gray-900">Miễn phí</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Total -->
|
|
<div class="flex justify-between items-center pt-4 mt-4 border-t-2 border-gray-300">
|
|
<span class="text-lg font-semibold text-gray-900">Tổng thanh toán</span>
|
|
<span class="text-2xl font-bold text-blue-600">14.541.120đ</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 6: Tùy chọn đàm phán giá -->
|
|
<div class="bg-yellow-50 border-2 border-yellow-300 rounded-lg p-4 mb-4">
|
|
<label class="flex items-start cursor-pointer">
|
|
<input type="checkbox"
|
|
id="negotiationCheckbox"
|
|
class="mt-1 w-5 h-5 text-yellow-600 rounded focus:ring-yellow-500"
|
|
onchange="toggleNegotiation()">
|
|
<div class="ml-3 flex-1">
|
|
<div class="font-semibold text-yellow-900 mb-1">Yêu cầu đàm phán giá</div>
|
|
<div class="text-sm text-yellow-800">
|
|
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>
|
|
</label>
|
|
</div>
|
|
|
|
<!-- Terms -->
|
|
<div class="text-center text-sm text-gray-600 mb-4">
|
|
Bằng cách đặt hàng, bạn đồng ý với
|
|
<a href="#" class="text-blue-600 hover:underline">Điều khoản & Điều kiện</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sticky Footer -->
|
|
<div class="fixed bottom-0 left-0 right-0 bg-white border-t-2 border-gray-200 shadow-lg z-50">
|
|
<div class="max-w-4xl mx-auto px-4 py-4">
|
|
<button id="submitBtn"
|
|
onclick="handleSubmit()"
|
|
class="w-full bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white font-bold py-4 px-6 rounded-lg shadow-lg transition-all duration-200 hover:shadow-xl hover:-translate-y-0.5 flex items-center justify-center gap-2">
|
|
<i class="fas fa-check-circle text-xl"></i>
|
|
<span id="submitBtnText">Hoàn tất đặt hàng</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Toggle invoice info
|
|
function toggleInvoiceInfo() {
|
|
const checkbox = document.getElementById('invoiceCheckbox');
|
|
const invoiceCard = document.getElementById('invoiceInfoCard');
|
|
|
|
if (checkbox.checked) {
|
|
invoiceCard.classList.remove('hidden');
|
|
invoiceCard.classList.add('animate-slideDown');
|
|
} else {
|
|
invoiceCard.classList.add('hidden');
|
|
invoiceCard.classList.remove('animate-slideDown');
|
|
}
|
|
}
|
|
|
|
// Toggle negotiation
|
|
function toggleNegotiation() {
|
|
const checkbox = document.getElementById('negotiationCheckbox');
|
|
const paymentMethodCard = document.getElementById('paymentMethodCard');
|
|
const submitBtnText = document.getElementById('submitBtnText');
|
|
|
|
if (checkbox.checked) {
|
|
paymentMethodCard.classList.add('opacity-50', 'pointer-events-none');
|
|
submitBtnText.textContent = 'Gửi Yêu cầu & Đàm phán';
|
|
} else {
|
|
paymentMethodCard.classList.remove('opacity-50', 'pointer-events-none');
|
|
submitBtnText.textContent = 'Hoàn tất đặt hàng';
|
|
}
|
|
}
|
|
|
|
// Handle submit
|
|
function handleSubmit() {
|
|
const negotiationCheckbox = document.getElementById('negotiationCheckbox');
|
|
|
|
if (negotiationCheckbox.checked) {
|
|
// Navigate to negotiation page
|
|
showToast('Đang gửi yêu cầu đàm phán...', 'info');
|
|
setTimeout(() => {
|
|
window.location.href = 'order-success.html?type=negotiation';
|
|
}, 1000);
|
|
} else {
|
|
// Navigate to payment page
|
|
showToast('Đang xử lý đơn hàng...', 'info');
|
|
setTimeout(() => {
|
|
window.location.href = 'payment-qr.html';
|
|
}, 1000);
|
|
}
|
|
}
|
|
|
|
// Set minimum date for pickup
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const pickupDateInput = document.getElementById('pickupDate');
|
|
const today = new Date();
|
|
const tomorrow = new Date(today);
|
|
tomorrow.setDate(tomorrow.getDate() + 1);
|
|
|
|
const minDate = tomorrow.toISOString().split('T')[0];
|
|
pickupDateInput.min = minDate;
|
|
pickupDateInput.value = minDate;
|
|
});
|
|
|
|
// Toast notification
|
|
function showToast(message, type = 'success') {
|
|
const colors = {
|
|
success: '#10b981',
|
|
error: '#ef4444',
|
|
warning: '#f59e0b',
|
|
info: '#3b82f6'
|
|
};
|
|
|
|
const icons = {
|
|
success: 'fa-check-circle',
|
|
error: 'fa-exclamation-circle',
|
|
warning: 'fa-exclamation-triangle',
|
|
info: 'fa-info-circle'
|
|
};
|
|
|
|
const toast = document.createElement('div');
|
|
toast.innerHTML = `
|
|
<i class="fas ${icons[type]}"></i>
|
|
<span>${message}</span>
|
|
`;
|
|
toast.style.cssText = `
|
|
position: fixed;
|
|
top: 80px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: ${colors[type]};
|
|
color: white;
|
|
padding: 12px 24px;
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
|
z-index: 10000;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
animation: slideDown 0.3s ease;
|
|
max-width: 90%;
|
|
`;
|
|
|
|
document.body.appendChild(toast);
|
|
|
|
setTimeout(() => {
|
|
toast.style.animation = 'slideUp 0.3s ease';
|
|
setTimeout(() => {
|
|
document.body.removeChild(toast);
|
|
}, 300);
|
|
}, 3000);
|
|
}
|
|
|
|
// Animation styles
|
|
const style = document.createElement('style');
|
|
style.textContent = `
|
|
@keyframes slideDown {
|
|
from {
|
|
opacity: 0;
|
|
transform: translate(-50%, -20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translate(-50%, 0);
|
|
}
|
|
}
|
|
@keyframes slideUp {
|
|
from {
|
|
opacity: 1;
|
|
transform: translate(-50%, 0);
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
transform: translate(-50%, -20px);
|
|
}
|
|
}
|
|
.animate-slideDown {
|
|
animation: slideDown 0.3s ease;
|
|
}
|
|
`;
|
|
document.head.appendChild(style);
|
|
</script>
|
|
</body>
|
|
</html>
|