
 <div class="contact-banner">
        
       
<p><a style=" padding-top:100px; padding-left:20px; z-index:9999;" href="<?php echo site_url('user/index'); ?>">home</a> / <a style="z-index:9999;color:#000; padding-top:100px;">Contact us</a></p>  
<h2> Contact us</h2>
        
</div>

		
	

        <div class="content-wrap contact-wrap">

            <section class="container">

                <div class="row clearfix">
                    <div class="contact-section">
                        <!--Info Column-->
                        <div class="info-column col-md-12 col-sm-12 col-xs-12 ">

                            <div class="form-column" id="form_div3">

                           

             
                     <div class="">
					 <div class="">
                            <form name="contact_us_form" id="contact_us_form" action="" method="post" >
                            <div id="contact_form" class="contact-form">
                              <!--  <div id="contact_results"></div>-->
                                
                                   
								   <div class="col-xxs-12 col-xs-6 mt">
                                       <!-- Name -->
									   <div class="row">
										<div class="input-field">
										<label for="name">Name:*</label>
				                        <input type="text" name="name" id="name" class="form-control" placeholder=""
										required="" data-original-title="Please provide name" title="provide name">
										</div>
										</div>
										<div class="row">
										<!-- Email -->
										<div class="input-field">
										<label for="from">Email:*</label>
                                        <input type="email" name="email" id="email" class="form-control" placeholder="" maxlength="100" data-validation="required email" data-validation-error-msg-email="Email is required." autocomplete="off" >
                                                                           
								   </div>
										</div>
										
										<div class="row">
										 <!-- Phone -->
										<div class="input-field">
									<label for="from">Phone:*</label>
                                     <input type="tel" name="phone" id="phone" class="form-control" placeholder="" maxlength="" autocomplete="off" data-validation="length number" data-validation-length="8-15" data-validation-error-msg-length="Enter a valid phone" data-validation-allowing="-()+ " data-validation-optional="true">	
                                     <input type="hidden"  id="contact_code"  maxlength="" name="contact_code" > 
									</div>             
								   </div>
										</div>
                                   
									
                                 <div class="col-xxs-12 col-xs-6 mt">
                                        <div class="row">
										<div class="input-field">
										 <label for="from">Subject:</label>
                                        <input type="text" name="subject" id="subject" class="form-control" placeholder="" maxlength="100">
									 </div>	
                                    </div>
									
									
									 <div class="row">
										<div class="input-field">
										<label for="from">Message:*</label>
                                        <textarea  id="message" name="message" rows="6" 
										class="form-control" placeholder="" maxlength="400"></textarea>
                                    </div>
                                    </div>
									
									</div>
									
								
                                    <div class="col-xxs-12 col-xs-12 mt">
									<div class="row">
                                        <button type="submit" id="submit_btn" name="submit_btn" class="theme-btn btn-style-one" onclick="contact_us(event)"> 
                                            Send
                                        </button>
                                    </div>
									 </div>
									


                                
                            </div>
                            </form>

                        </div>
                        </div>
                        </div>
						</div>
                       
                    </div>
                       
                </div>
            </section>
        </div>
		
			
              
               
                          
 <div class="about-content">
        <div class="container">                       
							   <div class="row">
							    
							   <div class="col-md-4">
                                
                                    
                                   <h2>Head office address</h2>
                                        <p>Office A17, First floor,<br>
	                                    Building 488, Street 340, Zone 55<br>
	                                    Salwa Road, Al Aziziyah,<br>Al Rayyan Municipality,<br>State of Qatar.<br>
										PO Box 10519<br>+974 44 180 227</p>
								         <br>
								</div>
<div class="col-md-8">
<div class="map">
            <!--<div id="map-canvas"></div>-->
<iframe  frameborder="0" style="height:210px; width:100%; padding-top:20px;" src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJ4z8GnoHbRT4RLImKfbxCCGA&key=AIzaSyBpDpUwVD60piWrcHWDipV0P-M5utOAM_s" allowfullscreen></iframe>
        </div>

</div></div>	
                <div class="row">	
                <div class="col-md-12">							
                                      <br>
                                    <h2>Booking inquiries:</h2>
                                   <p>  To inquire about or to book a new job, or to discuss anything relating to a current or completed job: <br>
	                                    &nbsp; <a href="mailto:booking@expertsolutions.qa">booking@expertsolutions.qa</a><br>
	                                       &nbsp; <!--<a href="tel:+97450852253">+974 508 522 53</a> | --><a href="tel:+97477002552">+974 7700 2552</a>
										   

								         <br>
										
										 <h2>Customer care:</h2>
                                   <p>  On the rare occasion when we’ve provided poor quality service our Customer Care are here to handle complaints and will try to resolve your issue:<br>
	                                    &nbsp; <a href="mailto:customercare@expertsolutions.qa">customercare@expertsolutions.qa</a><br>
	                                    &nbsp; <!--<a href="tel:+97450852253">+974 508 522 53</a> | --><a href="tel:+97477002552">+974 7700 2552</a>
										

								         <br>
										
										<h2>Working for us:</h2>
                                   <p>  To inquire about job vacancies<br>
	                                    &nbsp; <a href="mailto:careers@expertsolutions.qa">careers@expertsolutions.qa</a><br>
	                                   &nbsp; <a href="tel:+97444180227">+974 44 180 227</a>
									     <br>
