


 <!--<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
    <meta name="description" content="">

    <meta name="keywords" content="">



    <link rel="icon" href="<?php echo base_url(); ?>assets/ico.png">
    <title>Book an appointment - Expert Solutions</title>
    <!-- Bootstrap core CSS -->
    

 <!--</head> -->
<div class="booking-banner">
        
       
		 <p><a href="<?php echo site_url('user/index'); ?>">home</a> / <a style="color:#8e9499;">Book online</a></p>  
         <h2>Book an appointment</h2>
		</div>
		 <div class="clearfix"></div>


 	
<div class="servicereq" id="servicereq">

		   

       <div class="home-form" >
  		
    <form id="emergency_form2" name="emergency_form2" action="" method="post" >
       
	  <input type="hidden" name="page" value="footer">
   
	
	<div class="container">
	
		<div class="row">
		<div class="container">
		<div class="col-xxs-12 col-xs-3 mt alternate">
		<span class="step" id= "service_label" for="" >Service</span>
		</div>
		<div class="col-xxs-12 col-xs-3 mt alternate" >
		<span class="step" id="property_label" for="" >Location</span>
		</div>
		<div class="col-xxs-12 col-xs-3 mt alternate" >
		<span class="step" id ="contact_label" for="" >Contact</span>
		</div>
		<div class="col-xxs-12 col-xs-3 mt alternate" >
		<span class="step" id ="confirmation_label" for="" >Confirm</span>
		</div>
		</div>
		</div>
	
				
	<!--////////////////////////////////////////////////////////////////////////////////////////////////////////////////---->								
<!--///////////////////////////////////////////// 1 Booking section///////////////////////////////////////////////////---->
	<!--////////////////////////////////////////////////////////////////////////////////////////////////////////////////---->				
				
	<div class="tab" id="Booking_section" style="display:none">
				
			  							<div class="row">
											<div class="col-xxs-12 col-xs-6 mt alternate" id="service_type_label" >																					
													<label for="service_type">Type of service required:</label>
													</div></div>
													
			                                      <div class="row">
												  
												  <div class="col-xxs-12 col-xs-6 mt alternate"  >
												    <div class="input-field">
												   <select class="form-control"  name="service_type" id="service_type" onChange="Service_type(event)" >
		  <?php
		  
           $services=$this->aqadmin_model->select('exp_service','id','ASC');               
            foreach($services as $service)
            {
				?>	 <option value="<?php echo $service->service_type; ?>" > <?php echo $service->service_type; ?></option>	
				 
            <?php  	
            }
            ?>
        
       </select></div>		
												<!--  <div class="input-field">
                                                     
                                                    <select class="form-control"  name="service_type" id="service_type" onChange="Service_type(event)" >
													<option value="Fitness Equipment Maintenance" >Fitness Equipment Maintenance</option>												
                                                    <option value="Home appliance services">Home appliance services </option>
													<option value="Television repair services">Television repair services </option>
													<option value="Industrial cleaning equipment services"> Industrial cleaning equipment services</option>
													<option value="CCTV Installation services">CCTV Installation services </option>
                                                    
                                                    </select>

                                                   </div> --></div>
												
												
											
											<div class="col-xxs-12 col-xs-6 mt alternate" id="booking_selection" style="display:none">																		
			                                       <div class="input-field">
                                                                                              												
													<select class="form-control"  name="booking_type" id="booking_type" onChange="Booking_type(event)">
													<option value="Emergency call out" > Emergency call out</option>
                                                    <option value="One Time Service"> One Time Service</option>
                                                    <option value="Annual Maintenance"> Annual Maintenance</option>
                                                    </select>
                                                   </div>
												
												
											</div>
											<div class="col-xxs-12 col-xs-6 mt alternate" id="appliance_selection" style="display:none" >																		
			                                       <div class="input-field">
                                                                                              												
													<select class="form-control"  name="appliance_type" id="appliance_type" >
													<option value="Washing Machine" > Washing Machine</option>
                                                    <option value="Refrigerator"> Refrigerator</option>
                                                    <option value="Vacuum cleaner"> Vacuum cleaner</option>
                                                    </select>
                                                   </div>
												
												
											</div>
											
                                                <div class="col-xxs-12 col-xs-6 mt alternate" id="television_selection" style="display:none">																		
			                                       <div class="input-field">
                                                                                              												
													<select class="form-control"  name="television_type" id="television_type" >
													<option value="LED" > LED</option>
                                                    <option value="LCD"> LCD</option>
                                                    </select>
                                                   </div>
												
												
											</div>    
											<div class="col-xxs-12 col-xs-6 mt alternate" id="cleaning_selection" style="display:none">																		
			                                       <div class="input-field">
                                                                                              												
													<select class="form-control"  name="cleaning_type" id="cleaning_type" >
													<option value="Emergency call out" > Emergency call out</option>
                                                    </select>
                                                   </div>
												
												
											</div>
											<div class="col-xxs-12 col-xs-6 mt alternate" id="cctv_selection" style="display:none">																		
			                                       <div class="input-field">
                                                                                              												
													<select class="form-control"  name="cctv_type" id="cctv_type" >
													<option value="1" >1</option>
                                                    <option value="2"> 2</option>
                                                    <option value="3"> 3</option>
                                                    </select>
                                                   </div>
												
												
											</div>
									</div> 
<div class="row" >
											<div class="col-xxs-12 col-xs-6 mt alternate" id="EmElement6">
											<label for="date-end">Appointment:</label>
                                              </div> </div>
											  <div class="row" >
											  <div class="col-xxs-12 col-xs-6 mt alternate" id="EmElement7">
												<div class="input-field">																																						
													<input type="text" class="form-control date-end" id="date-end" name="appointment_date" placeholder=""
													data-validation="required date" data-validation-format="dd/mm/yyyy" data-validation-error-msg-required="Please pick a date" 
													autocomplete="off">
												</div>
												
												</div>
												<div class="col-xxs-12 col-xs-6 mt alternate" id="EmElement8">
												
                                                <div class="input-field">
                                               
                                                     
                                                    <select class="form-control"  name="appointment_time" id="appointment_time">
													<option value="0900-1200">Morning: 9am to 12pm</option>
                                                    <option value="1200-1700">Afternoon: 12pm to 5pm</option>
                                                    <option value="1700-2100">Evening: 5pm to 9pm</option>
                                                    </select>
                                                </div>
												
												</div> 
												
												</div>
												
													
										    <div class="row">
											  <div class="col-xxs-12 col-xs-6 mt alternate" id="EmElement9" style="display:none">
											
											<div class="input-field">		
                                               <label for="date-start">Frequency of visits:</label>											
                                                   <select class="form-control" name="frequency_of_visit" id="frequency_of_visit">
                                                    <option value="Every month">Every month</option>
                                                        <option value="Every two months">Every two months</option>
                                                        <option value="Quarterly">Quarterly</option>
                                                         <option value="Bi-annual">Bi-annual</option>
                                                         <option value="Technical Team’s Call prior to inspection">Technical Team’s Call prior to inspection</option>
                                                        
                                                    </select>
													</div>
                                              </div>
											 

											 
												
											  <div class="col-xxs-12 col-xs-6 mt alternate" id="EmElement10" style="display:none">
                                                
												<div class="input-field">
                                                <label for="date-start">Site visit:</label>
                                                   <select class="form-control" name="site_visit" id="site_visit">
                                                    <option value="Necessary">Necessary</option>
                                                        <option value="Not necessary">Not necessary</option>
                                                        <option value="Technical Team’s Call">Technical Team’s Call</option>
                                                         
                                                    </select>
                                                </div>
												
												</div> 
                                                
                                             </div>
												
												
												
												
												
												
								<div class="row">

											<div class="col-xxs-12 col-xs-4 mt alternate" id= "EmElement3" style="display:none">
                                                <div class="input-field">
                                                    <label for="date-start">Cardio:</label>
                                                    <select class="form-control" name="cardio" id="cardio">
                                                    <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>
                                                    </select>
                                                </div>
                                            </div>     
                                            <div class="col-xxs-12 col-xs-4 mt alternate" id= "EmElement4" style="display:none">
                                                <div class="input-field">
                                                    <label for="date-start">Strength:</label>
                                                    <select class="form-control" name="strength" id="strength">
                                                    <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>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-xxs-12 col-xs-4 mt alternate" id= "EmElement5" style="display:none">
                                                <div class="input-field">
                                                    <label for="date-start">Other:</label>
                                                    <select class="form-control" name="other" id="other">
                                                    <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>
                                                    </select>
                                                </div>
                                            </div>
