<!doctype html>
<html>
<head>

<meta charset="UTF-8">
<title>CIB - Complaint Form EN</title>
<link href="css/main.css" rel="stylesheet" type="text/css" >

<link href="css/dd.css"rel="stylesheet" type="text/css" >
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">


<script src="js/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="js/jquery.dd.js"></script>

<style>
@import url(css/font/en/helveticaneue.css);
@import url(css/font/en/Hel-Bold/helveticaneuebold.css);
body{font-family:'HelveticaNeueRegular';}
.overlay{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 236%;
  z-index: 10;
  background:url('overlay-pic.png') repeat/*dim the background*/;
  
  display:none;
}
</style>

<script src="js/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css"/>


</head>

<body>
	<div class="overlay"></div>

<div class="container">       
      <div class="form-cont">
        <div class="header">
         <h1>Let's Hear Your Voice!</h1>
         <p><span class="orange">*</span>Fields are mandatory</p>
        </div>
      <div class="lang"><a href="ar">عربي</a></div>
        <div class="clearfix"></div>
        <form id="formEn">
        
        <div class="elements">
        <div class="label-cont"> <label>Name<span class="orange">*</span></label></div><input type="text" name="name" class="single validate[required]" required="required">
        </div>
        
        <div class="elements">
        <div class="label-cont"> <label>Mobile<span class="orange">*</span></label></div><input type="text" class="single validate[required,custom[phone]]" name="mobile" required="required">
        </div>
        
        
        <div class="elements">
         <div class="label-cont"> <label>E-mail<span class="orange">*</span></label></div><input type="text" class="single validate[required,custom[email]]" name="email" required="required">
        </div>
        
        <div class="elements">
         <div class="label-cont odd"> <label>Current CIB Cilent<span class="orange">*</span></label></div>
         
         <div class="checkbox-cont">
         <div class="check-cont">
         <input type="radio" class="checkbox3" id="check_1" name="client" value="Yes"/>
         <label for="check_1"><span class="checkbox3-span">✓</span> <p class="light">Yes</p></label>
         </div>
         
          <div class="check-cont check-last">
         <input type="radio" class="checkbox2" id="check_2" name="client" value="No" checked="checked"/>
         <label for="check_2"><span class="checkbox2-span">✓</span> <p class="light">No</p></label>
         </div>
         <div class="clearfix"></div>
         <div class="elements account_number" style="display: none;">
         <div class="label-cont" style="width: 150px"> <label>Account Number</label></div><input type="text" class="single validate[required,custom[onlyNumberSp]]" name="account" style="width: 287px;">
        </div>
       
        <div class="clearfix"></div>
      </div>
        </div>
        <div class="clearfix"></div>
        <div class="radio-cont">
        <div class="radio-btn">
        <input type="radio" name="feedbackType"  checked="checked" value="Inquiry">
        <label><span class="light-label">Inquiry</span></label>
       </div>
       <div class="radio-btn">
        <input type="radio" name="feedbackType" value="Suggestion">
        <label><span class="light-label">Suggestion</span></label>
       </div>
       <div class="radio-btn">
        <input type="radio" name="feedbackType" value="Complaint">
        <label><span class="light-label">Complaint</span></label>
       </div>
       <div class="clearfix"></div>
        </div>
       <div class="dropdown-cont">
           <label><h2>Product / Services</h2><span class="italic"><p>Select Multiple Options</p></span></label>
           <div class="short-select">
      
      
       <select style="width:220px" class="tech2" name="product" id="tech2" data-enablecheckbox="true">
      <option value="">Choose</option>
      <option value="Accounts">Accounts</option>
      <option value="Deposits">Deposits</option>
      <option value="Credit Cards">Credit Cards</option>
      <option value="Debit Cards">Debit Cards</option>
      <option value="Prepaid Cards">Prepaid Cards</option>
      <option value="Personal Loan"> Personal Loan</option>
      <option value="Auto Loan">Auto Loan</option>
      <option value="Mortgage">Mortgage</option>
      <option value="Overdraft">Overdraft</option>
      <option value="Investments (Mutual Funds)">Investments (Mutual Funds) </option>
      <option value="Insurance (Bancassurance)">Insurance (Bancassurance) </option>
      <option value="Funds Transfers">Funds Transfers </option>
      <option value="Foreign Exchange (Fx)">Foreign Exchange (Fx) </option>
      <option value="CIB Wealth">CIB Wealth </option>
      <option value="Plus">Plus </option>
      <option value="Business Banking">Business Banking </option>
      <option value="Payroll Services">Payroll Services </option>
      <option value="Checks">Checks </option>
      <option value="Bank Drafts">Bank Drafts </option>
      <option value="Charity Donations">Charity Donations </option>
      <option value="Bill Payments">Bill Payments </option>
      <option value="Mail Statements">Mail Statements </option>
      <option value="Safe Boxes">Safe Boxes </option>
      <option value="Others">Others </option>
     
      
    </select>
      
      
           </div>

        <div class="clearfix"></div>
       </div>
               <div class="dropdown-cont2">
           <label><h2>Channel</h2><span class="italic"><p>Select Multiple Options</p></span></label>
           <div class="short-select">
                   
       <select style="width:220px" class="tech" name="channel" id="tech" data-enablecheckbox="true">
      <option value="">Choose</option>
      <option value="Branches">Branches</option>
      <option value="Call Center">Call Center</option>
      <option value="Telesales" >Telesales</option>
      <option value="ATMs">ATMs</option>
      <option value="Internet Banking">Internet Banking</option>
      <option value="IVR">IVR</option>
      <option value="Merchant Point of Sale">Merchant Point of Sale</option>
      <option value="Social Media">Social Media</option>
      <option value="Others">Others</option>
      
    </select>
           </div>
        <div class="clearfix"></div>
       </div>
       <div class="text-input">
           <label>
           Details<span class="orange">*</span><br/>
           <span class="italic"><p>Please don't disclose any of your confidential financial data such as account number in this form</p></span></label>
           </label>
           <div class="textarea-cont">
          <textarea name="details" required="required" class="validate[required]"></textarea>
          </div>
          <div class="clearfix"></div>
       </div>
       
       
       <div class="btn-container"><a href="#" id="submitBtn">Submit</a></div>
        </form>
      
      
        
      </div><!--end of form cont-->


     <div class="image"><img src="img/girl_03.png"></div>