</div>										
</div>


</div>
                               

                                
                            </div>
       

    
<div>
    <?php  $this->load->view("layout/footer"); ?>
</div>

<div id="snackbar">Some text some message..</div>

    <style>
	.row {
    margin-right: -12px;
    margin-left: -15px;
}
	form-control:after{content: "please"}
        #map-canvas {
            height: 555px;
            margin: 0;
            padding: 0; 
			float: left;
			width: 100%;
           
        }
        
        .gm-style .gm-style-iw {
            line-height: 20px;
            color: #000;
        }
        
        .gm-style .gm-style-iw h1 {
            text-transform: uppercase;
            font-weight: 600;
            font-size: 13px; 
            margin-bottom: 0px;
            line-height: 10px;
            float: left;
            color: #000;
        }
           .padding-zero{padding: 0px;}
           
                .ajax_form.success{
   
  <!--  padding: 5px 10px 5px 10px;
    border: none;
    font-weight: 200;
	text-align: left;
    color: #2E6800;
	font-size: 12px;
    padding: 12px;
	margin-top: 20px; -->
	
	
}

           .ajax_form.error {
  
  <!--  padding: 5px 10px 5px 10px;
    border: none;
    font-weight: 200; 
	font-size: 12px;
	margin-top: 20px;
    color: #FF0000;
	text-align: left;
	padding: 12px; -->
	
	 
	
    }
    
	
    }
	
	

}
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBzA-206XMmmD99RVU_6rn7WcAhKtWZO8s" type="text/javascript"></script>

    <script src='<?php echo base_url(); ?>assets/js/map.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/doubletaptogo.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>
	
	<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"),
  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: ['sa', 'ae', 'qa','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");
};
// get country code
var getCode = telInput.intlTelInput('getSelectedCountryData').dialCode;
        $("#contact_code").val(getCode);
 telInput.on('countrychange', function(event) {
        var getCode = telInput.intlTelInput('getSelectedCountryData').dialCode;
        $("#contact_code").val(getCode);
      });
// 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">

$("#name").tooltip({
  trigger: "manual"
});

$("#name").click(function(e) {
  $(this).tooltip("hide");
});

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

  if(!$('#name').val())
  {
    $('#name').tooltip("show");  
  }
  
 });

$("#email").tooltip({
  trigger: "manual"
});

$("#email").click(function(e) {
  $(this).tooltip("hide");
});

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

  if(!$('#email').val())
  {
    $('#email').tooltip("show");  
  }
  
 });
 
 $("#phone").tooltip({
  trigger: "manual"
});

$("#phone").click(function(e) {
  $(this).tooltip("hide");
});

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

  if(!$('#phone').val())
  {
    $('#phone').tooltip("show");  
  }
  
 });
</script>
    <script>
        AOS.init({
            easing: 'ease-in-out-sine'
        });
    </script>

    <script>
      
    </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>
  $.validate({
    lang: 'en',
    modules : 'file,date'
  });
  
</script>
<script type="text/javascript">
/*$('body').click(function(evt){   
// alert("hii"); 
    if(!$(evt.target).is('#form_div')) {
        //event handling code
        $("#emergency_form1").trigger("reset");
        $("#one_time_service1").trigger("reset");
        $("#contract_form1").trigger("reset");
        $("#emergency_form2").trigger("reset");
        $("#one_time_service2").trigger("reset");
        $("#contract_form2").trigger("reset");
    }
    if(!$(evt.target).is('#form_div2')) {
        //event handling code
        $("#emergency_form1").trigger("reset");
        $("#one_time_service1").trigger("reset");
        $("#contract_form1").trigger("reset");
        $("#emergency_form2").trigger("reset");
        $("#one_time_service2").trigger("reset");
        $("#contract_form2").trigger("reset");
    }
    if(!$(evt.target).is('#form_div3')) {
        //event handling code
        $("#contact_us_form").trigger("reset");
        $("#emergency_form2").trigger("reset");
        $("#one_time_service2").trigger("reset");
        $("#contract_form2").trigger("reset");
    }
});*/

</script>
<script type="text/javascript">
function contact_us(event)
{
  event.preventDefault();

  var flag=1;
  var name=$("#contact_us_form input[name=name]").val();
  var email=$("#contact_us_form input[name=email]").val();
  
  if(name=="")
  {
    flag=0;

  }
  if(email=="")
  {
    flag=0;
  }
  
  if(flag==1)
  {
    var $form = $('#contact_us_form');
    $.ajax({
      type: "POST",
      dataType:"",
      data: $form.serialize(),
      url:'<?php echo base_url(); ?>index.php/user/contact_us',
      success:function(response){
        // alert(response);
        // var response_split=response.split('@');
        
        if(response=="Success")
        {
            $("#contact_us_form").trigger("reset");
            var x = document.getElementById("snackbar");
            x.className = "show";
            $("#snackbar").html(response);
            setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
          
        }
        else
        {
          var x = document.getElementById("snackbar");
            x.className = "show";
            $("#snackbar").html(response);
            setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
        }
      }
    });
  }
  else
  {
    // alert(flag);
    var x = document.getElementById("snackbar");
    x.className = "show";
    $("#snackbar").html('Enter required fields');
    setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
  }

  
}
</script>
</body>

</html>