</div>					
												
								<div class="row">	
										
											<div class="col-xxs-12 col-xs-4 mt alternate" id= "EmElement1" >
											 <label for="date-start">No(s) of equipment:</label>
											 <div class="input-field" >
                                                   
                                                    <select class="form-control" name="no_of_equipment" id="no_of_equipment">
                                                    
                                                        <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>
                                                    </select>
                                                </div>
											 </div>
											 <div class="col-xxs-12 col-xs-8 mt alternate pull-left">
											 <label for="form_image">Attach Image</label>
											  <div class="form-group">
                                             
                                            
                                            <input type="file" class="form-control1" id="issue_image" placeholder="Image" name="form_image" <?php if(empty($form_row)) { ?> 
											data-validation="required mime size" data-validation-max-size="500kb" data-validation-allowing="jpg, png, gif" 
											data-validation-error-msg-size="You can not upload images larger than 500kb" data-validation-error-msg-mime="You can only upload images"
											data-validation-error-msg-required="No image selected"<?php } else {?> data-validation="mime size" data-validation-max-size="500kb"
											data-validation-allowing="jpg, png, gif" data-validation-error-msg-size="You can not upload images larger than 500kb" 
											data-validation-error-msg-mime="You can only upload images" <?php }?> >
                                            <input type="hidden" name="issue_image" <?php if(!empty($form_row)) { ?> value="<?php echo $form_row->form_image; ?>" <?php } ?>>
                                        <?php 
                                                                    if(!empty($form_row)){
                                                                        if($form_row->form_image == NULL || $form_row->form_image == "")
                                                                        {
                                                                            $src=base_url()."../uploads/slider/no_image.png";
                                                                        }
                                                                        else
                                                                        {
                                                                            $src = base_url()."../uploads/slider/".$form_row->form_image;
                                                                        }
                                                                        ?>
                                                                        <img src="<?php echo $src; ?>" style="height: 50px;">
                                                                        <?php
                                                                    }
                                                                    ?>
                                                                    <?php if(form_error('form_image') != ""){?>     
                                                            <div style="color:red"><?php echo "Attach image.";?></div>
                                                            <?php } ?>
   
                                        </div>
										</div>
											  </div>
											 
<div class="row">
											 <div class="col-xxs-12 col-xs-4 mt alternate" id= "EmElement2">
                                                
                                            </div>
											
											
											</div> 
											
									

											
                                                


<div class="row">										
											
											<div class="col-xxs-12 col-xs-12 mt alternate">
												<div class="input-field">
													<label for="from">A brief explanation of whats going on: *</label>
													
										<textarea style="margin: 0px 0px 10px 0px; font-size:14px; padding:6px; width: 100%; height: 60px; border-bottom:1px #ccc solid; border-left:none; border-right:none; border-top:none;" id="issue" name="issue" placeholder=""   
									    data-validation="required"  title="" rows="3" class="form-control1" placeholder="" maxlength="400"></textarea>
													
												</div>
											</div>
</div>	
<div class="row">

										</div>
										
					
</div>

	<!--////////////////////////////////////////////////////////////////////////////////////////////////////////////////---->				
<!--///////////////////////////////////////////// 2 Property section///////////////////////////////////////////////////---->
	<!--////////////////////////////////////////////////////////////////////////////////////////////////////////////////---->				

	
	<div class="tab" id="Property_section" style="display:none" >
	
	
	<div class="row" id="type_of_property_label" >	
 <div class="col-xxs-12 col-xs-12 mt alternate" >
 <label for=""> Type of client: </label>
 </div>

</div>		
<div class="row" id="type_of_property" style="padding:0px 10px 0px 10px;" >
 <div class="col-xxs-12 col-xs-4 mt alternate" >
 <div class="form-check">
 <input  class="form-check-input" type="radio" id="residential" name="type_of_property" value="residential" onclick="Check_property_type(event)">	
<label class="form-check-label" for="residential">Residential</label>
	</div>
	</div>
<div class="col-xxs-12 col-xs-4 mt alternate">
<div class="form-check">
	 <input  class="form-check-input" type="radio" id="commercial" name="type_of_property" value="commercial" onclick="Check_property_type(event)">
  <label class="form-check-label" for="commercial">Commercial</label>
  </div>
  </div>
  
	
  <div class="col-xxs-12 col-xs-4 mt alternate" >
  <div class="form-check">
 <input  class="form-check-input" type="radio" id="managed" name="type_of_property" value="managed"  onclick="Check_property_type(event)">
  <label class="form-check-label" for="managed">Managed</label>
  </div>
  </div>

	</div>
 <div class="row">
 
 <div class="col-xxs-12 col-xs-12 mt alternate" id="company_name" style="display:none; padding:5px 15px 0px 25px; width:100%;">
     <label for="companyName">Name of Company:</label>
     <input type="text" class="form-column" id="companyName" name="companyName" placeholder="Name"  style="width:100%;" 
     data-validation="required" data-original-title="" autocomplete="off">												
    </div>  
	</div>  			
                                            <div class="row">
											<div class="col-xxs-12 col-xs-12 mt alternate" id="location" >
											<label for=""> Address: </label>
											</div>
											</div>
											
											<div class="row">

											<div class="col-xxs-12 col-xs-4 mt alternate" id="" >
											  <div class="row">
											  <label style="display:inline;float:left;padding-left: 14px;" for="building">Building: # * </label><p  style="color:red; display:inline:float:right;margin-left: 100px;margin-top: 14px;" id="demobuilding"></p>
											</div>
											  
                                              <input type="tel" style="width:100%;" class="form-control" id="building" name="building" placeholder=""  
                                                data-validation="required"  title="Please provide building number" autocomplete="off" >
												
												</div>
								 
													
											<div class="col-xxs-12 col-xs-4 mt alternate" id="" >
											
											  <label for="street" style="display:inline;float:left;padding-left: 14px;" >Street: # *  </label><p  style="color:red; display:inline:float:right;margin-left: 100px;margin-top: 14px;" id="demostreet"></p>
												
                                              <input type="tel"  style="width:100%;" class="form-control" id="street" name="street" placeholder=""  
                                                data-validation="required"  title="Please provide street number" autocomplete="off">
												
                                                  </div>
												
												
												<div class="col-xxs-12 col-xs-4 mt alternate" id= "zone" >
                                                <div class="input-field">
                                                    <label for="zone">Zone:</label>
                                                    <select class="form-control"  style="width:100%;" name="zone">
													
                                                    <option value="0">Select</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="31">31</option>
                                                        <option value="32">32</option>
                                                         <option value="33">33</option>
                                                         <option value="34">34</option>
                                                         <option value="35">35</option>
                                                         <option value="36">36</option>
                                                        <option value="37">37</option>
                                                         <option value="38">38</option>
                                                         <option value="39">39</option>
                                                         <option value="40">40</option>
														<option value="41">41</option>
                                                        <option value="42">42</option>
                                                         <option value="43">43</option>
                                                         <option value="44">44</option>
                                                         <option value="45">45</option>
                                                         <option value="46">46</option>
                                                        <option value="47">47</option>
                                                         <option value="48">48</option>
                                                         <option value="49">49</option>
                                                         <option value="50">50</option>
														<option value="51">51</option>
                                                        <option value="52">52</option>
                                                         <option value="53">53</option>
                                                         <option value="54">54</option>
                                                         <option value="55">55</option>
                                                         <option value="56">56</option>
                                                        <option value="57">57</option>
                                                         <option value="58">58</option>
                                                         <option value="59">59</option>
                                                         <option value="60">60</option>
														<option value="61">61</option>
                                                        <option value="62">62</option>
                                                         <option value="63">63</option>
                                                         <option value="64">64</option>
                                                         <option value="65">65</option>
                                                         <option value="66">66</option>
                                                        <option value="67">67</option>
                                                         <option value="68">68</option>
                                                         <option value="69">69</option>
                                                         <option value="70">70</option>
														<option value="71">71</option>
                                                        <option value="72">72</option>
                                                         <option value="73">73</option>
                                                         <option value="74">74</option>
                                                         <option value="75">75</option>
                                                         <option value="76">76</option>
                                                        <option value="77">77</option>
                                                         <option value="78">78</option>
                                                         <option value="79">79</option>
                                                         <option value="80">80</option>
														<option value="81">81</option>
                                                        <option value="82">82</option>
                                                         <option value="83">83</option>
                                                         <option value="84">84</option>
                                                         <option value="85">85</option>
                                                         <option value="86">86</option>
                                                        <option value="87">87</option>
                                                         <option value="88">88</option>
                                                         <option value="89">89</option>
                                                         <option value="90">90</option>
														<option value="91">91</option>
                                                        <option value="92">92</option>
                                                         <option value="93">93</option>
                                                         <option value="94">94</option>
                                                         <option value="95">95</option>
                                                         <option value="96">96</option>
                                                        <option value="97">97</option>
                                                         <option value="98">98</option>
                                                    </select>
                                                </div>
												</div>
												</div>
												
												<div class="row">
												<div class="col-xxs-12 col-xs-12 mt alternate" id="">
											  <label for="landmark">Landmark: * (if any)</label>

                                              <input type="text" style="width:100%;" class="form-control" id="landmark" name="landmark" placeholder=""  
                                                 data-validation="required"  title="Please provide landmark" autocomplete="off">
                                                </div>
												
                                            

												</div>
