From 1000479c955d7a8d15fb84b171cf65c461a4a583 Mon Sep 17 00:00:00 2001
From: candice <candice@hainatravel.com>
Date: Tue, 30 Jan 2024 11:35:13 +0800
Subject: [PATCH] =?UTF-8?q?=E6=81=A2=E5=A4=8D=E6=97=A5=E6=9C=9F=E6=A8=A1?=
 =?UTF-8?q?=E7=B3=8A=E9=80=89=E6=8B=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/mobile_first/ch-info-page-form.php  | 198 +++++++++++-------
 1 file changed, 121 insertions(+), 77 deletions(-)

diff --git a/application/views/mobile_first/ch-info-page-form.php b/application/views/mobile_first/ch-info-page-form.php
index e5fad010..0d8204d5 100644
--- a/application/views/mobile_first/ch-info-page-form.php
+++ b/application/views/mobile_first/ch-info-page-form.php
@@ -44,113 +44,157 @@
                             </div>
 
                             <div id="adultBlock" style="display: none">
-                              <p style="margin-bottom: 10px;"><strong>Adults number (age ≥ 18 years old)</strong></p>
+                              <p style="margin-top: 0;margin-bottom: 0;"><strong>Adults number (age ≥ 18 years old)</strong></p>
                               <div class="kids_age">
-                                
                                   <select class="kids_number" id="adultNumber_65_plus" name="adult_18_plus" >
                                       <option value="0">0</option>
-                                      <option value="1">1</option>
-                                      <option value="2">2</option>
-                                      <option value="3">3</option>
-                                      <option value="4">4</option>
-                                      <option value="5">5</option>
-                                      <option value="6">6</option>
-                                      <option value="7">7</option>
-                                      <option value="8">8</option>
-                                      <option value="9">9</option>
-                                      <option value="10">10</option>
-                                      <option value="11">11</option>
-                                      <option value="12">12</option>
-                                      <option value="13">13</option>
-                                      <option value="14">14</option>
-                                      <option value="15">15</option>
-                                      <option value="16">16</option>
-                                      <option value="17">17</option>
-                                      <option value="18">18</option>
-                                      <option value="19">19</option>
-                                      <option value="20">20</option>
-                                      <option value="21">21</option>
-                                      <option value="22">22</option>
-                                      <option value="23">23</option>
-                                      <option value="24">24</option>
-                                      <option value="25">25</option>
-                                      <option value="26">26</option>
-                                      <option value="27">27</option>
-                                      <option value="28">28</option>
-                                      <option value="29">29</option>
-                                      <option value="30">30</option>
-                                      
+                                      <option value="1">1 person</option>
+                                      <option value="2">2 people</option>
+                                      <option value="3">3 people</option>
+                                      <option value="4">4 people</option>
+                                      <option value="5">5 people</option>
+                                      <option value="6">6 people</option>
+                                      <option value="7">7 people</option>
+                                      <option value="8">8 people</option>
+                                      <option value="9">9 people</option>
+                                      <option value="10">10 people</option>
+                                      <option value="11">11 people</option>
+                                      <option value="12">12 people</option>
+                                      <option value="13">13 people</option>
+                                      <option value="14">14 people</option>
+                                      <option value="15">15 people</option>
+                                      <option value="16">16 people</option>
+                                      <option value="17">17 people</option>
+                                      <option value="18">18 people</option>
+                                      <option value="19">19 people</option>
+                                      <option value="20">20 people</option>
+                                      <option value="21">21 people</option>
+                                      <option value="22">22 people</option>
+                                      <option value="23">23 people</option>
+                                      <option value="24">24 people</option>
+                                      <option value="25">25 people</option>
+                                      <option value="26">26 people</option>
+                                      <option value="27">27 people</option>
+                                      <option value="28">28 people</option>
+                                      <option value="29">29 people</option>
+                                      <option value="30">30 people</option>
+                                      <option value="31">31 or more people</option>
                                       </select>
-                                      <p style="
-    margin-top: 5px;font-size: 18px;
-">people</p>
                               </div>
-
+                          
+                             
                           </div>
                           <div class="clear"></div>
                           <div id="childrenBlock" style="display: none">
-                            <p style="margin-bottom: 10px;"><strong>Children number</strong></p>
+                              <p style="margin-top: 0;margin-bottom: 0;"><strong>Children number</strong></p>
                               <div class="kids_age">
                                   <p style="margin-bottom: 5px;">10-17 yrs old</p>
-                                  <select class="kids_number" id="teenagerNumber" name="teenager_10_17">
+                                  <select class="kids_number" id="teenagerNumber" name="teenager_10_17_yrs">
                                   <option value="0">0</option>
-                              <option value="1">1</option>
-                              <option value="2">2</option>
-                              <option value="3">3</option>
-                              <option value="4">4</option>
-                              <option value="5">5</option>
+                              <option value="1">1 person</option>
+                              <option value="2">2 people</option>
+                              <option value="3">3 people</option>
+                              <option value="4">4 people</option>
+                              <option value="5">5 or more people</option>
                                   </select>
-                                  <p style="
-    margin-top: 10px;font-size: 18px;
-">people</p>
                               </div>
                               <div class="kids_age">
                                   <p style="margin-bottom: 5px;">3-9 yrs old</p>
-                                  <select class="kids_number" id="childrenNumber" name="children_3_9">
+                                  <select class="kids_number" id="childrenNumber" name="children_3_9_yrs">
                                   <option value="0">0</option>
-                              <option value="1">1</option>
-                              <option value="2">2</option>
-                              <option value="3">3</option>
-                              <option value="4">4</option>
-                              <option value="5">5</option>
+                              <option value="1">1 person</option>
+                              <option value="2">2 people</option>
+                              <option value="3">3 people</option>
+                              <option value="4">4 people</option>
+                              <option value="5">5 or more people</option>
                                   </select>
