From 41d953f4d9efc61e8f27f041b688e4c0db40b7d7 Mon Sep 17 00:00:00 2001
From: candice <candice@hainatravel.com>
Date: Sat, 6 May 2023 10:12:42 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=97=A5=E6=9C=9F=E9=80=89?=
 =?UTF-8?q?=E6=8B=A9=E5=92=8C=E7=9B=B8=E5=BA=94JS?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/mobile_first/ah-tour-list-form.php  | 393 +++++++++++-------
 1 file changed, 235 insertions(+), 158 deletions(-)

diff --git a/application/views/mobile_first/ah-tour-list-form.php b/application/views/mobile_first/ah-tour-list-form.php
index 0f28d8b3..18a18057 100644
--- a/application/views/mobile_first/ah-tour-list-form.php
+++ b/application/views/mobile_first/ah-tour-list-form.php
@@ -147,7 +147,41 @@
 					</div>
 
 				</div>
-
+				<div class="selectionBlock">
+					<h4>
+						When would you travel?
+					</h4>
+					<div id="date_error_msg" style="display: none">
+						<div class="requiredArea" style="margin-top:-10px;">Select your travel data.</div>
+					</div>
+					<div class="travel_group date_select">
+						<input type="radio" value="exact travel dates" id="exact" name="trip_date">
+						<label for="exact" class="family">
+							I have exact travel dates.
+						</label>
+					</div>
+					<div class="travel_group date_select">
+						<input type="radio" value="approximate travel dates" id="approximate" name="trip_date">
+						<label for="approximate" class="couple">
+							I have approximate travel dates.
+						</label>
+					</div>
+					<div class="travel_group date_select">
+						<input type="radio" value="haven't decided travel dates" id="yet" name="trip_date">
+						<label for="yet" class="solo">
+							I haven't decided my travel dates.
+						</label>
+					</div>
+					<div class="trip_date_length" id="tripDateBlock" style="display: none">
+						<p style="clear: both;margin-bottom: 10px;" id="trip_date_tip">Select your travel date.</p>
+						<div id="dateSelectionBlock">
+						  <div id='flatpickrBlock'>
+							<input class="InquiryCalendar datepicker" id="starting_date" name="date_start" placeholder="Starting date *" readonly="readonly" type="text" value="" />
+						  </div>
+							<input type="month" id="expectedMonth" name="expected_month" placeholder="Select your expected travel date.">
+						</div>
+					</div>
+				</div>
 				<input class="FullName" id="realname" name="name" placeholder="Your name *" required="" type="text"
 					value="" />
 				<div id="realname_errmsg" style="display: none">
@@ -475,178 +509,221 @@
 
 <script src="https://data.asiahighlights.com/min/?f=/js/jquery-1.8.2.min.js,/js/flatpickr-4.6.1.min.js"></script>
 <script>