</div>

	<!--////////////////////////////////////////////////////////////////////////////////////////////////////////////////---->				
<!--///////////////////////////////////////////// 3 Contact section///////////////////////////////////////////////////---->
	<!--////////////////////////////////////////////////////////////////////////////////////////////////////////////////---->				

	<div class="tab" id="Contact_section" style="display:none">
	
                                       	<div class="row">
											<div class="col-xxs-12 col-xs-12 mt alternate" id="" >
											<label for="name">Name: *</label>
                                              <input type="text" class="form-control" id="name" name="name" placeholder=""  
                                                data-validation="required"  data-original-title="Please provide name" autocomplete="off" title="">
												</div></div>	
																							
										
												
<div class="row">
											<div class="col-xxs-12 col-xs-6 mt alternate" id="" >
											<label for="phone">Phone: *</label>
											<div class="input-field">
                                
                              <input type="tel" class="form-control" id="phone"  maxlength="" name="contact" placeholder="" 
							  data-validation="required" title="Please provide phone number" autocomplete="off" > 
							  <span id="valid-msg" class="hide">? Valid</span>
                             <span id="error-msg" class="hide">Invalid number</span>
	                      </div>
											</div>
											
											<div class="col-xxs-12 col-xs-6 mt alternate" id="" >
											 <div class="input-field">
												 <label for="Copy_phone" style="margin:13px 0px 3px 0px;">Whatsapp: *  &nbsp; <input onChange="Check_phone(event)" type="checkbox" id ="Copy_phone" name="Copy_phone" 
										 value="" data-validation="checkbox_group" data-validation-qty="1-3"><span for="Copy_phone">  &nbsp;click here if both same number</span></label></div>
                                                    <div class="input-field">

                                
                              <input type="tel" class="form-control" id="watsapp"  maxlength="" name="watsapp" placeholder="" 
							  data-validation="required" title="Please provide watsapp number" autocomplete="off" > 	
                                
				
				</div>  
													  
													  
													  </div> 
											
				                      
				
				
				</div>
				
			
				
				
	</div>
							
    <!--////////////////////////////////////////////////////////////////////////////////////////////////////////////////---->				
	<!--///////////////////////////////////////////// Form Confirmation///////////////////////////////////////////////////---->			
	<!--////////////////////////////////////////////////////////////////////////////////////////////////////////////////---->	

	<div class="tab" id="Form_confirmation" style="display:none">
	
                                       <div class="row" id="confirmation_list" >
											<div class="col-xxs-12 col-xs-12 mt alternate" id="" >																					
													<label for="service_type">Service required: </label> <br>
													<div class="">
													    <p id="pv_service_type">
														
														<p id="pv_booking_type" style="display:none"> </p>
														<p id="pv_appliance_type" style="display:none"></p>
														<p id="pv_television_type" style="display:none"></p>
														<p id="pv_cleaning_type" style="display:none"></p>
														</p>
											</div>
													<p style="display:none" id="p4"> Appointment: <span id="pv_appointment_date" ></span> <span id="pv_appointment_time" ></span>  </p>

													<p style="display:none" id="p1" > No of Equipment: <span id="pv_no_of_equipment" ></span></p>

													<p style="display:none" id="p2"> Cardio: <span id="pv_cardio" ></span>  &nbsp; &nbsp; Strength: <span id="pv_strength" ></span>  &nbsp;  &nbsp; Other: <span id="pv_other" ></span> </p>
													<p style="display:none" id="p3"> Frequency of visit: <span id="pv_frequency_of_visit" ></span>  &nbsp; &nbsp; Site visit: <span id="pv_site_visit" ></span>  </p>

													<p> <span id="pv_issue"></span></p>
													</div>
													


											
                                            <div class="col-xxs-12 col-xs-12 mt alternate" id=""  >	
                                                    <label for="">Location: </label> <br>
													<p><span class="result"><?php echo $type_of_property; ?></span> </p>
													 <p id="p5" style="display:none;">Company Name: <span id="pv_companyName"></span></p> 
													 <p>Building: <span id="pv_building"></span> </p>
													 <p>Street: <span id="pv_street"></span> </p>
													 <p>Zone: <span id="pv_zone"></span></p>
													 <p>Nearest Landmark: <span id="pv_landmark"></span> </p>
																							
													
													</div>
													
						
												<div class="col-xxs-12 col-xs-12 mt alternate" id=""  >	
                                                    <label for="service_type">Contact: </label> <br>
													<p>Name: <span id="pv_name"></span>  </p>
													<p>Phone:  <span id="pv_phone"></span> </p>
													<p>Watsapp:  <span id="pv_wastapp"></span> </p>
																							
													
													</div>	
											
													
											<div class="col-xxs-12 col-xs-6 mt alternate" id="" style="display:none;">																					
													<label for="email">Email: <span id="pv_email"></span> </label>
													</div></div>

                                           <div class="row">
												<div class="col-xxs-12 col-xs-6 mt" id="checkbox" style="display:none;">
                                          
				                       
										 <input onChange="Check_account(event)" type="checkbox" id ="Create_account" name="Create_account" 
										 value="" data-validation="checkbox_group" data-validation-qty="1-3">  
			                            	  <label for="Create_account"> Create account</label>
											</div>
											</div>
											<div class="row">
											
											
											<div class="col-xxs-12 col-xs-6 mt alternate" id="email" style="display:none;">
												<div class="input-field">
										<label for="email">Email: *</label>
                                 
                             	 
                              <input type="text" class="form-control" id="email"  name="email" placeholder=""  autocomplete="off" 
							  data-validation="required"  title="Please provide email"  > 			
	                                  
				
				</div>
				</div>
												
												</div>