-                                  <p style="
-    margin-top: 10px;font-size: 18px;
-">people</p>
                               </div>
                               <div class="kids_age">
                                   <p style="margin-bottom: 5px;">0-2 yrs old</p>
-                                  <select class="kids_number" id="infantNumber" name="infant_0_2">
+                                  <select class="kids_number" id="infantNumber" name="infant_0_2_yrs">
                                   <option value="0">0</option>
-                              <option value="1">1</option>
-                              <option value="2">2</option>
-                              <option value="3">3</option>
-                              <option value="4">4</option>
-                              <option value="5">5</option>
+                              <option value="1">1 person</option>
+                              <option value="2">2 people</option>
+                              <option value="3">3 people</option>
+                              <option value="4">4 people</option>
+                              <option value="5">5 or more people</option>
                                   </select>
-                                  <p style="
-    margin-top: 10px;font-size: 18px;
-">people</p>
                               </div>
                           </div>
 
                         </div>
 
-                        <input class="InquiryCalendar" data-min-date="7" id="starting_date"
-                        name="date_start" placeholder="Starting date" readonly="readonly"
-                        type="text"/><span id="starting_date_errmsg" style="display: none"><span
-          class="requiredArea">Please enter your starting date.</span></span>
-             
+                        <div class="selectionBlock" style="margin-bottom: 10px;">
+                            <p style="text-align: left; font-weight: 400; padding-bottom: 0;">
+                        When would you travel?
+                                </p>
+                                <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="updatedestination" style="font-size: 18px;">
+                                    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="updatedestination" style="font-size: 18px;">
+                                    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="updatedestination" style="font-size: 18px;">
+                                    Not decided travel dates
+                                </label>
+                            </div>
+                            
+                <div class="trip_date_length" id="tripDateBlock" style="display: none">
+                              <p style="text-align: left; font-weight: 400; font-size: 19px;">Select your travel date and trip length (days).</p>
+                  <div id='dateSelectionBlock'>
+                                  <div id='flatpickrBlock'>
+                  <input type="text" class="arrivalDate datepicker" id="starting_date" name="date_start" value="" placeholder="mm/dd/yyyy" autocomplete="off" style="width: auto;
+                  float: left;
+                  margin-right: 15px;
+                  border-radius: 6px;
+                  padding: 0 15px;">   
+                  </div>         
+                  <input type="month" id="expectedMonth" name="expected_month" placeholder="Select your expected travel date." style="width: auto;
+                  float: left;
+                  margin-right: 15px;
+                  border-radius: 6px;
+                  padding: 0 15px;
+                  margin-bottom:15px;">
+                  </div>
+                  <div class="peopleSelect">
+                    <div class="numberBtn">
+                      <input class="minaddBtn" id="tripLengthMinus" type="button" value="-">
+                      <input class="number" type="text" value="14" id="tripLengthNumber" name="trip_length" style="margin-right: 5px;">
+                      <input class="minaddBtn" id="tripLengthPlus" type="button" value="+">
+                    </div>
+                            </div>
+              </div>
+    
+                        </div>
+
+            <p>           
+            <span class="inquiry_form_tag"><img src="https://data.chinahighlights.com/pic/input-name.png">
+                <span class="form_required">*</span>
+            </span>    
             <input class="FullName" id="realname" name="name" placeholder="Your name" type="text"/> 
             <span id="realname_errmsg" style="display: none"><span class="requiredArea">Please enter your name.</span></span>
-  
+            </p>
+
+            <p>
+            <span class="inquiry_form_tag"><img src="https://data.chinahighlights.com/pic/input-email.png">
+                <span class="form_required">*</span></span>     
             <input class="EmailAddress" id="email" name="email" placeholder="Email" type="text"/>
                 <span id="email_errmsg" style="display: none"><span class="requiredArea">Please enter your email.</span></span>
                 <span id="email_verify_errmsg" style="display: none"><span class="requiredArea">Please verify your email.</span></span>
-
-
-                
-
+            </p>
+   
+            <p>
                 <select name="country_code" class="country_code">
                 <option style="font-weight: 600;" value="United States +1">United States&nbsp; &nbsp;+1</option>
     <option style="font-weight: 600;" value="United Kingdom +44">United Kingdom&nbsp; &nbsp;+44</option>
@@ -405,10 +449,10 @@
     <option value="Åland Islands +385">Åland Islands&nbsp; &nbsp;+35818</option>
                 </select>
             <input class="Inquiryphone" id="PhoneNo" name="PhoneNo"
-                      placeholder="Phone number *" type="tel"/>
+                      placeholder="Phone number *" type="tel"/></p>
                       <span id="phone_errmsg" style="display: none"><span class="requiredArea">Please enter your phone number.</span></span>
                      
-                      <p style="margin-top: 10px;margin-bottom: 10px;padding: 0;text-align: left;font-size: 20px;font-weight: 300;">I prefer to be contacted via:</p>
+                      <p style="margin-top: 0;margin-bottom: 10px;padding: 0;text-align: left;font-size: 20px;font-weight: 300;">I prefer to be contacted via:</p>
                       <div class="checkYes"><label for="WeChat"><input class="checkBorder" id="WeChat" name="contact_via_WeChat" type="checkbox" value="yes">WeChat</label></div>
                       <div class="checkYes"><label for="WhatsApp"><input class="checkBorder" id="WhatsApp" name="contact_via_WhatsApp" type="checkbox" value="yes">WhatsApp </label></div>
                       <div class="checkYes"><label for="Phone"><input class="checkBorder" id="Phone" name="contact_via_phone_call" type="checkbox" value="yes">Phone call</label></div>