</div><!--container-->



    <script type="text/javascript">
	$(document).ready(function(e) {
	$("#tech").msDropdown({childWidth:"250px", enableCheckbox:true});
	$("#tech2").msDropdown({childWidth:"250px", enableCheckbox:true});
	$( "#dialog" ).dialog({
      autoOpen: false,
      show: {
        effect: "fadeIn",
        duration: 200
      },
      hide: {
        effect: "fadeOut",
        duration: 200
      }
    });
	$("#formEn").validationEngine('attach', {promptPosition : "bottomLeft", scroll: false});
	
	
				
		 $('#submitBtn').click(function(e){
		 	//alert('jddd');
		 	//$(this).disabled = true;
         e.preventDefault();

         //if invalid do nothing
         if(!$("#formEn").validationEngine('validate')){
         	return false;
          }

         
	      var dataString = $("#formEn").serialize();
	       $('.overlay').show();
	     
$.ajax({
	        type: "POST",
	        url: "sendmail.php",
	        data: dataString,
	        success: function (msg) {
	          	if(msg == 1){
	          		
		 	       
		          	$( "#dialog" ).dialog( "open" );
		          	$('.overlay').hide();
	          	}
	          	           	$('.overlay').hide();	
	          }
	          
	      });
 e.preventDefault();
	      return false;
	    })
		
		
		$(".checkbox2-span").click(function(){
			 $(".checkbox2-span").addClass("checked");
			 $(".checkbox2-span").css({"color" : "#f58220","font-size" : "24px"});
			 $(".checkbox3-span").css({"color" : "#fcfcfc","font-size" : "14px"});
			 $("#check_2").prop("checked", true);
			$('.account_number').hide();
			})
			
			
			$(".checkbox3-span").click(function(){
			 $(".checkbox3-span").addClass("checked");
			 $(".checkbox3-span").css({"color" : "#f58220","font-size" : "24px"});
			$(".checkbox2-span").css({"color" : "#fcfcfc","font-size" : "14px"});
			$("#check_1").prop("checked", true);
			$('.account_number').show();
			});
	
	});

	
    
    </script>
<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId  : '631675573547987',
      status : true, // check login status
      cookie : true, // enable cookies to allow the server to access the session
      xfbml  : true  // parse XFBML
    });
    
    FB.Canvas.setSize({ width: 810, height: 1170 });
  };

  (function() {
    var e = document.createElement('script');
    e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
    e.async = true;
    document.getElementById('fb-root').appendChild(e);
  }());
</script>
<div id="dialog" title="Message Sent">
  <p>Dear customer, we have received your message and will get in touch with you within 24 hours.</p>
</div>
</div>


</body>
</html>


<?php 

?>