<div class="row">
															<div class="col-xxs-12 col-xs-6 mt alternate" id="password_label" style="display:none;">																					
													<label for="from">Password: *</label>
													</div>
												  
												  </div>
												  <div class="row">
												  <div class="col-xxs-12 col-xs-6 mt alternate" id="" style="display:none;" >
												  <div class="input-field">
                                                     
											<input type="text" class="form-control" id="password" name="password" placeholder="Type New Password"  
				                                  data-validation="required"  title="Please provide your Name" autocomplete="off">
                                           

                                                   </div></div>
												
												
											
											<div class="col-xxs-12 col-xs-6 mt alternate" id="" style="display:none;" >	
 										
			                                       <div class="input-field">
                                                                                              												
											<input type="text" class="form-control" id="confirm_password" name="confirm_password" placeholder="Confirm Password"  
				                                 data-validation="required"  title="Please provide your Name" autocomplete="off">
                                                  
												  </div>
												
												
											</div>
				</div>
				
				</div>

 <!--////////////////////////////////////////////////////////////////////////////////////////////////////////////////---->				
	<!--///////////////////////////////////////////// Submission Success///////////////////////////////////////////////////---->			
	<!--////////////////////////////////////////////////////////////////////////////////////////////////////////////////---->				

	<div class="submissiom_success" id="success_confirmation" style="display:none">
	
	
	
	<div class="row">
											<div class="col-xxs-12 col-xs-12 mt alternate" id="" >
											
											<label for="from" style="font-size:26px; font-weight:bold;"><i class="far fa-calendar-check"></i>
											Thank you for booking for our service, one of our representative will contact you soon...</label>
                                              
												</div></div>	

	</div>
    <!--////////////////////////////////////////////////////////////////////////////////////////////////////////////////---->				
	<!--///////////////////////////////////////////// Form Submission///////////////////////////////////////////////////---->			
	<!--////////////////////////////////////////////////////////////////////////////////////////////////////////////////---->				
				


                                         <div class="row">

										<div class="form-column" >	

                                           <div class="col-xxs-12 col-xs-6 mt alternate pull-left" id="" >
										   
							
												  <button type="button" id="prevBtn" class="theme-btn btn-style-one" style="display:none">
                                                   Previous
                                                  </button>
												  
												   <button type="button" id="nextBtn" class="theme-btn btn-style-one"  >
                                                   Next
                                                  </button>
												  
												  <!-- Emergency call out Service-->
												  <button type="submit" id="submit_button_emergency"  style="display:none" class="theme-btn btn-style-one" onclick="emergency_footer(event)">
                                                   send
                                                  </button>
												   <!-- One Time Service -->
												  <button type="submit" id="submit_button_oneTimeService"  style="display:none" class="theme-btn btn-style-one" onclick="one_time_footer(event)">
                                                   send
                                                  </button>
												   <!-- Annual Maintenance Service -->
												   <button type="submit" id="submit_button_annualMaintenance" style="display:none" class="theme-btn btn-style-one" onclick="contract_footer(event)">
                                                   send
                                                  </button>
												   <!-- Other all service -->
												  <button type="submit" id="submit_button_appliance" style="display:none" class="theme-btn btn-style-one" onclick="otherService_footer(event)">
                                                   send
                                                  </button>
												  
												  
												
											</div>
											
																			
											
											 <div class="col-xxs-12 col-xs-6 mt alternate pull-right" id="signup_submit_button" style="display:none">
                                                   <button type="submit" id="submit2" class="theme-btn btn-style-one" onclick="signup_submit(event)">
                                                   Sign up & Send
                                                  </button>
												
											</div> 		
											
										</div>	
									</div>  
										
										
									</div>  			
											
											
											
											
										
                                    </form>
 
        
                                   
                        
                        
                        </div>
      </div>     
  
    <div class="clearfix"></div>
  
    
<div>
    <?php  $this->load->view("layout/footer"); ?>
</div>
 
<script src="<?php echo base_url(); ?>assets/js/jquery.min.js"></script>
<script src="<?php echo base_url(); ?>assets/aos/aos.js"></script>
<script src="<?php echo base_url(); ?>assets/js/modernizr.js"></script>
<script src="<?php echo base_url(); ?>assets/js/owl.carousel.min.js"></script>
     
<div id="snackbar">Some text some message..</div>
<script src="<?php echo base_url(); ?>assets/js/jquery.min.js"></script>
	<!--  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.2.1/jquery.form-validator.min.js"></script>-->

<script src="<?php echo base_url(); ?>assets/aos/aos.js"></script>
<script src="<?php echo base_url(); ?>assets/js/modernizr.js"></script>
<script src="<?php echo base_url(); ?>assets/js/bootstrap.js"></script>
<script src="<?php echo base_url(); ?>assets/js/jquery.gwmenu.js"></script>
<!-- <script src="<?php echo base_url(); ?>assets/js/bootstrap-datepicker.js"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script> 
 <!--<script src="<?php echo base_url(); ?>assets/js/bootstrap-tabcollapse.js"></script>-->
<script src="<?php echo base_url(); ?>assets/js/main.js"></script>
<!--   <script src="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.2-dev/js/formValidation.min.js"></script> 
       <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
     
<script src="<?php echo base_url(); ?>assets/js/jquery_formvalidator1.js"></script>
<script src="<?php echo base_url(); ?>assets/js/jquery_formvalidator2.js"></script>-->


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<!-- Use as a Vanilla JS plugin -->
<script src="build/js/intlTelInput.min.js"></script>
<!-- Use as a jQuery plugin -->
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.9/js/intlTelInput.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.9/js/intlTelInput.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.9/js/utils.js"></script>
	
<script>
var telInput = $("#phone,#watsapp"),
  errorMsg = $("#error-msg"),
  validMsg = $("#valid-msg");

// initialise plugin
telInput.intlTelInput({

  allowExtensions: true,
  formatOnDisplay: true,
  autoFormat: true,
  autoHideDialCode: true,
  autoPlaceholder: true,
  defaultCountry: "auto",
  ipinfoToken: "yolo",
  nationalMode: false,
  numberType: "MOBILE",
  //onlyCountries: ['us', 'gb', 'ch', 'ca', 'do'],
  preferredCountries: ['qa', 'ae', 'sa','om','bh','kw','ma'],
  preventInvalidNumbers: true,
  separateDialCode: true,
  initialCountry: "qa",
  geoIpLookup: function(callback) {
  $.get("http://ipinfo.io", function() {}, "jsonp").always(function(resp) {
    var countryCode = (resp && resp.country) ? resp.country : "";
    callback(countryCode);
  });
},
   utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.9/js/utils.js"
});

var reset = function() {
  telInput.removeClass("error");
  errorMsg.addClass("hide");
  validMsg.addClass("hide");
};

// on blur: validate
telInput.blur(function() {
  reset();
  if ($.trim(telInput.val())) {
    if (telInput.intlTelInput("isValidNumber")) {
      validMsg.removeClass("hide");
    } else {
      telInput.addClass("error");
      errorMsg.removeClass("hide");
    }
  }
});

// on keyup / change flag: reset
telInput.on("keyup change", reset);



</script>

<script type="text/javascript">

 $("#issue").on("keyup", function(){
  $("#pv_issue").text(this.value);
});	
$("#companyName").on("keyup", function(){
  $("#pv_companyName").text(this.value);
});

$("#building").on("keyup", function(){
  $("#pv_building").text(this.value);
});

