' +
+ `| ${r.rent_id ?? 'N/A'} | ` +
+ `${formatDate(r.registration_date)} | ` +
+ `${formatDate(r.start_date)} | ` +
+ `${formatDate(r.end_date)} | ` +
+ `${r.version_en ?? 'N/A'} | ` +
+ `${r.area_en ?? 'N/A'} | ` +
+ `${formatCurrency(r.contract_amount)} | ` +
+ `${formatCurrency(r.annual_amount)} | ` +
+ `${r.is_free_hold_en ?? 'N/A'} | ` +
+ `${formatNumber(r.actual_area)} | ` +
+ `${r.prop_type_en ?? 'N/A'} | ` +
+ `${r.prop_sub_type_en ?? 'N/A'} | ` +
+ `${r.rooms != null ? formatNumber(r.rooms, 1) : 'N/A'} | ` +
+ `${r.usage_en ?? 'N/A'} | ` +
+ `${r.nearest_metro_en ?? 'N/A'} | ` +
+ `${r.nearest_mall_en ?? 'N/A'} | ` +
+ `${r.nearest_landmark_en ?? 'N/A'} | ` +
+ `${r.parking != null ? formatNumber(r.parking, 1) : 'N/A'} | ` +
+ `${r.total_properties ?? '0'} | ` +
+ `${r.master_project_en ?? 'N/A'} | ` +
+ `${r.project_en ?? 'N/A'} | ` +
+ `${formatDate(r.created_at)} | ` +
+ `${formatDate(r.updated_at)} | ` +
+ '
'
+ )).join('');
+
+ showResults();
+}
+
+function resetFilters() {
+ document.getElementById('filtersForm').reset();
+ document.getElementById('size_min').value = '';
+ document.getElementById('size_max').value = '';
+ document.getElementById('sizeValue').textContent = 'All Sizes';
+ hideResults();
+ hideError();
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+ populateAreas();
+ loadProjects();
+
+ const sizeMinHidden = document.getElementById('size_min');
+ const sizeMaxHidden = document.getElementById('size_max');
+ const sizeMinRange = document.getElementById('size_min_range');
+ const sizeMaxRange = document.getElementById('size_max_range');
+ const sizeFill = document.getElementById('sizeFill');
+ const sizeValue = document.getElementById('sizeValue');
+ const MIN_VAL = parseFloat(sizeMinRange.min);
+ const MAX_VAL = parseFloat(sizeMinRange.max);
+ const STEP = parseFloat(sizeMinRange.step) || 100;
+
+ function updateSizeLabel() {
+ const min = parseFloat(sizeMinRange.value);
+ const max = parseFloat(sizeMaxRange.value);
+ const hasMin = !isNaN(min);
+ const hasMax = !isNaN(max);
+ if (!hasMin && !hasMax) {
+ sizeValue.textContent = 'All Sizes';
+ } else if (hasMin && hasMax) {
+ sizeValue.textContent = `${min.toLocaleString('en-US')} - ${max.toLocaleString('en-US')} sq.ft`;
+ } else if (hasMin) {
+ sizeValue.textContent = `≥ ${min.toLocaleString('en-US')} sq.ft`;
+ } else {
+ sizeValue.textContent = `≤ ${max.toLocaleString('en-US')} sq.ft`;
+ }
+ // Persist only when different from full range
+ sizeMinHidden.value = (min > MIN_VAL) ? min : '';
+ sizeMaxHidden.value = (max < MAX_VAL) ? max : '';
+ // Update fill track
+ const left = ((Math.max(MIN_VAL, Math.min(min, max)) - MIN_VAL) / (MAX_VAL - MIN_VAL)) * 100;
+ const right = ((Math.max(MIN_VAL, Math.max(min, max)) - MIN_VAL) / (MAX_VAL - MIN_VAL)) * 100;
+ sizeFill.style.left = `${left}%`;
+ sizeFill.style.width = `${Math.max(0, right - left)}%`;
+ }
+
+ function clampRanges() {
+ if (parseFloat(sizeMinRange.value) > parseFloat(sizeMaxRange.value) - STEP) {
+ sizeMinRange.value = (parseFloat(sizeMaxRange.value) - STEP).toString();
+ }
+ if (parseFloat(sizeMaxRange.value) < parseFloat(sizeMinRange.value) + STEP) {
+ sizeMaxRange.value = (parseFloat(sizeMinRange.value) + STEP).toString();
+ }
+ }
+ sizeMinRange.addEventListener('input', () => { clampRanges(); updateSizeLabel(); });
+ sizeMaxRange.addEventListener('input', () => { clampRanges(); updateSizeLabel(); });
+
+ // Ensure both handles are draggable when overlapping by toggling z-index on interaction
+ function bringMinToFront() {
+ sizeMinRange.style.zIndex = '6';
+ sizeMaxRange.style.zIndex = '5';
+ }
+ function bringMaxToFront() {
+ sizeMinRange.style.zIndex = '5';
+ sizeMaxRange.style.zIndex = '6';
+ }
+ ['mousedown','pointerdown','touchstart'].forEach(evt => {
+ sizeMinRange.addEventListener(evt, bringMinToFront, { passive: true });
+ sizeMaxRange.addEventListener(evt, bringMaxToFront, { passive: true });
+ });
+ // Initialize
+ sizeMinRange.value = MIN_VAL;
+ sizeMaxRange.value = MAX_VAL;
+ updateSizeLabel();
+
+ document.getElementById('filtersForm').addEventListener('submit', async (e) => {
+ e.preventDefault();
+ currentPage = 1;
+ const pageInput = document.getElementById('page');
+ if (pageInput) pageInput.value = '1';
+ await searchRents(1);
+ });
+
+ const resetBtn = document.getElementById('resetBtn');
+ if (resetBtn) {
+ resetBtn.addEventListener('click', resetFilters);
+ }
+
+ // pagination buttons
+ const prevBtn = document.getElementById('prevPage');
+ const nextBtn = document.getElementById('nextPage');
+ if (prevBtn) {
+ prevBtn.addEventListener('click', async () => {
+ if (lastPaging.has_prev && currentPage > 1) {
+ currentPage -= 1;
+ const pageInput2 = document.getElementById('page');
+ if (pageInput2) pageInput2.value = String(currentPage);
+ await searchRents(currentPage);
+ }
+ });
+ }
+ if (nextBtn) {
+ nextBtn.addEventListener('click', async () => {
+ if (lastPaging.has_next) {
+ currentPage += 1;
+ const pageInput3 = document.getElementById('page');
+ if (pageInput3) pageInput3.value = String(currentPage);
+ await searchRents(currentPage);
+ }
+ });
+ }
+});
+
+
diff --git a/public/rents.html b/public/rents.html
new file mode 100644
index 0000000..ef3646f
--- /dev/null
+++ b/public/rents.html
@@ -0,0 +1,501 @@
+
+
+
+