-	document.addEventListener('DOMContentLoaded', () => {
-		flatpickr("#starting_date", {
-			dateFormat: "Y-m-d",
-			altInput: true,
-			altFormat: "F j, Y",
-			disableMobile: true,
-			minDate: "today"
-		});
-
-		var tour_list_button = document.getElementById("tour_list_button");
-		var tour_list_form = document.getElementById("tour_list_form");
+  
+  var selectedExpectedDate = '';
+document.addEventListener('DOMContentLoaded', () => {
+    flatpickr("#starting_date", {
+        dateFormat: "Y-m-d",
+        altInput: true,
+        altFormat: "F j, Y",
+        disableMobile: true,
+        minDate: "today"
+    });
 
-		tour_list_button.addEventListener('click', function (event) {
-			var validateResult = validateQuickInquiryForm();
-			if (validateResult) {
-				if (typeof (grecaptcha) === "undefined") {
-					console.warn('grecaptcha is disabled.');
-					tour_list_form.submit();
-				} else {
-					grecaptcha.enterprise.ready(async () => {
-						const token = await grecaptcha.enterprise.execute('6Lf828MhAAAAANNetijCXKwW5ARyhcJ-b1Hhslja', { action: 'ADD_TO_CART' });
-						var el = document.createElement("input");
-						el.type = "hidden";
-						el.name = "__grecaptcha_token__";
-						el.value = token;
-						tour_list_form.appendChild(el);
-						tour_list_form.submit();
-						tour_list_button.innerText = "Submitted successfully";
-					});
-				}
-			}
-		});
+    var quick_inquiry_button = document.getElementById("quick_inquiry_button");
+    var quick_inquiry_form = document.getElementById("quick_inquiry_form");
+    
+    quick_inquiry_button.addEventListener('click', function(event) {
+        var validateResult = validateQuickInquiryForm();
+        if (validateResult) {
+          if (typeof(grecaptcha) === "undefined") {
+            console.warn('grecaptcha is disabled.');
+            quick_inquiry_form.submit();
+          } else {
+            grecaptcha.enterprise.ready(async () => {
+              const token = await grecaptcha.enterprise.execute('6Lf828MhAAAAANNetijCXKwW5ARyhcJ-b1Hhslja', {action: 'ADD_TO_CART'});
+              var el = document.createElement("input");
+              el.type = "hidden";
+              el.name = "__grecaptcha_token__";
+              el.value = token;
+              quick_inquiry_form.appendChild(el);
+              quick_inquiry_form.submit();
+              quick_inquiry_button.innerText = "Submitted successfully";
+            });
+          }
+        }  
+    });
+});
 
-	});
+function validateQuickInquiryForm() {
+    var result = true;
+    var realnameVal = document.getElementById("realname").value;
+    var emailVal = document.getElementById("email").value;
+    var expectedDateVal = document.getElementById("starting_date").value;
+    var expectedMonthVal = document.getElementById("expectedMonth").value;
+    var contactVal = document.getElementById("PhoneNo").value;
 
-	function validateQuickInquiryForm() {
-		var result = true;
-		var realnameVal = document.getElementById("realname").value;
-		var emailVal = document.getElementById("email").value;
-		var startingDateVal = document.getElementById("starting_date").value;
-		var contactVal = document.getElementById("PhoneNo").value;
+    var realnameErrEl = document.getElementById("realname_errmsg");
+    var emailErrEl = document.getElementById("email_errmsg");
+    var emailVerifyErrEl = document.getElementById("email_verify_errmsg");
+    var startingDateErrEl = document.getElementById("date_error_msg");
+    var contactErrEl = document.getElementById("contact_errmsg");
+    var groupErrEl = document.getElementById("group_error_msg");
 
-		var realnameErrEl = document.getElementById("realname_errmsg");
-		var emailErrEl = document.getElementById("email_errmsg");
-		var emailVerifyErrEl = document.getElementById("email_verify_errmsg");
-		var startingDateErrEl = document.getElementById("starting_date_errmsg");
-		var contactErrEl = document.getElementById("contact_errmsg");
-		var groupErrEl = document.getElementById("group_error_msg");
+    realnameErrEl.style.display = 'none';
+    emailErrEl.style.display = 'none';
+    emailVerifyErrEl.style.display = 'none';
+    startingDateErrEl.style.display = 'none';
+    contactErrEl.style.display = 'none';
+    groupErrEl.style.display = 'none';
 
-		realnameErrEl.style.display = 'none';
-		emailErrEl.style.display = 'none';
-		emailVerifyErrEl.style.display = 'none';
-		startingDateErrEl.style.display = 'none';
-		contactErrEl.style.display = 'none';
-		groupErrEl.style.display = 'none';
+    var travel_group_is_checked = false;
+    document.querySelectorAll('input[name="travel_group"]').forEach(function(groupNode) {
+      if (groupNode.checked) {
+        travel_group_is_checked = true;
+      }
+    });
 
-		var travel_group_is_checked = false;
-		document.querySelectorAll('input[name="travel_group"]').forEach(function (groupNode) {
-			if (groupNode.checked) {
-				travel_group_is_checked = true;
-			}
-		});
+    if (travel_group_is_checked === false) {
+      groupErrEl.style.display = '';
+      result = false;
+    }
 
-		if (travel_group_is_checked === false) {
-			groupErrEl.style.display = '';
-			result = false;
-		}
+    var tripDate_is_checked = false;
+      if (selectedExpectedDate === 'exact') {
+        tripDate_is_checked = expectedDateVal !== '';
+      } else if (selectedExpectedDate === 'approximate') {
+        tripDate_is_checked = expectedMonthVal !== '';
+      } else if (selectedExpectedDate === 'yet') {
+        tripDate_is_checked = true;
+      }
 
-		if (realnameVal === '') {
-			realnameErrEl.style.display = '';
-			result = false;
-		}
-		if (emailVal === '') {
-			emailErrEl.style.display = '';
-			result = false;
-		} else {
-			var emailPattern = /^[\w\-\.]+@[\w\-\.]+(\.\w+)+$/;
-			if (!emailPattern.test(emailVal)) {
-				emailVerifyErrEl.style.display = '';
-				result = false;
+			//时间选择
+			if (!tripDate_is_checked) {
+        startingDateErrEl.style.display = '';
+        result = false;
 			}
-		}
-		if (startingDateVal === '') {
-			startingDateErrEl.style.display = '';
-			result = false;
-		}
-		if (contactVal === '') {
-			contactErrEl.style.display = '';
-			result = false;
-		}
-		return result;
-	}
-</script>
-
 
+    if (realnameVal === '') {
+        realnameErrEl.style.display = '';
+        result = false;
+    }
+    if (emailVal === '') {
+        emailErrEl.style.display = '';
+        result = false;
+    } else {
+        var emailPattern = /^[\w\-\.]+@[\w\-\.]+(\.\w+)+$/;
+        if (!emailPattern.test(emailVal)) {
+            emailVerifyErrEl.style.display = '';
+            result = false;
+        }
+    }
+    if (contactVal === '') {
+        contactErrEl.style.display = '';
+        result = false;
+    }
+    return result;
+}
+</script>
 <script>
-	var $adultBlock = $('#adultBlock');
-	var $childrenBlock = $('#childrenBlock');
-	var $adultNumberInput = $('#adultNumber');
-	var adultNumber = $adultNumberInput.val();
-	var $teenagerNumberInput = $('#teenagerNumber');
-	var teenagerNumber = $teenagerNumberInput.val();
-	var $childrenNumberInput = $('#childrenNumber');
-	var childrenNumber = $childrenNumberInput.val();
-	var $infantNumberInput = $('#infantNumber');
-	var infantNumber = $infantNumberInput.val();
-	$('input[name="travel_group"]').each((i, groupEle) => {
-		$(groupEle).click(function (e) {
+  
+	$(function () {
+        	var $adultBlock = $('#adultBlock');
+    var $childrenBlock = $('#childrenBlock');
+    var $adultNumberInput = $('#adultNumber');
+    var adultNumber = $adultNumberInput.val();
+    var $teenagerNumberInput = $('#teenagerNumber');
+    var teenagerNumber = $teenagerNumberInput.val();
+    var $childrenNumberInput = $('#childrenNumber');
+    var childrenNumber = $childrenNumberInput.val();
+    var $infantNumberInput = $('#infantNumber');
+    var infantNumber = $infantNumberInput.val();
+    $('input[name="travel_group"]').each((i, groupEle) => {
+			$(groupEle).click(function (e) {
+        
+        $teenagerNumberInput.val(0);
+        $childrenNumberInput.val(0);
+        $infantNumberInput.val(0);
 
-			$teenagerNumberInput.val(0);
-			$childrenNumberInput.val(0);
-			$infantNumberInput.val(0);
-
-			var currentTarget = e.currentTarget;
-			if (currentTarget.id === 'Family' || currentTarget.id === 'Other') {
-				$adultBlock.show();
-				$childrenBlock.show();
-			} else {
-				$adultBlock.show();
-				$childrenBlock.hide();
-			}
-			if (currentTarget.id === 'Couple') {
-				$adultNumberInput.val(2);
-			} else if (currentTarget.id === 'Solo') {
-				$adultNumberInput.val(1);
-			}
-		})
-	});
+				var currentTarget = e.currentTarget;
+        if (currentTarget.id === 'Family' || currentTarget.id === 'Other' ) {
+          $adultBlock.show();
+          $childrenBlock.show();
+        } else {
+          $adultBlock.show();
+          $childrenBlock.hide();
+        }
+        if (currentTarget.id === 'Couple') {
+          $adultNumberInput.val(2);
+        } else if (currentTarget.id === 'Solo') {
+          $adultNumberInput.val(1);
+        }
+			})
+		});
 
+    var $tripDateBlock = $('#tripDateBlock');
+    var $expectedDate = $('#flatpickrBlock');
+    var $expectedMonth = $('#expectedMonth');
+    var $dateSelectionBlock = $('#dateSelectionBlock');
+    var $tripDateTip = $('#trip_date_tip');
+    
+    $('input[name="trip_date"]').each((i, tripDateEle) => {
+			$(tripDateEle).click(function (e) {
+        $expectedDate.val('');
+        $expectedMonth.val('');
+        $tripDateBlock.show();
+        var selectedTripDate = e.currentTarget;
+        selectedExpectedDate = selectedTripDate.id;
+        if (selectedTripDate.id === 'exact') {
+          $dateSelectionBlock.show();
+          $expectedMonth.hide();
+          $expectedDate.show();
+          $tripDateTip.show();
+        } else if (selectedTripDate.id === 'approximate') {
+          $dateSelectionBlock.show();
+          $expectedDate.hide();
+          $expectedMonth.show();
+          $tripDateTip.show();
+        } else if (selectedTripDate.id === 'yet') {
+          $dateSelectionBlock.hide();
+          $tripDateTip.hide();
+        }
+      })
+    });
 
-	//成人
-	$('#plusAdult').click(function () {
-		adultNumber++;
-		$adultNumberInput.val(adultNumber);
-	});
-	$('#minusAdult').click(function () {
-		if (adultNumber > 1) {
-			adultNumber--;
+//成人
+    $('#plusAdult').click(function () {
+			adultNumber++;
 			$adultNumberInput.val(adultNumber);
-		}
-	});
-	// 青少年
-	$('#plusTeenager').click(function () {
-		teenagerNumber++;
-		$teenagerNumberInput.val(teenagerNumber);
-	});
-	$('#minusTeenager').click(function () {
-		if (teenagerNumber > 0) {
-			teenagerNumber--;
+		});
+		$('#minusAdult').click(function () {
+			if (adultNumber > 1) {
+				adultNumber--;
+				$adultNumberInput.val(adultNumber);
+			}
+		});    
+    // 青少年
+    $('#plusTeenager').click(function () {
+			teenagerNumber++;
 			$teenagerNumberInput.val(teenagerNumber);
-		}
-	});
-	// 儿童
-	$('#plusChildren').click(function () {
-		childrenNumber++;
-		$childrenNumberInput.val(childrenNumber);
-	});
-	$('#minusChildren').click(function () {
-		if (childrenNumber > 0) {
-			childrenNumber--;
+		});
+		$('#minusTeenager').click(function () {
+			if (teenagerNumber > 0) {
+				teenagerNumber--;
+				$teenagerNumberInput.val(teenagerNumber);
+			}
+		});
+    // 儿童
+    $('#plusChildren').click(function () {
+			childrenNumber++;
 			$childrenNumberInput.val(childrenNumber);
-		}
-	});
-	// 婴儿
-	$('#plusInfant').click(function () {
-		infantNumber++;
-		$infantNumberInput.val(infantNumber);
-	});
-	$('#minusInfant').click(function () {
-		if (infantNumber > 0) {
-			infantNumber--;
+		});
+		$('#minusChildren').click(function () {
+			if (childrenNumber > 0) {
+				childrenNumber--;
+				$childrenNumberInput.val(childrenNumber);
+			}
+		});
+    // 婴儿
+    $('#plusInfant').click(function () {
+			infantNumber++;
 			$infantNumberInput.val(infantNumber);
-		}
-	});
-</script>
\ No newline at end of file
+		});
+		$('#minusInfant').click(function () {
+			if (infantNumber > 0) {
+				infantNumber--;
+				$infantNumberInput.val(infantNumber);
+			}
+		});
+  })
+    </script>
\ No newline at end of file