$("#street").on("keyup", function(){
  $("#pv_street").text(this.value);
});

  
$("#landmark").on("keyup", function(){
  $("#pv_landmark").text(this.value);
});
$("#name").on("keyup", function(){
  $("#pv_name").text(this.value);
});

$("#phone").on("keyup", function(){
  $("#pv_phone").text(this.value);
});

$("#watsapp").on("keyup", function(){
  $("#pv_wastapp").text(this.value);
});

$("#Copy_phone").on("click", function(){
	var phone = $("#phone").val();
  $("#pv_wastapp").text(phone);
});

	
 

</script> 
	
    <script>
	
  $.validate({
    lang: 'en',
    modules : 'file,date'
  });

 /* $("booking_type").change(function() {
   $.ajax({
     url : "<?php echo base_url(); ?>index.php/user/emergency_index",
     method: "POST" /* use get or post,
     data: "booking_type=" + $(this).val(),
     success: function(response) {
     }
  })  
}); */


function Check_property_type(event)

{
	  	var check_property_type_residential = document.getElementById("residential");
		var check_property_type_commercial = document.getElementById("commercial");
		var check_property_type_managed = document.getElementById("managed");
		 if(check_property_type_commercial.checked){
			 
			 
			 document.getElementById("company_name").style.display = "block";
			 document.getElementById("p5").style.display = "block";
			 
			 
		 }
		 else if(check_property_type_managed.checked)
		 {
			 document.getElementById("company_name").style.display = "block";
			 document.getElementById("p5").style.display = "block";

		 }
		 else if( check_property_type_residential.checked)
		 {
			 document.getElementById("company_name").style.display = "none";
			 document.getElementById("p5").style.display = "none";

		 }

	
}
 
 function Check_phone(event)

{
	  	var phone = document.getElementById("phone");
		var watsapp = document.getElementById("watsapp");
		var check = document.getElementById("Copy_phone");
		 if(check.checked){	
    
         watsapp.value = phone.value;
    	 
		 }
		 else
			 
		watsapp.value ='';

	
}
/* function Check_account(event){
	
	var check = document.getElementById("Create_account");
	   
	if(check.checked){
		
		
		document.getElementById("checkbox").style.display = "block";
         document.getElementById("email").style.display = "block";
		 document.getElementById("password_label").style.display = "block";
         document.getElementById("password").style.display = "block";
		 document.getElementById("confirm_password").style.display = "block";
		
		
		document.getElementById("signup_submit_button").style.display = "none";
	

		 
	
} else{
	

		
         
		document.getElementById("checkbox").style.display = "block";
         document.getElementById("email").style.display = "none";
		 document.getElementById("password_label").style.display = "none";
         document.getElementById("password").style.display = "none";
		 document.getElementById("confirm_password").style.display = "none";
		 
		document.getElementById("signup_submit_button").style.display = "none";
		
	
	
}
} */

function Service_type(event){

	
	var bType = document.getElementById("service_type");
	if((bType.value)=="Fitness Equipment Maintenance")
	{
		 Booking_type(event);
		 document.getElementById("booking_selection").style.display = "block";
		 document.getElementById("appliance_selection").style.display = "none";
		 document.getElementById("television_selection").style.display = "none";		 
		 document.getElementById("cleaning_selection").style.display = "none";
		 document.getElementById("cctv_selection").style.display = "none";
		 document.getElementById("pv_booking_type").style.display = "block";
		 document.getElementById("pv_appliance_type").style.display = "none";
		 document.getElementById("pv_television_type").style.display = "none";
		 document.getElementById("pv_cleaning_type").style.display = "none";
		 
		 
		 
	} else if((bType.value)=="Home appliance services")
	{
		 
		 document.getElementById("booking_selection").style.display = "none";
		 document.getElementById("appliance_selection").style.display = "block";
		 document.getElementById("television_selection").style.display = "none";		
		 document.getElementById("cleaning_selection").style.display = "none";
		 document.getElementById("cctv_selection").style.display = "none";
		 document.getElementById("pv_booking_type").style.display = "none";
		 document.getElementById("pv_appliance_type").style.display = "block";
		 document.getElementById("pv_television_type").style.display = "none";
		 document.getElementById("pv_cleaning_type").style.display = "none";
		 
		 document.getElementById("EmElement1").style.display = "block";
		 document.getElementById("EmElement2").style.display = "block";
		 document.getElementById("EmElement3").style.display = "none";
		 document.getElementById("EmElement4").style.display = "none";
		 document.getElementById("EmElement5").style.display = "none";
		 document.getElementById("EmElement6").style.display = "block";
		 document.getElementById("EmElement7").style.display = "block";
		 document.getElementById("EmElement8").style.display = "block";
		 document.getElementById("EmElement9").style.display = "none";
		 document.getElementById("EmElement10").style.display = "none";
		
		 
	
	} else if((bType.value)=="Television repair services")
	{
		 
		 document.getElementById("booking_selection").style.display = "none";
		 document.getElementById("appliance_selection").style.display = "none";
		 document.getElementById("television_selection").style.display = "block";		
		 document.getElementById("cleaning_selection").style.display = "none";
		 document.getElementById("cctv_selection").style.display = "none";
		 document.getElementById("pv_booking_type").style.display = "none";
		 document.getElementById("pv_appliance_type").style.display = "none";
		 document.getElementById("pv_television_type").style.display = "block";
		 document.getElementById("pv_cleaning_type").style.display = "none";
		 
		 document.getElementById("EmElement1").style.display = "block";
		 document.getElementById("EmElement2").style.display = "block";
		 document.getElementById("EmElement3").style.display = "none";
		 document.getElementById("EmElement4").style.display = "none";
		 document.getElementById("EmElement5").style.display = "none";
		 document.getElementById("EmElement6").style.display = "block";
		 document.getElementById("EmElement7").style.display = "block";
		 document.getElementById("EmElement8").style.display = "block";
		 document.getElementById("EmElement9").style.display = "none";
		 document.getElementById("EmElement10").style.display = "none";
		 
	
	} 
	else if((bType.value)=="Industrial cleaning equipment services"){
	
		 
		  document.getElementById("booking_selection").style.display = "none";
		 document.getElementById("appliance_selection").style.display = "none";
		 document.getElementById("television_selection").style.display = "none";		
		 document.getElementById("cleaning_selection").style.display = "block";
		 document.getElementById("cctv_selection").style.display = "none";
		 document.getElementById("pv_booking_type").style.display = "none";
		 document.getElementById("pv_appliance_type").style.display = "none";
		 document.getElementById("pv_television_type").style.display = "none";
		 document.getElementById("pv_cleaning_type").style.display = "block";
		 
		 document.getElementById("EmElement1").style.display = "block";
		 document.getElementById("EmElement2").style.display = "block";
		 document.getElementById("EmElement3").style.display = "none";
		 document.getElementById("EmElement4").style.display = "none";
		 document.getElementById("EmElement5").style.display = "none";
		 document.getElementById("EmElement6").style.display = "block";
		 document.getElementById("EmElement7").style.display = "block";
		 document.getElementById("EmElement8").style.display = "block";
		 document.getElementById("EmElement9").style.display = "none";
		 document.getElementById("EmElement10").style.display = "none";
		
		
	}
	
	else if((bType.value)=="CCTV Installation services"){
	
		 
		  document.getElementById("booking_selection").style.display = "none";
		 document.getElementById("appliance_selection").style.display = "none";
		 document.getElementById("television_selection").style.display = "none";		
		 document.getElementById("cleaning_selection").style.display = "none";
		 document.getElementById("cctv_selection").style.display = "none";
		 
		 document.getElementById("EmElement1").style.display = "block";
		 document.getElementById("EmElement2").style.display = "block";
		 document.getElementById("EmElement3").style.display = "none";
		 document.getElementById("EmElement4").style.display = "none";
		 document.getElementById("EmElement5").style.display = "none";
		 document.getElementById("EmElement6").style.display = "block";
		 document.getElementById("EmElement7").style.display = "block";
		 document.getElementById("EmElement8").style.display = "block";
		 document.getElementById("EmElement9").style.display = "none";
		 document.getElementById("EmElement10").style.display = "none";
		
		
	}
}


