234 lines
11 KiB
HTML
234 lines
11 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ạo yêu cầu báo giá - 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="quotes-list.html" class="back-button">
|
|
<i class="fas fa-arrow-left"></i>
|
|
</a>
|
|
<h1 class="header-title">Tạo yêu cầu báo giá</h1>
|
|
<div style="width: 32px;"></div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="form-container">
|
|
<!-- Project Information -->
|
|
<div class="card">
|
|
<h3 class="card-title mb-3">Thông tin dự án</h3>
|
|
|
|
<form id="quoteForm">
|
|
<div class="form-group">
|
|
<label class="form-label">Tên dự án *</label>
|
|
<input type="text" class="form-input" placeholder="Nhập tên dự án" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">Địa chỉ dự án *</label>
|
|
<input type="text" class="form-input" placeholder="Nhập địa chỉ chi tiết" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">Loại công trình</label>
|
|
<select class="form-select">
|
|
<option value="">Chọn loại công trình</option>
|
|
<option value="villa">Villa</option>
|
|
<option value="apartment">Chung cư</option>
|
|
<option value="office">Văn phòng</option>
|
|
<option value="commercial">Thương mại</option>
|
|
<option value="resort">Resort/Khách sạn</option>
|
|
<option value="house">Nhà phố</option>
|
|
<option value="other">Khác</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">Diện tích dự kiến (m²)</label>
|
|
<input type="number" class="form-input" placeholder="Nhập diện tích">
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Product List -->
|
|
<div class="card">
|
|
<div class="d-flex justify-between align-center mb-3">
|
|
<h3 class="card-title">Danh sách sản phẩm</h3>
|
|
<button class="btn btn-secondary btn-sm" onclick="addProduct()">
|
|
<i class="fas fa-plus"></i>
|
|
Thêm sản phẩm
|
|
</button>
|
|
</div>
|
|
|
|
<div id="productList">
|
|
<!-- Product Item 1 -->
|
|
<div class="product-quote-item">
|
|
<div class="product-quote-info">
|
|
<img src="https://placehold.co/60x60/F5F5F5/005B9A/png?text=G1" alt="Product">
|
|
<div class="product-quote-details">
|
|
<h4 class="product-quote-name">Gạch Eurotile MỘC LAM E03</h4>
|
|
<p class="product-quote-specs">60x60cm - Matt</p>
|
|
<p class="product-quote-price">285.000đ/m²</p>
|
|
</div>
|
|
</div>
|
|
<div class="product-quote-actions">
|
|
<div class="quantity-input">
|
|
<input type="number" value="50" min="1" class="qty-input">
|
|
<span class="qty-unit">m²</span>
|
|
</div>
|
|
<button class="btn-remove-product" onclick="removeProduct(this)">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Product Item 2 -->
|
|
<div class="product-quote-item">
|
|
<div class="product-quote-info">
|
|
<img src="https://placehold.co/60x60/E8E8E8/005B9A/png?text=G2" alt="Product">
|
|
<div class="product-quote-details">
|
|
<h4 class="product-quote-name">Gạch Granite Premium G501</h4>
|
|
<p class="product-quote-specs">80x80cm - Polished</p>
|
|
<p class="product-quote-price">420.000đ/m²</p>
|
|
</div>
|
|
</div>
|
|
<div class="product-quote-actions">
|
|
<div class="quantity-input">
|
|
<input type="number" value="30" min="1" class="qty-input">
|
|
<span class="qty-unit">m²</span>
|
|
</div>
|
|
<button class="btn-remove-product" onclick="removeProduct(this)">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Empty State for Products -->
|
|
<div class="empty-product-state" id="emptyProductState" style="display: none;">
|
|
<i class="fas fa-inbox empty-icon-small"></i>
|
|
<p>Chưa có sản phẩm nào</p>
|
|
<button class="btn btn-primary btn-sm mt-2" onclick="addProduct()">
|
|
Thêm sản phẩm đầu tiên
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Additional Notes -->
|
|
<div class="card">
|
|
<h3 class="card-title mb-3">Ghi chú</h3>
|
|
<textarea class="form-textarea" rows="4" placeholder="Thêm ghi chú hoặc yêu cầu đặc biệt cho báo giá này..."></textarea>
|
|
</div>
|
|
|
|
<!-- Quote Summary -->
|
|
<div class="card quote-summary">
|
|
<h3 class="card-title mb-3">Tóm tắt yêu cầu</h3>
|
|
<div class="summary-row">
|
|
<span>Tổng sản phẩm:</span>
|
|
<span id="totalProducts">2 sản phẩm</span>
|
|
</div>
|
|
<div class="summary-row">
|
|
<span>Tổng diện tích:</span>
|
|
<span id="totalArea">80 m²</span>
|
|
</div>
|
|
<div class="summary-row">
|
|
<span>Giá trị ước tính:</span>
|
|
<span id="estimatedValue">26.850.000 VND</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="form-actions">
|
|
<button type="button" class="btn btn-secondary" onclick="saveDraft()">
|
|
<i class="fas fa-save"></i>
|
|
Lưu nháp
|
|
</button>
|
|
<button type="submit" class="btn btn-primary" onclick="submitQuoteRequest()">
|
|
<i class="fas fa-paper-plane"></i>
|
|
Gửi yêu cầu
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function addProduct() {
|
|
alert('Chức năng thêm sản phẩm sẽ được phát triển - sẽ mở danh sách sản phẩm để chọn');
|
|
}
|
|
|
|
function removeProduct(button) {
|
|
if (confirm('Bạn có chắc chắn muốn xóa sản phẩm này?')) {
|
|
const productItem = button.closest('.product-quote-item');
|
|
productItem.remove();
|
|
updateSummary();
|
|
|
|
// Check if product list is empty
|
|
const productList = document.getElementById('productList');
|
|
if (productList.children.length === 0) {
|
|
document.getElementById('emptyProductState').style.display = 'block';
|
|
}
|
|
}
|
|
}
|
|
|
|
function updateSummary() {
|
|
const productItems = document.querySelectorAll('.product-quote-item');
|
|
let totalProducts = productItems.length;
|
|
let totalArea = 0;
|
|
let estimatedValue = 0;
|
|
|
|
productItems.forEach(item => {
|
|
const qty = parseInt(item.querySelector('.qty-input').value) || 0;
|
|
const priceText = item.querySelector('.product-quote-price').textContent;
|
|
const price = parseInt(priceText.replace(/[^\d]/g, '')) || 0;
|
|
|
|
totalArea += qty;
|
|
estimatedValue += qty * price;
|
|
});
|
|
|
|
document.getElementById('totalProducts').textContent = `${totalProducts} sản phẩm`;
|
|
document.getElementById('totalArea').textContent = `${totalArea} m²`;
|
|
document.getElementById('estimatedValue').textContent = estimatedValue.toLocaleString('vi-VN') + ' VND';
|
|
}
|
|
|
|
function saveDraft() {
|
|
alert('Đã lưu nháp yêu cầu báo giá!');
|
|
}
|
|
|
|
function submitQuoteRequest() {
|
|
const form = document.getElementById('quoteForm');
|
|
const productItems = document.querySelectorAll('.product-quote-item');
|
|
|
|
if (!form.checkValidity()) {
|
|
form.reportValidity();
|
|
return;
|
|
}
|
|
|
|
if (productItems.length === 0) {
|
|
alert('Vui lòng thêm ít nhất một sản phẩm!');
|
|
return;
|
|
}
|
|
|
|
alert('Yêu cầu báo giá đã được gửi thành công! Chúng tôi sẽ liên hệ trong vòng 24 giờ.');
|
|
window.location.href = 'quotes-list.html';
|
|
}
|
|
|
|
// Update summary when quantity changes
|
|
document.addEventListener('input', function(e) {
|
|
if (e.target.classList.contains('qty-input')) {
|
|
updateSummary();
|
|
}
|
|
});
|
|
|
|
// Initial summary calculation
|
|
document.addEventListener('DOMContentLoaded', updateSummary);
|
|
</script>
|
|
</body>
|
|
</html> |