add favorite
This commit is contained in:
Phuoc Nguyen
521
html/address-create.html
Normal file
521
html/address-create.html
Normal file
@@ -0,0 +1,521 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="vi">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Thêm địa chỉ mới - 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 -->
|
||||
<div class="header">
|
||||
<a href="addresses.html" class="back-button">
|
||||
<i class="fas fa-arrow-left"></i>
|
||||
</a>
|
||||
<h1 class="header-title">Thêm địa chỉ mới</h1>
|
||||
<button class="back-button" onclick="openInfoModal()">
|
||||
<i class="fas fa-info-circle"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="container max-w-3xl mx-auto px-4 py-6" style="padding-bottom: 100px;">
|
||||
<form id="addressForm" onsubmit="handleSubmit(event)">
|
||||
|
||||
<!-- Contact Information -->
|
||||
<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-user text-blue-600"></i>
|
||||
Thông tin liên hệ
|
||||
</h3>
|
||||
|
||||
<div class="form-group mb-4">
|
||||
<label class="form-label block text-sm font-medium text-gray-700 mb-2">
|
||||
Họ và tên <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<div class="relative">
|
||||
<i class="fas fa-user absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
|
||||
<input type="text"
|
||||
id="fullName"
|
||||
class="form-input 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"
|
||||
placeholder="Nhập họ và tên người nhận"
|
||||
required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group mb-4">
|
||||
<label class="form-label block text-sm font-medium text-gray-700 mb-2">
|
||||
Số điện thoại <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<div class="relative">
|
||||
<i class="fas fa-phone absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
|
||||
<input type="tel"
|
||||
id="phone"
|
||||
class="form-input 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"
|
||||
placeholder="Nhập số điện thoại"
|
||||
pattern="[0-9]{10,11}"
|
||||
required>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500 mt-1">Định dạng: 10-11 số</p>
|
||||
</div>
|
||||
|
||||
<div class="form-group mb-4">
|
||||
<label class="form-label block text-sm font-medium text-gray-700 mb-2">
|
||||
Email <span class="text-red-500"></span>
|
||||
</label>
|
||||
<div class="relative">
|
||||
<i class="fas fa-phone absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
|
||||
<input type="tel"
|
||||
id="phone"
|
||||
class="form-input 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"
|
||||
placeholder="Nhập email"
|
||||
pattern="[0-9]{10,11}"
|
||||
required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group mb-4">
|
||||
<label class="form-label block text-sm font-medium text-gray-700 mb-2">
|
||||
Mã số thuế <span class="text-red-500"></span>
|
||||
</label>
|
||||
<div class="relative">
|
||||
<i class="fas fa-phone absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
|
||||
<input type="tel"
|
||||
id="phone"
|
||||
class="form-input 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"
|
||||
placeholder="Nhập mã số thuế"
|
||||
pattern="[0-9]{10,11}"
|
||||
required>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Address Information -->
|
||||
<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-map-marker-alt text-blue-600"></i>
|
||||
Địa chỉ giao hàng
|
||||
</h3>
|
||||
|
||||
<div class="form-group mb-4">
|
||||
<label class="form-label block text-sm font-medium text-gray-700 mb-2">
|
||||
Tỉnh/Thành phố <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<div class="relative">
|
||||
<select id="province"
|
||||
class="form-select w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition appearance-none bg-white"
|
||||
onchange="updateDistricts()"
|
||||
required>
|
||||
<option value="">-- Chọn Tỉnh/Thành phố --</option>
|
||||
<option value="hanoi">Hà Nội</option>
|
||||
<option value="hcm">TP. Hồ Chí Minh</option>
|
||||
<option value="danang">Đà Nẵng</option>
|
||||
<option value="haiphong">Hải Phòng</option>
|
||||
<option value="cantho">Cần Thơ</option>
|
||||
<option value="binhduong">Bình Dương</option>
|
||||
<option value="dongnai">Đồng Nai</option>
|
||||
<option value="vungtau">Bà Rịa - Vũng Tàu</option>
|
||||
<option value="nhatrang">Khánh Hòa</option>
|
||||
</select>
|
||||
<i class="fas fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group mb-4">
|
||||
<label class="form-label block text-sm font-medium text-gray-700 mb-2">
|
||||
Phường/Xã <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<div class="relative">
|
||||
<select id="district"
|
||||
class="form-select w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition appearance-none bg-white"
|
||||
onchange="updateWards()"
|
||||
required
|
||||
disabled>
|
||||
<option value="">-- Chọn Phường/Xã --</option>
|
||||
</select>
|
||||
<i class="fas fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--<div class="form-group mb-4">
|
||||
<label class="form-label block text-sm font-medium text-gray-700 mb-2">
|
||||
Phường/Xã <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<div class="relative">
|
||||
<select id="ward"
|
||||
class="form-select w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition appearance-none bg-white"
|
||||
required
|
||||
disabled>
|
||||
<option value="">-- Chọn Phường/Xã --</option>
|
||||
</select>
|
||||
<i class="fas fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none"></i>
|
||||
</div>
|
||||
</div>-->
|
||||
|
||||
<div class="form-group mb-4">
|
||||
<label class="form-label block text-sm font-medium text-gray-700 mb-2">
|
||||
Địa chỉ cụ thể <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<textarea id="addressDetail"
|
||||
class="form-textarea 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="3"
|
||||
placeholder="Số nhà, tên đường, khu vực..."
|
||||
required></textarea>
|
||||
<p class="text-xs text-gray-500 mt-1">Ví dụ: 123 Nguyễn Huệ, Khu phố 5</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Default Address Option -->
|
||||
<div class="bg-white rounded-lg shadow-sm p-4 mb-4">
|
||||
<label class="flex items-center cursor-pointer">
|
||||
<input type="checkbox"
|
||||
id="isDefault"
|
||||
class="form-checkbox h-5 w-5 text-blue-600 rounded border-gray-300 focus:ring-2 focus:ring-blue-500">
|
||||
<span class="ml-3 text-sm font-medium text-gray-900">Đặt làm địa chỉ mặc định</span>
|
||||
</label>
|
||||
<p class="text-xs text-gray-500 mt-2 ml-8">
|
||||
Địa chỉ này sẽ được sử dụng làm mặc định khi đặt hàng
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Info Note -->
|
||||
<div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-4">
|
||||
<div class="flex gap-3">
|
||||
<i class="fas fa-info-circle text-blue-600 text-lg flex-shrink-0 mt-0.5"></i>
|
||||
<div class="text-sm text-blue-800">
|
||||
<strong>Lưu ý:</strong> Vui lòng kiểm tra kỹ thông tin địa chỉ để đảm bảo giao hàng chính xác.
|
||||
Bạn có thể chỉnh sửa hoặc xóa địa chỉ này sau khi lưu.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Sticky Footer with Save Button -->
|
||||
<div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 shadow-lg z-50">
|
||||
<div class="max-w-3xl mx-auto px-4 py-4">
|
||||
<button type="submit"
|
||||
form="addressForm"
|
||||
id="saveBtn"
|
||||
class="w-full bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white font-semibold 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-save"></i>
|
||||
<span>Lưu địa chỉ</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* Custom form styles */
|
||||
.form-input:focus,
|
||||
.form-select:focus,
|
||||
.form-textarea:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.form-select {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.form-checkbox:checked {
|
||||
background-color: #2563eb;
|
||||
/*border-color: #2563eb;*/
|
||||
}
|
||||
|
||||
/* Disabled state */
|
||||
.form-select:disabled {
|
||||
background-color: #f3f4f6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Animation */
|
||||
@keyframes slideDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.form-group {
|
||||
animation: slideDown 0.3s ease-out;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// Address data structure (simulated - in real app this comes from API)
|
||||
const addressData = {
|
||||
hanoi: {
|
||||
name: "Hà Nội",
|
||||
districts: {
|
||||
"hoan-kiem": {
|
||||
name: "Hoàn Kiếm",
|
||||
wards: ["Hàng Bạc", "Hàng Bài", "Hàng Bồ", "Hàng Đào", "Hàng Gai"]
|
||||
},
|
||||
"ba-dinh": {
|
||||
name: "Ba Đình",
|
||||
wards: ["Điện Biên", "Đội Cấn", "Giảng Võ", "Kim Mã", "Ngọc Hà"]
|
||||
},
|
||||
"dong-da": {
|
||||
name: "Đống Đa",
|
||||
wards: ["Cát Linh", "Hàng Bột", "Khâm Thiên", "Láng Hạ", "Ô Chợ Dừa"]
|
||||
},
|
||||
"cau-giay": {
|
||||
name: "Cầu Giấy",
|
||||
wards: ["Dịch Vọng", "Mai Dịch", "Nghĩa Đô", "Quan Hoa", "Yên Hòa"]
|
||||
}
|
||||
}
|
||||
},
|
||||
hcm: {
|
||||
name: "TP. Hồ Chí Minh",
|
||||
districts: {
|
||||
"quan-1": {
|
||||
name: "Quận 1",
|
||||
wards: ["Bến Nghé", "Bến Thành", "Cô Giang", "Đa Kao", "Nguyễn Thái Bình"]
|
||||
},
|
||||
"quan-3": {
|
||||
name: "Quận 3",
|
||||
wards: ["Võ Thị Sáu", "Phường 1", "Phường 2", "Phường 3", "Phường 4"]
|
||||
},
|
||||
"quan-5": {
|
||||
name: "Quận 5",
|
||||
wards: ["Phường 1", "Phường 2", "Phường 3", "Phường 4", "Phường 5"]
|
||||
},
|
||||
"quan-7": {
|
||||
name: "Quận 7",
|
||||
wards: ["Tân Phong", "Tân Phú", "Tân Quy", "Tân Thuận Đông", "Tân Thuận Tây"]
|
||||
},
|
||||
"binh-thanh": {
|
||||
name: "Bình Thạnh",
|
||||
wards: ["Phường 1", "Phường 2", "Phường 3", "Phường 5", "Phường 7"]
|
||||
}
|
||||
}
|
||||
},
|
||||
danang: {
|
||||
name: "Đà Nẵng",
|
||||
districts: {
|
||||
"hai-chau": {
|
||||
name: "Hải Châu",
|
||||
wards: ["Hải Châu 1", "Hải Châu 2", "Nam Dương", "Phước Ninh", "Thạch Thang"]
|
||||
},
|
||||
"thanh-khe": {
|
||||
name: "Thanh Khê",
|
||||
wards: ["An Khê", "Chính Gián", "Tam Thuận", "Tân Chính", "Thạc Gián"]
|
||||
},
|
||||
"son-tra": {
|
||||
name: "Sơn Trà",
|
||||
wards: ["An Hải Bắc", "An Hải Đông", "Mân Thái", "Nại Hiên Đông", "Phước Mỹ"]
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Update districts when province changes
|
||||
function updateDistricts() {
|
||||
const provinceSelect = document.getElementById('province');
|
||||
const districtSelect = document.getElementById('district');
|
||||
const wardSelect = document.getElementById('ward');
|
||||
|
||||
const selectedProvince = provinceSelect.value;
|
||||
|
||||
// Reset district and ward
|
||||
districtSelect.innerHTML = '<option value="">-- Chọn Quận/Huyện --</option>';
|
||||
wardSelect.innerHTML = '<option value="">-- Chọn Phường/Xã --</option>';
|
||||
wardSelect.disabled = true;
|
||||
|
||||
if (selectedProvince && addressData[selectedProvince]) {
|
||||
const districts = addressData[selectedProvince].districts;
|
||||
|
||||
// Enable district select
|
||||
districtSelect.disabled = false;
|
||||
|
||||
// Populate districts
|
||||
Object.keys(districts).forEach(districtKey => {
|
||||
const option = document.createElement('option');
|
||||
option.value = districtKey;
|
||||
option.textContent = districts[districtKey].name;
|
||||
districtSelect.appendChild(option);
|
||||
});
|
||||
} else {
|
||||
districtSelect.disabled = true;
|
||||
}
|
||||
}
|
||||
|
||||
// Update wards when district changes
|
||||
function updateWards() {
|
||||
const provinceSelect = document.getElementById('province');
|
||||
const districtSelect = document.getElementById('district');
|
||||
const wardSelect = document.getElementById('ward');
|
||||
|
||||
const selectedProvince = provinceSelect.value;
|
||||
const selectedDistrict = districtSelect.value;
|
||||
|
||||
// Reset ward
|
||||
wardSelect.innerHTML = '<option value="">-- Chọn Phường/Xã --</option>';
|
||||
|
||||
if (selectedProvince && selectedDistrict && addressData[selectedProvince]) {
|
||||
const district = addressData[selectedProvince].districts[selectedDistrict];
|
||||
|
||||
if (district && district.wards) {
|
||||
// Enable ward select
|
||||
wardSelect.disabled = false;
|
||||
|
||||
// Populate wards
|
||||
district.wards.forEach(ward => {
|
||||
const option = document.createElement('option');
|
||||
option.value = ward.toLowerCase().replace(/\s+/g, '-');
|
||||
option.textContent = ward;
|
||||
wardSelect.appendChild(option);
|
||||
});
|
||||
}
|
||||
} else {
|
||||
wardSelect.disabled = true;
|
||||
}
|
||||
}
|
||||
|
||||
// Handle form submission
|
||||
function handleSubmit(event) {
|
||||
event.preventDefault();
|
||||
|
||||
// Get form values
|
||||
const formData = {
|
||||
fullName: document.getElementById('fullName').value,
|
||||
phone: document.getElementById('phone').value,
|
||||
province: document.getElementById('province').value,
|
||||
provinceName: document.getElementById('province').selectedOptions[0].text,
|
||||
district: document.getElementById('district').value,
|
||||
districtName: document.getElementById('district').selectedOptions[0].text,
|
||||
ward: document.getElementById('ward').value,
|
||||
wardName: document.getElementById('ward').selectedOptions[0].text,
|
||||
addressDetail: document.getElementById('addressDetail').value,
|
||||
isDefault: document.getElementById('isDefault').checked
|
||||
};
|
||||
|
||||
// Validate
|
||||
if (!formData.province || !formData.district || !formData.ward) {
|
||||
showToast('Vui lòng chọn đầy đủ Tỉnh/Thành phố, Quận/Huyện, Phường/Xã', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
// Show loading
|
||||
const saveBtn = document.getElementById('saveBtn');
|
||||
const originalContent = saveBtn.innerHTML;
|
||||
saveBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> <span>Đang lưu...</span>';
|
||||
saveBtn.disabled = true;
|
||||
|
||||
// Simulate API call
|
||||
setTimeout(() => {
|
||||
// Save to localStorage (simulated)
|
||||
let addresses = JSON.parse(localStorage.getItem('savedAddresses') || '[]');
|
||||
|
||||
// If this is default, remove default from others
|
||||
if (formData.isDefault) {
|
||||
addresses = addresses.map(addr => ({...addr, isDefault: false}));
|
||||
}
|
||||
|
||||
// Add new address
|
||||
addresses.push({
|
||||
id: Date.now(),
|
||||
...formData,
|
||||
createdAt: new Date().toISOString()
|
||||
});
|
||||
|
||||
localStorage.setItem('savedAddresses', JSON.stringify(addresses));
|
||||
|
||||
// Reset button
|
||||
saveBtn.innerHTML = originalContent;
|
||||
saveBtn.disabled = false;
|
||||
|
||||
// Show success and redirect
|
||||
showToast('Đã lưu địa chỉ thành công!', 'success');
|
||||
|
||||
setTimeout(() => {
|
||||
window.location.href = 'addresses.html';
|
||||
}, 1000);
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
// 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);
|
||||
}
|
||||
|
||||
// Add 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);
|
||||
}
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -3,11 +3,69 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Địa chỉ đã lưu - EuroTile Worker</title>
|
||||
<title>Địa chỉ của bạ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>
|
||||
<style>
|
||||
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0,0,0,0.5);
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
animation: slideUp 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from { transform: translateY(20px); opacity: 0; }
|
||||
to { transform: translateY(0); opacity: 1; }
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: 20px;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 20px;
|
||||
color: #6b7280;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<div class="page-wrapper">
|
||||
<!-- Header -->
|
||||
@@ -15,12 +73,38 @@
|
||||
<a href="account.html" class="back-button">
|
||||
<i class="fas fa-arrow-left"></i>
|
||||
</a>
|
||||
<h1 class="header-title">Địa chỉ đã lưu</h1>
|
||||
<button class="back-button" onclick="addAddress()">
|
||||
<i class="fas fa-plus"></i>
|
||||
<h1 class="header-title">Địa chỉ của bạn</h1>
|
||||
<button class="back-button" onclick="openInfoModal()">
|
||||
<i class="fas fa-info-circle"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Info Modal -->
|
||||
<div id="infoModal" class="modal-overlay" style="display: none;">
|
||||
<div class="modal-content info-modal">
|
||||
<div class="modal-header">
|
||||
<h3 class="modal-title" style="font-weight: bold;">Hướng dẫn sử dụng</h3>
|
||||
<button class="modal-close" onclick="closeInfoModal()">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Đây là nội dung hướng dẫn sử dụng cho tính năng Đổi quà tặng:</p>
|
||||
<ul class="list-disc ml-6 mt-3">
|
||||
<li>Sử dụng điểm tích lũy của bạn để đổi các phần quà giá trị trong danh mục.</li>
|
||||
<li>Bấm vào một phần quà để xem chi tiết và điều kiện áp dụng.</li>
|
||||
<li>Khi xác nhận đổi quà, bạn có thể chọn "Nhận hàng tại Showroom".</li>
|
||||
<li>Nếu chọn "Nhận hàng tại Showroom", bạn sẽ cần chọn Showroom bạn muốn đến nhận từ danh sách thả xuống.</li>
|
||||
<li>Quà đã đổi sẽ được chuyển vào mục "Quà của tôi" (trong trang Hội viên).</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-primary" onclick="closeInfoModal()">Đóng</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="container">
|
||||
<!-- Address List -->
|
||||
<div class="address-list">
|
||||
@@ -93,7 +177,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Add New Address Button -->
|
||||
<button class="btn btn-primary w-100 mt-3" onclick="addAddress()">
|
||||
<button class="btn btn-primary w-100 mt-3" onclick="window.location.href='address-create.html'">
|
||||
<i class="fas fa-plus"></i>
|
||||
Thêm địa chỉ mới
|
||||
</button>
|
||||
@@ -133,6 +217,25 @@
|
||||
|
||||
alert('Đã đặt làm địa chỉ mặc định');
|
||||
}
|
||||
|
||||
function openInfoModal() {
|
||||
document.getElementById('infoModal').style.display = 'flex';
|
||||
}
|
||||
|
||||
function closeInfoModal() {
|
||||
document.getElementById('infoModal').style.display = 'none';
|
||||
}
|
||||
|
||||
function viewOrderDetail(orderId) {
|
||||
window.location.href = `order-detail.html?id=${orderId}`;
|
||||
}
|
||||
|
||||
// Close modal when clicking outside
|
||||
document.addEventListener('click', function(e) {
|
||||
if (e.target.classList.contains('modal-overlay')) {
|
||||
e.target.style.display = 'none';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -4,12 +4,13 @@
|
||||
<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>-->
|
||||
<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>
|
||||
<body class="bg-gray-50">
|
||||
<div class="page-wrapper">
|
||||
<!-- Header -->
|
||||
<!-- Header -->
|
||||
<div class="header">
|
||||
<a href="cart.html" class="back-button">
|
||||
@@ -19,312 +20,383 @@
|
||||
<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 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>
|
||||
|
||||
<!--<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">
|
||||
<!-- 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>
|
||||
|
||||
<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">
|
||||
<!-- 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>
|
||||
|
||||
|
||||
<!-- 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>
|
||||
<!-- 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>
|
||||
|
||||
<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="Tên công ty/cá nhân">
|
||||
</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ế">
|
||||
</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ỉ">
|
||||
</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">Thanh toán hoàn toàn</div>
|
||||
<div class="list-item-subtitle">Thanh toán qua tài khoản ngân hàng</div>
|
||||
<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="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 một phần</div>
|
||||
<div class="list-item-subtitle">Trả trước(≥20%), còn lại thanh toán trong vòng 30 ngày</div>
|
||||
|
||||
<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>
|
||||
|
||||
<!-- Discount Code -->
|
||||
<div class="card">
|
||||
<div class="form-group" style="margin-bottom: 8px;">
|
||||
<label class="form-label">Mã giảm giá</label>
|
||||
<div style="display: flex; gap: 8px;">
|
||||
<input type="text" class="form-input" style="flex: 1;" placeholder="Nhập mã giảm giá">
|
||||
<button class="btn btn-primary">Áp dụng</button>
|
||||
<!-- 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>
|
||||
<p class="text-small text-success">
|
||||
<i class="fas fa-check-circle"></i> Bạn được giảm 15% (hạng Diamond)
|
||||
</p>
|
||||
</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>
|
||||
|
||||
<!-- 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>
|
||||
<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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
|
||||
<!-- 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>
|
||||
<!-- 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 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 btn-submit">
|
||||
<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>
|
||||
<!-- 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>
|
||||
|
||||
<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;
|
||||
});
|
||||
|
||||
// Toggle invoice info
|
||||
function toggleInvoiceInfo() {
|
||||
const checkbox = document.getElementById('invoiceCheckbox');
|
||||
const invoiceCard = document.getElementById('invoiceInfoCard');
|
||||
|
||||
if (checkbox.checked) {
|
||||
invoiceCard.style.display = 'block';
|
||||
invoiceCard.classList.remove('hidden');
|
||||
invoiceCard.classList.add('animate-slideDown');
|
||||
} else {
|
||||
invoiceCard.style.display = 'none';
|
||||
invoiceCard.classList.add('hidden');
|
||||
invoiceCard.classList.remove('animate-slideDown');
|
||||
}
|
||||
}
|
||||
|
||||
// Toggle negotiation
|
||||
function toggleNegotiation() {
|
||||
const checkbox = document.getElementById('negotiationCheckbox');
|
||||
const paymentSection = document.querySelector('.card:has(.list-item)');
|
||||
// Payment method section
|
||||
const submitBtn = document.querySelector('.btn-submit');
|
||||
const paymentMethodCard = document.getElementById('paymentMethodCard');
|
||||
const submitBtnText = document.getElementById('submitBtnText');
|
||||
|
||||
if (checkbox.checked) {
|
||||
paymentSection.classList.add('hidden');
|
||||
submitBtn.innerHTML = '<i class="fas fa-handshake"></i> Gửi Yêu cầu & Đàm phán';
|
||||
paymentMethodCard.classList.add('opacity-50', 'pointer-events-none');
|
||||
submitBtnText.textContent = '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';
|
||||
paymentMethodCard.classList.remove('opacity-50', 'pointer-events-none');
|
||||
submitBtnText.textContent = '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-submit');
|
||||
// Handle submit
|
||||
function handleSubmit() {
|
||||
const negotiationCheckbox = document.getElementById('negotiationCheckbox');
|
||||
|
||||
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';
|
||||
};
|
||||
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 {
|
||||
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;
|
||||
// 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>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user