function Booking_type(event){

	
	var bType = document.getElementById("booking_type");
	if((bType.value)=="Emergency call out")
	{
		 
		 document.getElementById("EmElement1").style.display = "block";
		 document.getElementById("EmElement2").style.display = "block";
		 document.getElementById("EmElement3").style.display = "none";
		 document.getElementById("EmElement4").style.display = "none";
		 document.getElementById("EmElement5").style.display = "none";
		 document.getElementById("EmElement6").style.display = "block";
		 document.getElementById("EmElement7").style.display = "block";
		 document.getElementById("EmElement8").style.display = "block";
		 document.getElementById("EmElement9").style.display = "none";
		 document.getElementById("EmElement10").style.display = "none";
	
		 
	} else if((bType.value)=="One Time Service")
	{
		 
		 document.getElementById("EmElement1").style.display = "none";
		 document.getElementById("EmElement2").style.display = "none";		 
		 document.getElementById("EmElement3").style.display = "block";
		 document.getElementById("EmElement4").style.display = "block";
		 document.getElementById("EmElement5").style.display = "block";
		 document.getElementById("EmElement6").style.display = "block";
		 document.getElementById("EmElement7").style.display = "block";
		 document.getElementById("EmElement8").style.display = "block";
		 document.getElementById("EmElement9").style.display = "none";
		 document.getElementById("EmElement10").style.display = "none";
		 
	
	} 
	else if((bType.value)=="Annual Maintenance"){
	
		 
		 document.getElementById("EmElement1").style.display = "none";
		 document.getElementById("EmElement2").style.display = "none";		
		 document.getElementById("EmElement3").style.display = "block";
		 document.getElementById("EmElement4").style.display = "block";
		 document.getElementById("EmElement5").style.display = "block";		 
		 document.getElementById("EmElement6").style.display = "none";
		 document.getElementById("EmElement7").style.display = "none";
		 document.getElementById("EmElement8").style.display = "none";		 
		 document.getElementById("EmElement9").style.display = "block";
		 document.getElementById("EmElement10").style.display = "block";
		
		
	}
}
  
function select_booking(event)
{
var booking_type = document.getElementById("booking_type");
	if((booking_type.value)=="Emergency call out")
	{
		document.getElementById("submit_button_emergency").style.display = "block";
		document.getElementById("submit_button_appliance").style.display = "none";
		 document.getElementById("submit_button_oneTimeService").style.display = "none";
		 document.getElementById("submit_button_annualMaintenance").style.display = "none";
		 document.getElementById("pv_appointment_date").style.display = "block";
		 document.getElementById("pv_appointment_time").style.display = "block";
		 document.getElementById("p4").style.display = "block";
		 document.getElementById("p1").style.display = "block";
		 document.getElementById("p2").style.display = "none";
		 document.getElementById("p3").style.display = "none";
		 
		
	}
	else if((booking_type.value)=="One Time Service")
	{
		document.getElementById("submit_button_appliance").style.display = "none";
		document.getElementById("submit_button_emergency").style.display = "none";
		 document.getElementById("submit_button_oneTimeService").style.display = "block";
		 document.getElementById("submit_button_annualMaintenance").style.display = "none";
		 document.getElementById("p4").style.display = "block";
		 document.getElementById("p1").style.display = "none";
		 document.getElementById("p2").style.display = "block";
		 document.getElementById("p3").style.display = "none";
		
		
	}
	else if((booking_type.value)=="Annual Maintenance")
	{
		 document.getElementById("submit_button_appliance").style.display = "none";
		document.getElementById("submit_button_emergency").style.display = "none";
		 document.getElementById("submit_button_oneTimeService").style.display = "none";
		 document.getElementById("submit_button_annualMaintenance").style.display = "block";
		 document.getElementById("pv_appointment_date").style.display = "none";
		 document.getElementById("pv_appointment_time").style.display = "none";
		 document.getElementById("p4").style.display = "none";
		 document.getElementById("p1").style.display = "none";
		 document.getElementById("p2").style.display = "block";
		 document.getElementById("p3").style.display = "block";
		
		
	}
   
	
}

function booking(event){
var Stype = document.getElementById("service_type");
if((Stype.value == "Home appliance services") || (Stype.value == "Television repair services") || (Stype.value == "Industrial cleaning equipment services") ||(Stype.value == "CCTV Installation services"))  
{
	
	     document.getElementById("submit_button_appliance").style.display = "block";
		 document.getElementById("submit_button_emergency").style.display = "none";
		 document.getElementById("submit_button_oneTimeService").style.display = "none";
		 document.getElementById("submit_button_annualMaintenance").style.display = "none";
		 document.getElementById("pv_appointment_date").style.display = "block";
		 document.getElementById("pv_appointment_time").style.display = "block";
		 document.getElementById("p4").style.display = "block";
		 document.getElementById("p1").style.display = "block";
		 document.getElementById("p2").style.display = "none";
		 document.getElementById("p3").style.display = "none";
	
}
else if(Stype.value == "Fitness Equipment Maintenance"){
	     select_booking(event);
	
}
}


	  
</script>
	 


<script type="text/javascript">


var currentTab = 0; // Current tab is set to be the first tab (0)
showTab(currentTab); // Display the current tab
 
window.onbeforeunload = function () {
    if (currentTab==0||currentTab==1||currentTab==2) {
        return "If you reload this page, your previous action will be repeated";
    } else {
        //Don't return anything
    }
} 

function showTab(n) {

	//alert(n);
  // This function will display the specified tab of the form...
  var x = document.getElementsByClassName("tab");
  x[n].style.display = "block";
   
  //... and fix the Previous/Next buttons:
  if (n == 0) {
	Booking_type(event);
    Service_type(event);	
    document.getElementById("prevBtn").style.display = "none";
	
  } else {
	
    document.getElementById("prevBtn").style.display = "block";
  }
  if (n == (x.length - 1)) {
	//Check_account(event);
    document.getElementById("nextBtn").style.display = "none";
	select_booking(event);
	//booking(event);
	Service_type(event);
	Check_property_type(event);
	Booking_type(event);
	
  var selectedValue1 = $("#service_type option:selected").val();
  $("#pv_service_type").text(selectedValue1);
  var selectedValue2 = $("#booking_type option:selected").val();
  $("#pv_booking_type").text(selectedValue2);
    var selectedValue21 = $("#appliance_type option:selected").val();
  $("#pv_appliance_type").text(selectedValue21);
    var selectedValue22 = $("#television_type option:selected").val();
  $("#pv_television_type").text(selectedValue22);
    var selectedValue23 = $("#cleaning_type option:selected").val();
  $("#pv_cleaning_type").text(selectedValue23); 
  var selectedValue10 = $("#no_of_equipment option:selected").val();
  $("#pv_no_of_equipment").text(selectedValue10);
  var date = $("#date-end").val();
  $("#pv_appointment_date").text(date);
  var selectedValue3 = $("#appointment_time option:selected").text();
  $("#pv_appointment_time").text(selectedValue3);
var selectedValue4 = $("#frequency_of_visit option:selected").val();
  $("#pv_frequency_of_visit").text(selectedValue4);

var selectedValue5 = $("#site_visit option:selected").val();
  $("#pv_site_visit").text(selectedValue5);
  
var selectedValue6 = $("#cardio option:selected").val();
  $("#pv_cardio").text(selectedValue6);
 
var selectedValue7 = $("#strength option:selected").val();
  $("#pv_strength").text(selectedValue7);

var selectedValue8 = $("#other option:selected").val();
  $("#pv_other").text(selectedValue8);
  

$('input[type=radio]').click(function(e) {
		
        var type_of_property = $(this).val(); 
        $('.result').html(type_of_property);
		
    }); 
	
var selectedValue9 = $("#zone option:selected").val();
  $("#pv_zone").text(selectedValue9);	
	
 
		
	
  } else {
	
	document.getElementById("nextBtn").style.display = "block";
    document.getElementById("nextBtn").innerHTML = "Next";
	document.getElementById("submit_button_emergency").style.display = "none";
	document.getElementById("submit_button_oneTimeService").style.display = "none";
	document.getElementById("submit_button_annualMaintenance").style.display = "none";
	document.getElementById("submit_button_appliance").style.display = "none";
	
	
  }
  //... and run a function that will display the correct step indicator:
  //fixStepIndicator(n);
 
}





var $btn = $('#nextBtn');
    $btn.click(function(){

  var x, y, i;
  x = document.getElementsByClassName("tab");
  y = x[currentTab].getElementsByClassName("form-control");
 
  for (i = 0; i < y.length; i++) {
      
  if(!$(y[i]).val())
  {
    $(y[i]).tooltip("show"); 
	
	$(y[i]).click(function(e) {
    $(this).tooltip("hide");
});
  } } 

			var $this = $(this);
             $this.attr('disabled', 'disabled').html("Next");		
             setTimeout(function () {
             $this.removeAttr('disabled').html('Next');
		     nextPrev(1);
	         }, 1000)
 
  });
	
var $btn = $('#prevBtn');
    $btn.click(function(){
        var $this = $(this);
        $this.attr('disabled', 'disabled').html("Previous");
        setTimeout(function () {
        $this.removeAttr('disabled').html('Previous');
		nextPrev(-1);
        }, 1000)
    });	
	
		

function nextPrev(n) {
    
	
   window.scrollTo(0, 0);
  var x = document.getElementsByClassName("tab");
  // Exit the function if any field in the current tab is invalid:
  if (n == 1 && !validateForm()) return false;
  // Hide the current tab:
  x[currentTab].style.display = "none";
  currentTab = currentTab + n;
  // if you have reached the end of the form...
  if (currentTab >= (x.length)) {
	 //document.getElementById("nextBtn").style.display = "none";
    // ... the form gets submitted:
	//alert(currentTab);
   // document.getElementById("home-form").submit();
     return false;
  }
  // Otherwise, display the correct tab:
  showTab(currentTab);
  
 
}



function validateForm() {
       document.getElementById("demobuilding").style.display = "none"; 
        document.getElementById("demostreet").style.display = "none";	  
	
  // This function deals with validation of the form fields
  var x, y, i, valid = true;
  x = document.getElementsByClassName("tab");
  y = x[currentTab].getElementsByClassName("form-control");
  // A loop that checks every input field in the current tab:
  for (i = 0; i < y.length; i++) {
	   	
     
    // If a field is empty...
  if (y[i].value == "")  {
      // add an "invalid" class to the field:
	  
	 var $btn = $('#nextBtn');
    $btn.click(function(){  
  
    $(y[i]).tooltip("show"); 
	
	$(y[i]).click(function(e) {
    $(this).tooltip("hide");
});
  
	});
             		 
     y[i].className += "invalid";
	  //y[i].getElementsByClassName("form-control.invalid").style.display = "block";
      // and set the current valid status to false
      valid = false;
	  
    }
	   var  building = document.getElementById("building").value;   
	   var  street = document.getElementById("street").value;  	   
       var invalidbuilding,invalidstreet;
	  
	if (isNaN(building))  {
     
    invalidbuilding = "Input invalid*";
	document.getElementById("demobuilding").innerHTML = invalidbuilding;
	document.getElementById("demobuilding").style.display = "block";
    

      y[i].className += "invalid";
      valid = false;
	  
    } 
	if(isNaN(street)){
     
    
	invalidstreet = "Input invalid*";
	document.getElementById("demostreet").innerHTML = invalidstreet;
    document.getElementById("demostreet").style.display = "block";

      y[i].className += "invalid";
      valid = false;
	  
    } 
	
  }
  // If the valid status is true, mark the step as finished and valid:
  if (valid) {
    document.getElementsByClassName("step")[currentTab].className += " finish";
  }
  return valid; // return the valid status
}



function fixStepIndicator(n) {
  // This function removes the "active" class of all steps...
  var i, x = document.getElementsByClassName("step");
  for (i = 0; i < x.length; i++) {
    x[i].className = x[i].className.replace(" active", "");
  }
  //... and adds the "active" class on the current step:
  x[n].className += "active";
  
}

window.onload = function(){
	//var currentTab = 0; 
    //showTab(currentTab);
   // load(event); 
	checkDate(event);
	Booking_type(event);
	Service_type(event);
	//select_booking();
	//Check_account(event);
	//next(event);
	//myContact(event);
};




function checkDate(event) {

   var currentDate = new Date();
   //alert(currentDate.toUTCString().toString());
   
   var day = currentDate.getDate();
   var month = currentDate.getMonth() + 1;
   var year = currentDate.getFullYear();
   day = day < 10 ? '0' + day : day;
   month = month < 10 ? '0'+ month : month;
   var z =  day + "/" + month  + "/" + year;
   //alert(z);
   var x = document.getElementById("appointment_time");
   var y = document.getElementById("date-end");
   //var xx =  document.getElementById("appointment_time").getElementsByTagName("option");
   var yy = y.value;
    yy =yy.split("/");
   var lo_day = yy[0];
   var lo_month =yy[1];
   var lo_year =yy[2];
   
   //alert(lo_date);
   
   var minutes = currentDate.getMinutes();
   var hours = currentDate.getHours();
   
      hours = hours < 10 ? '0' + hours : hours;
      minutes = minutes < 10 ? '0'+ minutes : minutes ;
   var strTime = "" + hours  + minutes ;
   //var strTime1 = new Date().getTime();
   
   if((lo_day>day) || (lo_month>month)||(lo_year>year)){ 
		
		var i1;
		   for(i1=0; i1 < x.length;i1++)
		   {
			  var x1 =  document.getElementById("appointment_time").getElementsByTagName("option");
		      x1[i1].disabled = false; 
			  x1[0].selected =true;
		   }
		
	}
	else if((lo_day<day) || (lo_month<month)||(lo_year<year)){
		
		var i2; 
		   for(i2=0; i2 < x.length;i2++)
		   {
			  var x2 =  document.getElementById("appointment_time").getElementsByTagName("option");
		      x2[i2].disabled = true;			  
		   }
		
	}
    else if(y.value==z){
    var txt;
    var i3;
    
         for (i3 = 0; i3 < x.length; i3++) {
             txt =  x.options[i3].value;
             txt =txt.split("-");
			 
             if((parseInt(txt[1])) < (170+parseInt(strTime)) ){  
 
			  var xx =  document.getElementById("appointment_time").getElementsByTagName("option");
		      xx[i3].disabled = true;  
              xx[i3+1].selected =true;
			  if((parseInt(strTime))>= (parseInt(1900)))
			 {
				
                 document.getElementById("appointment_time").selectedIndex = -1;
				 
				 
				 
			 } 

			 
       } 
	    
	 }  
           
    } 
	
   }
   

   


	</script>
	
 <script type="text/javascript">
 


 
function emergency_footer(event)
{
 
  event.preventDefault();
  var flag=1;
  var name=$("#emergency_form2 input[name=name]").val();
  var contact= $("#emergency_form2 input[name=contact]").val();
  
  var appointment_date=$("#emergency_form2 input[name=appointment_date]").val();
  var building=$("#emergency_form2 input[name=building]").val();
  var street=$("#emergency_form2 input[name=street]").val();
  var landmark=$("#emergency_form2 input[name=landmark]").val();
  

	//alert(contact);
		
  if(name=="")
  {
    flag=0;       
   
  }
  if(contact=="")
  {
    flag=0;
	
  }
  
  if(appointment_date=="")
  {
    flag=0;
  }
  if(building=="")
  {
    flag=0;
  }
  if(street=="")
  {
    flag=0;
  }
  if(landmark=="")
  {
    flag=0;
  }
  // alert(flag);
  if(flag==1)
  {
    var $form = $('#emergency_form2');
    $.ajax({
      type: "POST",
      dataType:"",
      data: $form.serialize(),
      url:'<?php echo base_url(); ?>index.php/user/emergency_index',
      success:function(response){
       // alert(data);
        // var response_split=response.split('@');
        var dataSplit=response.split('@');
        if(dataSplit[0]=="Success")
        {
			
            $("#emergency_form2").trigger("reset");
			
            var x = document.getElementById("snackbar");
          // x.className = "show";
            //$("#snackbar").html(dataSplit[1]);
            setTimeout(function(){
				//x.className = x.className.replace("show", ""); 
                document.getElementById("success_confirmation").style.display = "block";
				window.scrollTo(0, 0);
				document.getElementById("Form_confirmation").style.display = "none";
				document.getElementById("prevBtn").style.display = "none"; 
				window.location.reload();
				}, 3000);
			
			

        }
        else
        {
          var x = document.getElementById("snackbar");
            x.className = "show";
            $("#snackbar").html(dataSplit[0]);
            setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
        }
		    
			
      }
	    
    });
	        
  }
  else
  {
    /*alert(flag);
	var x = document.getElementById("snackbar");
    x.className = "show";
    $("#snackbar").html('Enter Requied fields');
    setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000); */
		

  }

            //document.getElementById("prevBtn1").style.display = "block";
              


}

  function one_time_footer(event)
{
	
  event.preventDefault();
  var flag=1;
  var name=$("#emergency_form2 input[name=name]").val();
  var contact= $("#emergency_form2 input[name=contact]").val();
 
  var appointment_date=$("#emergency_form2 input[name=appointment_date]").val();
  var building=$("#emergency_form2 input[name=building]").val();
  var street=$("#emergency_form2 input[name=street]").val();
  var landmark=$("#emergency_form2 input[name=landmark]").val();
  

  if(name=="")
  {
    flag=0;

  }
  if(contact=="")
  {
    flag=0;
  }
  
  if(appointment_date=="")
  {
    flag=0;
  }
  if(building=="")
  {
    flag=0;
  }
  if(street=="")
  {
    flag=0;
  }
  if(landmark=="")
  {
    flag=0;
  }
  if(flag==1)
  {
    var $form = $('#emergency_form2');
    $.ajax({
      type: "POST",
      dataType:"",
      data: $form.serialize(),
      url:'<?php echo base_url(); ?>index.php/user/one_time_index',
      success:function(response){
        // alert(response);
        // var response_split=response.split('@');
        var dataSplit=response.split('@');
        if(dataSplit[0]=="Success")
        {
            $("#emergency_form2").trigger("reset");
             var x = document.getElementById("snackbar");
          // x.className = "show";
            //$("#snackbar").html(dataSplit[1]);
            setTimeout(function(){
				//x.className = x.className.replace("show", ""); 
				document.getElementById("success_confirmation").style.display = "block";
                window.scrollTo(0, 0);
				document.getElementById("Form_confirmation").style.display = "none";
				document.getElementById("prevBtn").style.display = "none"; 
				window.location.reload();
				}, 3000);
          
        }
        else
        {
          var x = document.getElementById("snackbar");
            x.className = "show";
            $("#snackbar").html(dataSplit[0]);
            setTimeout(function(){
				x.className = x.className.replace("show", ""); }, 3000);
        }
      }
    });
  }
  else
  {
    // alert(flag);
    
  }

			//document.getElementById("prevBtn1").style.display = "block";
             
}
  
  function contract_footer(event)
{
		

  event.preventDefault();

  var flag=1;
  var name=$("#emergency_form2 input[name=name]").val();
  var contact= $("#emergency_form2 input[name=contact]").val();
  
  var building=$("#emergency_form2 input[name=building]").val();
  var street=$("#emergency_form2 input[name=street]").val();
  var landmark=$("#emergency_form2 input[name=landmark]").val();
  
 
  
  if(name=="")   
  {
    flag=0;

  }
  if(contact=="")
  {
    flag=0;
  }
  
  if(building=="")
  {
    flag=0;
  }
  if(street=="")
  {
    flag=0;
  }
  if(landmark=="")
  {
    flag=0;
  }
  
  if(flag==1)
  {
    var $form = $('#emergency_form2');
    $.ajax({
      type: "POST",
      dataType:"",
      data: $form.serialize(),
      url:'<?php echo base_url(); ?>index.php/user/contract_index',
      success:function(response){
        // alert(response);
        // var response_split=response.split('@');
        var dataSplit=response.split('@');
        if(dataSplit[0]=="Success")
        {
            $("#emergency_form2").trigger("reset");
             var x = document.getElementById("snackbar");
          // x.className = "show";
            //$("#snackbar").html(dataSplit[1]);
            setTimeout(function(){
				//x.className = x.className.replace("show", ""); 
				document.getElementById("success_confirmation").style.display = "block";
                window.scrollTo(0, 0);
				document.getElementById("Form_confirmation").style.display = "none";
				document.getElementById("prevBtn").style.display = "none"; 
				window.location.reload();
				}, 3000);
          
        }
        else
        {
          var x = document.getElementById("snackbar");
            x.className = "show";
            $("#snackbar").html(dataSplit[0]);
            setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
        }
      }
    });
  }
  else
  {
   
  }

			//document.getElementById("prevBtn1").style.display = "block";
            
  
}



function otherService_footer(event)
{
 event.preventDefault();
  var flag=1;
  var name=$("#emergency_form2 input[name=name]").val();
  var contact= $("#emergency_form2 input[name=contact]").val();
  
  var appointment_date=$("#emergency_form2 input[name=appointment_date]").val();
  var building=$("#emergency_form2 input[name=building]").val();
  var street=$("#emergency_form2 input[name=street]").val();
  var landmark=$("#emergency_form2 input[name=landmark]").val();
		
  if(name=="")
  {
    flag=0;       
   
  }
  if(contact=="")
  {
    flag=0;
	
  }
  
  if(appointment_date=="")
  {
    flag=0;
  }
  if(building=="")
  {
    flag=0;
  }
  if(street=="")
  {
    flag=0;
  }
  if(landmark=="")
  {
    flag=0;
  }
  // alert(flag);
  if(flag==1)
  {
    var $form = $('#emergency_form2');
    $.ajax({
      type: "POST",
      dataType:"",
      data: $form.serialize(),
      url:'<?php echo base_url(); ?>index.php/user/otherservice_index',
      success:function(response){
       // alert(data);
        // var response_split=response.split('@');
        var dataSplit=response.split('@');
        if(dataSplit[0]=="Success")
        {
			
            $("#emergency_form2").trigger("reset");
			
            var x = document.getElementById("snackbar");
         
            setTimeout(function(){
				
                document.getElementById("success_confirmation").style.display = "block";
				window.scrollTo(0, 0);
				document.getElementById("Form_confirmation").style.display = "none";
				document.getElementById("prevBtn").style.display = "none"; 
				window.location.reload();
				}, 3000);
			
			

        }
        else
        {
          var x = document.getElementById("snackbar");
            x.className = "show";
            $("#snackbar").html(dataSplit[0]);
            setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
        }
		    
			
      }
	    
    });
	        
  }
  else
  {
    
		

  }
    


}
</script>

</body>

</html>
     